Skip to content

Commit

Permalink
🎨 Vditor 支持
Browse files Browse the repository at this point in the history 
no data-marker(editing mode)
Vanessa219/vditor#390
  • Loading branch information
@88250
88250 committed May 11, 2020
1 parent 16c2e78 commit 3cf8cad
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 17 deletions.
2 changes: 1 addition & 1 deletion javascript/lute.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion javascript/lute.min.js.map
View file

Large diffs are not rendered by default.

14 changes: 12 additions & 2 deletions render/vditor_renderer.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -743,8 +743,18 @@ func (r *VditorRenderer) renderList(node *ast.Node, entering bool) ast.WalkStatu
if 1 != node.Start {
attrs = append(attrs, []string{"start", strconv.Itoa(node.Start)})
}
} else {
attrs = append(attrs, []string{"data-marker", string(node.BulletChar)})
}
switch node.ListData.Typ {
case 0:
attrs = append(attrs, []string{"data-marker", string(node.Marker)})
case 1:
attrs = append(attrs, []string{"data-marker", strconv.Itoa(node.Num) + string(node.ListData.Delimiter)})
case 3:
if 0 == node.ListData.BulletChar {
attrs = append(attrs, []string{"data-marker", strconv.Itoa(node.Num) + string(node.ListData.Delimiter)})
} else {
attrs = append(attrs, []string{"data-marker", string(node.Marker)})
}
}
attrs = append(attrs, []string{"data-block", "0"})
r.tag(tag, attrs, false)
Expand Down
14 changes: 12 additions & 2 deletions render/vditorir_renderer.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -888,8 +888,18 @@ func (r *VditorIRRenderer) renderList(node *ast.Node, entering bool) ast.WalkSta
if 1 != node.Start {
attrs = append(attrs, []string{"start", strconv.Itoa(node.Start)})
}
} else {
attrs = append(attrs, []string{"data-marker", string(node.BulletChar)})
}
switch node.ListData.Typ {
case 0:
attrs = append(attrs, []string{"data-marker", string(node.Marker)})
case 1:
attrs = append(attrs, []string{"data-marker", strconv.Itoa(node.Num) + string(node.ListData.Delimiter)})
case 3:
if 0 == node.ListData.BulletChar {
attrs = append(attrs, []string{"data-marker", strconv.Itoa(node.Num) + string(node.ListData.Delimiter)})
} else {
attrs = append(attrs, []string{"data-marker", string(node.Marker)})
}
}
attrs = append(attrs, []string{"data-block", "0"})
r.tag(tag, attrs, false)
Expand Down
22 changes: 11 additions & 11 deletions test/spinv_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import (

var spinVditorDOMTests = []*parseTest{

{"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-block=\"0\"><li data-marker=\"1.\">foo<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar</li><li data-marker=\"2.\"><wbr>foo2<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar2</li></ol></li></ol></li></ol>"},
{"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\n</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>"},
Expand All @@ -37,7 +37,7 @@ var spinVditorDOMTests = []*parseTest{
// 101：hr 已由 Vditor 处理
{"101", `<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>`, "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\"><ul data-tight=\"true\" data-marker=\"-\" data-block=\"0\"><li data-marker=\"-\"><ul data-tight=\"true\" data-marker=\"-\" data-block=\"0\"><li data-marker=\"-\">-<wbr></li></ul></li></ul></li></ul>"},
{"100", "<em data-marker=\"*\">foo\nbar</em>\t\n---", "<h2 data-block=\"0\" id=\"wysiwyg-foobar\" data-marker=\"-\"><em data-marker=\"*\">foo\nbar</em></h2>"},
{"99", `<ol data-block="0"><li><p>f<wbr></p></li></ol>`, "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">f<wbr></li></ol>"},
{"99", `<ol data-block="0"><li><p>f<wbr></p></li></ol>`, "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">f<wbr></li></ol>"},
{"98", "<p data-block=\"0\">\u200b<code data-marker=\"`\">\u200bcode</code>​ <wbr><code data-marker=\"`\">\u200bcode</code>\u200b\n</p>", "<p data-block=\"0\">\u200b<code data-marker=\"`\">\u200bcode</code>\u200b <wbr><code data-marker=\"`\">\u200bcode</code>\u200b\n</p>"},
{"97", "<p data-block=\"0\"><strong data-marker=\"**\">foo\n</strong>b<wbr></p>", "<p data-block=\"0\"><strong data-marker=\"**\">foo</strong>\nb<wbr>\n</p>"},
{"96", "<p data-block=\"0\">​<code data-marker=\"`\">\u200bcode<wbr></code><code data-marker=\"`\">\u200bspan</code><span>\u200b</span></p>", "<p data-block=\"0\">\u200b<code data-marker=\"`\">\u200bcode<wbr>span</code>\u200b\n</p>"},
Expand All @@ -53,18 +53,18 @@ var spinVditorDOMTests = []*parseTest{
{"87", `<ul data-tight="true" data-marker="*" data-block="0"><li data-marker="*" class="vditor-task"><p><input type="checkbox"> foo</p><ul data-tight="true" data-marker="*" data-block="0"><li data-marker="*" class="vditor-task"><p><input type="checkbox"> bar</p></li></ul><p data-block="0">b<wbr></p></li></ul>`, "<ul data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\" class=\"vditor-task\"><p data-block=\"0\"><input type=\"checkbox\" /> foo\n</p><ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\" class=\"vditor-task\"><input type=\"checkbox\" /> bar</li></ul><p data-block=\"0\">b<wbr>\n</p></li></ul>"},
{"86", "<p data-block=\"0\"><strong><s>foo</s></strong>bar<wbr></p>", "<p data-block=\"0\"><strong data-marker=\"**\"><s data-marker=\"~~\">foo</s></strong>bar<wbr>\n</p>"},
{"85", "<p data-block=\"0\"><span data-marker=\"**\"><b>foo </b><span>b<wbr></span></span>", "<p data-block=\"0\"><strong data-marker=\"**\">foo</strong> b<wbr>\n</p>"},
{"84", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1)\"><p>f<wbr></p></li></ol>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1)\">f<wbr></li></ol>"},
{"83", "<p data-block=\"0\">1) f<wbr></p>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1)\">f<wbr></li></ol>"},
{"82", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"2.\"><p>bar<wbr></p></li></ol>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">bar<wbr></li></ol>"},
{"84", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1)\"><p>f<wbr></p></li></ol>", "<ol data-tight=\"true\" data-marker=\"1)\" data-block=\"0\"><li data-marker=\"1)\">f<wbr></li></ol>"},
{"83", "<p data-block=\"0\">1) f<wbr></p>", "<ol data-tight=\"true\" data-marker=\"1)\" data-block=\"0\"><li data-marker=\"1)\">f<wbr></li></ol>"},
{"82", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"2.\"><p>bar<wbr></p></li></ol>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">bar<wbr></li></ol>"},
{"81", "<p data-block=\"0\"><strong>\u200b<em>\u200b<s>\u200b1</s></em></strong><wbr></p>", "<p data-block=\"0\"><em data-marker=\"*\"><strong data-marker=\"**\"><s data-marker=\"~~\">1</s></strong></em><wbr>\n</p>"},
{"80", "<s><em>\u200b</em></s>", ""},
{"79", "<p data-block=\"0\"><b>&#8203;</b></p>", ""},
{"78", "<p data-block=\"0\">``foo``<wbr></p>", "<p data-block=\"0\">\u200b<code data-marker=\"``\">\u200bfoo</code>\u200b<wbr>\n</p>"},
{"77", `<p data-block="0">1<wbr><span style="background-color: var(--textarea-focus-background-color); color: var(--textarea-text-color);">​</span><span class="vditor-wysiwyg__block" data-type="math-inline" style="background-color: var(--textarea-focus-background-color); color: var(--textarea-text-color);"><code data-type="math-inline">foo</code><span class="vditor-wysiwyg__preview" data-render="false"><span class="vditor-math" data-math="foo"><span class="katex"><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.85396em;vertical-align:-0.19444em;"></span><span class="mord mathdefault" style="margin-right:0.05724em;">f</span><span class="mord mathdefault" style="margin-right:0.05724em;">o</span><span class="mord mathdefault" style="margin-right:0.05724em;">o</span></span></span></span></span></span></span><span style="background-color: var(--textarea-focus-background-color); color: var(--textarea-text-color);">​</span></p>`, "<p data-block=\"0\">1<wbr><span class=\"vditor-wysiwyg__block\" data-type=\"math-inline\"><code data-type=\"math-inline\">\u200bfoo</code><span class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code class=\"language-math\">foo</code></span></span>\u200b\n</p>"},
{"76", "<ul><li data-marker=\"1.\"><p>12<wbr></p></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">12<wbr></li></ul>"},
{"75", "<ol><li data-marker=\"*\"><p>foo<wbr></p></li></ol>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">foo<wbr></li></ol>"},
{"74", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\" class=\"vditor-task\"><p><input checked=\"\" type=\"checkbox\"> f<wbr></p></li></ol>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\" class=\"vditor-task\"><input checked=\"\" type=\"checkbox\" /> f<wbr></li></ol>"},
{"73", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\"><p>[x] foo<wbr></p></li></ol>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\" class=\"vditor-task\"><input checked=\"\" type=\"checkbox\" /> foo<wbr></li></ol>"},
{"75", "<ol><li data-marker=\"*\"><p>foo<wbr></p></li></ol>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">foo<wbr></li></ol>"},
{"74", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\" class=\"vditor-task\"><p><input checked=\"\" type=\"checkbox\"> f<wbr></p></li></ol>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\" class=\"vditor-task\"><input checked=\"\" type=\"checkbox\" /> f<wbr></li></ol>"},
{"73", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\"><p>[x] foo<wbr></p></li></ol>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\" class=\"vditor-task\"><input checked=\"\" type=\"checkbox\" /> foo<wbr></li></ol>"},
{"72", "<p data-block=\"0\">foo\n-<wbr></p>", "<h2 data-block=\"0\" id=\"wysiwyg-foo-\" data-marker=\"-\">foo<wbr></h2>"},
{"71", "<p data-block=\"0\">foo<span class=\"vditor-wysiwyg__block\" data-type=\"math-inline\"><code data-type=\"math-inline\">\u200bbar</code></span> \n</p>", "<p data-block=\"0\">foo<span class=\"vditor-wysiwyg__block\" data-type=\"math-inline\"><code data-type=\"math-inline\">\u200bbar</code><span class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code class=\"language-math\">bar</code></span></span>\u200b\n</p>"},
{"70", "<p data-block=\"0\"> <span class=\"vditor-wysiwyg__block\" data-type=\"math-inline\"><code data-type=\"math-inline\">\u200bfoo</code></span> \n</p>", "<p data-block=\"0\">\u200b<span class=\"vditor-wysiwyg__block\" data-type=\"math-inline\"><code data-type=\"math-inline\">\u200bfoo</code><span class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code class=\"language-math\">foo</code></span></span>\u200b\n</p>"},
Expand Down Expand Up @@ -107,14 +107,14 @@ var spinVditorDOMTests = []*parseTest{
{"33", "<p><code>foo</code><wbr>\n</p>", "<p data-block=\"0\">\u200b<code data-marker=\"`\">\u200bfoo</code>\u200b<wbr>\n</p>"},
{"32", "<p>```<wbr></p>", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\"><code><wbr>\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code></code></pre></div>"},
{"31", "<p>\u200bfoo<wbr></p>", "<p data-block=\"0\">foo<wbr>\n</p>"},
{"30", "<p>1. Node.js</p><p>2. Go<wbr></p>", "<ol data-block=\"0\"><li data-marker=\"1.\"><p data-block=\"0\">Node.js\n</p></li><li data-marker=\"2.\"><p data-block=\"0\">Go<wbr>\n</p></li></ol>"},
{"30", "<p>1. Node.js</p><p>2. Go<wbr></p>", "<ol data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\"><p data-block=\"0\">Node.js\n</p></li><li data-marker=\"2.\"><p data-block=\"0\">Go<wbr>\n</p></li></ol>"},
{"29", "<p><wbr><br></p>", "<p data-block=\"0\"><wbr>\n</p>"},
{"28", "<p data-block=\"0\">❤️<wbr>\n</p>", "<p data-block=\"0\">❤️<wbr>\n</p>"},
{"27", "<p><wbr></p>", "<p data-block=\"0\"><wbr>\n</p>"},
{"26", "<p>![alt](src \"title\")</p>", "<p data-block=\"0\"><img src=\"src\" alt=\"alt\" title=\"title\"/>\n</p>"},
{"25", "<pre><code class=\"language-java\"><wbr>\n</code></pre>", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\"><code class=\"language-java\"><wbr>\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code class=\"language-java\">\n</code></pre></div>"},
{"24", "<ul data-tight=\"true\"><li data-marker=\"*\"><wbr><br></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\"><wbr></li></ul>"},
{"23", "<ol><li data-marker=\"1.\">foo</li></ol>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">foo</li></ol>"},
{"23", "<ol><li data-marker=\"1.\">foo</li></ol>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">foo</li></ol>"},
{"22", "<ul><li data-marker=\"*\">foo</li><li data-marker=\"*\"><ul><li data-marker=\"*\">bar</li></ul></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">foo</li><li data-marker=\"*\"><ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">bar</li></ul></li></ul>"},
{"21", "<p>[foo](/bar \"baz\")</p>", "<p data-block=\"0\"><a href=\"/bar\" title=\"baz\">foo</a>\n</p>"},
{"20", "<p>[foo](/bar)</p>", "<p data-block=\"0\"><a href=\"/bar\">foo</a>\n</p>"},
Expand All @@ -124,7 +124,7 @@ var spinVditorDOMTests = []*parseTest{
{"16", "<p>[](</p>", "<p data-block=\"0\">[](\n</p>"},
{"15", "<p><img alt=\"octocat\" class=\"emoji\" src=\"https://cdn.jsdelivr.net/npm/vditor/dist/images/emoji/octocat.png\" title=\"octocat\" /></p>", "<p data-block=\"0\"><img alt=\"octocat\" class=\"emoji\" src=\"https://cdn.jsdelivr.net/npm/vditor/dist/images/emoji/octocat.png\" title=\"octocat\" />\n</p>"},
{"14", ":octocat:", "<p data-block=\"0\"><img alt=\"octocat\" class=\"emoji\" src=\"https://cdn.jsdelivr.net/npm/vditor/dist/images/emoji/octocat.png\" title=\"octocat\" />\n</p>"},
{"13", "<p>1、foo</p>", "<ol data-tight=\"true\" data-block=\"0\"><li data-marker=\"1.\">foo</li></ol>"},
{"13", "<p>1、foo</p>", "<ol data-tight=\"true\" data-marker=\"1.\" data-block=\"0\"><li data-marker=\"1.\">foo</li></ol>"},
{"12", "<p><s data-marker=\"~~\">Hi</s> Hello, world!</p>", "<p data-block=\"0\"><s data-marker=\"~~\">Hi</s> Hello, world!\n</p>"},
{"11", "<p><del data-marker=\"~\">Hi</del> Hello, world!</p>", "<p data-block=\"0\"><s data-marker=\"~\">Hi</s> Hello, world!\n</p>"},
{"10", "<ul data-tight=\"true\"><li data-marker=\"*\" class=\"vditor-task\"><input checked=\"\" type=\"checkbox\" /> foo<wbr></li></ul>", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\" class=\"vditor-task\"><input checked=\"\" type=\"checkbox\" /> foo<wbr></li></ul>"},
Expand Down

0 comments on commit 3cf8cad

Please sign in to comment.