@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/treeview/treeViewCommands.ts

@@ -1,99 +0,0 @@
-/**
- * Write direction of the tree loop: outline command → fence rewrite.
- *
- * parse → op → render → verify-reparse → single-transaction fence replace
- * (one undo step). Reuses the generic `replaceAsciiFenceText` (it only
- * touches codeBlock text, attributes untouched).
- */
-
-import type { Editor } from '@tiptap/react';
-import { parseTree, renderTree, type Tree } from '@bendyline/squisq/doc';
-import { replaceAsciiFenceText } from '../asciiDiagram/asciiDiagramCommands';
-import { findTreeBlockPos, parseTreeForNode } from './TreeViewExtension';
-import {
-  addItemOp,
-  indentItemOp,
-  moveItemOp,
-  moveItemDownOp,
-  moveItemUpOp,
-  outdentItemOp,
-  removeItemOp,
-  renameItemOp,
-  toggleDirOp,
-  type TreeDropPosition,
-} from './treeOps';
-
-export type TreeCommand =
-  | {
-      kind: 'addItem';
-      targetId: string;
-      position: 'child' | 'siblingAfter';
-      label?: string;
-      isDir?: boolean;
-    }
-  | { kind: 'renameItem'; id: string; label: string }
-  | { kind: 'indentItem'; id: string }
-  | { kind: 'outdentItem'; id: string }
-  | { kind: 'moveItem'; id: string; targetId: string; position: TreeDropPosition }
-  | { kind: 'moveItemUp'; id: string }
-  | { kind: 'moveItemDown'; id: string }
-  | { kind: 'removeItem'; id: string }
-  | { kind: 'toggleDir'; id: string };
-
-/** Re-export so the widget can rewrite raw fence text without a second copy. */
-export { replaceAsciiFenceText as replaceTreeFenceText } from '../asciiDiagram/asciiDiagramCommands';
-
-function countNodes(nodes: readonly Tree['roots'][number][]): number {
-  let n = 0;
-  for (const node of nodes) n += 1 + countNodes(node.children);
-  return n;
-}
-
-function applyOp(editor: Editor, blockId: string, op: (t: Tree) => Tree): boolean {
-  const pos = findTreeBlockPos(editor, blockId);
-  if (pos === null) return false;
-  const node = editor.state.doc.nodeAt(pos);
-  if (!node || node.type.name !== 'codeBlock') return false;
-  const tree = parseTreeForNode(node);
-  if (!tree) return false;
-
-  const next = op(tree);
-  if (next === tree) return false;
-  const rendered = renderTree(next);
-
-  // Verify before committing: the rendered art must re-parse to the same
-  // node count, or we'd write a tree the outline can't read back.
-  if (countNodes(parseTree(rendered).roots) !== countNodes(next.roots)) return false;
-
-  // Promote the fence language to the explicit `tree` tag so this block's
-  // identity survives a later flatten → markdown → re-import round-trip.
-  return replaceAsciiFenceText(editor, pos, rendered, 'tree');
-}
-
-export function applyTreeCommand(editor: Editor, blockId: string, cmd: TreeCommand): boolean {
-  switch (cmd.kind) {
-    case 'addItem':
-      return applyOp(editor, blockId, (t) =>
-        addItemOp(t, cmd.targetId, cmd.position, cmd.label, cmd.isDir),
-      );
-    case 'renameItem':
-      return applyOp(editor, blockId, (t) => renameItemOp(t, cmd.id, cmd.label));
-    case 'indentItem':
-      return applyOp(editor, blockId, (t) => indentItemOp(t, cmd.id));
-    case 'outdentItem':
-      return applyOp(editor, blockId, (t) => outdentItemOp(t, cmd.id));
-    case 'moveItem':
-      return applyOp(editor, blockId, (t) => moveItemOp(t, cmd.id, cmd.targetId, cmd.position));
-    case 'moveItemUp':
-      return applyOp(editor, blockId, (t) => moveItemUpOp(t, cmd.id));
-    case 'moveItemDown':
-      return applyOp(editor, blockId, (t) => moveItemDownOp(t, cmd.id));
-    case 'removeItem':
-      return applyOp(editor, blockId, (t) => removeItemOp(t, cmd.id));
-    case 'toggleDir':
-      return applyOp(editor, blockId, (t) => toggleDirOp(t, cmd.id));
-  }
-  const _exhaustive: never = cmd;
-  void _exhaustive;
-  return false;
-}

package/src/treeview/treeViewData.ts

@@ -1,41 +0,0 @@
-/**
- * Read direction of the tree loop: fence text → outline view.
- *
- * `useTreeViewData` re-derives on every editor transaction; parsing is
- * memoized per PMNode by the extension's WeakMap caches, so untouched
- * fences cost nothing.
- */
-
-import { useEffect, useMemo, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import type { Tree } from '@bendyline/squisq/doc';
-import { findTreeBlockPos, parseTreeForNode } from './TreeViewExtension';
-
-export interface TreeViewData {
-  tree: Tree;
-  text: string;
-  warnings: string[];
-}
-
-/** Live view of one registered tree block; null when it no longer parses. */
-export function useTreeViewData(editor: Editor, blockId: string): TreeViewData | null {
-  const [version, setVersion] = useState(0);
-  useEffect(() => {
-    const onUpdate = () => setVersion((v) => v + 1);
-    editor.on('transaction', onUpdate);
-    return () => {
-      editor.off('transaction', onUpdate);
-    };
-  }, [editor]);
-
-  return useMemo(() => {
-    const pos = findTreeBlockPos(editor, blockId);
-    if (pos === null) return null;
-    const node = editor.state.doc.nodeAt(pos);
-    if (!node || node.type.name !== 'codeBlock') return null;
-    const tree = parseTreeForNode(node);
-    if (!tree) return null;
-    return { tree, text: node.textContent, warnings: tree.warnings };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, blockId, version]);
-}

package/src/types/monaco-shims.d.ts

@@ -1,10 +0,0 @@
-/**
- * Monaco ships `editor.main.js` (the full bundle with language contributions)
- * but only publishes `.d.ts` for `editor.api`. We import the `.main.js`
- * subpath at runtime to register all languages, then cast through
- * `as unknown as typeof import('monaco-editor')` at the call site. This
- * ambient declaration makes the subpath import resolve without a
- * `@ts-expect-error` (which doesn't survive Prettier's formatting choice
- * for the surrounding parenthesized expression — see useMonacoLoader.ts).
- */
-declare module 'monaco-editor/esm/vs/editor/editor.main.js';

package/src/useBlockNavigator.ts

@@ -1,153 +0,0 @@
-/**
- * useBlockNavigator
- *
- * Standalone hook powering the block-at-a-time editing view. Given a
- * `(source, setSource)` pair it slices the markdown into blocks (via
- * `blockRange.ts`), tracks which block is active, and exposes a derived
- * **content channel** (`editorSource` / `setEditorSource`) plus navigation.
- *
- * It depends only on its arguments — no `EditorContext`, no `EditorShell` —
- * so any host (an embedded single-block editor, a chat composer, a review
- * surface) can drive a block-at-a-time UI by calling it directly.
- *
- * When `enabled` is false the channel is an identity passthrough: the editors
- * see and write the full source exactly as before.
- */
-
-import { useCallback, useMemo, useState } from 'react';
-import {
-  getBlockSlices,
-  spliceBlock,
-  lineToOffset,
-  offsetToLine,
-  sliceIndexAtOffset,
-  type BlockSlice,
-} from './blockRange';
-
-export interface BlockNavigator {
-  /** What the bound editor should show: the active slice (block mode) or the full source. */
-  editorSource: string;
-  /** What the bound editor writes through: splices back into the full source (block mode). */
-  setEditorSource: (s: string) => void;
-  /** Number of navigable blocks in the current source. */
-  blockCount: number;
-  /** Index of the active block (clamped into range). */
-  activeBlockKey: number;
-  /** Jump to a block by index (clamped). */
-  goToBlock: (key: number) => void;
-  /**
-   * Select the block that owns a given 1-based source line — used by the
-   * outline, which knows a heading's source line but not its slice index
-   * (slice order includes the optional preamble, so it needn't match
-   * `flattenBlocks` order).
-   */
-  goToBlockByLine: (line: number) => void;
-  /** 1-based source line where the active block begins (for outline highlight). */
-  activeBlockStartLine: number | null;
-  /** Move to the previous block (no-op at the start). */
-  prevBlock: () => void;
-  /** Move to the next block (no-op at the end). */
-  nextBlock: () => void;
-  /** Insert a new heading-defined block after the active one and move to it. */
-  addBlock: () => void;
-}
-
-export interface UseBlockNavigatorOptions {
-  /**
-   * When false (the default), the channel passes through to the full source
-   * and navigation is inert. Hosts flip this on to enter block-at-a-time mode.
-   */
-  enabled?: boolean;
-}
-
-/** Heading inserted by {@link BlockNavigator.addBlock}. */
-const NEW_BLOCK_MARKDOWN = '## New section\n\n';
-
-export function useBlockNavigator(
-  source: string,
-  setSource: (s: string) => void,
-  opts?: UseBlockNavigatorOptions,
-): BlockNavigator {
-  const enabled = opts?.enabled ?? false;
-
-  // Slices are derived straight from the live `source`, not from any
-  // debounced parse, so they're always consistent with what we splice into.
-  const slices = useMemo<BlockSlice[]>(() => getBlockSlices(source), [source]);
-  const blockCount = slices.length;
-
-  const [rawKey, setRawKey] = useState(0);
-  // Effective key is always in range even when the source shrank under us —
-  // the state can lag a re-slice for a render, but derivations never read a
-  // stale/out-of-bounds slice.
-  const activeBlockKey = blockCount === 0 ? 0 : Math.min(Math.max(rawKey, 0), blockCount - 1);
-  const active = slices[activeBlockKey] ?? null;
-
-  const goToBlock = useCallback((key: number) => {
-    setRawKey(key);
-  }, []);
-  const prevBlock = useCallback(() => {
-    setRawKey(activeBlockKey - 1);
-  }, [activeBlockKey]);
-  const nextBlock = useCallback(() => {
-    setRawKey(activeBlockKey + 1);
-  }, [activeBlockKey]);
-  const goToBlockByLine = useCallback(
-    (line: number) => {
-      const offset = lineToOffset(source, line);
-      const idx = sliceIndexAtOffset(slices, offset);
-      if (idx >= 0) setRawKey(idx);
-    },
-    [source, slices],
-  );
-
-  const activeBlockStartLine = active ? offsetToLine(source, active.range.startOffset) : null;
-
-  const editorSource = enabled && active ? active.text : source;
-
-  const setEditorSource = useCallback(
-    (next: string) => {
-      if (!enabled || !active) {
-        setSource(next);
-        return;
-      }
-      // Keep a blank line before the following block's heading so the splice
-      // can't glue the edited block onto the next one (the editor may emit a
-      // slice with no trailing newline).
-      const hasFollowing = active.range.endOffset < source.length;
-      const normalized = hasFollowing ? next.replace(/\s*$/, '') + '\n\n' : next;
-      setSource(spliceBlock(source, active.range, normalized));
-    },
-    [enabled, active, source, setSource],
-  );
-
-  const addBlock = useCallback(() => {
-    if (!active) {
-      // Empty / heading-less doc — append a heading and select it.
-      const base = source.replace(/\s*$/, '');
-      setSource((base ? base + '\n\n' : '') + NEW_BLOCK_MARKDOWN);
-      setRawKey(blockCount); // becomes the new last slice after re-slice
-      return;
-    }
-    const insertAt = active.range.endOffset;
-    const before = source.slice(0, insertAt);
-    const after = source.slice(insertAt);
-    const lead =
-      before === '' || before.endsWith('\n\n') ? '' : before.endsWith('\n') ? '\n' : '\n\n';
-    setSource(before + lead + NEW_BLOCK_MARKDOWN + after);
-    // The new block sits immediately after the active one.
-    setRawKey(activeBlockKey + 1);
-  }, [active, source, setSource, activeBlockKey, blockCount]);
-
-  return {
-    editorSource,
-    setEditorSource,
-    blockCount,
-    activeBlockKey,
-    goToBlock,
-    goToBlockByLine,
-    activeBlockStartLine,
-    prevBlock,
-    nextBlock,
-    addBlock,
-  };
-}

package/src/useHeadingLayout.ts

@@ -1,294 +0,0 @@
-/**
- * useHeadingLayout
- *
- * Shared positioning hook for the editor gutters (`OutlinePanel` and
- * `InlinePreviewGutter`). Each gutter needs to know:
- *   - where every heading sits vertically inside the wrapper
- *   - where the editor "page" edges sit horizontally
- *   - how to scroll the editor to a particular heading
- *
- * Two backends, picked from `EditorContext.activeView`:
- *   - **wysiwyg** — query DOM headings inside `.squisq-wysiwyg-container`,
- *     measure with `getBoundingClientRect`, scroll via `scrollIntoView`.
- *     Live updates via `ResizeObserver` + `MutationObserver`.
- *   - **raw** — walk `doc.blocks`, derive each heading's line number from
- *     `MarkdownHeading.position.start.line`, ask Monaco for the line's
- *     pixel offset via `getTopForLineNumber`, scroll via
- *     `revealLineInCenterIfOutsideViewport` + `setPosition`. Live updates
- *     via `onDidScrollChange` + `onDidChangeModelContent`.
- *
- * Both backends produce coordinates in the *wrapper's* reference frame
- * (i.e., `.squisq-editor-with-gutter`), so the rendering layers — cards,
- * extent bars, outline rows — don't care which editor is active.
- */
-
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import type { RefObject } from 'react';
-import type { Block } from '@bendyline/squisq/schemas';
-import { flattenBlocks, hasTemplate } from '@bendyline/squisq/doc';
-import { useEditorContext } from './EditorContext';
-
-export interface HeadingLayoutEntry {
-  /** The block (heading-rooted unit) this entry represents. */
-  block: Block;
-  /** Heading top, in px relative to the wrapper's top edge. */
-  top: number;
-  /** Where this block ends — the next heading's top, or the editor bottom. */
-  bottom: number;
-  /** True when the heading has a recognised template annotation. */
-  annotated: boolean;
-}
-
-export interface HeadingLayout {
-  /** All headings, in document order. */
-  entries: HeadingLayoutEntry[];
-  /** Editor page's left/right edges, in px relative to the wrapper. */
-  pageEdges: { left: number; right: number } | null;
-  /** Scroll the active editor to bring the block's heading into view. */
-  scrollToBlock: (block: Block) => void;
-  /** True once a measurement has produced numbers (avoids flicker on mount). */
-  ready: boolean;
-}
-
-/**
- * @param refInsideWrapper — any DOM ref under `.squisq-editor-with-gutter`.
- *        The hook walks up to find the wrapper.
- */
-export function useHeadingLayout(refInsideWrapper: RefObject<HTMLElement | null>): HeadingLayout {
-  const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
-
-  const flatBlocks = useMemo(() => (doc ? flattenBlocks(doc.blocks) : []), [doc]);
-
-  const [entries, setEntries] = useState<HeadingLayoutEntry[]>([]);
-  const [pageEdges, setPageEdges] = useState<{ left: number; right: number } | null>(null);
-
-  // ── WYSIWYG backend ────────────────────────────────────────────────
-
-  useEffect(() => {
-    if (activeView !== 'wysiwyg') return;
-    const node = refInsideWrapper.current;
-    if (!node) return;
-    const wrapper = findWrapper(node);
-    if (!wrapper) return;
-    const wysiwygContainer = wrapper.querySelector<HTMLElement>('.squisq-wysiwyg-container');
-    if (!wysiwygContainer) return;
-
-    let raf = 0;
-    const recompute = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        const headings = Array.from(
-          wysiwygContainer.querySelectorAll<HTMLElement>('h1, h2, h3, h4, h5, h6'),
-        );
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const editorRect = wysiwygContainer.getBoundingClientRect();
-        const next: HeadingLayoutEntry[] = [];
-        flatBlocks.forEach((block, i) => {
-          const h = headings[i];
-          if (!h) return;
-          const top = h.getBoundingClientRect().top - wrapperRect.top;
-          const nextH = headings[i + 1];
-          const bottom = nextH
-            ? nextH.getBoundingClientRect().top - wrapperRect.top
-            : editorRect.bottom - wrapperRect.top;
-          next.push({
-            block,
-            top,
-            bottom,
-            annotated: !!h.getAttribute('data-template'),
-          });
-        });
-        setEntries((prev) => (sameEntries(prev, next) ? prev : next));
-
-        // Page edges — anchor to the .squisq-wysiwyg-editor (the centered "page").
-        const page = wysiwygContainer.querySelector<HTMLElement>('.squisq-wysiwyg-editor');
-        if (page) {
-          const pageRect = page.getBoundingClientRect();
-          const left = pageRect.left - wrapperRect.left;
-          const right = pageRect.right - wrapperRect.left;
-          setPageEdges((prev) =>
-            prev != null && Math.abs(prev.left - left) < 0.5 && Math.abs(prev.right - right) < 0.5
-              ? prev
-              : { left, right },
-          );
-        }
-      });
-    };
-
-    recompute();
-    const ro = new ResizeObserver(recompute);
-    ro.observe(wysiwygContainer);
-    const editorSurface = wysiwygContainer.querySelector('.squisq-wysiwyg-editor');
-    if (editorSurface) ro.observe(editorSurface);
-    const mo = new MutationObserver(recompute);
-    mo.observe(wysiwygContainer, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-      attributes: true,
-      attributeFilter: ['data-template', 'data-template-params'],
-    });
-    wysiwygContainer.addEventListener('scroll', recompute, { passive: true });
-    window.addEventListener('resize', recompute);
-    const settle = window.setTimeout(recompute, 250);
-
-    return () => {
-      cancelAnimationFrame(raf);
-      window.clearTimeout(settle);
-      ro.disconnect();
-      mo.disconnect();
-      wysiwygContainer.removeEventListener('scroll', recompute);
-      window.removeEventListener('resize', recompute);
-    };
-  }, [activeView, flatBlocks, refInsideWrapper]);
-
-  // ── Raw (Monaco) backend ───────────────────────────────────────────
-
-  useEffect(() => {
-    if (activeView !== 'raw') return;
-    if (!monacoEditor) return;
-    const node = refInsideWrapper.current;
-    if (!node) return;
-    const wrapper = findWrapper(node);
-    if (!wrapper) return;
-
-    let raf = 0;
-    const recompute = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const monacoRoot = monacoEditor.getDomNode() as HTMLElement | null;
-        if (!monacoRoot) return;
-        const monacoRect = monacoRoot.getBoundingClientRect();
-        // Y of the editor's content top in wrapper coordinates.
-        const monacoTop = monacoRect.top - wrapperRect.top;
-        const scrollTop = monacoEditor.getScrollTop();
-
-        const layoutInfo = monacoEditor.getLayoutInfo();
-        const next: HeadingLayoutEntry[] = [];
-        flatBlocks.forEach((block, i) => {
-          const line = block.sourceHeading?.position?.start.line;
-          if (typeof line !== 'number') return;
-          const lineTop = monacoEditor.getTopForLineNumber(line) - scrollTop + monacoTop;
-          // Bottom = next block's top, or the visible bottom of the editor.
-          const nextBlock = flatBlocks[i + 1];
-          const nextLine = nextBlock?.sourceHeading?.position?.start.line;
-          const bottom =
-            typeof nextLine === 'number'
-              ? monacoEditor.getTopForLineNumber(nextLine) - scrollTop + monacoTop
-              : monacoTop + layoutInfo.height;
-          const tplName = block.sourceHeading?.templateAnnotation?.template;
-          next.push({
-            block,
-            top: lineTop,
-            bottom,
-            annotated: !!tplName && hasTemplate(tplName),
-          });
-        });
-        setEntries((prev) => (sameEntries(prev, next) ? prev : next));
-
-        // Page edges — Monaco's editor area extends to its container's
-        // box edges; treat the whole editor as the "page".
-        const left = monacoRect.left - wrapperRect.left;
-        const right = monacoRect.right - wrapperRect.left;
-        setPageEdges((prev) =>
-          prev != null && Math.abs(prev.left - left) < 0.5 && Math.abs(prev.right - right) < 0.5
-            ? prev
-            : { left, right },
-        );
-      });
-    };
-
-    recompute();
-    const scrollSub = monacoEditor.onDidScrollChange(recompute);
-    const contentSub = monacoEditor.onDidChangeModelContent(recompute);
-    const layoutSub = monacoEditor.onDidLayoutChange(recompute);
-    const ro = new ResizeObserver(recompute);
-    const monacoRoot = monacoEditor.getDomNode();
-    if (monacoRoot) ro.observe(monacoRoot);
-    window.addEventListener('resize', recompute);
-    const settle = window.setTimeout(recompute, 250);
-
-    return () => {
-      cancelAnimationFrame(raf);
-      window.clearTimeout(settle);
-      scrollSub.dispose();
-      contentSub.dispose();
-      layoutSub.dispose();
-      ro.disconnect();
-      window.removeEventListener('resize', recompute);
-    };
-  }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-
-  // Reset edges when the active view changes — the previous view's
-  // measurements don't carry over to the next.
-  useEffect(() => {
-    setEntries([]);
-    setPageEdges(null);
-  }, [activeView]);
-
-  // ── scrollToBlock ──────────────────────────────────────────────────
-
-  const scrollToBlock = useCallback(
-    (block: Block) => {
-      if (activeView === 'wysiwyg') {
-        const node = refInsideWrapper.current;
-        const wrapper = node ? findWrapper(node) : null;
-        const wysiwygContainer = wrapper?.querySelector<HTMLElement>('.squisq-wysiwyg-container');
-        if (!wysiwygContainer) return;
-        const headings = wysiwygContainer.querySelectorAll<HTMLElement>('h1, h2, h3, h4, h5, h6');
-        const index = flatBlocks.findIndex((b) => b.id === block.id);
-        if (index < 0 || index >= headings.length) return;
-        headings[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
-        if (tiptapEditor) {
-          try {
-            tiptapEditor.chain().focus().run();
-          } catch {
-            // ignore
-          }
-        }
-        return;
-      }
-      if (activeView === 'raw' && monacoEditor) {
-        const line = block.sourceHeading?.position?.start.line;
-        if (typeof line !== 'number') return;
-        monacoEditor.revealLineInCenter(line);
-        monacoEditor.setPosition({ lineNumber: line, column: 1 });
-        monacoEditor.focus();
-      }
-    },
-    [activeView, flatBlocks, monacoEditor, refInsideWrapper, tiptapEditor],
-  );
-
-  return {
-    entries,
-    pageEdges,
-    scrollToBlock,
-    ready: entries.length > 0 || pageEdges != null,
-  };
-}
-
-// ── Helpers ────────────────────────────────────────────────────────
-
-function findWrapper(node: HTMLElement): HTMLElement | null {
-  let cur: HTMLElement | null = node.parentElement;
-  while (cur) {
-    if (cur.classList.contains('squisq-editor-with-gutter')) return cur;
-    cur = cur.parentElement;
-  }
-  // Fallback: immediate parent (during transitional renames).
-  return node.parentElement;
-}
-
-function sameEntries(a: HeadingLayoutEntry[], b: HeadingLayoutEntry[]): boolean {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    const x = a[i];
-    const y = b[i];
-    if (x.block.id !== y.block.id) return false;
-    if (x.annotated !== y.annotated) return false;
-    if (Math.abs(x.top - y.top) > 0.5) return false;
-    if (Math.abs(x.bottom - y.bottom) > 0.5) return false;
-  }
-  return true;
-}

