-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Description
Affected Packages
core, placeholder
Version(s)
3.10.4+
Bug Description
Use case:
We have a “New Project” modal. When it opens, the first field is “Project Title” (normal input with placeholder) and below it a Rich Text Editor for the project outline with placeholder “Add outline…”. The title placeholder is always visible. Since version 3.10.4 update outline placeholder is missing until the user clicks into the editor. We need the outline placeholder visible as soon as the modal opens so users see where to type.
What’s broken:
With the Placeholder extension and default options (no autofocus), the placeholder text does not render on initial mount. It appears only after the first interaction (e.g. clicking the editor).
Cause:
In v3.10.4 the autofocus guard was added in Editor.ts:
this.commands.focus(this.options.autofocus)
if (this.options.autofocus !== false && this.options.autofocus !== null) {
this.commands.focus(this.options.autofocus)
}
When autofocus is false (the default), focus() is no longer called. That call was dispatching a transaction as a side effect, which triggered ProseMirror to compute plugin decorations (including Placeholder). Without it, the Placeholder’s decorations function doesn’t run until the first user interaction.
Steps to reproduce:
- Create an editor with the Placeholder extension, default options (no autofocus).
- Mount the editor.
- Placeholder is missing.
- Click in the editor → placeholder appears.
Expected:
Placeholder is visible as soon as the editor is mounted.
Actual:
Placeholder appears only after first interaction.
Affected:
v3.10.4+
Workaround:
Dispatch a no-op transaction in onCreate:
onCreate: ({ editor }) => { setTimeout(() => { if (!editor.isDestroyed) editor.view.dispatch(editor.state.tr) }, 0)}
Suggested fix:
Either run an initial transaction after mount (e.g. in the same setTimeout(..., 0) as today) so decorations are computed once, or have the Placeholder (or core) ensure initial decorations are applied without depending on that focus path.
Browser Used
Chrome
Code Example URL
No response
Expected Behavior
Placeholder is visible as soon as the editor is mounted.
Additional Context (Optional)
No response
Dependency Updates
- Yes, I've updated all my dependencies.