Skip to content

v4.5.0 - Rich Editor Phase 2

Choose a tag to compare

View all tags
@tallcms tallcms released this 01 May 16:00
· 13 commits to main since this release
v4.5.0
4f202a8

Rich Editor Phase 2

This release lands a six-PR overhaul of the CMS Rich Editor focused on managing long structured pages with many blocks. The core problems it solves: hard-to-grab tall blocks, no document overview, picker that scrolls away, and no fast keyboard insertion.

What's new

Sticky side panel (#86) — the block panel docks to the viewport on long pages instead of scrolling away with the document. Desktop-only (≥1024px) so narrow admin layouts don't get trapped scroll. Configurable top offset via --tallcms-editor-sticky-offset for hosts with their own sticky topbar.

Picker polish (#87) — multi-word AND search (form contact finds Contact Form), result ranking by match quality, and a "Recently used" row at the top of the picker backed by localStorage. Drag insertion now also counts toward recents.

Per-block hover chrome (#88) — every custom block in the editor gets a floating mini-toolbar on hover: drag handle, move up, move down, duplicate. Solves the "can't grab a 800px Hero" problem with a small predictable hit target. Reorder commands transact in a single step (clean undo).

Outline tab (#89) — a second tab in the side panel showing every customBlock in the document as a drag-reorderable list. Click to scroll-to, drag to reorder. Heuristic title extraction pulls the actual heading text from each block's config (Hero "Welcome to my site" instead of just "Hero"). Reorders run in one TipTap transaction via a generalized moveCustomBlockTo command.

Per-block collapse (#90) — fifth chrome button folds a block's preview into a one-line summary card so you can scan past it. Header and chrome stay visible. State persists across panel/tab switches, resets on page reload (per the "opt-in, see how it feels" design call).

Slash commands (#91) — type / anywhere in the editor for a Notion-style block picker. Filters as you type using the same multi-word search as the side panel. Arrow keys + Enter to insert. Escape or click-away to close. A default placeholder hints at it on a fresh editor: "Type / for blocks, or use the side panel".

Implementation notes

  • New TipTap extension shipped via BlockChromePlugin (a Filament RichContentPlugin). Three ProseMirror plugins inside it: BlockChromeView, OutlineSyncView, SlashCommandView. Bundle (~198KB) is loaded on-request — pages without an editor pay nothing.
  • Three new TipTap commands operating on customBlock nodes: moveCustomBlockUp(pos), moveCustomBlockDown(pos), moveCustomBlockTo(fromPos, toIndex), duplicateCustomBlock(pos). All accept explicit positions resolved from DOM at click time, so reorders survive intermediate edits.
  • Outline ↔ panel coupling stays event-shaped via scoped cms-block-outline-changed and cms-block-action events on editor.dom — no direct references between layers, so multiple editors on a page never cross-talk.
  • Built-on works for both standalone and plugin-mode installs (sticky styles moved into the package CSS so plugin-mode adopters get them via FilamentAsset).

Known follow-ups (not in this release)

  • Outline-tab title truncation on very long titles — the :title tooltip provides a fallback for now
  • Handle-only dragging (currently the entire block stays draggable; the handle is additive affordance)
  • "Structure mode" toggle that auto-collapses tall blocks (the per-block opt-in is the foundation; this is the smart-defaults follow-up)
  • Slash menu enhancements: recently used, categories
  • Identifier regeneration on duplicate for blocks that store user-facing IDs in config

Compatibility

No breaking changes. Existing CmsRichEditor usage continues to work unchanged. Custom block packages are unaffected.

Assets 2
Loading