🎨 Vditor 支持

【实验性质】所见即所得模式加入批注 Vanessa219/vditor#721
88250 · Aug 18, 2020 · 44771ac · 44771ac
1 parent 1084351
commit 44771ac
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/javascript/lute.min.js b/javascript/lute.min.js
diff --git a/javascript/lute.min.js.map b/javascript/lute.min.js.map
diff --git a/render/vditor_wysiwyg_renderer.go b/render/vditor_wysiwyg_renderer.go
@@ -685,12 +685,17 @@ func (r *VditorRenderer) renderInlineHTML(node *ast.Node, entering bool) ast.Wal
 		}
 	}
 
+	tokens := bytes.ReplaceAll(node.Tokens, []byte(parse.Zwsp), nil)
+	tokens = append([]byte(parse.Zwsp), tokens...)
+	if bytes.Contains(tokens, []byte("vditor-comment")) {
+		r.Write(tokens)
+		return ast.WalkStop
+	}
+
 	r.WriteString("<span class=\"vditor-wysiwyg__block\" data-type=\"html-inline\">")
 	node.Tokens = bytes.TrimSpace(node.Tokens)
 	r.tag("code", [][]string{{"data-type", "html-inline"}}, false)
-	tokens := bytes.ReplaceAll(node.Tokens, []byte(parse.Zwsp), nil)
 	tokens = html.EscapeHTML(tokens)
-	tokens = append([]byte(parse.Zwsp), tokens...)
 	r.Write(tokens)
 	r.WriteString("</code>")
 	r.WriteString("</span>" + parse.Zwsp)

diff --git a/test/spinv_wysiwyg_test.go b/test/spinv_wysiwyg_test.go
@@ -18,6 +18,8 @@ import (
 
 var spinVditorDOMTests = []*parseTest{
 
+	{"145", "<p data-block=\"0\">foo<vditor-comment data-id=\"1\">bar<wbr>baz</vditor-comment>foo<vditor-comment data-id=\"2\">bar</vditor-comment>baz</p>", "<p data-block=\"0\">foo\u200b<vditor-comment data-id=\"1\">bar<wbr>baz\u200b</vditor-comment>foo\u200b<vditor-comment data-id=\"2\">bar\u200b</vditor-comment>baz</p>"},
+	{"144", "<p data-block=\"0\"><vditor-comment data-id=\"1\">foo<wbr></vditor-comment></p>", "<p data-block=\"0\">\u200b\u200b<vditor-comment data-id=\"1\">foo<wbr>\u200b</vditor-comment></p>"},
 	{"143", "<p data-block=\"0\"><img src=\"bar\" alt=\"text\" data-type=\"link-ref\" data-link-label=\"foo\"><wbr></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar\n</div>", "<p data-block=\"0\">\u200b<img src=\"bar\" alt=\"text\" data-type=\"link-ref\" data-link-label=\"foo\" /><wbr></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar\n</div>"},
 	{"142", "<p data-block=\"0\">![text][foo]<wbr></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar", "<p data-block=\"0\">\u200b<img src=\"bar\" alt=\"text\" data-type=\"link-ref\" data-link-label=\"foo\" /><wbr></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar\n</div>"},
 	{"141", "<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=\"*\"></li><li data-marker=\"*\">b<wbr></li></ul></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">foo\n*<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">b<wbr></li></ul></li></ul>"},

diff --git a/vditor_wysiwyg.go b/vditor_wysiwyg.go
@@ -382,6 +382,16 @@ func (lute *Lute) genASTByVditorDOM(n *html.Node, tree *parse.Tree) {
 			return
 		}
 
+		if content == "vditor-comment" {
+			node.Type = ast.NodeInlineHTML
+			node.Tokens = append([]byte("<"), node.Tokens...)
+			id := lute.domAttrValue(n, "data-id")
+			node.Tokens = append(node.Tokens, []byte(" data-id=\"" + id + "\"")...)
+			node.Tokens = append(node.Tokens, []byte(">")...)
+			tree.Context.Tip.AppendChild(node)
+			break
+		}
+
 		checkIndentCodeBlock := strings.ReplaceAll(content, util.Caret, "")
 		checkIndentCodeBlock = strings.ReplaceAll(checkIndentCodeBlock, "\t", "    ")
 		if (!lute.isInline(n.PrevSibling)) && strings.HasPrefix(checkIndentCodeBlock, "    ") {
@@ -1057,6 +1067,10 @@ func (lute *Lute) genASTByVditorDOM(n *html.Node, tree *parse.Tree) {
 	}
 
 	switch n.DataAtom {
+	case 0:
+		if content == "vditor-comment" {
+			tree.Context.Tip.AppendChild(&ast.Node{Type: ast.NodeInlineHTML, Tokens: []byte("</" + content + ">")})
+		}
 	case atom.Em, atom.I:
 		marker := lute.domAttrValue(n, "data-marker")
 		if "" == marker {