@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/__tests__/viewMenuPanel.test.tsx

@@ -0,0 +1,130 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  EditorProvider,
+  useEditorContext,
+  type BlockTagVisibility,
+  type ViewPreferences,
+} from '../EditorContext';
+import { ViewMenuPanel } from '../ViewMenuPanel';
+
+afterEach(cleanup);
+
+function BlockTagVisibilityProbe() {
+  const { blockTagVisibility } = useEditorContext();
+  return <output data-testid="block-tag-visibility">{blockTagVisibility}</output>;
+}
+
+function renderViewMenu({
+  blockTags,
+  blockTagVisibility,
+  viewPreferences,
+  onViewPreferencesChange,
+}: {
+  blockTags?: boolean;
+  blockTagVisibility?: BlockTagVisibility;
+  viewPreferences?: ViewPreferences;
+  onViewPreferencesChange?: (preferences: ViewPreferences) => void;
+} = {}) {
+  render(
+    <EditorProvider
+      initialMarkdown="# One\n\nFirst block.\n\n## Two\n\nSecond block.\n"
+      initialView="wysiwyg"
+      blockTags={blockTags}
+      blockTagVisibility={blockTagVisibility}
+      viewPreferences={viewPreferences}
+      onViewPreferencesChange={onViewPreferencesChange}
+    >
+      <ViewMenuPanel />
+      <BlockTagVisibilityProbe />
+    </EditorProvider>,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: 'View options' }));
+  return screen.getByRole('radiogroup', { name: 'Show block tags' });
+}
+
+describe('ViewMenuPanel block-tag visibility', () => {
+  it('offers the three visibility choices and defaults to the selected/hovered block', () => {
+    const group = renderViewMenu();
+
+    const items = within(group).getAllByRole('menuitemradio');
+    expect(items.map((item) => item.textContent?.trim())).toEqual([
+      'No inline block tags',
+      'Selected/hovered block',
+      'Always show',
+    ]);
+    expect(
+      within(group)
+        .getByRole('menuitemradio', { name: 'Selected/hovered block' })
+        .getAttribute('aria-checked'),
+    ).toBe('true');
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('active');
+  });
+
+  it('switches to active and none and emits both new and legacy preferences', () => {
+    const onViewPreferencesChange = vi.fn<(preferences: ViewPreferences) => void>();
+    const group = renderViewMenu({ onViewPreferencesChange });
+
+    fireEvent.click(within(group).getByRole('menuitemradio', { name: 'Always show' }));
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('always');
+
+    fireEvent.click(within(group).getByRole('menuitemradio', { name: 'Selected/hovered block' }));
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('active');
+    expect(onViewPreferencesChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        blockTagVisibility: 'active',
+        blockTags: true,
+      }),
+    );
+
+    fireEvent.click(within(group).getByRole('menuitemradio', { name: 'No inline block tags' }));
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('none');
+    expect(onViewPreferencesChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        blockTagVisibility: 'none',
+        blockTags: false,
+      }),
+    );
+  });
+
+  it('maps the legacy blockTags={false} prop to no inline block tags', () => {
+    const group = renderViewMenu({ blockTags: false });
+
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('none');
+    expect(
+      within(group)
+        .getByRole('menuitemradio', { name: 'No inline block tags' })
+        .getAttribute('aria-checked'),
+    ).toBe('true');
+  });
+
+  it('maps the legacy blockTags={true} prop to always show', () => {
+    const group = renderViewMenu({ blockTags: true });
+
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('always');
+    expect(
+      within(group)
+        .getByRole('menuitemradio', { name: 'Always show' })
+        .getAttribute('aria-checked'),
+    ).toBe('true');
+  });
+
+  it('restores the active mode from bundled view preferences', () => {
+    const group = renderViewMenu({
+      blockTags: false,
+      blockTagVisibility: 'always',
+      viewPreferences: { blockTags: false, blockTagVisibility: 'active' },
+    });
+
+    expect(screen.getByTestId('block-tag-visibility').textContent).toBe('active');
+    expect(
+      within(group)
+        .getByRole('menuitemradio', { name: 'Selected/hovered block' })
+        .getAttribute('aria-checked'),
+    ).toBe('true');
+  });
+});

package/src/__tests__/wysiwygImageUpload.test.ts

