🎨 列表项合并 Vanessa219/vditor#796

parse/list.go

@@ -30,8 +30,7 @@ func (context *Context) listFinalize(list *ast.Node) {
 
 		subitem := item.FirstChild
 		for nil != subitem {
-			if endsWithBlankLine(subitem) &&
-				(nil != item.Next || nil != subitem.Next) {
+			if endsWithBlankLine(subitem) && (nil != item.Next || nil != subitem.Next) {
 				list.Tight = false
 				break
 			}

test/spinv_ir_block_test.go

@@ -19,6 +19,7 @@ import (
 
 var spinVditorIRBlockDOMTests = []*parseTest{
 
+	{"37", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\" data-node-id=\"20201024104144-w8buq6v\" data-type=\"ul\"><li data-marker=\"*\" data-node-id=\"20201024104146-688k4s8\">foo<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\" data-node-id=\"20201024104147-noc3aag\" data-type=\"ul\"><li data-marker=\"*\" data-node-id=\"20201024104147-07va165\">bar</li></ul><ul data-block=\"0\"><li data-marker=\"*\"><wbr></li></ul></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\" data-node-id=\"20201024104144-w8buq6v\" data-type=\"ul\"><li data-marker=\"*\" data-node-id=\"20201024104146-688k4s8\">foo<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\" data-node-id=\"20201024104147-noc3aag\" data-type=\"ul\"><li data-marker=\"*\" data-node-id=\"20201024104147-07va165\">bar</li><li data-marker=\"*\" data-node-id=\"\"><wbr></li></ul></li></ul>"},
 	{"36", "<h1 data-block=\"0\" class=\"vditor-ir__node\" data-node-id=\"20201023173052-oap1h3r\" data-type=\"h\" id=\"ir-foo\" data-marker=\"=\">foo<wbr><span class=\"vditor-ir__marker vditor-ir__marker--heading\" data-type=\"heading-marker\" data-render=\"2\"><br></span></h1>", "<p data-block=\"0\" data-node-id=\"\" data-type=\"p\">foo<wbr></p>"},
 	{"35", "<h2 data-block=\"0\" class=\"vditor-ir__node\" data-node-id=\"20201023172353-k9ysqg2\" data-type=\"h\" id=\"ir-fo\" data-marker=\"-\">foo<wbr><span class=\"vditor-ir__marker vditor-ir__marker--heading\" data-type=\"heading-marker\" data-render=\"2\">\n--</span></h2>", "<h2 data-block=\"0\" class=\"vditor-ir__node vditor-ir__node--expand\" data-node-id=\"20201023172353-k9ysqg2\"  data-type=\"h\" id=\"ir-foo\" data-marker=\"-\">foo<wbr><span class=\"vditor-ir__marker vditor-ir__marker--heading\" data-type=\"heading-marker\" data-render=\"2\">\n---</span></h2>"},
 	{"34", "<h2 data-block=\"0\" class=\"vditor-ir__node\" data-node-id=\"20201023171428-9k19wot\" data-type=\"h\" id=\"ir-foo\" data-marker=\"-\">foo<wbr></h2>", "<p data-block=\"0\" data-node-id=\"\" data-type=\"p\">foo<wbr></p>"},

test/spinv_wysiwyg_test.go

@@ -49,8 +49,8 @@ var spinVditorDOMTests = []*parseTest{
 	{"119", "&parx", "<p data-block=\"0\">&amp;parx</p>"},
 	{"118", "<ul data-tight=\"true\" data-marker=\"-\" data-block=\"0\"><li data-marker=\"-\"><p>[ ]<wbr></p></li></ul>", "<ul data-tight=\"true\" data-marker=\"-\" data-block=\"0\"><li data-marker=\"-\" class=\"vditor-task\"><input type=\"checkbox\" /> <wbr></li></ul>"},
 	{"117", "<p data-block=\"0\">foo<wbr><a>​</a></p>", "<p data-block=\"0\">foo<wbr></p>"},
-	{"116", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">foo<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar</li></ol><ol data-block=\"0\"><li data-marker=\"1.\">‸foo2<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar2</li></ol></li></ol></li></ol>", "<ol data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\"><p data-block=\"0\">foo</p><ol data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\"><p data-block=\"0\">bar</p></li><li data-marker=\"2.\"><p data-block=\"0\"><wbr>foo2</p><ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">bar2</li></ol></li></ol></li></ol>"},
-	{"115", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">foo<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar</li></ul><ul data-block=\"0\"><li data-marker=\"*\"><wbr>foo2<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar2</li></ul></li></ul></li></ul>", "<ul data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\"><p data-block=\"0\">foo</p><ul data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\"><p data-block=\"0\">bar</p></li><li data-marker=\"*\"><p data-block=\"0\"><wbr>foo2</p><ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar2</li></ul></li></ul></li></ul>"},
+	{"116", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">foo<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar</li></ol><ol data-block=\"0\"><li data-marker=\"1.\">‸foo2<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar2</li></ol></li></ol></li></ol>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">foo<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">bar</li><li data-marker=\"2.\"><wbr>foo2<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">bar2</li></ol></li></ol></li></ol>"},
+	{"115", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">foo<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar</li></ul><ul data-block=\"0\"><li data-marker=\"*\"><wbr>foo2<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar2</li></ul></li></ul></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">foo<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar</li><li data-marker=\"*\"><wbr>foo2<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar2</li></ul></li></ul></li></ul>"},
 	{"114", "<p data-block=\"0\">```<wbr>a b\nc</p>", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\"><code class=\"language-a\"><wbr>c\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code class=\"language-a\">c\n</code></pre></div>"},
 	{"113", "<ul data-tight=\"true\" data-marker=\"-\" data-block=\"0\"><li data-marker=\"-\"><p>[ <wbr>]</p></li></ul>", "<ul data-tight=\"true\" data-marker=\"-\" data-block=\"0\"><li data-marker=\"-\" class=\"vditor-task\"><input type=\"checkbox\" /> <wbr></li></ul>"},
 	{"112", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\"></li><li data-marker=\"*\"><p>f<wbr></p></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">\u200b</li><li data-marker=\"*\">f<wbr></li></ul>"},

test/v2m_test.go

@@ -30,11 +30,11 @@ var vditorDOM2MdTests = []parseTest{
 	{"104", "<p data-block=\"0\">\u200b<span class=\"vditor-wysiwyg__block\" data-type=\"html-inline\"><code data-type=\"html-inline\">\u200b&lt;foo&gt;</code><span class=\"vditor-wysiwyg__preview\" data-render=\"1\" data-html=\"&amp;lt;foo&amp;gt;\">....</span></span>\u200b	bar<wbr></p>", "<foo>\tbar\n"},
 	{"103", `<ul data-tight="true" data-marker="*" data-block="0"><li data-marker="*"><ul data-tight="true" data-marker="-" data-block="0"><li data-marker="-"><p>- -<wbr></p></li></ul></li></ul>`, "* - - -\n"},
 	{"102", `<h2 data-block="0" data-marker="-">Setext 标题<wbr></h2>`, "Setext 标题\n-----------\n"},
-	{"101", `<ol data-tight="true" data-block="0"><li data-marker="1)"><p>foo</p></li><ol data-tight="true" data-block="0"><li data-marker="1)"><p>bar</p></li><li data-marker="2)"><p>baz</p></li></ol><li><p><wbr><br></p></li></ol>`, "1) foo\n\n   1) bar\n   2) baz\n1)\n"},
+	{"101", `<ol data-tight="true" data-block="0"><li data-marker="1)"><p>foo</p></li><ol data-tight="true" data-block="0"><li data-marker="1)"><p>bar</p></li><li data-marker="2)"><p>baz</p></li></ol><li><p><wbr><br></p></li></ol>`, "1) foo\n   1) bar\n   2) baz\n1)\n"},
 	{"100", "<p data-block=\"0\"><strong data-marker=\"**\">foo <em data-marker=\"_\">bar</em></strong>​ b<wbr></p>", "**foo _bar_** b\n"},
 	{"99", `<strong data-marker="**">test and <em data-marker="_">test</em></strong> test`, "**test and _test_** test\n"},
-	{"98", `<ul data-tight="true" data-marker="+" data-block="0"><li data-marker="+"><p>foo</p></li><ul data-tight="true" data-marker="+" data-block="0"><li data-marker="+"><p>bar</p></li></ul><li><p><wbr><br></p></li></ul>`, "+ foo\n\n  + bar\n+\n"},
-	{"97", `<ol data-tight="true" data-block="0"><li data-marker="1."><p>foo</p></li><ol data-tight="true" data-block="0"><li data-marker="1."><p>bar</p></li></ol><li><p><wbr><br></p></li></ol>`, "1. foo\n\n   1. bar\n1.\n"},
+	{"98", `<ul data-tight="true" data-marker="+" data-block="0"><li data-marker="+"><p>foo</p></li><ul data-tight="true" data-marker="+" data-block="0"><li data-marker="+"><p>bar</p></li></ul><li><p><wbr><br></p></li></ul>`, "+ foo\n  + bar\n+\n"},
+	{"97", `<ol data-tight="true" data-block="0"><li data-marker="1."><p>foo</p></li><ol data-tight="true" data-block="0"><li data-marker="1."><p>bar</p></li></ol><li><p><wbr><br></p></li></ol>`, "1. foo\n   1. bar\n1.\n"},
 	{"96", "<p data-block=\"0\">\u200b<code marker=\"`\">\u200bcode\nspan<wbr></code>\u200b</p>", "`code\nspan`\n"},
 	{"95", "<p data-block=\"0\"><strong data-marker=\"**\"><wbr></strong></p>", "\n"},
 	{"94", "<blockquote data-block=\"0\"><ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">foo<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre style=\"display: none;\"><code>code block\n</code></pre><div class=\"vditor-wysiwyg__preview\" data-render=\"1\"><pre><div class=\"vditor-copy\"><textarea></textarea><span aria-label=\"复制\" onmouseover=\"this.setAttribute('aria-label', '复制')\" class=\"b3-tooltips b3-tooltips__w\" onclick=\"this.previousElementSibling.select();document.execCommand('copy');this.setAttribute('aria-label', '已复制')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"> <path d=\"M28.681 11.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-11.5c-1.379 0-2.5 1.121-2.5 2.5v23c0 1.378 1.121 2.5 2.5 2.5h19c1.378 0 2.5-1.122 2.5-2.5v-15.5c0-0.448-0.137-1.23-1.319-2.841zM24.543 9.457c0.959 0.959 1.712 1.825 2.268 2.543h-4.811v-4.811c0.718 0.556 1.584 1.309 2.543 2.268v0zM28 29.5c0 0.271-0.229 0.5-0.5 0.5h-19c-0.271 0-0.5-0.229-0.5-0.5v-23c0-0.271 0.229-0.5 0.5-0.5 0 0 11.499-0 11.5 0v7c0 0.552 0.448 1 1 1h7v15.5zM18.841 1.319c-1.612-1.182-2.393-1.319-2.841-1.319h-11.5c-1.378 0-2.5 1.121-2.5 2.5v23c0 1.207 0.86 2.217 2 2.45v-25.45c0-0.271 0.229-0.5 0.5-0.5h15.215c-0.301-0.248-0.595-0.477-0.873-0.681z\"></path> </svg></span></div><code class=\"hljs properties\" style=\"max-height: 1000px;\"><span class=\"hljs-attr\">code</span> <span class=\"hljs-string\">block</span></code></pre></div></div></li></ul><p><wbr><br></p></blockquote>", "> * foo\n>   ```\n>   code block\n>   ```\n>\n>\n"},

vditor_wysiwyg.go

@@ -213,6 +213,10 @@ func (lute *Lute) adjustVditorDOM(nodes []*html.Node) {
 
 	lute.removeEmptyNodes(nodes[0])
 
+	for c := nodes[0]; nil != c; c = c.NextSibling {
+		lute.mergeVditorDOMList0(c)
+	}
+
 	for c := nodes[0]; nil != c; c = c.NextSibling {
 		lute.adjustVditorDOMListTight0(c)
 	}
@@ -258,6 +262,23 @@ func (lute *Lute) searchEmptyNodes(n *html.Node, emptyNodes *[]*html.Node) {
 	}
 }
 
+func (lute *Lute) mergeVditorDOMList0(n *html.Node) {
+	switch n.DataAtom {
+	case atom.Ul, atom.Ol:
+		if nil != n.NextSibling && n.DataAtom == n.NextSibling.DataAtom && 1 == len(n.NextSibling.Attr) {
+			for c := n.NextSibling.FirstChild; nil != c; c = c.NextSibling {
+				c.Unlink()
+				n.AppendChild(c)
+			}
+			n.NextSibling.Unlink()
+		}
+	}
+
+	for c := n.FirstChild; c != nil; c = c.NextSibling {
+		lute.mergeVditorDOMList0(c)
+	}
+}
+
 func (lute *Lute) adjustVditorDOMListTight0(n *html.Node) {
 	switch n.DataAtom {
 	case atom.Ul:
@@ -340,17 +361,28 @@ func (lute *Lute) listItemEnter(li *html.Node) bool {
 }
 
 func (lute *Lute) isTightList(list *html.Node) string {
-	blocks := 0
 	for li := list.FirstChild; nil != li; li = li.NextSibling {
+		var subLists, subDivs, subBlockquotes, subParagraphs int
 		for c := li.FirstChild; nil != c; c = c.NextSibling {
-			if atom.P == c.DataAtom || atom.Blockquote == c.DataAtom || atom.Ul == c.DataAtom || atom.Ol == c.DataAtom || atom.Div == c.DataAtom {
-				blocks++
+			switch c.DataAtom {
+			case atom.Ul, atom.Ol:
+				subLists++
+			case atom.Div:
+				subDivs++
+			case atom.Blockquote:
+				subBlockquotes++
+			case atom.P:
+				subParagraphs++
 			}
 		}
-	}
+		if 1 < subParagraphs || 1 < subBlockquotes || 1 < subDivs || 1 < subLists {
+			return "false"
+		}
+
+		if 1 < subParagraphs + subDivs || 1 < subParagraphs + subBlockquotes || 1 < subParagraphs + subLists {
+			return "false"
+		}
 
-	if 1 < blocks {
-		return "false"
 	}
 	return "true"
 }