feat: finish Mermaid editor demo

[samuelgja]

Description

Finishes the mermaid-editor demo (mermaid-editor/react) — Mermaid's own parser reads the flowchart, JointJS+ draws it, and every edit on the canvas writes real Mermaid back into the source.

Editing

• All 36 Mermaid v11 shapes in the picker (classic delimiters and @{ shape: … }), open by default; image nodes via @{ img }; subgraphs; hyperlinks (click).
• Node toolbar: shape, fill, text colour, bold/italic, border style and colour, hyperlink, image. Edge toolbar on link click: line pattern, arrow heads (incl. both ends), colour (linkStyle), curve (interpolate), marching-dash animation (e1@{ animate: true }).
• A "+" on the hovered/selected shape, placed by layout direction (below in TB, right in LR, …): click to append a connected step (selected at once), or DRAG it onto another shape to add an edge (Escape cancels). "+ Shape" builds a diagram from a bare flowchart TD; layout direction switch (TB/BT/LR/RL) rewrites the header and re-frames.
• Delete / Backspace remove the selected nodes or edge (a trash button in each popup too); removal rewrites the source — chains cut, fans unrolled, edge ids and linkStyle indices kept consistent, style/class/click lines cleaned, subgraph ids unwrapped (21 tests). Canvas edits carry their own undo stop.
• Monaco replaces CodeMirror: find/replace, multi-cursor, undo-preserving external edits, a Monarch Mermaid grammar, themed light/dark, and completions (statements and snippets, directions, arrow spellings, the diagram's own node ids, every @{ shape: } name).
• Manual layout toggle with orthogonal routing; .mmd and SVG export.

Accessibility

• One focus colour for controls and canvas selection (not the red accent); visible rings on swatches and toggles.
• Source pane is a focus stop (Tab → frame, Enter → edit, Escape → out); nodes are keyboard-reachable (focus selects, Enter renames, Tab dives into the toolbar, Escape closes and returns focus); arrow keys walk the shape pickers; keyboard "+ Shape" focuses the new node's controls.
• Pressed/checked chips (shape, line style, direction, layout) use a tinted fill instead of an accent-red ring, so the only ring on screen is the blue focus ring; custom colour inputs and the rename box use the same blue.
• Toolbar flips/slides to stay inside the VISIBLE canvas (the scroller's box, not the paper's — a scrolled canvas used to open it under the source pane); the geometry is a pure function with node --test coverage; on phones its rows wrap to the screen width; mobile header no longer overlaps its logo and the example picker takes the free width; example picker opens on Enter.

Design — a light refresh toward the look of mermaid.ai: navy-tinted OKLCH neutrals (nothing pure white or black), node and edge labels in the same monospace face as the source, dark nodes with a light outline in dark mode, teal gutter and strings in the editor. The node and edge toolbars are one flat panel: hairline dividers instead of boxes inside boxes, one chip size, and delete as a quiet ghost button alone at the end of the last row that turns red only under the pointer or focus. Hover is a lift, not the red accent; 150 ms colour transitions, off under reduced motion. Plain rectangles get softly rounded corners; a node's own fill is blended into the canvas in dark mode and its authored color gives way to the theme's text (true dark mode), unchanged in light mode; the "+" glyph is optically centred. PRODUCT.md and DESIGN.md in the demo folder record the register, palette and rules (inferred, please correct).

Dark mode — navy rather than grey, a few steps up from black (canvas oklch(0.215 0.03 262), panels oklch(0.25 0.03 262), Monaco theme mirrored): easier on the eye over a long look, still unmistakably dark. Text, gutter and muted labels keep WCAG AA on both themes.

Robustness — arrow edits read the current token from the source (rapid clicks no longer corrupt it); the Lezer grammar mis-lexes -.->, so edge spans are located by regex between grammar-located ids (edge-spans.ts, Node-tested: parallel edges and edges into id@{ shape: … } nodes each resolve to their own token); a non-flowchart source is refused rather than corrupted.

Examples — "All node shapes" shows all 49 shapes (classic delimiters and every v11 @{ shape }) as a branching tree; picker icons are each shape's own node scaled down (verified against a 45-pair icon/node contact sheet), comment shapes get typographic { } { } icons.

Verified end-to-end in Chrome (desktop and 390px mobile), including a scripted keyboard walk.

Motivation and Context

Completes the demos.jointjs.com/mermaid-editor demo to a shippable state, matching the mermaid.live feature set that is relevant to a flowchart-only editor, and closes the review notes on editing, mobile and keyboard accessibility.

Screenshots (if appropriate):

mermaid-editor/screenshot.png in the repo shows the finished editor.