@@ -0,0 +1,69 @@
+import { Schema } from '@tiptap/pm/model';
+import { EditorState, TextSelection } from '@tiptap/pm/state';
+import { describe, expect, it, vi } from 'vitest';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { uploadAndInsertImages } from '../wysiwygImageUpload';
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: 'paragraph+' },
+    paragraph: { content: 'inline*', group: 'block' },
+    text: { group: 'inline' },
+    image: {
+      inline: true,
+      group: 'inline',
+      atom: true,
+      attrs: {
+        src: {},
+        alt: { default: null },
+        title: { default: null },
+      },
+    },
+  },
+});
+
+describe('asynchronous WYSIWYG image upload', () => {
+  it('replaces a mapped placeholder instead of the user’s later selection', async () => {
+    const doc = schema.node('doc', null, [
+      schema.node('paragraph', null, schema.text('before after')),
+    ]);
+    let state = EditorState.create({
+      schema,
+      doc,
+      selection: TextSelection.create(doc, 8),
+    });
+    const view = {
+      get state() {
+        return state;
+      },
+      dispatch(tr: typeof state.tr) {
+        state = state.apply(tr);
+      },
+    };
+    let finishUpload!: (path: string) => void;
+    const upload = new Promise<string>((resolve) => {
+      finishUpload = resolve;
+    });
+    const provider = {
+      addMedia: vi.fn(() => upload),
+    } as unknown as MediaProvider;
+    const file = {
+      name: 'photo.png',
+      type: 'image/png',
+      arrayBuffer: async () => new Uint8Array([1]).buffer,
+    } as File;
+
+    const pending = uploadAndInsertImages(view, [file], provider);
+    // Keep editing elsewhere while storage is pending.
+    view.dispatch(state.tr.insertText(' tail', state.doc.content.size - 1));
+    finishUpload('assets/photo.png');
+    await pending;
+
+    const paragraph = state.doc.firstChild!;
+    expect(paragraph.childCount).toBe(3);
+    expect(paragraph.child(0).text).toBe('before ');
+    expect(paragraph.child(1).type.name).toBe('image');
+    expect(paragraph.child(1).attrs.src).toBe('assets/photo.png');
+    expect(paragraph.child(2).text).toBe('after tail');
+  });
+});

package/src/__tests__/wysiwygTemplateBadgeFocus.test.tsx

