🎨 Code blocks support setting height siyuan-note/siyuan#10769

88250 · Aug 15, 2024 · 75239c6 · 75239c6
1 parent 9543be2
commit 75239c6
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 6 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/protyle.go b/protyle.go
@@ -691,7 +691,8 @@ func (lute *Lute) genASTByBlockDOM(n *html.Node, tree *parse.Tree) {
 
 	if "protyle-attr" == class ||
 		strings.Contains(class, "__copy") ||
-		strings.Contains(class, "protyle-linenumber__rows") {
+		strings.Contains(class, "protyle-linenumber__rows") ||
+		strings.Contains(class, "hljs") {
 		return
 	}
 
@@ -707,7 +708,7 @@ func (lute *Lute) genASTByBlockDOM(n *html.Node, tree *parse.Tree) {
 				language = languageNode.FirstChild.Data
 			}
 			tree.Context.Tip.AppendChild(&ast.Node{Type: ast.NodeCodeBlockFenceInfoMarker, CodeBlockInfo: util.StrToBytes(language)})
-			code := util.DomText(n.NextSibling)
+			code := util.DomText(n.NextSibling.LastChild)
 			if strings.HasSuffix(code, "\n\n"+editor.Caret) {
 				code = strings.TrimSuffix(code, "\n\n"+editor.Caret)
 				code += "\n" + editor.Caret + "\n"

diff --git a/render/protyle_renderer.go b/render/protyle_renderer.go
@@ -922,10 +922,12 @@ func (r *ProtyleRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast
 	r.Tag("/div", nil, false)
 
 	attrs = [][]string{{"class", "hljs"}}
-	r.contenteditable(node, &attrs)
 	// Spell check should be disabled inside inline and block code https://github.com/siyuan-note/siyuan/issues/9672
 	attrs = append(attrs, []string{"spellcheck", "false"})
 	r.Tag("div", attrs, false)
+	r.Tag("div", nil, false)
+	r.Tag("/div", nil, false)
+	r.Tag("div", [][]string{{"contenteditable", "true"}, {"style", "flex: 1"}}, false)
 	if codeIsEmpty {
 		if caretInInfo {
 			r.WriteString(editor.FrontEndCaret)
@@ -938,6 +940,7 @@ func (r *ProtyleRenderer) renderCodeBlockCode(node *ast.Node, entering bool) ast
 		r.Write(tokens)
 	}
 	r.Tag("/div", nil, false)
+	r.Tag("/div", nil, false)
 	return ast.WalkContinue
 }
 

diff --git a/test/m2p_test.go b/test/m2p_test.go
@@ -19,6 +19,7 @@ import (
 
 var md2BlockDOMTests = []parseTest{
 
+	{"88", "```\nfoo\n```", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeCodeBlock\" class=\"code-block\" updated=\"20060102150405\"><div class=\"protyle-action\"><span class=\"protyle-action--first protyle-action__language\" contenteditable=\"false\"></span><span class=\"fn__flex-1\"></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__copy\"><svg><use xlink:href=\"#iconCopy\"></use></svg></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--last protyle-action__menu\"><svg><use xlink:href=\"#iconMore\"></use></svg></span></div><div class=\"hljs\" spellcheck=\"false\"><div></div><div contenteditable=\"true\" style=\"flex: 1\">foo\n</div></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},
 	{"87", "foo<kbd>bar</kbd>baz", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20060102150405\"><div contenteditable=\"true\" spellcheck=\"false\">foo <span data-type=\"kbd\">\u200bbar</span>\u200bbaz</div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},
 	{"86", "    ```\n    foo\n    ```\n", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20060102150405\"><div contenteditable=\"true\" spellcheck=\"false\">    <span data-type=\"code\">\u200b    foo    </span>\u200b</div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},
 	{"85", "`foo&ZeroWidthSpace;bar`\n", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20060102150405\"><div contenteditable=\"true\" spellcheck=\"false\">\u200b<span data-type=\"code\">\u200bfoo&amp;ZeroWidthSpace;bar</span>\u200b</div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},

diff --git a/test/spin_block_test.go b/test/spin_block_test.go
@@ -19,6 +19,8 @@ import (
 
 var spinBlockDOMTests = []*parseTest{
 
+	{"228", "<div data-node-id=\"20240812173920-h0oe4mx\" data-node-index=\"0\" data-type=\"NodeCodeBlock\" class=\"code-block\" linenumber=\"true\" style=\"line-height: 22px;\" updated=\"20240815112455\"><div class=\"protyle-action\"><span class=\"protyle-action--first protyle-action__language\" contenteditable=\"false\"></span><span class=\"fn__flex-1\"></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__copy\" aria-label=\"复制\"><svg><use xlink:href=\"#iconCopy\"></use></svg></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--last protyle-action__menu\" aria-label=\"更多\"><svg><use xlink:href=\"#iconMore\"></use></svg></span></div><div class=\"hljs protyle-linenumber\" spellcheck=\"false\" data-render=\"true\" style=\"white-space: pre-wrap; word-break: break-word; font-variant-ligatures: normal;\"><div class=\"protyle-linenumber__rows\"><span style=\"height:22px;\"></span></div><div style=\"flex: 1\">foo\n</div></div><div class=\"protyle-attr\" contenteditable=\"false\">&ZeroWidthSpace;</div></div>", ""},
+	{"227", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeCodeBlock\" class=\"code-block\" updated=\"20060102150405\"><div class=\"protyle-action\"><span class=\"protyle-action--first protyle-action__language\" contenteditable=\"false\"></span><span class=\"fn__flex-1\"></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__copy\"><svg><use xlink:href=\"#iconCopy\"></use></svg></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--last protyle-action__menu\"><svg><use xlink:href=\"#iconMore\"></use></svg></span></div><div class=\"hljs\" spellcheck=\"false\"><div></div><div contenteditable=\"true\" style=\"flex: 1\">foo\n</div></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeCodeBlock\" class=\"code-block\" updated=\"20060102150405\"><div class=\"protyle-action\"><span class=\"protyle-action--first protyle-action__language\" contenteditable=\"false\"></span><span class=\"fn__flex-1\"></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__copy\"><svg><use xlink:href=\"#iconCopy\"></use></svg></span><span class=\"b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--last protyle-action__menu\"><svg><use xlink:href=\"#iconMore\"></use></svg></span></div><div class=\"hljs\" spellcheck=\"false\"><div></div><div contenteditable=\"true\" style=\"flex: 1\">foo\n</div></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},
 	{"226", "<div data-node-id=\"20240620114537-1oe1q0w\" data-node-index=\"5\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20240620120010\"><div contenteditable=\"true\" spellcheck=\"false\"><span data-type=\"strong\">foo\n\n<wbr>bar</span></div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div>", "<div data-node-id=\"20240620114537-1oe1q0w\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20240620120010\"><div contenteditable=\"true\" spellcheck=\"false\"><span data-type=\"strong\">foo\n<wbr>bar</span></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},
 	{"225", "<div data-node-id=\"20240620112339-hlfw6uf\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20240620112403\"><div contenteditable=\"true\" spellcheck=\"false\"><span data-type=\"block-ref\" data-subtype=\"s\" data-id=\"20240620112314-tr9t5kb\">foo\n\n<wbr>bar</span></div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div>", "<div data-node-id=\"20240620112339-hlfw6uf\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20240620112403\"><div contenteditable=\"true\" spellcheck=\"false\"><span data-type=\"block-ref\" data-subtype=\"s\" data-id=\"20240620112314-tr9t5kb\">foo\n<wbr>bar</span></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},
 	{"224", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20060102150405\"><div contenteditable=\"true\" spellcheck=\"false\"><span data-type=\"a\" data-href=\"www.bing.com/search?q=&amp;quot;你好&amp;quot;\">在必应搜索 &quot;你好&quot;</span></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>", "<div data-node-id=\"20060102150405-1a2b3c4\" data-node-index=\"1\" data-type=\"NodeParagraph\" class=\"p\" updated=\"20060102150405\"><div contenteditable=\"true\" spellcheck=\"false\"><span data-type=\"a\" data-href=\"www.bing.com/search?q=&amp;quot;你好&amp;quot;\">在必应搜索 &quot;你好&quot;</span></div><div class=\"protyle-attr\" contenteditable=\"false\">\u200b</div></div>"},