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.

[xiangshu233]

@aarkue Many thanks for the prompt reply.
However, I seem to try to paste $\tan {\theta }=\frac {\sin {\theta }} {\cos {\theta }}$ latex formula in the demo page. It does not render automatically. I still have to delete $ and enter $ again to render correctly. I use the editor.commands.insertContent($\tan {\theta }=\frac {\sin {\theta }} {\cos {\theta }}$) command to insert the formula. This writing method is recognized in the official math extension. At present, I have inserted the content in this way as you said, and it works for me.

click: (latex) => {
  editor?.chain()
    .insertContent(`<span data-type="inlineMath" data-latex="${latex}"></span>`)
    .focus()
    .run()
},

But I am still curious about what causes the deletion The problem is that the formula can only be rendered correctly if $ is entered again after $. Is it a regular expression problem of PasteRule?

QQ2024611-18815.mp4

[aarkue]

@xiangshu233 No problem! I would actually recommend inserting via JSON instead of HTML to be more robust for future updates, but both should work fine for now.

Regarding the pasting issue: Pasting $\tan {\theta }=\frac {\sin {\theta }} {\cos {\theta }}$ works fine for me in both Chrome and Firefox. Could you try the following:

• Use Ctrl+Shift+v to paste as plain text
• With the not working example in the clipboars paste it on https://evercoder.github.io/clipboard-inspector/ and share the results. If the HTML clipboard content contains other markup (e.g., p or h1) the Tiptap pasting API will not trigger (this is exactly the issue described here before)

Cheers :)

[xiangshu233]

@aarkue Thank you, I know why copying from rich text doesn't work

When you copy text from a rich text editor (such as Microsoft Word or Google Docs) or a web page, in addition to the plain text content, some formatting information is also copied. This formatting information is usually stored as HTML so that the original formatting is preserved when pasted.

This is the result I got

Copying from rich text:

Ctrl+Shift+v:

in addition, the official math extension can directly identify HTML tags such as p or h1. Does it perform filtering operations internally? Is it possible to do some filtering in "addPasteRules"? Unfortunately, the official math extension is not open source.

[aarkue]

@xiangshu233 Ahh okay, thanks for confirming! This is exactly the thing this original issue is about.

Fixing this will probably require using the ProseMirror API to handle such paste event scenarios (i.e. pasting HTML content with LaTeX inside $...$).

I will keep you updated once I get further to fixing this, but right now it is not really a priority.

Cheers!

[xiangshu233]

@aarkue Hello, sorry to bother you. I am currently using this plugin.
But I encountered a strange problem:
Whether using JSON or HTML to insert, the formula converted by latex is much smaller than the one manually entered by $$

editor?.chain().insertContent(`<span data-type="inlineMath" data-latex="\\tan {\\theta }=\\frac {\\sin {\\theta }} {\\cos {\\theta }}"></span>`).focus().run()

I have been troubleshooting for a long time but can't find the problem😂. Can you help me?

QQ202475-145225.mp4

Thanks

[aarkue]

@aarkue Hello, sorry to bother you. I am currently using this plugin. But I encountered a strange problem: Whether using JSON or HTML to insert, the formula converted by latex is much smaller than the one manually entered by $$

editor?.chain().insertContent(`<span data-type="inlineMath" data-latex="\\tan {\\theta }=\\frac {\\sin {\\theta }} {\\cos {\\theta }}"></span>`).focus().run()

I have been troubleshooting for a long time but can't find the problem😂. Can you help me?
QQ202475-145225.mp4

Thanks

Hi, no problem :)
I suspect the difference might lay in whether the math is rendered in "display" or "inline" style.

When inserting the content using JSON (e.g.,
editor.commands.insertContent({type: "inlineMath", attrs: {latex: "\\tan {\\theta }=\\frac {\\sin {\\theta }} {\\cos {\\theta }}", display: "no"}})) you can switch between both using the display key (with value "no" vs "yes").

Similar, using HTML you can use data-display (e.g., editor.commands.insertContent(<span data-type="inlineMath" data-display="yes" data-latex="\\sum_{i=0}^n i^2"></span>)`).

The inline style is good when working with math expressions inside text, e.g., $x$ or $n$.
However, for larger equations, e.g., with fractions or sums, the larger display math is easier to read.

When using the auto-conversion of the editor $ vs $$ as delimiters trigger inline vs. display styles.

Let me know if this fixes your issue!

[xiangshu233]

@aarkue Thanks, this is useful for me, thanks for your serious reply