@@ -0,0 +1,56 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { EditorProvider } from '../EditorContext';
+import { WysiwygEditor } from '../WysiwygEditor';
+
+const originalElementsFromPoint = document.elementsFromPoint;
+const originalElementFromPoint = document.elementFromPoint;
+
+beforeEach(() => {
+  Object.defineProperty(document, 'elementsFromPoint', {
+    configurable: true,
+    value: () => [],
+  });
+  Object.defineProperty(document, 'elementFromPoint', {
+    configurable: true,
+    value: () => null,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  Object.defineProperty(document, 'elementsFromPoint', {
+    configurable: true,
+    value: originalElementsFromPoint,
+  });
+  Object.defineProperty(document, 'elementFromPoint', {
+    configurable: true,
+    value: originalElementFromPoint,
+  });
+});
+
+describe('WysiwygEditor inline block-type picker focus', () => {
+  it('restores document focus after choosing a block type', async () => {
+    render(
+      <EditorProvider
+        initialMarkdown={'# Heading {[title]}\n\nBody text.\n'}
+        initialView="wysiwyg"
+        blockTagVisibility="always"
+      >
+        <WysiwygEditor />
+      </EditorProvider>,
+    );
+
+    const editor = await screen.findByTestId('wysiwyg-editor');
+    const badge = await screen.findByTitle('Change block type');
+    fireEvent.mouseDown(badge);
+
+    const search = await screen.findByRole('searchbox', { name: 'Search block types' });
+    await waitFor(() => expect(document.activeElement).toBe(search));
+
+    fireEvent.click(screen.getByRole('option', { name: /^Quote\b/ }));
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(editor));
+  });
+});

package/src/asciiDiagram/AsciiDiagramExtension.ts

@@ -0,0 +1,343 @@
+/**
+ * AsciiDiagramExtension — Tiptap/ProseMirror plugin that turns code blocks
+ * containing ASCII box-and-line diagrams into interactive diagram canvases.
+ *
+ * The FENCE TEXT REMAINS THE SOURCE OF TRUTH: the plugin never converts
+ * the document. For each qualifying codeBlock it:
+ * 1. hides the `<pre>` via a node decoration (or tags it visible-monospace
+ *    when the user toggles "source" mode), and
+ * 2. mounts an `AsciiDiagramWidget` after it via a widget decoration.
+ *
+ * Identity: codeBlocks have no persisted id and their content changes on
+ * every canvas edit (self-inflicted fence rewrite), so neither a content
+ * hash nor a raw position can key the widget. Instead the plugin keeps a
+ * POSITION REGISTRY in its state: each qualifying block gets a synthetic
+ * session id (`ascii-N`); on every doc change old positions are remapped
+ * through `tr.mapping` and matched against the new doc walk. Same id →
+ * same widget decoration key → ProseMirror keeps the DOM + React root
+ * alive (pan/zoom survives), exactly like the heading-key trick the
+ * legacy DiagramExtension used.
+ *
+ * Hysteresis: a NEW block must pass full detection (`detectAsciiDiagram`,
+ * ≥2 boxes + thresholds); an already-registered block stays interactive
+ * while its fence still parses to ≥1 box, so deleting down to one node
+ * doesn't kick the user back to a raw code block mid-edit.
+ */
+
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import type { Transaction } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import type { Node as PMNode } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
+import { createRoot, type Root } from 'react-dom/client';
+import { createElement } from 'react';
+import {
+  detectAsciiDiagram,
+  isEligibleAsciiFenceLang,
+  isExplicitDiagramLang,
+  parseAsciiDiagram,
+  type AsciiDiagram,
+} from '@bendyline/squisq/doc';
+import { AsciiDiagramWidget } from './AsciiDiagramWidget';
+import type { SceneTextChannel } from '../scene/text/sceneTextChannel';
+
+export interface AsciiDiagramBlockEntry {
+  /** Synthetic session id (`ascii-N`), stable across edits for one block. */
+  id: string;
+  /** Document position of the codeBlock node at the current state. */
+  pos: number;
+}
+
+export interface AsciiDiagramPluginState {
+  entries: AsciiDiagramBlockEntry[];
+  decorations: DecorationSet;
+  sourceVisible: ReadonlySet<string>;
+  /** Monotonic id allocator. */
+  seq: number;
+}
+
+export const ASCII_DIAGRAM_KEY = new PluginKey<AsciiDiagramPluginState>('squisq-ascii-diagram');
+
+// ---------------------------------------------------------------------------
+// Gate caches — keyed on the PMNode instance. ProseMirror's structural
+// sharing reuses node objects for unchanged blocks, so only an actually
+// edited fence re-runs detection/parsing.
+// ---------------------------------------------------------------------------
+
+const detectCache = new WeakMap<PMNode, AsciiDiagram | null>();
+const parseCache = new WeakMap<PMNode, AsciiDiagram | null>();
+
+function fenceLangOf(node: PMNode): string | null {
+  const lang = (node.attrs as { language?: string | null }).language;
+  return typeof lang === 'string' ? lang : null;
+}
+
+/** Full-detection gate for NEW blocks: lang allowlist + content thresholds. */
+export function getAsciiDiagramForNode(node: PMNode): AsciiDiagram | null {
+  if (node.type.name !== 'codeBlock') return null;
+  const cached = detectCache.get(node);
+  if (cached !== undefined) return cached;
+  let result: AsciiDiagram | null = null;
+  const lang = fenceLangOf(node);
+  if (isEligibleAsciiFenceLang(lang)) {
+    const detection = detectAsciiDiagram(node.textContent, {
+      explicit: isExplicitDiagramLang(lang),
+    });
+    if (detection.isDiagram && detection.diagram) {
+      result = detection.diagram;
+      parseCache.set(node, result);
+    }
+  }
+  detectCache.set(node, result);
+  return result;
+}
+
+/** Box-drawing corners/junctions/verticals leaking into a label = a garbled parse. */
+const GARBLED_LABEL = /[│┃║┌┐└┘├┤┬┴┼╭╮╰╯┏┓┗┛╔╗╚╝┣┫┳┻╋╠╣╦╩╬]/;
+
+/**
+ * Relaxed gate for ALREADY-REGISTERED blocks: any parse with ≥1 box, so
+ * editing a diagram down doesn't kick the user out mid-edit. But a GARBLED
+ * parse (box-drawing chars leaked into labels — the desync signature of
+ * broken art) is never a valid diagram; rejecting it here keeps a broken
+ * fence from being held as a diagram by hysteresis (e.g. after undoing a
+ * repair, where the fence reverts to broken art the RepairableExtension owns).
+ */
+export function parseAsciiDiagramForNode(node: PMNode): AsciiDiagram | null {
+  if (node.type.name !== 'codeBlock') return null;
+  const cached = parseCache.get(node);
+  if (cached !== undefined) return cached;
+  let result: AsciiDiagram | null = null;
+  if (isEligibleAsciiFenceLang(fenceLangOf(node))) {
+    const parsed = parseAsciiDiagram(node.textContent);
+    if (parsed.nodes.length > 0 && !parsed.nodes.some((n) => GARBLED_LABEL.test(n.label))) {
+      result = parsed;
+    }
+  }
+  parseCache.set(node, result);
+  return result;
+}
+
+/** Resolve a registered block's current doc position (null when gone). */
+export function findAsciiDiagramBlockPos(editor: Editor, blockId: string): number | null {
+  const state = ASCII_DIAGRAM_KEY.getState(editor.state);
+  return state?.entries.find((e) => e.id === blockId)?.pos ?? null;
+}
+
+export function isAsciiSourceVisible(editor: Editor, blockId: string): boolean {
+  const state = ASCII_DIAGRAM_KEY.getState(editor.state);
+  return state?.sourceVisible.has(blockId) ?? false;
+}
+
+/** Toggle the raw-fence view for one diagram block (meta-only transaction). */
+export function toggleAsciiSource(editor: Editor, blockId: string): void {
+  const tr = editor.state.tr.setMeta(ASCII_DIAGRAM_KEY, { toggleSource: blockId });
+  editor.view.dispatch(tr);
+}
+
+// ---------------------------------------------------------------------------
+// Plugin state
+// ---------------------------------------------------------------------------
+
+interface WidgetRootRef {
+  root: Root;
+}
+
+function buildDecorations(
+  doc: PMNode,
+  entries: AsciiDiagramBlockEntry[],
+  sourceVisible: ReadonlySet<string>,
+  editor: Editor,
+  textChannel?: SceneTextChannel,
+): DecorationSet {
+  const decos: Decoration[] = [];
+  for (const entry of entries) {
+    const node = doc.nodeAt(entry.pos);
+    if (!node || node.type.name !== 'codeBlock') continue;
+    const cls = sourceVisible.has(entry.id)
+      ? 'squisq-ascii-fence-source'
+      : 'squisq-ascii-fence-hidden';
+    decos.push(Decoration.node(entry.pos, entry.pos + node.nodeSize, { class: cls }));
+    const blockId = entry.id;
+    const fallbackPos = entry.pos;
+    decos.push(
+      Decoration.widget(
+        entry.pos + node.nodeSize,
+        (view) => {
+          const container = document.createElement('div');
+          container.className = 'squisq-ascii-diagram-widget-host';
+          container.contentEditable = 'false';
+          // Keep ProseMirror from treating clicks/keys inside the widget
+          // as document interactions.
+          container.addEventListener('mousedown', (e) => e.stopPropagation());
+          container.addEventListener('keydown', (e) => e.stopPropagation());
+          const root = createRoot(container);
+          root.render(
+            createElement(AsciiDiagramWidget, {
+              editor,
+              blockId,
+              fallbackPos,
+              host: view.dom.parentElement ?? view.dom,
+              textChannel,
+            }),
+          );
+          (container as HTMLElement & { __squisqAsciiRoot?: WidgetRootRef }).__squisqAsciiRoot = {
+            root,
+          };
+          return container;
+        },
+        {
+          destroy: (dom) => {
+            const ref = (dom as HTMLElement & { __squisqAsciiRoot?: WidgetRootRef })
+              .__squisqAsciiRoot;
+            // Defer so React isn't unmounted mid-render.
+            if (ref) setTimeout(() => ref.root.unmount(), 0);
+          },
+          side: 1,
+          ignoreSelection: true,
+          key: `squisq-ascii-${entry.id}`,
+        },
+      ),
+    );
+  }
+  return DecorationSet.create(doc, decos);
+}
+
+function applyState(
+  tr: Transaction,
+  prev: AsciiDiagramPluginState,
+  editor: Editor,
+  doc: PMNode,
+  textChannel?: SceneTextChannel,
+): AsciiDiagramPluginState {
+  const meta = tr.getMeta(ASCII_DIAGRAM_KEY) as { toggleSource?: string } | undefined;
+  let sourceVisible = prev.sourceVisible;
+  if (meta?.toggleSource) {
+    const next = new Set(sourceVisible);
+    if (next.has(meta.toggleSource)) next.delete(meta.toggleSource);
+    else next.add(meta.toggleSource);
+    sourceVisible = next;
+  }
+
+  if (!tr.docChanged) {
+    if (!meta?.toggleSource) return prev;
+    return {
+      ...prev,
+      sourceVisible,
+      decorations: buildDecorations(doc, prev.entries, sourceVisible, editor, textChannel),
+    };
+  }
+
+  // Doc changed: remap known positions (bias 1 so an insertion exactly at
+  // the block's start shifts the tracked position forward WITH the node),
+  // then walk the new doc and reconcile.
+  const mapped = new Map<number, string>();
+  const claimed = new Set<string>();
+  // Pass 1: survivors whose start position wasn't touched.
+  for (const entry of prev.entries) {
+    const result = tr.mapping.mapResult(entry.pos, 1);
+    if (!result.deleted) {
+      mapped.set(result.pos, entry.id);
+      claimed.add(entry.id);
+    }
+  }
+  // Pass 2: boundary-churn survivors. An attrs-only `setNodeMarkup` (the
+  // language-promotion step) rewrites the codeBlock's opening token, so
+  // `mapResult` reports the start as `deleted` even though the block is still
+  // there. Adopt the old id when a codeBlock still sits at the mapped position
+  // and that slot isn't already claimed — this keeps the widget's React root
+  // (pan/zoom) alive across the one-time promotion, instead of remounting.
+  for (const entry of prev.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 = prev.seq;
+  const entries: AsciiDiagramBlockEntry[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name !== 'codeBlock') return;
+    const knownId = mapped.get(pos);
+    // Hysteresis: known blocks stay while they parse at all; new blocks
+    // must pass full detection.
+    const diagram = knownId ? parseAsciiDiagramForNode(node) : getAsciiDiagramForNode(node);
+    if (!diagram) return false;
+    entries.push({ id: knownId ?? `ascii-${++seq}`, pos });
+    return false;
+  });
+
+  const liveIds = new Set(entries.map((e) => e.id));
+  const prunedSourceVisible = new Set([...sourceVisible].filter((id) => liveIds.has(id)));
+
+  return {
+    entries,
+    seq,
+    sourceVisible: prunedSourceVisible,
+    decorations: buildDecorations(doc, entries, prunedSourceVisible, editor, textChannel),
+  };
+}
+
+export interface AsciiDiagramExtensionOptions {
+  /** When false, the extension is inert (no widgets, no decorations). */
+  enabled?: boolean;
+  textChannel?: SceneTextChannel;
+}
+
+export const AsciiDiagramExtension = Extension.create<AsciiDiagramExtensionOptions>({
+  name: 'squisqAsciiDiagram',
+
+  addOptions() {
+    return {
+      enabled: true,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor as Editor;
+    if (this.options.enabled === false) return [];
+
+    return [
+      new Plugin<AsciiDiagramPluginState>({
+        key: ASCII_DIAGRAM_KEY,
+        state: {
+          init: (_config, state) => {
+            let seq = 0;
+            const entries: AsciiDiagramBlockEntry[] = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== 'codeBlock') return;
+              if (!getAsciiDiagramForNode(node)) return false;
+              entries.push({ id: `ascii-${++seq}`, pos });
+              return false;
+            });
+            return {
+              entries,
+              seq,
+              sourceVisible: new Set<string>(),
+              decorations: buildDecorations(
+                state.doc,
+                entries,
+                new Set(),
+                editor,
+                this.options.textChannel,
+              ),
+            };
+          },
+          apply: (tr, prev, _oldState, newState) =>
+            applyState(tr, prev, editor, newState.doc, this.options.textChannel),
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default AsciiDiagramExtension;