Turndown: Fixes #5025: Convert inline katex html to its equivalent inline katex markdown

packages/app-cli/tests/html_to_md/joplin_source_1.html

@@ -1 +1 @@
-<span class="joplin-editable"><pre class="joplin-source" data-joplin-source-open="$" data-joplin-source-close="$">katexcode</pre><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msubsup><mo>∫</mo><mrow><mo>−</mo><mi mathvariant="normal">∞</mi></mrow><mi mathvariant="normal">∞</mi></msubsup><mover accent="true"><mi>f</mi><mo>^</mo></mover><mo stretchy="false">(</mo><mi>ξ</mi><mo stretchy="false">)</mo><mtext> </mtext><msup><mi>e</mi><mrow><mn>2</mn><mi>π</mi><mi>i</mi><mi>ξ</mi><mi>x</mi></mrow></msup><mtext> </mtext><mi>d</mi><mi>ξ</mi></mrow><annotation encoding="application/x-tex">f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1em; vertical-align: -0.25em;" data-mce-style="height: 1em; vertical-align: -0.25em;"></span><span class="mord mathdefault" style="margin-right: 0.10764em;" data-mce-style="margin-right: 0.10764em;">f</span><span class="mopen">(</span><span class="mord mathdefault">x</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.2777777777777778em;" data-mce-style="margin-right: 0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2777777777777778em;" data-mce-style="margin-right: 0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height: 2.384573em; vertical-align: -0.970281em;" data-mce-style="height: 2.384573em; vertical-align: -0.970281em;"></span><span class="mop"><span class="mop op-symbol large-op" style="margin-right: 0.44445em; position: relative; top: -0.0011249999999999316em;" data-mce-style="margin-right: 0.44445em; position: relative; top: -0.0011249999999999316em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.414292em;" data-mce-style="height: 1.414292em;"><span style="top: -1.7880500000000001em; margin-left: -0.44445em; margin-right: 0.05em;" data-mce-style="top: -1.7880500000000001em; margin-left: -0.44445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" data-mce-style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">−</span><span class="mord mtight">∞</span></span></span></span><span style="top: -3.8129000000000004em; margin-right: 0.05em;" data-mce-style="top: -3.8129000000000004em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" data-mce-style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">∞</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.970281em;" data-mce-style="height: 0.970281em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.16666666666666666em;" data-mce-style="margin-right: 0.16666666666666666em;"></span><span class="mord accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.9578799999999998em;" data-mce-style="height: 0.9578799999999998em;"><span style="top: -3em;" data-mce-style="top: -3em;"><span class="pstrut" style="height: 3em;" data-mce-style="height: 3em;"></span><span class="mord mathdefault" style="margin-right: 0.10764em;" data-mce-style="margin-right: 0.10764em;">f</span></span><span style="top: -3.26344em;" data-mce-style="top: -3.26344em;"><span class="pstrut" style="height: 3em;" data-mce-style="height: 3em;"></span><span class="accent-body" style="left: -0.08332999999999999em;" data-mce-style="left: -0.08332999999999999em;"><span class="mord">^</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.19444em;" data-mce-style="height: 0.19444em;"><span></span></span></span></span></span><span class="mopen">(</span><span class="mord mathdefault" style="margin-right: 0.04601em;" data-mce-style="margin-right: 0.04601em;">ξ</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.16666666666666666em;" data-mce-style="margin-right: 0.16666666666666666em;"></span><span class="mord"><span class="mord mathdefault">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8991079999999999em;" data-mce-style="height: 0.8991079999999999em;"><span style="top: -3.1130000000000004em; margin-right: 0.05em;" data-mce-style="top: -3.1130000000000004em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" data-mce-style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">2</span><span class="mord mathdefault mtight" style="margin-right: 0.03588em;" data-mce-style="margin-right: 0.03588em;">π</span><span class="mord mathdefault mtight">i</span><span class="mord mathdefault mtight" style="margin-right: 0.04601em;" data-mce-style="margin-right: 0.04601em;">ξ</span><span class="mord mathdefault mtight">x</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.16666666666666666em;" data-mce-style="margin-right: 0.16666666666666666em;"></span><span class="mord mathdefault">d</span><span class="mord mathdefault" style="margin-right: 0.04601em;" data-mce-style="margin-right: 0.04601em;">ξ</span></span></span></span></span></span>
+<P>Hello World:<span class="joplin-editable"><span class="joplin-source" data-joplin-source-open="$" data-joplin-source-close="$">katexcode</span><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msubsup><mo>∫</mo><mrow><mo>−</mo><mi mathvariant="normal">∞</mi></mrow><mi mathvariant="normal">∞</mi></msubsup><mover accent="true"><mi>f</mi><mo>^</mo></mover><mo stretchy="false">(</mo><mi>ξ</mi><mo stretchy="false">)</mo><mtext> </mtext><msup><mi>e</mi><mrow><mn>2</mn><mi>π</mi><mi>i</mi><mi>ξ</mi><mi>x</mi></mrow></msup><mtext> </mtext><mi>d</mi><mi>ξ</mi></mrow><annotation encoding="application/x-tex">f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1em; vertical-align: -0.25em;" data-mce-style="height: 1em; vertical-align: -0.25em;"></span><span class="mord mathdefault" style="margin-right: 0.10764em;" data-mce-style="margin-right: 0.10764em;">f</span><span class="mopen">(</span><span class="mord mathdefault">x</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.2777777777777778em;" data-mce-style="margin-right: 0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2777777777777778em;" data-mce-style="margin-right: 0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height: 2.384573em; vertical-align: -0.970281em;" data-mce-style="height: 2.384573em; vertical-align: -0.970281em;"></span><span class="mop"><span class="mop op-symbol large-op" style="margin-right: 0.44445em; position: relative; top: -0.0011249999999999316em;" data-mce-style="margin-right: 0.44445em; position: relative; top: -0.0011249999999999316em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.414292em;" data-mce-style="height: 1.414292em;"><span style="top: -1.7880500000000001em; margin-left: -0.44445em; margin-right: 0.05em;" data-mce-style="top: -1.7880500000000001em; margin-left: -0.44445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" data-mce-style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">−</span><span class="mord mtight">∞</span></span></span></span><span style="top: -3.8129000000000004em; margin-right: 0.05em;" data-mce-style="top: -3.8129000000000004em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" data-mce-style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">∞</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.970281em;" data-mce-style="height: 0.970281em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.16666666666666666em;" data-mce-style="margin-right: 0.16666666666666666em;"></span><span class="mord accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.9578799999999998em;" data-mce-style="height: 0.9578799999999998em;"><span style="top: -3em;" data-mce-style="top: -3em;"><span class="pstrut" style="height: 3em;" data-mce-style="height: 3em;"></span><span class="mord mathdefault" style="margin-right: 0.10764em;" data-mce-style="margin-right: 0.10764em;">f</span></span><span style="top: -3.26344em;" data-mce-style="top: -3.26344em;"><span class="pstrut" style="height: 3em;" data-mce-style="height: 3em;"></span><span class="accent-body" style="left: -0.08332999999999999em;" data-mce-style="left: -0.08332999999999999em;"><span class="mord">^</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.19444em;" data-mce-style="height: 0.19444em;"><span></span></span></span></span></span><span class="mopen">(</span><span class="mord mathdefault" style="margin-right: 0.04601em;" data-mce-style="margin-right: 0.04601em;">ξ</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.16666666666666666em;" data-mce-style="margin-right: 0.16666666666666666em;"></span><span class="mord"><span class="mord mathdefault">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8991079999999999em;" data-mce-style="height: 0.8991079999999999em;"><span style="top: -3.1130000000000004em; margin-right: 0.05em;" data-mce-style="top: -3.1130000000000004em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;" data-mce-style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">2</span><span class="mord mathdefault mtight" style="margin-right: 0.03588em;" data-mce-style="margin-right: 0.03588em;">π</span><span class="mord mathdefault mtight">i</span><span class="mord mathdefault mtight" style="margin-right: 0.04601em;" data-mce-style="margin-right: 0.04601em;">ξ</span><span class="mord mathdefault mtight">x</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.16666666666666666em;" data-mce-style="margin-right: 0.16666666666666666em;"></span><span class="mord mathdefault">d</span><span class="mord mathdefault" style="margin-right: 0.04601em;" data-mce-style="margin-right: 0.04601em;">ξ</span></span></span></span></span></span></P>

packages/app-cli/tests/html_to_md/joplin_source_1.md

@@ -1 +1 @@
-$katexcode$
+Hello World:$katexcode$

packages/turndown/src/commonmark-rules.js

@@ -608,6 +608,7 @@ function joplinEditableBlockInfo(node) {
   if (!node.classList.contains('joplin-editable')) return null;
 
   let sourceNode = null;
+  let isInline = false;
   for (const childNode of node.childNodes) {
     if (childNode.classList.contains('joplin-source')) {
       sourceNode = childNode;
@@ -616,11 +617,13 @@ function joplinEditableBlockInfo(node) {
   }
 
   if (!sourceNode) return null;
+  if (!node.isBlock) isInline = true;
 
   return {
     openCharacters: sourceNode.getAttribute('data-joplin-source-open'),
     closeCharacters: sourceNode.getAttribute('data-joplin-source-close'),
     content: sourceNode.textContent,
+    isInline
   };
 }
 
@@ -637,7 +640,8 @@ rules.joplinSourceBlock = {
     const info = joplinEditableBlockInfo(node);
     if (!info) return;
 
-    return '\n\n' + info.openCharacters + info.content + info.closeCharacters + '\n\n';
+    const surroundingCharacter = info.isInline? '' : '\n\n';
+    return surroundingCharacter + info.openCharacters + info.content + info.closeCharacters + surroundingCharacter;
   }
 }