Pasting rich HTML content mixed with LaTeX

[rajatkulkarni95]

Requires deleting the trailing $ and re-adding it for it to work.

Screen.Recording.2024-06-08.at.10.13.10.mov

[rajatkulkarni95]

Is evaluate: 'no' the reason?

https://github.com/aarkue/tiptap-math-extension/blob/main/packages/tiptap-math-extension/src/inline-math-node.ts#L131

[aarkue]

I think this might be an issue with the pasting rules regex, but not sure yet.

Could you include the latex string you are having the issue with and your browser version?

I tried pasting $\left\{\begin{matrix}x&\text{ if }x>0\\0&\text{otherwise}\end{matrix}\right.$ on Firefox mobile and could not reproduce the problem.

[rajatkulkarni95]

Ah I think my version had an extra \ at the beginning?

Anyway, is there a way to allow editing without requiring a backspace? Like it the equation was focused? Tiptap's Mathematics one does it, any reason why this doesn't?

[rajatkulkarni95]

@aarkue Can you try pasting stuff from https://tiptap.dev/docs/editor/api/extensions/mathematics#katex-options example and see if it renders automatically?

I tried and it doesn't.

Screen.Recording.2024-06-08.at.14.25.01.mov

[aarkue]

Ah I think my version had an extra \ at the beginning?

Anyway, is there a way to allow editing without requiring a backspace? Like it the equation was focused? Tiptap's Mathematics one does it, any reason why this doesn't?

To be honest, I am not really a fan of the jump from rendered LaTeX to the source LaTeX expression when the cursor navigates to the rendered LaTeX. Additionally, the implementation of this plugin right now is fairly simple and only uses the exposed TipTap extensions API (without reaching in addProseMirrorPlugins etc.).

However, I think adding some functionality to optionally enable this (or even just allowing users to edit the expression after clicking on it) might be on the roadmap in the future. 👍

[aarkue]

@aarkue Can you try pasting stuff from https://tiptap.dev/docs/editor/api/extensions/mathematics#katex-options example and see if it renders automatically?

I tried and it doesn't.
Screen.Recording.2024-06-08.at.14.25.01.mov

Thanks for the reproduction example!
I believe the issue you are experiencing is because the content (from the TipTap example) is copied as HTML.
When pasting the content again, it probably triggers the TipTap HTML -> Content conversion, without triggering the paste rules.

I will investigate how we could handle converting LaTeX pasted inside HTML.
For now, you can try using paste-as-plain-text (with Ctrl+Shift+v), which seems to convert the LaTeX expressions correctly, but of course looses the other markup (e.g., Headings).

[aarkue]

Some progress: The TipTap APIs (PasteRules and InputRules) do not trigger when pasting rich HTML content mixes with (plain text) LaTeX.

Using parseHTML is also not applicable, as the example copied HTML (i.e., from the official TipTap mathematics extension) does not wrap the LaTeX in any special HTML tags.

Overall, this means that handling LaTeX inside pasted HTML is not possible without reaching for the ProseMirror API surface. This might be addressable in the future, but for now, it seems like not worth pursuing further. Pasting as plain text (Cmd/Ctrl+Shift+v) seems like a good enough workaround for the moment.

[rajatkulkarni95]

Fair, for now I've gone ahead with the package from Tiptap, but it suffers from re-painting and re-rendering causing the app to slow down when there's a lot, while your package didn't.

Would you be okay keeping this issue open, till you either find a fix or deem it not worth fixing?

[aarkue]

Yes definitively, we can keep this issue open for tracking!

Cheers

[xiangshu233]

@aarkue @rajatkulkarni95 hi guys，I also encountered the same problem. I had to delete the ending $ and re-enter it to render the math correctly.Moreover, directly inserting the latex formula into the document will not render $\tan {\theta }=\frac {\sin {\theta }} {\cos {\theta }}$ correctly. Is there any good solution? The reason I don't want to use the official math library is that I don't need to click on the formula to edit latex. Unfortunately, the official does not provide this option, so I found this library, 🙏

QQ2024611-17122.mp4

[aarkue]

@xiangshu233 hi,
I tried pasting the formula manually in the demo page, and it worked without problems.
However, my theory is that you are automatically inserting the math content (e.g., with editor.commands.insertContent see https://tiptap.dev/docs/editor/api/commands/insert-content). In this case, the automatic conversion will likely not trigger.

Instead, try inserting the latex formula as content element (either JSON or HTML) using editor.commands.insertContent):

• JSON: editor.commands.insertContent({type: "inlineMath", attrs: {latex: "x_{123}", display: "no"}})
• HTML: editor.commands.insertContent(`<span data-type="inlineMath" data-latex="\\sum_{i=0}^n i^2"></span>`)

Let me know if that works for you!
Cheers.