Repository navigation
Fix caret jumping to the title after inserting a Plone block - #235
Merged
Merged
Conversation
Inserting a Plone block from the slash menu (image, teaser, listing) left
the caret at the start of the title instead of on the new block.
Two things in the Plone block adapter caused it:
- Block Edit components are lazy. The first time one is rendered it
suspends, and since the nearest Suspense boundary was above the
element, the whole block (including Slate's spacer text) stayed out of
the DOM. When the slash menu refocused the editor, `ReactEditor.focus`
threw "Cannot resolve a DOM node from Slate node" before focusing, and
the browser kept the caret in the title.
- `contentEditable: false` was set on the void element itself, spacer
included, so the browser could not place the caret on the block and
dropped it at the start of the editor once the paragraph holding it was
removed.
Give the block's own UI its own Suspense boundary and move
`contentEditable={false}` onto a wrapper around it, so the element and
its spacer render immediately and stay editable.
This was referenced Oct 6, 2026
sneridagh
added a commit
that referenced
this pull request
Oct 6, 2026
* b10-plone-blocks: Releasing @plone/aurora 1.0.0-alpha.18 Release @plone/plate 1.0.0-alpha.24 Remove unused @plone/quanta dependency from @plone/plate (#236) Releasing @plone/aurora 1.0.0-alpha.17 Release @plone/plate 1.0.0-alpha.23 Fix caret jumping to the title after inserting a Plone block (#235)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Inserting a Plone block from the slash menu (Image, Teaser, Listing) left the caret at the start of the title instead of on the new block, so typing went into the title.
Two causes in
plone-block-adapter.tsx:edit/viewcomponents areReact.lazy. The first render suspended up to a boundary above the element, so the block element and Slate's spacer text were not in the DOM when the slash menu refocused the editor.ReactEditor.focusthrewCannot resolve a DOM node from Slate nodebefore callingel.focus(), and the browser caret stayed in the title.contentEditable={false}, spacer included, so the browser could not place the caret on the block. Once the paragraph holding the slash command was removed, the caret fell back to the start of the editor. (This one shows up when the Edit component is already loaded, e.g. in Volto-based integrations of the editor.)The fix gives the block's own UI its own
Suspenseboundary and movescontentEditable={false}onto a wrapper around it, so the element and its spacer render immediately and stay editable.Tests
New acceptance test in
packages/plate/acceptance/tests/slash-menu.test.ts, run for Image, Teaser and Listing: after inserting the block, the editor has focus and the DOM caret and Slate selection are on the new block. It fails onmainand passes with this change. The fullpackages/plateacceptance suite (86) and unit tests (74) pass, andcheck:tsis clean.