[DONE] Placeholder text in the first document, empty editor block

[DONE] Placeholder text in the first document, empty editor blockhttps://github.com/seed-hypermedia/seed/pull/603

The placeholder text in an empty editor block only shows in the first document block.

Plan:

frontend/packages/editor/src/blocknote/core/extensions/Placeholder/PlaceholderExtension.ts
- Add new placeholder eligibility path for the first top-level block only.
- Stop using hasAnchor as the condition for the normal empty-block placeholder.
- Keep hasAnchor / isFilter behavior for slash-menu filter placeholder.
- Likely add new option/class, e.g. firstEmptyBlockClass.
- In decorations:
  - find first top-level blockNode
  - decorate only its empty text content node with firstEmptyBlockClass
  - do not decorate later empty blocks for normal placeholder text
  - keep current slash filter decoration on active block
frontend/packages/editor/src/blocknote/core/BlockNoteExtensions.ts
- Pass the new CSS-module class into Placeholder.configure(...).
frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/Block.module.css
- Move normal placeholder copy from .blockContent.isEmpty.hasAnchor:before to new selector for first-block-only class.
- Keep Type to filter tied to .isFilter.hasAnchor:before.
- Remove/avoid selectors that would still show placeholder on later focused empty blocks.
Tests
- Add focused regression test file, likely under:
  - frontend/packages/editor/src/blocknote/core/__tests__/placeholder-extension.test.ts
- Cases:
  - 2 empty blocks, cursor in second → placeholder class on first only
  - first empty, second has content → placeholder still on first
  - first gets content → placeholder nowhere
  - first cleared back to empty → placeholder returns on first
Validation after impl
- pnpm typecheck
- pnpm test
- pnpm audit
- pnpm format:write
- optional CI parity: npx @redwoodjs/agent-ci run -w .github/workflows/test-frontend-parallel.yml -p --github-token
Likely root cause:
- current shared placeholder plugin decorates all empty nodes (showOnlyCurrent: false), and normal placeholder CSS is still keyed off generic empty/focus classes, so behavior is too broad / anchor-based instead of “first block only”.

Recap

Implementation plan: change the shared BlockNote placeholder plugin so the normal placeholder is shown only on the first top-level empty text block, regardless of cursor location, while preserving slash-menu filter placeholder behavior on the active block. Update the shared editor config to pass a new class, update CSS to key normal placeholder text off that new class, and add regression tests for first-only / no-second-block placeholder behavior.

Files to change: PlaceholderExtension.ts, BlockNoteExtensions.ts, Block.module.css, plus a new placeholder regression test.
Scope stays shared across documents and comments.
No code changed yet; this is a read-only plan.

Recap

The empty-block placeholder now shows only on the first top-level empty text block, stays pinned there even if the cursor moves to later empty blocks, disappears once the first block has content, and reappears if that first block is cleared again. The same shared behavior applies to comment editors.

Updated frontend/packages/editor/src/blocknote/core/extensions/Placeholder/PlaceholderExtension.ts to decorate only the first top-level empty block for normal placeholder text, while preserving active slash-filter placeholder behavior.
Updated frontend/packages/editor/src/blocknote/core/BlockNoteExtensions.ts and frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/Block.module.css to wire and style a new isFirstEmptyBlock class.
Added regression coverage in frontend/packages/editor/src/blocknote/core/__tests__/placeholder-extension.test.ts.
I attempted a targeted test run, but this checkout currently lacks local vitest/workspace binaries, so automated verification could not complete here.

Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime