@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/treeview/treeOps.ts

@@ -0,0 +1,231 @@
+/**
+ * Pure outline operations over the tree model — the write-direction half of
+ * the fence-is-source-of-truth loop:
+ *
+ *   fence text → parseTree → op → renderTree → fence text
+ *
+ * Every op returns a NEW Tree (inputs untouched). These are the genuinely
+ * new operations with no diagram analog: indent / outdent (re-parent a node
+ * carrying its subtree), move-up / move-down (reorder siblings), plus
+ * add / rename / remove / toggle-directory. Connector rails re-derive in
+ * render, so ops only touch structure + labels.
+ */
+
+import type { Tree, TreeNode } from '@bendyline/squisq/doc';
+
+/** Make an arbitrary rename safe as a tree label: no connector glyphs / newlines. */
+export function sanitizeTreeLabel(label: string): string {
+  return label
+    .replace(/[├└│─┃┏┓┗┛┣┫┳┻╋╰╭╮╯|`]/gu, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function cloneNode(n: TreeNode): TreeNode {
+  return {
+    id: n.id,
+    label: n.label,
+    children: n.children.map(cloneNode),
+    ...(n.isDir ? { isDir: true } : {}),
+    ...(n.comment ? { comment: n.comment } : {}),
+  };
+}
+function cloneTree(t: Tree): Tree {
+  return { roots: t.roots.map(cloneNode), style: t.style, warnings: [...t.warnings] };
+}
+
+interface Loc {
+  siblings: TreeNode[];
+  index: number;
+  node: TreeNode;
+  parent: TreeNode | null;
+}
+
+export type TreeDropPosition = 'before' | 'child' | 'after';
+
+/** Locate a node by id in a (cloned) tree, returning its sibling array + index + parent. */
+function locate(roots: TreeNode[], id: string, parent: TreeNode | null = null): Loc | null {
+  for (let i = 0; i < roots.length; i++) {
+    if (roots[i].id === id) return { siblings: roots, index: i, node: roots[i], parent };
+    const inner = locate(roots[i].children, id, roots[i]);
+    if (inner) return inner;
+  }
+  return null;
+}
+
+function markDir(n: TreeNode): void {
+  n.isDir = n.label.endsWith('/') || n.children.length > 0;
+}
+
+function containsNode(node: TreeNode, id: string): boolean {
+  return node.id === id || node.children.some((child) => containsNode(child, id));
+}
+
+export function renameItemOp(tree: Tree, id: string, label: string): Tree {
+  const clean = sanitizeTreeLabel(label);
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || clean.length === 0 || clean === loc.node.label) return tree;
+  loc.node.label = clean;
+  markDir(loc.node);
+  return next;
+}
+
+export function addItemOp(
+  tree: Tree,
+  targetId: string,
+  position: 'child' | 'siblingAfter',
+  label?: string,
+  isDir?: boolean,
+): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, targetId);
+  if (!loc) return tree;
+  let name = sanitizeTreeLabel(label ?? '') || freshLabel(next, isDir);
+  // A folder carries a trailing slash so it re-parses as a directory.
+  if (isDir && !name.endsWith('/')) name += '/';
+  const node: TreeNode = {
+    id: `__new-${name}`,
+    label: name,
+    children: [],
+    ...(isDir ? { isDir: true } : {}),
+  };
+  if (position === 'child') {
+    loc.node.children.push(node);
+    markDir(loc.node);
+  } else {
+    loc.siblings.splice(loc.index + 1, 0, node);
+  }
+  return next;
+}
+
+export function removeItemOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc) return tree;
+  loc.siblings.splice(loc.index, 1);
+  if (loc.parent) markDir(loc.parent);
+  return next;
+}
+
+/** Node becomes the last child of its immediate preceding sibling. */
+export function indentItemOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || loc.index === 0) return tree; // nothing to indent under
+  const [moved] = loc.siblings.splice(loc.index, 1);
+  const newParent = loc.siblings[loc.index - 1];
+  newParent.children.push(moved);
+  markDir(newParent);
+  return next;
+}
+
+/** Node becomes a sibling of its parent, inserted directly after it (subtree carried). */
+export function outdentItemOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || !loc.parent) return tree; // roots can't outdent
+  const grand = locate(next.roots, loc.parent.id);
+  if (!grand) return tree;
+  const [moved] = loc.siblings.splice(loc.index, 1);
+  grand.siblings.splice(grand.index + 1, 0, moved);
+  markDir(loc.parent);
+  return next;
+}
+
+/**
+ * Move a node and its complete subtree relative to any other node. Dropping
+ * before/after adopts the target's parent; dropping as a child appends to the
+ * target. A node can never be moved into its own subtree.
+ */
+export function moveItemOp(
+  tree: Tree,
+  id: string,
+  targetId: string,
+  position: TreeDropPosition,
+): Tree {
+  const currentSource = locate(tree.roots, id);
+  const currentTarget = locate(tree.roots, targetId);
+  if (
+    !currentSource ||
+    !currentTarget ||
+    id === targetId ||
+    containsNode(currentSource.node, targetId)
+  ) {
+    return tree;
+  }
+
+  // Avoid a fence rewrite when the drop describes the node's current slot.
+  if (currentSource.siblings === currentTarget.siblings) {
+    if (position === 'before' && currentSource.index === currentTarget.index - 1) return tree;
+    if (position === 'after' && currentSource.index === currentTarget.index + 1) return tree;
+  }
+  if (
+    position === 'child' &&
+    currentSource.parent?.id === currentTarget.node.id &&
+    currentSource.index === currentSource.siblings.length - 1
+  ) {
+    return tree;
+  }
+
+  const next = cloneTree(tree);
+  const source = locate(next.roots, id);
+  if (!source) return tree;
+  const [moved] = source.siblings.splice(source.index, 1);
+  if (source.parent) markDir(source.parent);
+
+  // Locate again after removal so same-sibling indices are current.
+  const target = locate(next.roots, targetId);
+  if (!target) return tree;
+  if (position === 'child') {
+    target.node.children.push(moved);
+    markDir(target.node);
+  } else {
+    target.siblings.splice(target.index + (position === 'after' ? 1 : 0), 0, moved);
+  }
+  return next;
+}
+
+export function moveItemUpOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || loc.index === 0) return tree;
+  [loc.siblings[loc.index - 1], loc.siblings[loc.index]] = [
+    loc.siblings[loc.index],
+    loc.siblings[loc.index - 1],
+  ];
+  return next;
+}
+
+export function moveItemDownOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || loc.index >= loc.siblings.length - 1) return tree;
+  [loc.siblings[loc.index], loc.siblings[loc.index + 1]] = [
+    loc.siblings[loc.index + 1],
+    loc.siblings[loc.index],
+  ];
+  return next;
+}
+
+/** Toggle the trailing-slash directory marker on a node's label. */
+export function toggleDirOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc) return tree;
+  loc.node.label = loc.node.label.endsWith('/')
+    ? loc.node.label.slice(0, -1)
+    : `${loc.node.label}/`;
+  markDir(loc.node);
+  return next;
+}
+
+function freshLabel(tree: Tree, isDir?: boolean): string {
+  const labels = new Set<string>();
+  const walk = (ns: TreeNode[]): void => ns.forEach((n) => (labels.add(n.label), walk(n.children)));
+  walk(tree.roots);
+  const base = isDir ? 'folder' : 'item';
+  let i = 1;
+  while (labels.has(`${base}${i}`) || labels.has(`${base}${i}/`)) i++;
+  return `${base}${i}`;
+}

package/src/treeview/treePaste.ts

@@ -0,0 +1,13 @@
+/**
+ * Paste gate for bare (unfenced) ASCII tree art. `├──`/`└──` file-tree lines
+ * would otherwise route through the markdown converter and mangle; when this
+ * matches, the paste handler drops the text verbatim into a fresh code block
+ * that the TreeViewExtension picks up as an interactive outline.
+ */
+
+import { detectTree } from '@bendyline/squisq/doc';
+
+export function shouldPasteAsTreeFence(text: string): boolean {
+  if (!text || text.includes('```')) return false;
+  return detectTree(text).isTree;
+}

package/src/treeview/treeViewCommands.ts

@@ -0,0 +1,99 @@
+/**
+ * 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

@@ -0,0 +1,41 @@
+/**
+ * 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/useMonacoLoader.ts

@@ -49,42 +49,19 @@ export function useMonacoLoader(): UseMonacoLoaderResult {
   useEffect(() => {
     if (state.ready) return;
     if (!monacoPromise) {
-      // Import the explicit ESM entry file rather than the bare
-      // package specifier `'monaco-editor'`. The package's
-      // `package.json` has no `main` / no `exports` (only `module`),
-      // which trips Vite's strict resolver on both static and
-      // dynamic imports of the bare name. Pointing at the file
-      // directly — the same path monaco's `module` field points at —
-      // turns this into a regular file-path resolve that doesn't
-      // care about the manifest's entry fields. Works identically
-      // in Vite dev / build, vitest's transform pipeline, and any
-      // bundler-using downstream consumer.
+      // 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.
       //
-      // Use `editor.main.js`, NOT `editor.api.js`. The `api` entry is
-      // the bare standalone API with zero language contributions —
-      // RawEditor's `defaultLanguage="typescript"` then mounts with
-      // no tokenizer registered, and every file renders as
-      // undifferentiated foreground text (the regression that surfaced
-      // when a `.ts` file in the chat workspace previewer showed up
-      // with no syntax coloring). `editor.main.js` re-exports the API
-      // and additionally pulls in `basic-languages/monaco.contribution`
-      // (TM grammars for ~70 languages) plus the four rich language
-      // services (css / html / json / typescript). This is what makes
-      // `defaultLanguage` actually do anything. The cost is the language
-      // bundle — but since we load it lazily on first EditorShell mount,
-      // it stays out of the resolver graph for consumers that only
-      // import types or `JsonEditor` from this package.
-      // `editor.main.js` ships without a sibling `.d.ts` (only
-      // `editor.api.d.ts` is published), so the subpath import has no
-      // resolvable declaration. The `declare module` shim in
-      // `src/types/monaco-shims.d.ts` makes it import as `any`; the
-      // `as unknown as` cast below pins the surface to the full namespace.
-      // At runtime `main` re-exports the entire `editor.api` surface
-      // alongside the language contributions, so the cast is sound.
+      // `./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-editor/esm/vs/editor/editor.main.js') as unknown as Promise<
-          typeof import('monaco-editor')
-        >
+        import('./monaco.js') as unknown as Promise<typeof import('monaco-editor')>
       ).then((m) => {
         loader.config({ monaco: m });
         monacoNamespace = m;

package/src/wysiwygImageUpload.ts

@@ -0,0 +1,113 @@
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import type { EditorView as ProseMirrorView } from '@tiptap/pm/view';
+
+type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
+
+/**
+ * Upload images while stable placeholder nodes retain the original event
+ * position as the surrounding ProseMirror document continues to change.
+ */
+export async function uploadAndInsertImages(
+  view: ImageMutationView,
+  files: File[],
+  mediaProvider: MediaProvider,
+  onMediaUploaded?: () => void,
+): Promise<void> {
+  const placeholders = files.map(() => `squisq-upload:${uniquePasteToken()}`);
+  const imageType = view.state.schema.nodes.image;
+  if (!imageType) return;
+
+  let placeholderTr = view.state.tr;
+  for (const token of placeholders) {
+    placeholderTr = placeholderTr.replaceSelectionWith(
+      imageType.create({
+        src: 'data:image/gif;base64,R0lGODlhAQABAAAAACw=',
+        alt: 'Uploading image',
+        title: token,
+      }),
+    );
+  }
+  view.dispatch(placeholderTr);
+
+  for (let index = 0; index < files.length; index++) {
+    const file = files[index];
+    const token = placeholders[index];
+    try {
+      const buffer = await file.arrayBuffer();
+      const mimeType = file.type || 'image/png';
+      const name =
+        file.name && file.name !== 'image.png'
+          ? file.name
+          : `pasted-${uniquePasteToken()}.${extFromMime(mimeType)}`;
+      const relativePath = await mediaProvider.addMedia(name, buffer, mimeType);
+      const altText = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
+      replaceUploadPlaceholder(view, token, relativePath, altText);
+      onMediaUploaded?.();
+    } catch (err) {
+      removeUploadPlaceholder(view, token);
+      console.error('Failed to upload dropped image:', err);
+    }
+  }
+}
+
+function findUploadPlaceholder(
+  view: ImageMutationView,
+  token: string,
+): { pos: number; node: ProseMirrorNode } | null {
+  let found: { pos: number; node: ProseMirrorNode } | null = null;
+  view.state.doc.descendants((node, pos) => {
+    if (node.type === view.state.schema.nodes.image && node.attrs.title === token) {
+      found = { pos, node };
+      return false;
+    }
+    return undefined;
+  });
+  return found;
+}
+
+function replaceUploadPlaceholder(
+  view: ImageMutationView,
+  token: string,
+  src: string,
+  alt: string,
+): void {
+  const found = findUploadPlaceholder(view, token);
+  if (!found) return;
+  view.dispatch(
+    view.state.tr.setNodeMarkup(found.pos, undefined, {
+      ...found.node.attrs,
+      src,
+      alt,
+      title: null,
+    }),
+  );
+}
+
+function removeUploadPlaceholder(view: ImageMutationView, token: string): void {
+  const found = findUploadPlaceholder(view, token);
+  if (!found) return;
+  view.dispatch(view.state.tr.delete(found.pos, found.pos + found.node.nodeSize));
+}
+
+let pasteCounter = 0;
+function uniquePasteToken(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  pasteCounter = (pasteCounter + 1) % 1_000_000;
+  return `${Date.now()}-${pasteCounter.toString(36)}`;
+}
+
+function extFromMime(mime: string): string {
+  const map: Record<string, string> = {
+    'image/png': 'png',
+    'image/jpeg': 'jpg',
+    'image/jpg': 'jpg',
+    'image/gif': 'gif',
+    'image/webp': 'webp',
+    'image/svg+xml': 'svg',
+    'image/avif': 'avif',
+  };
+  return map[mime.toLowerCase()] ?? 'png';
+}