Skip to content

Commit

Permalink
🎨 流程图、甘特图、时序图、图表、脑图、五线谱添加暗黑模式 Vanessa219/vditor#822
Browse files Browse the repository at this point in the history
  • Loading branch information
@88250
88250 committed Nov 23, 2020
1 parent 7a1f1f3 commit a9083cf
Show file tree
Hide file tree
Showing 11 changed files with 38 additions and 33 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.

11 changes: 7 additions & 4 deletions render/code_block_html_render.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ func (r *HtmlRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast.Wa

if "mindmap" == language {
json := r.renderMindmap(tokens)
r.tag("pre", attrs, false)
r.WriteString("<div data-code=\"")
r.Write(json)
r.WriteString("\" class=\"language-mindmap\">")
Expand All @@ -98,8 +97,12 @@ func (r *HtmlRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast.Wa
}

if !rendered {
r.tag("pre", attrs, false)
r.WriteString("<code class=\"language-")
if preDiv {
r.WriteString("<div class=\"language-")
} else {
r.tag("pre", attrs, false)
r.WriteString("<code class=\"language-")
}
r.WriteString(language)
r.WriteString("\">")
tokens = html.EscapeHTML(tokens)
Expand Down Expand Up @@ -131,7 +134,7 @@ func (r *HtmlRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast.Wa
}
} else {
if preDiv {
r.WriteString("</div></pre>")
r.WriteString("</div>")
} else {
r.WriteString("</code></pre>")
}
Expand Down
6 changes: 4 additions & 2 deletions render/code_block_html_renderjs.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ func (r *HtmlRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast.Wa
var attrs [][]string
r.handleKramdownIAL(node)
attrs = append(attrs, node.KramdownIAL...)
r.tag("pre", attrs, false)
if !preDiv {
r.tag("pre", attrs, false)
}
tokens := node.Tokens
if 0 < len(node.Previous.CodeBlockInfo) {
if "mindmap" == language {
Expand All @@ -74,7 +76,7 @@ func (r *HtmlRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast.Wa
}
} else {
if preDiv {
r.WriteString("</div></pre>")
r.WriteString("</div>")
} else {
r.WriteString("</code></pre>")
}
Expand Down
4 changes: 2 additions & 2 deletions render/vditor_ir_renderer.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,11 +455,11 @@ func (r *VditorIRRenderer) renderCodeBlockCode(node *ast.Node, entering bool) as

if r.Option.VditorCodeBlockPreview {
r.tag("pre", [][]string{{"class", "vditor-ir__preview"}, {"data-render", "2"}}, false)
r.tag("code", attrs, false)
r.tag("div", attrs, false)
tokens := node.Tokens
tokens = bytes.ReplaceAll(tokens, util.CaretTokens, nil)
r.Write(html.EscapeHTML(tokens))
r.WriteString("</code></pre>")
r.WriteString("</div></pre>")
}
return ast.WalkContinue
}
Expand Down
4 changes: 2 additions & 2 deletions render/vditor_wysiwyg_renderer.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1185,11 +1185,11 @@ func (r *VditorRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast.

if r.Option.VditorCodeBlockPreview {
r.tag("pre", [][]string{{"class", "vditor-wysiwyg__preview"}, {"data-render", "2"}}, false)
r.tag("code", attrs, false)
r.tag("div", attrs, false)
tokens := node.Tokens
tokens = bytes.ReplaceAll(tokens, util.CaretTokens, nil)
r.Write(html.EscapeHTML(tokens))
r.WriteString("</code></pre>")
r.WriteString("</div></pre>")
}
return ast.WalkContinue
}
2 changes: 1 addition & 1 deletion test/h2v_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ var html2VditorDOMTests = []parseTest{
{"4", `<iframe src="foo" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`, "<div class=\"vditor-wysiwyg__block\" data-type=\"html-block\" data-block=\"0\"><pre><code>&lt;iframe src=&quot;foo&quot; scrolling=&quot;no&quot; border=&quot;0&quot; frameborder=&quot;no&quot; framespacing=&quot;0&quot; allowfullscreen=&quot;true&quot;&gt; &lt;/iframe&gt;</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><iframe src=\"foo\" scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"> </iframe></pre></div>"},
{"3", `<!--StartFragment--><a href="https://ld246.com/article/1553314676872?r=Vanessa">每天 30 秒系列</a><!--EndFragment-->`, "<p data-block=\"0\"><a href=\"https://ld246.com/article/1553314676872?r=Vanessa\">每天 30 秒系列</a></p>"},
{"2", `<!--StartFragment--><span>Use<span>&nbsp;</span></span><code class="language-text">new Date()</code><span><span>&nbsp;</span>and</span><!--EndFragment-->`, "<p data-block=\"0\">Use <code data-marker=\"`\">\u200bnew Date()</code>\u200b and</p>"},
{"1", `<pre><code class="language-text">&gt;</code></pre>`, "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code class=\"language-text\">&gt;\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code class=\"language-text\">&gt;\n</code></pre></div>"},
{"1", `<pre><code class="language-text">&gt;</code></pre>`, "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code class=\"language-text\">&gt;\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><div class=\"language-text\">&gt;\n</div></pre></div>"},
{"0", `<code class="language-text">&gt;</code>`, "<p data-block=\"0\">\u200b<code data-marker=\"`\">\u200b&gt;</code>\u200b</p>"},
}

Expand Down
8 changes: 4 additions & 4 deletions test/m2v_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ var md2VditorDOMTests = []parseTest{

{"22", "<span class=\"vditor-comment\" data-cmtids=\"20201105091940-wtpsc3a\">foo</span>", "<p data-block=\"0\"><span class=\"vditor-comment\" data-cmtids=\"20201105091940-wtpsc3a\">foo</span></p>"},
{"21", "<span class=\"vditor-comment\" data-cmtids=\"20201105091940-wtpsc3a\">foo</span>b", "<p data-block=\"0\"><span class=\"vditor-comment\" data-cmtids=\"20201105091940-wtpsc3a\">foo</span>b</p>"},
{"20", "\n > foo", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code> &gt; foo\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code> &gt; foo\n</code></pre></div>"},
{"20", "\n > foo", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code> &gt; foo\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><div> &gt; foo\n</div></pre></div>"},
{"19", "foo\n{: id=\"fooid\"}\nbar\n{: id=\"barid\"}", "<p data-block=\"0\" id=\"fooid\">foo</p><p data-block=\"0\" id=\"barid\">bar</p>"},
{"18", "![][foo]\n\n[foo]: bar", "<p data-block=\"0\">\u200b<img src=\"bar\" alt=\"\" data-type=\"link-ref\" data-link-label=\"foo\" /></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar\n</div>"},
{"17", "![text][foo]\n\n[foo]: bar", "<p data-block=\"0\">\u200b<img src=\"bar\" alt=\"text\" data-type=\"link-ref\" data-link-label=\"foo\" /></p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[foo]: bar\n</div>"},
Expand All @@ -32,8 +32,8 @@ var md2VditorDOMTests = []parseTest{
{"12", "foo[^1]\n[^1]:bar\n * baz", "<p data-block=\"0\">foo<sup data-type=\"footnotes-ref\" data-footnotes-label=\"^1\" class=\"vditor-tooltipped vditor-tooltipped__s\" aria-label=\"barbaz\">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\"><p data-block=\"0\">bar</p><ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">baz</li></ul></li></ol></div>"},
{"11", "[foo][1]\n\n[1]: /bar\n", "<p data-block=\"0\">\u200b<span data-type=\"link-ref\" data-link-label=\"1\">foo</span>\u200b</p><div data-block=\"0\" data-type=\"link-ref-defs-block\">[1]: /bar\n</div>"},
{"10", "Foo\n ---\n", "<p data-block=\"0\">Foo\n---</p>"},
{"9", " ***\n ***\n\n- - - -", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code>***\n ***\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code>***\n ***\n</code></pre></div><hr data-block=\"0\" />"},
{"8", " ***\n", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code>***\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><code>***\n</code></pre></div>"},
{"9", " ***\n ***\n\n- - - -", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code>***\n ***\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><div>***\n ***\n</div></pre></div><hr data-block=\"0\" />"},
{"8", " ***\n", "<div class=\"vditor-wysiwyg__block\" data-type=\"code-block\" data-block=\"0\" data-marker=\"```\"><pre class=\"vditor-wysiwyg__pre\" style=\"display: none\"><code>***\n</code></pre><pre class=\"vditor-wysiwyg__preview\" data-render=\"2\"><div>***\n</div></pre></div>"},
{"7", "* a\n * b", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">a<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">b</li></ul></li></ul>"},
{"6", "[]()", "<p data-block=\"0\">[]()</p>"},
{"5", "* [ ]", "<ul data-tight=\"true\" data-marker=\"*\" data-block=\"0\"><li data-marker=\"*\">[ ]</li></ul>"},
Expand Down Expand Up @@ -74,7 +74,7 @@ var md2VditorIRDOMTests = []parseTest{
{"7", "$$\nfoo\n$$", "<div data-block=\"0\" data-type=\"math-block\" class=\"vditor-ir__node\"><span data-type=\"math-block-open-marker\">$$</span><pre class=\"vditor-ir__marker--pre vditor-ir__marker\"><code data-type=\"math-block\" class=\"language-math\">foo</code></pre><pre class=\"vditor-ir__preview\" data-render=\"2\"><div data-type=\"math-block\" class=\"language-math\">foo</div></pre><span data-type=\"math-block-close-marker\">$$</span></div>"},
{"6", "foo<bar>baz", "<p data-block=\"0\">foo<span data-type=\"html-inline\" class=\"vditor-ir__node\"><code class=\"vditor-ir__marker\">&lt;bar&gt;</code></span>baz</p>"},
{"5", "$foo$", "<p data-block=\"0\"><span data-type=\"inline-node\" class=\"vditor-ir__node\"><span class=\"vditor-ir__marker\">$</span><code data-newline=\"1\" class=\"vditor-ir__marker vditor-ir__marker--pre\" data-type=\"math-inline\">foo</code><span class=\"vditor-ir__preview\" data-render=\"2\"><span class=\"language-math\">foo</span></span><span class=\"vditor-ir__marker\">$</span></span></p>"},
{"4", "```foo\nbar\n```", "<div data-block=\"0\" data-type=\"code-block\" class=\"vditor-ir__node\"><span data-type=\"code-block-open-marker\">```</span><span class=\"vditor-ir__marker vditor-ir__marker--info\" data-type=\"code-block-info\">\u200bfoo</span><pre class=\"vditor-ir__marker--pre vditor-ir__marker\"><code class=\"language-foo\">bar\n</code></pre><pre class=\"vditor-ir__preview\" data-render=\"2\"><code class=\"language-foo\">bar\n</code></pre><span data-type=\"code-block-close-marker\">```</span></div>"},
{"4", "```foo\nbar\n```", "<div data-block=\"0\" data-type=\"code-block\" class=\"vditor-ir__node\"><span data-type=\"code-block-open-marker\">```</span><span class=\"vditor-ir__marker vditor-ir__marker--info\" data-type=\"code-block-info\">\u200bfoo</span><pre class=\"vditor-ir__marker--pre vditor-ir__marker\"><code class=\"language-foo\">bar\n</code></pre><pre class=\"vditor-ir__preview\" data-render=\"2\"><div class=\"language-foo\">bar\n</div></pre><span data-type=\"code-block-close-marker\">```</span></div>"},
{"3", "__foo__", "<p data-block=\"0\"><span data-type=\"strong\" class=\"vditor-ir__node\"><span class=\"vditor-ir__marker vditor-ir__marker--bi\">__</span><strong data-newline=\"1\">foo</strong><span class=\"vditor-ir__marker vditor-ir__marker--bi\">__</span></span></p>"},
{"2", "* foo\n * bar", "<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></li></ul>"},
{"1", "# foo", "<h1 data-block=\"0\" class=\"vditor-ir__node\" id=\"ir-foo\" data-marker=\"#\"><span class=\"vditor-ir__marker vditor-ir__marker--heading\" data-type=\"heading-marker\"># </span>foo</h1>"},
Expand Down
6 changes: 3 additions & 3 deletions test/mindmap_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ import (

var mindmapTests = []parseTest{

{"2", "```mindmap\n" + util.Caret + "* f\n```", "<pre><div data-code=\"%7B%22name%22:%20%22f%22%7D\" class=\"language-mindmap\">‸* f\n</div></pre>\n"},
{"1", "```mindmap\n* f\\\\\n```", "<pre><div data-code=\"%7B%22name%22:%20%22f%22%7D\" class=\"language-mindmap\">* f\\\\\n</div></pre>\n"},
{"0", "```mindmap\n* foo\n * bar\n * baz\n```", "<pre><div data-code=\"%7B%22name%22:%20%22foo%22,%20%22children%22:%20%5B%7B%22name%22:%20%22bar%22%7D,%20%7B%22name%22:%20%22baz%22%7D%5D%7D\" class=\"language-mindmap\">* foo\n * bar\n * baz\n</div></pre>\n"},
{"2", "```mindmap\n" + util.Caret + "* f\n```", "<div data-code=\"%7B%22name%22:%20%22f%22%7D\" class=\"language-mindmap\">‸* f\n</div>\n"},
{"1", "```mindmap\n* f\\\\\n```", "<div data-code=\"%7B%22name%22:%20%22f%22%7D\" class=\"language-mindmap\">* f\\\\\n</div>\n"},
{"0", "```mindmap\n* foo\n * bar\n * baz\n```", "<div data-code=\"%7B%22name%22:%20%22foo%22,%20%22children%22:%20%5B%7B%22name%22:%20%22bar%22%7D,%20%7B%22name%22:%20%22baz%22%7D%5D%7D\" class=\"language-mindmap\">* foo\n * bar\n * baz\n</div>\n"},
}

func TestMindmap(t *testing.T) {
Expand Down
Loading

0 comments on commit a9083cf

Please sign in to comment.