🎨 Improve HTML code element clipping siyuan-note/siyuan#11401

h2m.go

@@ -731,6 +731,22 @@ func (lute *Lute) genASTByDOM(n *html.Node, tree *parse.Tree) {
 		if nil == n.FirstChild {
 			return
 		}
+
+		// Improve HTML code element clipping https://github.com/siyuan-note/siyuan/issues/11401
+		if "code" == util.DomAttrValue(n, "data-type") {
+			if nil != tree.Context.Tip.LastChild && ast.NodeCodeSpan == tree.Context.Tip.LastChild.Type {
+				tree.Context.Tip.AppendChild(&ast.Node{Type: ast.NodeText, Tokens: util.StrToBytes(editor.Zwsp)})
+			}
+
+			code := &ast.Node{Type: ast.NodeCodeSpan}
+			code.AppendChild(&ast.Node{Type: ast.NodeCodeSpanOpenMarker, Tokens: []byte("`")})
+			code.AppendChild(&ast.Node{Type: ast.NodeCodeSpanContent, Tokens: util.StrToBytes(util.DomText(n))})
+			code.AppendChild(&ast.Node{Type: ast.NodeCodeSpanCloseMarker, Tokens: []byte("`")})
+			tree.Context.Tip.AppendChild(code)
+			tree.Context.Tip = code
+			defer tree.Context.ParentTip()
+			return
+		}
 	case atom.Font:
 		node.Type = ast.NodeText
 		tokens := []byte(util.DomText(n))

test/h2m_test.go

@@ -18,6 +18,7 @@ import (
 
 var html2MdTests = []parseTest{
 
+	{"107", "<p id=\"20240516161955-xaoakji\" updated=\"20240516161955\">​<span data-type=\"code\">bar</span></p>", "\u200b`bar`\n"},
 	{"106", "<pre><div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\"><div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>javascript</span><div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"icon-sm\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z\" clip-rule=\"evenodd\"></path></svg>复制代码</button></span></div></div><div class=\"overflow-y-auto p-4 text-left undefined\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title function_\">bubbleSort</span>(<span class=\"hljs-params\">arr</span>) {\n    <span class=\"hljs-keyword\">const</span> len = arr.<span class=\"hljs-property\">length</span>;\n    <span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">0</span>; i &lt; len; i++) {\n        <span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> j = <span class=\"hljs-number\">0</span>; j &lt; len - <span class=\"hljs-number\">1</span>; j++) {\n            <span class=\"hljs-keyword\">if</span> (arr[j] &gt; arr[j + <span class=\"hljs-number\">1</span>]) {\n                [arr[j], arr[j + <span class=\"hljs-number\">1</span>]] = [arr[j + <span class=\"hljs-number\">1</span>], arr[j]]; <span class=\"hljs-comment\">// ES6 解构赋值交换元素位置</span>\n            }\n        }\n    }\n    <span class=\"hljs-keyword\">return</span> arr;\n}\n\n<span class=\"hljs-keyword\">const</span> unsortedArray = [<span class=\"hljs-number\">64</span>, <span class=\"hljs-number\">34</span>, <span class=\"hljs-number\">25</span>, <span class=\"hljs-number\">12</span>, <span class=\"hljs-number\">22</span>, <span class=\"hljs-number\">11</span>, <span class=\"hljs-number\">90</span>];\n<span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>(<span class=\"hljs-string\">'Unsorted Array:'</span>, unsortedArray);\n<span class=\"hljs-keyword\">const</span> sortedArray = <span class=\"hljs-title function_\">bubbleSort</span>(unsortedArray);\n<span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>(<span class=\"hljs-string\">'Sorted Array:'</span>, sortedArray);\n</code></div></div></pre>", "```javascript\nfunction bubbleSort(arr) {\n    const len = arr.length;\n    for (let i = 0; i < len; i++) {\n        for (let j = 0; j < len - 1; j++) {\n            if (arr[j] > arr[j + 1]) {\n                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // ES6 解构赋值交换元素位置\n            }\n        }\n    }\n    return arr;\n}\n\nconst unsortedArray = [64, 34, 25, 12, 22, 11, 90];\nconsole.log('Unsorted Array:', unsortedArray);\nconst sortedArray = bubbleSort(unsortedArray);\nconsole.log('Sorted Array:', sortedArray);\n```\n"},
 	{"105", "<table class=\"docutils align-default\"><thead><tr class=\"row-odd\"><th class=\"head\"><p>优势</p></th></tr></thead><tbody><tr class=\"row-even\"><td><div class=\"line-block\"><div class=\"line\">- Python的内置标准库</div><div class=\"line\">- 执行速度较快</div><div class=\"line\">- 容错能力强</div></div></td></tr></tbody></table>", "| 优势                                            |\n| ------------------------------------------------- |\n| - Python 的内置标准库<br />- 执行速度较快<br />- 容错能力强 |\n"},
 	{"104", "<table class=\"docutils align-default\">\n<thead>\n<tr class=\"row-odd\">\n\n<th class=\"head\"><p>优势</p></th>\n\n</tr>\n</thead>\n<tbody>\n<tr class=\"row-even\">\n\n<td><div class=\"line-block\">\n<div class=\"line\">- Python的内置标准库</div>\n<div class=\"line\">- 执行速度较快</div>\n<div class=\"line\">- 容错能力强</div>\n</div>\n</td>\n\n</tr>\n\n\n\n</tbody>\n</table>", "| 优势                                            |\n| ------------------------------------------------- |\n| - Python 的内置标准库<br />- 执行速度较快<br />- 容错能力强 |\n"},