Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
📝 Walkthrough
Merge Risk: ⚪ Minimal · up to
|
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/diagram-block
@blocknote/mantine
@blocknote/math-block
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
@blocknote/xl-typst-exporter
commit: |
|
Closes #3234
Problem
^in an inline equation that is empty or that contains only spaces. On a French (AZERTY) keyboard,^is a dead key. The browser inserts the dead-key character itself, not ProseMirror. An IME commit uses the same path. Thus other characters can also cause the crash.Cause
SourceWithPreviewadded a<br>next to the source<code>while the inline source was empty. React controlled this<br>. When Firefox inserts text natively next to this<br>, Firefox removes the<br>. Then the source is not empty, so React also tries to remove the<br>. The<br>is not in the DOM, so React throwsNotFoundErrorand the editor unmounts.The whitespace case has the same cause.
MathInlinePreviewWithPopupgivescontent.trim()toSourceWithPreview. When the source is" ", the trimmed source is empty, so the<br>shows next to source DOM that is not empty.When the inline source is empty, its content element has no layout box. Chromium and WebKit then put the new text in the
<pre>, before<code>, outside the content element. ProseMirror does not read text from that location.ProseMirror does not handle word deletion, so the browser deletes the word. When a deletion makes an inline element empty, the browser also removes that element and its empty inline parents, up to the nearest block element. For the inline source, the browser removes the
<code>and the content element, up to the<pre>. The<pre>is outside the content element. tiptap ignores DOM changes outside the content element of a node view. Thus ProseMirror does not see the deletion and does not render the content element again.Block sources (block equations, diagrams) do not have this problem: their content element is a block element, so the browser stops there.
Changes
packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx: Remove the conditional<br>. This change fixes the Firefox crash for a source that contains only spaces.packages/core/src/editor/Block.css: Make the content element of an inline source a block (display: block) with the height of one line (min-height: 1.5em).<br>, the empty popup would be 24px shorter.1.5emis the same as the editor line height (.bn-block-outer { line-height: 1.5 }).packages/math-block/src/inlineContent/emptySourceInput.browser.test.tsx: Add a browser test.^withdocument.execCommand("insertText"), which uses the native insertion path.How to test
/and select "Inline Equation".^, then a letter.^. Make sure that the editor does not crash.hello, then delete it with Option+Backspace. Typeabc. Make sure that the preview showsabc.Notes
These items were verified with Playwright against the playground, in Firefox, Chromium and WebKit:
^inserted withinsertTextandexecCommand("insertText")into an empty source, and after a space. Before the fix, Firefox crashed, and Chromium and WebKit lost the text. After the fix, the source gets the text.hello, then typing. Before the fix, the document kepthelloin all three browsers. After the fix, the document is empty after the deletion and gets the typed text.main.The new browser test, in Docker:
--retry=0.These items were not verified:
insertText,execCommand("insertText")and the CDP IME composition were used instead.Summary by CodeRabbit