@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/asciiDiagram/AsciiDiagramWidget.tsx

@@ -22,7 +22,13 @@ import { SceneBlockToolbar, type SceneBlockAction } from '../scene/SceneBlockToo
 import { SceneSideToolbar } from '../scene/SceneSideToolbar';
 import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../scene';
 import { Icon } from '../Icon';
-import { useAsciiDiagramData } from './asciiDiagramData';
+import {
+  asciiDiagramToCanvas,
+  initialAsciiDiagramCanvasOffset,
+  offsetAsciiDiagram,
+  useAsciiDiagramData,
+  type AsciiDiagramCanvasOffset,
+} from './asciiDiagramData';
 import { applyAsciiDiagramCommand } from './asciiDiagramCommands';
 import { isAsciiSourceVisible, toggleAsciiSource } from './AsciiDiagramExtension';
 import type { SceneTextChannel } from '../scene/text/sceneTextChannel';
@@ -52,12 +58,36 @@ export function AsciiDiagramWidget({
   const [maximized, setMaximized] = useState(false);
   const [height, setHeight] = useState<number | null>(null);
   const [dragHeight, setDragHeight] = useState<number | null>(null);
+  const canvasOffsetRef = useRef<AsciiDiagramCanvasOffset | null>(null);
+  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState(0);
   const inlineRef = useRef<HTMLDivElement>(null);
   const effectiveHeight = dragHeight ?? height;
 
+  if (view && canvasOffsetRef.current === null) {
+    canvasOffsetRef.current = initialAsciiDiagramCanvasOffset(view.diagram);
+  }
+
+  const canvasView = useMemo(() => {
+    if (!view) return null;
+    const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
+    return asciiDiagramToCanvas(offsetAsciiDiagram(view.diagram, offset));
+    // The ref is intentionally versioned only when its value is consumed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view, canvasOffsetVersion]);
+
   const dispatch = useCallback(
     (cmd: DiagramCommand) => {
-      applyAsciiDiagramCommand(editor, blockId, cmd);
+      const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
+      const applied = applyAsciiDiagramCommand(editor, blockId, cmd, {
+        diagramOffset: offset,
+      });
+      if (applied && (offset.col !== 0 || offset.row !== 0)) {
+        // The same rewrite that applied the edit has now persisted the virtual
+        // gutter. Drop the projection offset so the on-screen coordinates do
+        // not change while the fence-backed view refreshes.
+        canvasOffsetRef.current = { col: 0, row: 0 };
+        setCanvasOffsetVersion((version) => version + 1);
+      }
     },
     [editor, blockId],
   );
@@ -169,8 +199,8 @@ export function AsciiDiagramWidget({
   const canvas = (
     <DiagramCanvas
       textChannel={textChannel}
-      nodes={view.nodes}
-      edges={view.edges}
+      nodes={canvasView?.nodes ?? view.nodes}
+      edges={canvasView?.edges ?? view.edges}
       onCommand={dispatch}
       showMaximize
       maximized={maximized}

package/src/asciiDiagram/__tests__/AsciiDiagramExtension.test.ts

@@ -6,7 +6,7 @@
 
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { markdownToTiptap } from '../../tiptapBridge';
 import { HeadingWithTemplate } from '../../TemplateAnnotation';
 import {
@@ -138,6 +138,25 @@ describe('AsciiDiagramExtension registry', () => {
     expect(JSON.stringify(editor.state.doc.toJSON())).toBe(json);
   });
 
+  it('shows zoom, fit, and fullscreen affordances with fit active by default', async () => {
+    const editor = makeEditor('```diagram\n' + ART_A + '\n```\n');
+    const root = editor.view.dom;
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Diagram view"]')).not.toBeNull();
+    });
+
+    expect(root.querySelector('button[aria-label="Zoom out"]')).not.toBeNull();
+    expect(root.querySelector('button[aria-label="Zoom in"]')).not.toBeNull();
+    expect(root.querySelector('button[title^="Maximize"]')).not.toBeNull();
+
+    const fitButton = root.querySelector<HTMLButtonElement>('button[aria-label="Fit diagram"]')!;
+    expect(fitButton.getAttribute('aria-pressed')).toBe('true');
+    root.querySelector<HTMLButtonElement>('button[aria-label="Zoom in"]')?.click();
+    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('false'));
+    fitButton.click();
+    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('true'));
+  });
+
   it('enabled: false disables the plugin entirely', () => {
     const editor = makeEditor('```\n' + ART_A + '\n```\n', { enabled: false });
     expect(ASCII_DIAGRAM_KEY.getState(editor.state)).toBeUndefined();

package/src/asciiDiagram/__tests__/asciiDiagramCommands.test.ts

@@ -5,7 +5,7 @@
 
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { ASCII_CHAR_H, ASCII_CHAR_W, parseAsciiDiagram } from '@bendyline/squisq/doc';
 import { markdownToTiptap } from '../../tiptapBridge';
 import { HeadingWithTemplate } from '../../TemplateAnnotation';
@@ -94,6 +94,63 @@ describe('applyAsciiDiagramCommand', () => {
     expect(reparsed.nodes.find((n) => n.id === 'beta')?.col).toBe(20);
   });
 
+  it('commits a north/west resize position and size in one fence rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstBlockId(editor);
+    const onTransaction = vi.fn();
+    editor.on('transaction', onTransaction);
+
+    const ok = applyAsciiDiagramCommand(editor, id, {
+      kind: 'resizeNode',
+      nodeId: 'beta',
+      x: 18 * ASCII_CHAR_W,
+      y: 10 * ASCII_CHAR_H,
+      width: 14 * ASCII_CHAR_W,
+      height: 5 * ASCII_CHAR_H,
+    });
+
+    expect(ok).toBe(true);
+    expect(onTransaction).toHaveBeenCalledTimes(1);
+    const beta = parseAsciiDiagram(fenceOf(editor).text).nodes.find((n) => n.id === 'beta');
+    expect(beta).toMatchObject({ col: 18, row: 10, wCols: 14, hRows: 5 });
+
+    editor.commands.undo();
+    const restored = parseAsciiDiagram(fenceOf(editor).text).nodes.find((n) => n.id === 'beta');
+    expect(restored).toMatchObject({ col: 0, row: 5, wCols: 10, hRows: 3 });
+  });
+
+  it('persists a virtual gutter with the first edit of legacy origin-hugging art', () => {
+    const editor = makeEditor('```diagram\n' + ART + '\n```\n');
+    const id = firstBlockId(editor);
+
+    expect(
+      applyAsciiDiagramCommand(
+        editor,
+        id,
+        {
+          kind: 'resizeNode',
+          nodeId: 'alpha',
+          x: 6 * ASCII_CHAR_W,
+          y: 1 * ASCII_CHAR_H,
+          width: 12 * ASCII_CHAR_W,
+          height: 4 * ASCII_CHAR_H,
+        },
+        { diagramOffset: { col: 8, row: 2 } },
+      ),
+    ).toBe(true);
+
+    const nodes = parseAsciiDiagram(fenceOf(editor).text).nodes;
+    expect(nodes.find((node) => node.id === 'alpha')).toMatchObject({
+      col: 6,
+      row: 1,
+      wCols: 12,
+      hRows: 4,
+    });
+    // The untouched peer receives the persisted origin shift, preserving the
+    // same coordinates that were already projected on the canvas.
+    expect(nodes.find((node) => node.id === 'beta')).toMatchObject({ col: 8, row: 7 });
+  });
+
   it('addConnection adds a reciprocal edge (renders as a double arrow)', () => {
     const editor = makeEditor('```\n' + ART + '\n```\n');
     const id = firstBlockId(editor);

package/src/asciiDiagram/asciiDiagramCommands.ts

@@ -30,8 +30,17 @@ import {
   removeNodeOp,
   renameNodeOp,
   resizeNodeOp,
+  translateDiagramOp,
 } from './asciiDiagramOps';
 
+export interface ApplyAsciiDiagramCommandOptions {
+  /**
+   * Virtual grid offset currently shown by the canvas for legacy art. It is
+   * folded into the source in the same transaction as the user's first edit.
+   */
+  diagramOffset?: { col: number; row: number };
+}
+
 /**
  * Replace the TEXT inside the codeBlock at `pos` and, when `ensureLanguage`
  * is given, promote its `language` attribute in the SAME transaction (one
@@ -89,6 +98,7 @@ function applyOp(
   editor: Editor,
   blockId: string,
   op: (diagram: AsciiDiagram) => AsciiDiagram,
+  diagramOffset?: { col: number; row: number },
 ): boolean {
   // Resolve the position at dispatch time — captured positions go stale
   // the moment anything above the block changes.
@@ -96,11 +106,14 @@ function applyOp(
   if (pos === null) return false;
   const node = editor.state.doc.nodeAt(pos);
   if (!node || node.type.name !== 'codeBlock') return false;
-  const diagram = parseAsciiDiagramForNode(node);
-  if (!diagram) return false;
+  const sourceDiagram = parseAsciiDiagramForNode(node);
+  if (!sourceDiagram) return false;
+  const diagram = diagramOffset
+    ? translateDiagramOp(sourceDiagram, diagramOffset.col, diagramOffset.row)
+    : sourceDiagram;
 
   const next = op(diagram);
-  if (next === diagram) return false;
+  if (next === diagram && diagram === sourceDiagram) return false;
   const rendered = renderAsciiDiagram(next);
 
   // Verify before committing: the rendered art must re-parse to the same
@@ -118,29 +131,42 @@ export function applyAsciiDiagramCommand(
   editor: Editor,
   blockId: string,
   cmd: DiagramCommand,
+  options: ApplyAsciiDiagramCommandOptions = {},
 ): boolean {
+  const apply = (op: (diagram: AsciiDiagram) => AsciiDiagram) =>
+    applyOp(editor, blockId, op, options.diagramOffset);
   switch (cmd.kind) {
     case 'moveNode': {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
-      return applyOp(editor, blockId, (d) => moveNodeOp(d, cmd.nodeId, col, row));
+      return apply((d) => moveNodeOp(d, cmd.nodeId, col, row));
     }
     case 'resizeNode': {
       const wCols = Math.max(3, Math.round(cmd.width / ASCII_CHAR_W));
       const hRows = Math.max(3, Math.round(cmd.height / ASCII_CHAR_H));
-      return applyOp(editor, blockId, (d) => resizeNodeOp(d, cmd.nodeId, wCols, hRows));
+      return apply((d) => {
+        // A north/west resize changes position and size. Apply both to the
+        // same parsed model and render once so collision/layout normalization
+        // cannot run between the two halves of one pointer gesture.
+        let next = d;
+        if (cmd.x !== undefined && cmd.y !== undefined) {
+          const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
+          next = moveNodeOp(next, cmd.nodeId, col, row);
+        }
+        return resizeNodeOp(next, cmd.nodeId, wCols, hRows);
+      });
     }
     case 'addConnection':
-      return applyOp(editor, blockId, (d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
+      return apply((d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
     case 'removeConnection':
-      return applyOp(editor, blockId, (d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
+      return apply((d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
     case 'renameNode':
-      return applyOp(editor, blockId, (d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
+      return apply((d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
     case 'addNode': {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
-      return applyOp(editor, blockId, (d) => addNodeOp(d, { col, row }).diagram);
+      return apply((d) => addNodeOp(d, { col, row }).diagram);
     }
     case 'removeNode':
-      return applyOp(editor, blockId, (d) => removeNodeOp(d, cmd.nodeId));
+      return apply((d) => removeNodeOp(d, cmd.nodeId));
   }
   const _exhaustive: never = cmd;
   void _exhaustive;

package/src/asciiDiagram/asciiDiagramData.ts

@@ -18,6 +18,16 @@ import {
 } from '@bendyline/squisq/doc';
 import type { DiagramEdge, DiagramNode } from '../diagram/types';
 import { findAsciiDiagramBlockPos, parseAsciiDiagramForNode } from './AsciiDiagramExtension';
+import { translateDiagramOp } from './asciiDiagramOps';
+
+/** Persisted grid space reserved north/west of legacy origin-hugging art. */
+export const ASCII_DIAGRAM_GUTTER_COLS = 8;
+export const ASCII_DIAGRAM_GUTTER_ROWS = 2;
+
+export interface AsciiDiagramCanvasOffset {
+  col: number;
+  row: number;
+}
 
 export interface AsciiDiagramView {
   /** Canvas nodes, containers ordered first so their cards paint behind. */
@@ -31,6 +41,29 @@ export interface AsciiDiagramView {
   diagram: AsciiDiagram;
 }
 
+/**
+ * Offset needed to give an existing diagram the same editing gutter as a
+ * newly inserted one. The widget applies this virtually until the first real
+ * canvas edit, which then writes the shifted coordinates into the fence.
+ */
+export function initialAsciiDiagramCanvasOffset(diagram: AsciiDiagram): AsciiDiagramCanvasOffset {
+  if (diagram.nodes.length === 0) return { col: 0, row: 0 };
+  const minCol = Math.min(...diagram.nodes.map((node) => node.col));
+  const minRow = Math.min(...diagram.nodes.map((node) => node.row));
+  return {
+    col: Math.max(0, ASCII_DIAGRAM_GUTTER_COLS - minCol),
+    row: Math.max(0, ASCII_DIAGRAM_GUTTER_ROWS - minRow),
+  };
+}
+
+/** Apply a canvas-only origin offset to a parsed grid model. */
+export function offsetAsciiDiagram(
+  diagram: AsciiDiagram,
+  offset: AsciiDiagramCanvasOffset,
+): AsciiDiagram {
+  return translateDiagramOp(diagram, offset.col, offset.row);
+}
+
 /** Grid model → canvas model, containers-first for paint order. */
 export function asciiDiagramToCanvas(
   diagram: AsciiDiagram,

package/src/asciiDiagram/asciiDiagramOps.ts

@@ -40,6 +40,25 @@ function descendantsOf(diagram: AsciiDiagram, nodeId: string): Set<string> {
   return out;
 }
 
+/** Translate every node by the same grid delta (edges/containment are unchanged). */
+export function translateDiagramOp(
+  diagram: AsciiDiagram,
+  dCol: number,
+  dRow: number,
+): AsciiDiagram {
+  const colDelta = Math.round(dCol);
+  const rowDelta = Math.round(dRow);
+  if (colDelta === 0 && rowDelta === 0) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((node) => ({
+      ...node,
+      col: Math.max(0, node.col + colDelta),
+      row: Math.max(0, node.row + rowDelta),
+    })),
+  };
+}
+
 /** Move a node to (col, row); a container drags its whole subtree along. */
 export function moveNodeOp(
   diagram: AsciiDiagram,

package/src/buildPreviewDoc.ts

@@ -44,6 +44,9 @@ function extractBodyText(contents: MarkdownBlockNode[] | undefined): string {
   if (!contents || contents.length === 0) return '';
   const parts: string[] = [];
   for (const node of contents) {
+    // Mermaid fences are visual source, not narrative copy. They stay on the
+    // slide as `contents` and materialize into Mermaid layers downstream.
+    if (node.type === 'code' && node.lang?.trim().toLowerCase() === 'mermaid') continue;
     parts.push(extractRichText(node));
   }
   return parts.join('\n').trim();
@@ -247,13 +250,12 @@ function blockToSlide(
     // block has no previous slide to transition in from.
     transition: block.transition ?? (index > 0 ? { type: 'fade', duration: 0.5 } : undefined),
     title: headingText,
-    // Custom templates need access to the source block's body content
-    // + children so their token resolver (`{content}`, `{children}`,
-    // `{image:N}`) substitutes against the user's prose, not just the
-    // heading. Built-in templates don't read these fields and risk
-    // surprising overlap with their typed inputs, so we only attach
-    // them when the slide actually maps to a custom template.
-    ...(isCustomTemplate && block.contents ? { contents: block.contents } : {}),
+    // Preserve body nodes on every slide. Built-in templates ignore this
+    // structural field, while the canonical materializer uses it to retain
+    // authored rich elements (Mermaid fences today; other media can follow)
+    // independently of the selected visual template.
+    ...(block.contents ? { contents: block.contents } : {}),
+    // Custom templates additionally consume child blocks through tokens.
     ...(isCustomTemplate && block.children ? { children: block.children } : {}),
     ...defaults,
     ...extraFields,

package/src/codeContext/types.ts

@@ -56,7 +56,7 @@ export interface CodeContext {
   /** Line-anchored sections. Array order is preserved for equal lines. */
   sections?: CodeContextSection[];
   /**
-   * Extra URI schemes section links may use (e.g. `['gezel-nav']`).
+   * Extra URI schemes section links may use (e.g. `['workspace-nav']`).
    * http/https/mailto/tel are always allowed; executable schemes
    * (javascript:, data:) are never allowed regardless.
    */

package/src/codeSnippet/CodeSnippetExtension.ts

@@ -0,0 +1,205 @@
+/**
+ * Tiptap extension for ordinary explicit-language code fences.
+ *
+ * The ProseMirror code block remains authoritative. This plugin hides it and
+ * mounts a Monaco editor whose edits rewrite only the node's text content, so
+ * fence language and source round-trip through Markdown without a parallel model.
+ */
+
+import { Extension } from '@tiptap/core';
+import type { Node as PMNode } from '@tiptap/pm/model';
+import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import type { Editor } from '@tiptap/react';
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { CodeSnippetWidget } from './CodeSnippetWidget';
+import { isCodeSnippetFenceLanguage } from './codeSnippetLanguages';
+
+export interface CodeSnippetBlockEntry {
+  /** Synthetic session id, stable while this code block remains in the doc. */
+  id: string;
+  /** Current ProseMirror position of the `codeBlock`. */
+  pos: number;
+}
+
+export interface CodeSnippetPluginState {
+  entries: CodeSnippetBlockEntry[];
+  decorations: DecorationSet;
+  seq: number;
+}
+
+export interface CodeSnippetExtensionOptions {
+  /** When false, leave all ordinary language-tagged fences as code blocks. */
+  enabled?: boolean;
+}
+
+export const CODE_SNIPPET_KEY = new PluginKey<CodeSnippetPluginState>('squisq-code-snippet');
+
+export function isCodeSnippetNode(node: PMNode): boolean {
+  const language = (node.attrs as { language?: unknown }).language;
+  return (
+    node.type.name === 'codeBlock' &&
+    isCodeSnippetFenceLanguage(typeof language === 'string' ? language : null)
+  );
+}
+
+export function findCodeSnippetBlockPos(editor: Editor, blockId: string): number | null {
+  const state = CODE_SNIPPET_KEY.getState(editor.state);
+  return state?.entries.find((entry) => entry.id === blockId)?.pos ?? null;
+}
+
+interface WidgetRootRef {
+  root: Root;
+}
+
+function buildDecorations(
+  doc: PMNode,
+  entries: readonly CodeSnippetBlockEntry[],
+  editor: Editor,
+): DecorationSet {
+  const decorations: Decoration[] = [];
+  for (const entry of entries) {
+    const node = doc.nodeAt(entry.pos);
+    if (!node || !isCodeSnippetNode(node)) continue;
+    decorations.push(
+      Decoration.node(entry.pos, entry.pos + node.nodeSize, {
+        class: 'squisq-code-snippet-fence-hidden',
+      }),
+    );
+    const blockId = entry.id;
+    decorations.push(
+      Decoration.widget(
+        entry.pos + node.nodeSize,
+        (view) => {
+          const container = document.createElement('div');
+          container.className = 'squisq-code-snippet-widget-host';
+          container.contentEditable = 'false';
+          container.addEventListener('mousedown', (event) => event.stopPropagation());
+          container.addEventListener('keydown', (event) => event.stopPropagation());
+          const root = createRoot(container);
+          root.render(
+            createElement(CodeSnippetWidget, {
+              editor,
+              blockId,
+              host: view.dom.parentElement ?? view.dom,
+            }),
+          );
+          (
+            container as HTMLElement & { __squisqCodeSnippetRoot?: WidgetRootRef }
+          ).__squisqCodeSnippetRoot = { root };
+          return container;
+        },
+        {
+          destroy: (dom) => {
+            const ref = (dom as HTMLElement & { __squisqCodeSnippetRoot?: WidgetRootRef })
+              .__squisqCodeSnippetRoot;
+            if (ref) setTimeout(() => ref.root.unmount(), 0);
+          },
+          ignoreSelection: true,
+          key: `squisq-code-snippet-${entry.id}`,
+          side: 1,
+        },
+      ),
+    );
+  }
+  return DecorationSet.create(doc, decorations);
+}
+
+function remapEntries(
+  tr: Transaction,
+  previous: CodeSnippetPluginState,
+  doc: PMNode,
+): { entries: CodeSnippetBlockEntry[]; seq: number } {
+  const mapped = new Map<number, string>();
+  const claimed = new Set<string>();
+
+  for (const entry of previous.entries) {
+    const result = tr.mapping.mapResult(entry.pos, 1);
+    if (!result.deleted) {
+      mapped.set(result.pos, entry.id);
+      claimed.add(entry.id);
+    }
+  }
+
+  // Replacing node content can mark its opening token as replaced even though
+  // the same language-tagged code block still occupies the mapped position.
+  for (const entry of previous.entries) {
+    if (claimed.has(entry.id)) continue;
+    const result = tr.mapping.mapResult(entry.pos, 1);
+    if (mapped.has(result.pos)) continue;
+    if (doc.nodeAt(result.pos)?.type.name === 'codeBlock') {
+      mapped.set(result.pos, entry.id);
+      claimed.add(entry.id);
+    }
+  }
+
+  let seq = previous.seq;
+  const entries: CodeSnippetBlockEntry[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name !== 'codeBlock') return;
+    if (!isCodeSnippetNode(node)) return false;
+    entries.push({ id: mapped.get(pos) ?? `code-snippet-${++seq}`, pos });
+    return false;
+  });
+  return { entries, seq };
+}
+
+function applyState(
+  tr: Transaction,
+  previous: CodeSnippetPluginState,
+  editor: Editor,
+  doc: PMNode,
+): CodeSnippetPluginState {
+  if (!tr.docChanged) return previous;
+  const { entries, seq } = remapEntries(tr, previous, doc);
+  return {
+    entries,
+    seq,
+    decorations: buildDecorations(doc, entries, editor),
+  };
+}
+
+export const CodeSnippetExtension = Extension.create<CodeSnippetExtensionOptions>({
+  name: 'squisqCodeSnippet',
+
+  addOptions() {
+    return { enabled: true };
+  },
+
+  addProseMirrorPlugins() {
+    if (this.options.enabled === false) return [];
+    const editor = this.editor as Editor;
+    return [
+      new Plugin<CodeSnippetPluginState>({
+        key: CODE_SNIPPET_KEY,
+        state: {
+          init: (_config, state) => {
+            let seq = 0;
+            const entries: CodeSnippetBlockEntry[] = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== 'codeBlock') return;
+              if (!isCodeSnippetNode(node)) return false;
+              entries.push({ id: `code-snippet-${++seq}`, pos });
+              return false;
+            });
+            return {
+              entries,
+              seq,
+              decorations: buildDecorations(state.doc, entries, editor),
+            };
+          },
+          apply: (tr, previous, _oldState, newState) =>
+            applyState(tr, previous, editor, newState.doc),
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default CodeSnippetExtension;