feat(maic-editor): selection-anchored text editing for the slide surface

[wyuc]

Follow-up to #586 — the UX polish explicitly deferred during PR2 review. Part of the slide surface track (#562) under #560.

What

The slide editor's element chrome was disjoint: a text-format popover pinned to the canvas top-center, a separate top-center toolbar for delete, a dashed select box stacked on the focused editor, a font picker that mostly didn't work, and Text box insertion that dropped a box at a hardcoded (180, 140) with no visible feedback. This PR makes the editing experience selection-anchored and coherent.

1. Selection-anchored bars — every selected element now gets a bar that hugs it (Figma/Pitch feel) and tracks it through drag / resize / zoom, instead of fixed toolbars at the canvas top. A text element gets the format controls + delete; every other element type (image, shape, line, table, …) gets a delete bar. The top-center FloatingToolbar is retired for the slide surface.

2. One clean editing frame — selecting a text element used to draw the dashed select frame and a UA focus ring on the editor. Editing a text element now shows a single clean solid frame (resize/rotate handles kept).

3. Modernized format bar — the bar used a native <select> and a hand-rolled −/+ stepper. Anchoring it made that prominent, so it's rebuilt with the design-system Select, an editable size input alongside the −/+ stepper pill, a proper color picker (SV pad + hue slider + eyedropper + common-color strip), and unified control styling. Text commands unchanged. The color picker uses react-colorful (~3 KB gz, MIT) for the SV/hue engine with scoped CSS overrides; everything else is hand-written.

4. Real fonts — the picker listed 29 fonts but the app only ever loaded Inter; the other 28 had no @font-face (a pre-existing gap — nothing but the format bar even imports configs/font.ts). A curated 14-font set now genuinely loads via @fontsource (npm-managed, no font binaries committed; CJK faces unicode-range-subsetted, so they download lazily): 思源黑体/宋体, 霞鹜文楷, 站酷快乐体 + 9 Latin families. Commercial decorative Chinese fonts are left out — they need self-hosting + a licensing review.

5. Arm-and-place text insertion — clicking Text box in the toolbar arms text-insertion (button turns violet, canvas cursor becomes a crosshair). On the canvas, click drops a default-sized box at the click point; drag drops a box at the dragged rect. Either way the new box is auto-selected and the anchored bar opens on it. Esc disarms. Replaces the "auto-insert at a hidden default position" UX. Reuses the renderer's existing ElementCreateSelection overlay + creatingElement state — the text branch in useInsertFromCreateSelection was a TODO that this PR completes.

Also fixed along the way: a font-family quoting bug (spaced/numeric family names like Source Sans 3 threw on document.fonts.check and silently failed to apply); the anchored frame masking the element's own move/text cursor (pointer-events); a stale richTextAttrs flash when switching between text elements; list-marker visibility under Tailwind's preflight reset (scoped list-style !important on .editable-element-text lists); Radix's react-remove-scroll body-padding compensation creating a layout shift on every dropdown open (editor-scoped body[data-maic-editor] { padding-right: 0 !important }); a noisy "font is loading" toast.

How

A single selected text element is the element being edited — the renderer already drops a caret on click, so there is no separate "selected-not-editing" state for text. The previously-unused editingElementId canvas-store flag is the lever: the surface sets it, the renderer reads it.

• Surface code (components/edit/surfaces/slide/) — additive: AnchoredBar (Radix Popover + a virtual PopoverAnchor tracking the element's live screen rect via useTrackedRect), the AnchoredTextBar / AnchoredDeleteBar content, editing-state.ts, the ColorPicker, surface hooks, and the body-mode marker for the scoped padding override. Fonts load via app/editor-fonts.ts (imported once from the root layout).
• Renderer-core — deliberately minimal: TextElementOperate swaps its dashed frame for a clean solid one when editingElementId matches (resize/rotate handles kept); the fontname mark's toDOM quotes the family name and rejects ["\\]; useInsertFromCreateSelection gains its text branch (was a TODO from pptist scaffolding); ElementCreateSelection hands raw start/end through for the text type instead of padding sub-30px gestures to a 200² square. The flag defaults to "", so the dashed frame is byte-unchanged for any consumer that never sets it; playback never renders Operate. Plus one editor-scoped CSS rule removing the contenteditable focus ring. ProseMirror's editable wiring is untouched.

Not in scope

No two-stage (double-click) editing model. Per-type actions beyond delete for non-text elements (image replace / crop, etc.) are a later sub-PR.

Tests / verification

• Unit: the editing-state resolvers (resolveSelectedElement, resolveEditingElementId), insert / delete helpers, and the text-format-bar's pure logic (stepFontSize, currentFontLabel).
• tsc / eslint / prettier clean; CI green.
• Verified end-to-end in the running editor (driven through the e2e/ mock harness): bars anchor centered above the selected element, one clean solid frame replaces the dashed select chrome, the curated fonts render, arm-and-place text insertion lands at the gesture, and delete works. A committed editor e2e regression test, plus unit coverage for the new interactive components (useTrackedRect, AnchoredBar, ColorPicker, the arm-and-place text branch in useInsertFromCreateSelection), is a sensible follow-up — they each have natural seams to test.

[xuyuanwei678]

1. When the font is set to the default option, the fill label is not updated to "Default". 2. The page layout shifts when opening the font selection popup.

[cosarah]

Issues

Important

• components/edit/surfaces/slide/text-format-bar.tsx:125 — <SelectValue /> has no placeholder. Legacy attrs.fontname outside curated FONTS (e.g. Microsoft YaHei, PingFang SC, Arial) renders a blank trigger. Fix: <SelectValue placeholder={attrs.fontname || t('edit.text.fontDefault')} />, or inject a disabled "current" item when unmatched.

Minor

• lib/prosemirror/schema/marks.ts:140 — font-family: "${fontname}" does not escape ". parseDOM strips quotes so paste round-trips are safe, but a hand-crafted slide JSON fontname: 'X"; background:url(...);" injects CSS at toDOM. Defence-in-depth — escape " or reject /["\\]/.
• app/editor-fonts.ts — 8 @fontsource packages as side-effect imports via app/layout.tsx. Font binaries stay lazy, but @font-face CSS ships on every page. Consider await import('./editor-fonts') from inside SlideCanvas if editor is rarely opened.
• components/edit/surfaces/slide/use-tracked-rect.ts:44-59 — Unconditional 60Hz requestAnimationFrame. sameRect short-circuits setState, cost is one getBoundingClientRect per frame. ResizeObserver + scroll listener would drop idle CPU.
• components/edit/surfaces/slide/AnchoredBar.tsx:26 — <Popover open={open}> controlled without onOpenChange. Documented as intentional, but Radix logs dev warning and Esc-dismiss for SR users is lost.
• components/edit/surfaces/slide/use-slide-surface.ts:228-236 — Two useLayoutEffects on setEditingElementId; cleanup-only effect duplicates the first effect's dep-change cleanup. Foldable to one effect with return () => setEditingElementId('').
• configs/font.ts:14 — label: '默认字体' is dead — text-format-bar.tsx:130 overrides with t('edit.text.fontDefault'). Drop the label or the override.

[cosarah]

LGTM
tested locally