convertDeltaToHtml wont work when there is a formula

[haojia321]

Hi
If the delta has a formula, the convertDeltaToHtml wont work.

var deltaWithFormulaExample = { "ops": [{ "insert": { formula: "$$\small{4 \div 0.25 \ =}$$ _____ $$\small{\times 4}$$" } }] };

[joelcolucci]

Hi @haojia321 . Thank you for submitting this. I'll take a look at this later today.

[joelcolucci]

@haojia321 Thank you for your patience.

Background
Quill requires an additional package (KaTeX) to be loaded into the browser in order to render formulas. KaTeX converts the TeX/LaTeX markup to HTML/CSS.

Issue
Currently node-quill-converter does not load KaTeX into the JSDOM instance. Therefore formulas do not render into HTML. This is likely what you are experiencing.

Possible solution(s)
I can open up a new issue as an enhancement request and look at adding an option to import the KaTeX library.

[haojia321]

@joelcolucci Thank you for your response. You are right, this is exactly the issue we are facing now. Just wondering when will this be fixed?

[joelcolucci]

@haojia321 I will take a look today/tomorrow at extending the API to import KaTex. I'll keep you updated.

[joelcolucci]

@haojia321 Can you provide an example of correct input and expected output?

Below is the current test case I'm using. The output includes a KaTeX error. I'm working to confirm if this is due to a bad Delta, code, or test framework.

Input

let deltaWithKatex = { ops: [{ insert: { formula: "$$\small{4 \div 0.25 \ =}$$ _____ $$\small{\times 4}$$" } }] };

Output

<p>
<span class=\"ql-formula\" data-value=\"$$small{4 div 0.25  =}$$ _____ $$small{       imes 4}$$\">
  <span contenteditable=\"false\">
    <span class=\"katex-error\" title=\"ParseError: KaTeX parse error: Can't use function '$' in math mode at position 1: $̲$small{4 div 0.…\" style=\"color:#f00\">$$small{4 div 0.25  =}$$ _____ $$small{  imes 4}$$</span>
    </span>
</span>
</p>

[haojia321]

Hi @joelcolucci ,
Sorry I gave invalid data in my previous comment. Below 2 are valid deltaWithKatex;

let deltaWithKatex = { ops: [{ insert: { formula: "\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }" } }] };


let deltaWithKatex = { ops: [{ insert: { formula: "e=mc^2" } }] };

[joelcolucci]

@haojia321 Thanks. I'm continuing to work on this. There are inconsistencies in the output at the moment. I'll keep you updated.