package/src/useMonacoLoader.ts

@@ -1,82 +0,0 @@
-/**
- * useMonacoLoader
- *
- * Idempotently dynamic-imports `monaco-editor` and points the
- * `@monaco-editor/react` singleton loader at the bundled copy. Replaces
- * the historical top-of-module `import * as monaco from 'monaco-editor';
- * loader.config({ monaco })` pattern, which forced every consumer of
- * `@bendyline/squisq-editor-react` — including ones that only import
- * `JsonEditor` or a type — to drag in monaco's ~9MB worth of language
- * services and workers at module evaluation time.
- *
- * Hosts that want the smallest possible bundle can keep aliasing
- * `monaco-editor` to a slim entry as before; the behavior is identical
- * once the dynamic import settles.
- *
- * The promise is cached at module scope so the first subscriber
- * anywhere in the app pays the import cost and every later subscriber
- * reuses the same settled value.
- */
-
-import { useEffect, useState } from 'react';
-import { loader } from '@monaco-editor/react';
-
-/** In-flight (or settled) dynamic import shared across all callers. */
-let monacoPromise: Promise<typeof import('monaco-editor')> | null = null;
-
-/** Settled namespace once the promise resolves — read synchronously by mount-time consumers. */
-let monacoNamespace: typeof import('monaco-editor') | null = null;
-
-export interface UseMonacoLoaderResult {
-  /** The monaco namespace once loaded, or `null` while the import is in flight. */
-  monaco: typeof import('monaco-editor') | null;
-  /** Flips to `true` after the import settles. Gate `<Editor>` / `<DiffEditor>` renders on this. */
-  ready: boolean;
-}
-
-/**
- * Subscribe to the lazy-loaded monaco namespace. The first caller
- * triggers `import('monaco-editor')` and configures the
- * `@monaco-editor/react` loader; subsequent callers receive the same
- * cached value.
- */
-export function useMonacoLoader(): UseMonacoLoaderResult {
-  const [state, setState] = useState<UseMonacoLoaderResult>(() => ({
-    monaco: monacoNamespace,
-    ready: monacoNamespace !== null,
-  }));
-
-  useEffect(() => {
-    if (state.ready) return;
-    if (!monacoPromise) {
-      // Load Monaco through squisq's canonical `./monaco` entry (see that
-      // file for exactly which slice of Monaco ships and why). Centralizing
-      // the choice there means the editor and any downstream app that imports
-      // `@bendyline/squisq-editor-react/monaco` share ONE instance and feature
-      // set — no host aliasing, no hand-rolled slim entry that silently drops
-      // the suggest widget. The import is dynamic so consumers that only use
-      // types or `JsonEditor` never pull Monaco into their graph.
-      //
-      // `./monaco` re-exports `editor.api` (the only barrel with a `.d.ts`)
-      // after side-effect-importing `editor.main.js`; the `as unknown as` cast
-      // pins the settled module to the full monaco namespace.
-      monacoPromise = (
-        import('./monaco.js') as unknown as Promise<typeof import('monaco-editor')>
-      ).then((m) => {
-        loader.config({ monaco: m });
-        monacoNamespace = m;
-        return m;
-      });
-    }
-    let cancelled = false;
-    void monacoPromise.then((m) => {
-      if (cancelled) return;
-      setState({ monaco: m, ready: true });
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [state.ready]);
-
-  return state;
-}