🎨 Vditor 支持

图片使用引用风格时的解析问题 Vanessa219/vditor#684
88250 · Aug 7, 2020 · adf0549 · adf0549
1 parent aaf9fd9
commit adf0549
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 8 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
@@ -529,7 +529,7 @@ func (r *VditorRenderer) renderImage(node *ast.Node, entering bool) ast.WalkStat
 			r.WriteString(text)
 			r.tag("/span", nil, false)
 
-			r.WriteString("<img data-render=\"2\" src=\"")
+			r.WriteString("<img src=\"")
 			link := r.Tree.Context.LinkRefDefs[strings.ToLower(util.BytesToStr(node.LinkRefLabel))]
 			destTokens := link.ChildByType(ast.NodeLinkDest).Tokens
 			destTokens = r.Tree.Context.RelativePath(destTokens)
@@ -546,7 +546,7 @@ func (r *VditorRenderer) renderImage(node *ast.Node, entering bool) ast.WalkStat
 				r.Write(title.Tokens)
 				r.WriteString("\"")
 			}
-			r.WriteString(" />")
+			r.WriteString(" data-render=\"2\"/>")
 
 			// XSS 过滤
 			buf := r.Writer.Bytes()

diff --git a/test/m2v_test.go b/test/m2v_test.go
@@ -18,6 +18,7 @@ import (
 
 var md2VditorTests = []parseTest{
 
+	{"17", "![text][foo]\n\n[foo]: bar", "<p data-block=\"0\">\u200b<span data-type=\"link-ref\" data-link-label=\"foo\">text</span><img src=\"bar\" alt=\"text\" data-render=\"2\"/></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar\n</div>"},
 	{"16", "# heading {#custom-id}\n", "<h1 data-block=\"0\" data-id=\"#custom-id\" id=\"wysiwyg-#custom-id\" data-marker=\"#\">heading</h1>"},
 	{"15", "foo\n\n[^1]: 111\n\n[2]: 222\n", "<p data-block=\"0\">foo</p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[2]: 222\n</div><div data-block=\"0\" data-type=\"footnotes-block\"><ol data-type=\"footnotes-defs-ol\"><li data-type=\"footnotes-li\" data-marker=\"^1\"><p data-block=\"0\">111</p></li></ol></div>"},
 	{"14", "[^1]\n\n[^1]:\n", "<p data-block=\"0\">\u200b<sup data-type=\"footnotes-ref\" data-footnotes-label=\"^1\" class=\"vditor-tooltipped vditor-tooltipped__s\" aria-label=\"\">1</sup>\u200b</p><div data-block=\"0\" data-type=\"footnotes-block\"><ol data-type=\"footnotes-defs-ol\"><li data-type=\"footnotes-li\" data-marker=\"^1\"></li></ol></div>"},

diff --git a/test/spinv_sv_test.go b/test/spinv_sv_test.go
@@ -18,7 +18,7 @@ import (
 
 var spinVditorSVDOMTests = []*parseTest{
 
-	{"61", "![text][foo]\n\n[foo]: bar", "<span data-type=\"text\" class=\"h1\">foo</span><span data-type=\"newline\" class=\"h1\"><br/><span style=\"display: none\">\n</span></span><span data-type=\"text\" class=\"h1\"><wbr></span><span data-type=\"newline\" class=\"h1\"><br/><span style=\"display: none\">\n</span></span><span class=\"vditor-sv__marker--heading h1\" data-type=\"heading-marker\">===</span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span>"},
+	{"61", "![text][foo]\n\n[foo]: bar", "<span class=\"vditor-sv__marker\">!</span><span class=\"vditor-sv__marker--bracket\">[</span><span class=\"vditor-sv__marker--bracket\">text</span><span class=\"vditor-sv__marker--bracket\">]</span><span class=\"vditor-sv__marker--link\">[foo]</span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span class=\"vditor-sv__marker--bracket\">[</span><span class=\"vditor-sv__marker--link\" data-type=\"footnotes-link\">foo</span><span class=\"vditor-sv__marker--bracket\">]</span><span>: </span>bar<span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span>"},
 	{"60", "foo\n‸\n===", "<span data-type=\"text\" class=\"h1\">foo</span><span data-type=\"newline\" class=\"h1\"><br/><span style=\"display: none\">\n</span></span><span data-type=\"text\" class=\"h1\"><wbr></span><span data-type=\"newline\" class=\"h1\"><br/><span style=\"display: none\">\n</span></span><span class=\"vditor-sv__marker--heading h1\" data-type=\"heading-marker\">===</span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span>"},
 	{"59", "foo\n‸--", "<span data-type=\"text\" class=\"h2\">foo<wbr></span><span data-type=\"newline\" class=\"h2\"><br/><span style=\"display: none\">\n</span></span><span class=\"vditor-sv__marker--heading h2\" data-type=\"heading-marker\">---</span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span>"},
 	{"58", "---‸", "<span data-type=\"yaml-front-matter-open-marker\" class=\"vditor-sv__marker\">---</span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"text\"><wbr></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"yaml-front-matter-close-marker\" class=\"vditor-sv__marker\">---</span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span><span data-type=\"newline\"><br /><span style=\"display: none\">\n</span></span>"},

diff --git a/test/spinv_wysiwyg_test.go b/test/spinv_wysiwyg_test.go
@@ -18,7 +18,7 @@ import (
 
 var spinVditorDOMTests = []*parseTest{
 
-	{"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<span data-type=\"link-ref\" data-link-label=\"foo\">text</span><img src=\"bar\" alt=\"text\" /><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<span data-type=\"link-ref\" data-link-label=\"foo\">text</span><img src=\"bar\" alt=\"text\" data-render=\"2\" /><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>"},
 	{"140", "<h2 data-block=\"0\" id=\"wysiwyg-fo_0\" data-marker=\"#\" data-id=\"#custom-id\">foo<wbr></h2>", "<h2 data-block=\"0\" data-id=\"#custom-id\" id=\"wysiwyg-#custom-id\" data-marker=\"#\">foo<wbr></h2>"},
 	{"139", "<p data-block=\"0\"><sup data-type=\"footnotes-ref\" data-footnotes-label=\"^foo\" class=\"vditor-tooltipped vditor-tooltipped__s\" aria-label=\"\">1<wbr></sup></p><div data-block=\"0\" data-type=\"footnotes-block\"><ol data-type=\"footnotes-defs-ol\"><li data-type=\"footnotes-li\" data-marker=\"^foo\"></li></ol></div>", "<p data-block=\"0\">\u200b<sup data-type=\"footnotes-ref\" data-footnotes-label=\"^foo\" class=\"vditor-tooltipped vditor-tooltipped__s\" aria-label=\"\">1</sup>\u200b<wbr></p><div data-block=\"0\" data-type=\"footnotes-block\"><ol data-type=\"footnotes-defs-ol\"><li data-type=\"footnotes-li\" data-marker=\"^foo\"></li></ol></div>"},

diff --git a/vditor_wysiwyg.go b/vditor_wysiwyg.go
@@ -938,7 +938,12 @@ func (lute *Lute) genASTByVditorDOM(n *html.Node, tree *parse.Tree) {
 
 		if "link-ref" == dataType {
 			node.Type = ast.NodeText
-			node.Tokens = []byte("[" + n.FirstChild.Data + "][" + lute.domAttrValue(n, "data-link-label") + "]")
+			content := "[" + n.FirstChild.Data + "][" + lute.domAttrValue(n, "data-link-label") + "]"
+			if nil != n.NextSibling && "2" == lute.domAttrValue(n.NextSibling, "data-render") {
+				// 图片引用风格 ![text][label]
+				content = "!" + content
+			}
+			node.Tokens = []byte(content)
 			tree.Context.Tip.AppendChild(node)
 			return
 		}