@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/src/codeSnippet/codeSnippetLanguages.ts

@@ -0,0 +1,216 @@
+/** Languages offered by the Insert Code Snippet menu and understood by Monaco. */
+
+export interface CodeSnippetLanguage {
+  /** Language written after the opening Markdown fence. */
+  readonly fenceLanguage: string;
+  /** Human-readable picker/header label. */
+  readonly label: string;
+  /** Monaco language id used for syntax highlighting and language services. */
+  readonly monacoLanguage: string;
+  /** Small, immediately editable body inserted for a new snippet. */
+  readonly starter: string;
+}
+
+export const CODE_SNIPPET_LANGUAGES: readonly CodeSnippetLanguage[] = [
+  {
+    fenceLanguage: 'typescript',
+    label: 'TypeScript',
+    monacoLanguage: 'typescript',
+    starter: "const message: string = 'Hello, world!';",
+  },
+  {
+    fenceLanguage: 'javascript',
+    label: 'JavaScript',
+    monacoLanguage: 'javascript',
+    starter: "const message = 'Hello, world!';",
+  },
+  {
+    fenceLanguage: 'tsx',
+    label: 'TSX',
+    monacoLanguage: 'typescript',
+    starter: 'export function Component() {\n  return <div>Hello, world!</div>;\n}',
+  },
+  {
+    fenceLanguage: 'jsx',
+    label: 'JSX',
+    monacoLanguage: 'javascript',
+    starter: 'export function Component() {\n  return <div>Hello, world!</div>;\n}',
+  },
+  {
+    fenceLanguage: 'json',
+    label: 'JSON',
+    monacoLanguage: 'json',
+    starter: '{\n  "key": "value"\n}',
+  },
+  {
+    fenceLanguage: 'html',
+    label: 'HTML',
+    monacoLanguage: 'html',
+    starter: '<div>Hello, world!</div>',
+  },
+  {
+    fenceLanguage: 'css',
+    label: 'CSS',
+    monacoLanguage: 'css',
+    starter: '.example {\n  color: #2563eb;\n}',
+  },
+  {
+    fenceLanguage: 'python',
+    label: 'Python',
+    monacoLanguage: 'python',
+    starter: 'print("Hello, world!")',
+  },
+  {
+    fenceLanguage: 'bash',
+    label: 'Shell',
+    monacoLanguage: 'shell',
+    starter: 'echo "Hello, world!"',
+  },
+  {
+    fenceLanguage: 'sql',
+    label: 'SQL',
+    monacoLanguage: 'sql',
+    starter: 'SELECT *\nFROM table_name;',
+  },
+  {
+    fenceLanguage: 'yaml',
+    label: 'YAML',
+    monacoLanguage: 'yaml',
+    starter: 'key: value',
+  },
+  {
+    fenceLanguage: 'markdown',
+    label: 'Markdown',
+    monacoLanguage: 'markdown',
+    starter: '# Heading',
+  },
+  {
+    fenceLanguage: 'java',
+    label: 'Java',
+    monacoLanguage: 'java',
+    starter: 'class Main {\n  public static void main(String[] args) {\n  }\n}',
+  },
+  {
+    fenceLanguage: 'csharp',
+    label: 'C#',
+    monacoLanguage: 'csharp',
+    starter: 'Console.WriteLine("Hello, world!");',
+  },
+  {
+    fenceLanguage: 'cpp',
+    label: 'C++',
+    monacoLanguage: 'cpp',
+    starter: '#include <iostream>\n\nint main() {\n  return 0;\n}',
+  },
+  {
+    fenceLanguage: 'go',
+    label: 'Go',
+    monacoLanguage: 'go',
+    starter: 'package main\n\nfunc main() {\n}',
+  },
+  {
+    fenceLanguage: 'rust',
+    label: 'Rust',
+    monacoLanguage: 'rust',
+    starter: 'fn main() {\n  println!("Hello, world!");\n}',
+  },
+  {
+    fenceLanguage: 'ruby',
+    label: 'Ruby',
+    monacoLanguage: 'ruby',
+    starter: 'puts "Hello, world!"',
+  },
+  {
+    fenceLanguage: 'php',
+    label: 'PHP',
+    monacoLanguage: 'php',
+    starter: '<?php\necho "Hello, world!";',
+  },
+  {
+    fenceLanguage: 'swift',
+    label: 'Swift',
+    monacoLanguage: 'swift',
+    starter: 'print("Hello, world!")',
+  },
+  {
+    fenceLanguage: 'kotlin',
+    label: 'Kotlin',
+    monacoLanguage: 'kotlin',
+    starter: 'fun main() {\n  println("Hello, world!")\n}',
+  },
+  {
+    fenceLanguage: 'dockerfile',
+    label: 'Dockerfile',
+    monacoLanguage: 'dockerfile',
+    starter: 'FROM node:22-alpine',
+  },
+] as const;
+
+const BY_FENCE_LANGUAGE: ReadonlyMap<string, CodeSnippetLanguage> = new Map(
+  CODE_SNIPPET_LANGUAGES.map((language) => [language.fenceLanguage, language]),
+);
+
+/** Languages owned by the diagram/tree/timeline editors or their auto-detection gates. */
+const SPECIAL_FENCE_LANGUAGES = new Set([
+  'text',
+  'txt',
+  'plaintext',
+  'plain',
+  'ascii',
+  'diagram',
+  'tree',
+  'timeline',
+  'mermaid',
+]);
+
+const MONACO_LANGUAGE_ALIASES: Readonly<Record<string, string>> = {
+  c: 'c',
+  'c++': 'cpp',
+  'c#': 'csharp',
+  cs: 'csharp',
+  cxx: 'cpp',
+  docker: 'dockerfile',
+  htm: 'html',
+  js: 'javascript',
+  jsx: 'javascript',
+  md: 'markdown',
+  py: 'python',
+  rb: 'ruby',
+  sh: 'shell',
+  shell: 'shell',
+  ts: 'typescript',
+  tsx: 'typescript',
+  yml: 'yaml',
+};
+
+/** The first token is the syntax id; any remaining fence metadata stays untouched. */
+export function codeSnippetFenceLanguageToken(language: string | null | undefined): string {
+  if (typeof language !== 'string') return '';
+  return language.trim().split(/\s+/, 1)[0]?.toLowerCase() ?? '';
+}
+
+/** True for explicit language-tagged fences not owned by a richer Squisq block editor. */
+export function isCodeSnippetFenceLanguage(language: string | null | undefined): boolean {
+  const token = codeSnippetFenceLanguageToken(language);
+  return token.length > 0 && !SPECIAL_FENCE_LANGUAGES.has(token);
+}
+
+export function monacoLanguageForFence(language: string | null | undefined): string {
+  const token = codeSnippetFenceLanguageToken(language);
+  const catalogEntry = BY_FENCE_LANGUAGE.get(token);
+  return (catalogEntry?.monacoLanguage ?? MONACO_LANGUAGE_ALIASES[token] ?? token) || 'plaintext';
+}
+
+export function codeSnippetLanguageLabel(language: string | null | undefined): string {
+  const token = codeSnippetFenceLanguageToken(language);
+  const catalogEntry = BY_FENCE_LANGUAGE.get(token);
+  if (catalogEntry) return catalogEntry.label;
+  return token
+    ? token.replace(/(^|[-_])([a-z])/g, (_match, _prefix, letter) => letter.toUpperCase())
+    : 'Code';
+}
+
+/** Markdown insertion form. The caller decides whether to wrap selected text or use a starter. */
+export function codeSnippetMarkdown(language: string, source: string): string {
+  return `\n\`\`\`${language}\n${source}\n\`\`\`\n`;
+}

package/src/diagram/DiagramCanvas.tsx

@@ -222,6 +222,7 @@ export function DiagramCanvas({
         showMaximize={showMaximize}
         maximized={maximized}
         onToggleMaximize={onToggleMaximize}
+        showViewControls
         showToolbar={false}
         textEditing={textConfig}
       />

package/src/find/FindHighlightExtension.ts

@@ -0,0 +1,81 @@
+import { Extension, type Editor } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { findProseMirrorMatches, normalizeFindIndex } from './findModel';
+
+interface FindHighlightState {
+  query: string;
+  selectedIndex: number;
+  decorations: DecorationSet;
+}
+
+interface FindHighlightMeta {
+  query: string;
+  selectedIndex: number;
+}
+
+const FIND_HIGHLIGHT_KEY = new PluginKey<FindHighlightState>('squisq-find-highlight');
+
+function buildState(
+  doc: Parameters<typeof findProseMirrorMatches>[0],
+  query: string,
+  selectedIndex: number,
+): FindHighlightState {
+  const matches = findProseMirrorMatches(doc, query);
+  const selected = normalizeFindIndex(selectedIndex, matches.length);
+  const decorations = matches.map((match, index) =>
+    Decoration.inline(match.from, match.to, {
+      class:
+        index === selected ? 'squisq-find-match squisq-find-match--selected' : 'squisq-find-match',
+    }),
+  );
+  return {
+    query,
+    selectedIndex: selected,
+    decorations: DecorationSet.create(doc, decorations),
+  };
+}
+
+/** ProseMirror decorations used by the shell's host-triggered Find mode. */
+export const FindHighlightExtension = Extension.create({
+  name: 'squisqFindHighlight',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<FindHighlightState>({
+        key: FIND_HIGHLIGHT_KEY,
+        state: {
+          init: (_, state) => buildState(state.doc, '', 0),
+          apply: (transaction, previous, _oldState, newState) => {
+            const meta = transaction.getMeta(FIND_HIGHLIGHT_KEY) as FindHighlightMeta | undefined;
+            if (!meta && !transaction.docChanged) return previous;
+            return buildState(
+              newState.doc,
+              meta?.query ?? previous.query,
+              meta?.selectedIndex ?? previous.selectedIndex,
+            );
+          },
+        },
+        props: {
+          decorations: (state) => FIND_HIGHLIGHT_KEY.getState(state)?.decorations ?? null,
+        },
+      }),
+    ];
+  },
+});
+
+/** Update WYSIWYG highlights and return the current number of matches. */
+export function updateTiptapFindHighlights(
+  editor: Editor,
+  query: string,
+  selectedIndex: number,
+): number {
+  const matches = findProseMirrorMatches(editor.state.doc, query);
+  editor.view.dispatch(
+    editor.state.tr.setMeta(FIND_HIGHLIGHT_KEY, {
+      query,
+      selectedIndex: normalizeFindIndex(selectedIndex, matches.length),
+    } satisfies FindHighlightMeta),
+  );
+  return matches.length;
+}

package/src/find/FindToolbar.tsx

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import type { editor as MonacoEditorNs } from 'monaco-editor';
+import { useEditorContext } from '../EditorContext';
+import { Icon } from '../Icon';
+import { updateTiptapFindHighlights } from './FindHighlightExtension';
+import { findTextMatches, normalizeFindIndex } from './findModel';
+
+interface HighlightRegistryLike {
+  set(name: string, highlight: unknown): void;
+  delete(name: string): boolean;
+}
+
+interface HighlightConstructorLike {
+  new (...ranges: Range[]): unknown;
+}
+
+interface PreviewHighlightResult {
+  count: number;
+  cleanup: () => void;
+}
+
+export interface FindToolbarProps {
+  onClose: () => void;
+}
+
+/** Search controls shown immediately to the right of the Write/Source/Use tabs. */
+export function FindToolbar({ onClose }: FindToolbarProps) {
+  const { activeView, markdownSource, tiptapEditor, monacoEditor } = useEditorContext();
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [matchCount, setMatchCount] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const reactId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+  const previewHighlightName = `squisq-find-${reactId}`;
+  const previewSelectedName = `${previewHighlightName}-selected`;
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    const style = document.createElement('style');
+    style.dataset.squisqFindHighlight = reactId;
+    style.textContent = `::highlight(${previewHighlightName}) { background: #fde68a; color: inherit; } ::highlight(${previewSelectedName}) { background: #f59e0b; color: #111827; }`;
+    document.head.append(style);
+    return () => style.remove();
+  }, [previewHighlightName, previewSelectedName, reactId]);
+
+  useEffect(() => {
+    let cleanup = () => {};
+    let count = 0;
+
+    if (activeView === 'raw' && monacoEditor) {
+      const model = monacoEditor.getModel();
+      const matches = model
+        ? model.findMatches(query.trim(), false, false, false, null, false)
+        : [];
+      count = query.trim() ? matches.length : 0;
+      const selected = normalizeFindIndex(selectedIndex, count);
+      const decorations = monacoEditor.createDecorationsCollection(
+        matches.slice(0, count).map((match, index) => ({
+          range: match.range,
+          options: monacoDecorationOptions(index === selected),
+        })),
+      );
+      if (count > 0) monacoEditor.revealRangeInCenter(matches[selected].range);
+      cleanup = () => decorations.clear();
+    } else if (activeView === 'wysiwyg' && tiptapEditor && !tiptapEditor.isDestroyed) {
+      count = updateTiptapFindHighlights(tiptapEditor, query, selectedIndex);
+      const selected = tiptapEditor.view.dom.querySelector<HTMLElement>(
+        '.squisq-find-match--selected',
+      );
+      selected?.scrollIntoView?.({ block: 'center', inline: 'nearest' });
+      cleanup = () => {
+        if (!tiptapEditor.isDestroyed) updateTiptapFindHighlights(tiptapEditor, '', 0);
+      };
+    } else if (activeView === 'preview') {
+      const root = inputRef.current
+        ?.closest('.squisq-editor-shell')
+        ?.querySelector<HTMLElement>('[data-testid="preview-panel"]');
+      if (root) {
+        const result = applyPreviewHighlights(
+          root,
+          query,
+          selectedIndex,
+          previewHighlightName,
+          previewSelectedName,
+        );
+        count = result.count;
+        cleanup = result.cleanup;
+      }
+    }
+
+    setMatchCount(count);
+    setSelectedIndex((current) => normalizeFindIndex(current, count));
+    return cleanup;
+  }, [
+    activeView,
+    markdownSource,
+    monacoEditor,
+    previewHighlightName,
+    previewSelectedName,
+    query,
+    selectedIndex,
+    tiptapEditor,
+  ]);
+
+  const moveSelection = useCallback(
+    (delta: number) => {
+      if (matchCount === 0) return;
+      setSelectedIndex((current) => normalizeFindIndex(current + delta, matchCount));
+    },
+    [matchCount],
+  );
+
+  const resultLabel =
+    query.trim() === ''
+      ? '0 of 0'
+      : matchCount === 0
+        ? 'No results'
+        : `${normalizeFindIndex(selectedIndex, matchCount) + 1} of ${matchCount}`;
+
+  return (
+    <div className="squisq-find-toolbar" role="search" aria-label="Find in document">
+      <div className="squisq-find-field">
+        <Icon icon="fa-solid fa-magnifying-glass" />
+        <input
+          ref={inputRef}
+          type="search"
+          value={query}
+          className="squisq-find-input"
+          aria-label="Find in document"
+          placeholder="Find in document"
+          autoComplete="off"
+          spellCheck={false}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setSelectedIndex(0);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              moveSelection(event.shiftKey ? -1 : 1);
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+              onClose();
+            }
+          }}
+        />
+        <span className="squisq-find-count" aria-live="polite" aria-atomic="true">
+          {resultLabel}
+        </span>
+      </div>
+      <button
+        type="button"
+        className="squisq-find-button"
+        aria-label="Previous match"
+        data-tooltip="Previous match (Shift+Enter)"
+        disabled={matchCount === 0}
+        onClick={() => moveSelection(-1)}
+      >
+        <Icon icon="fa-solid fa-chevron-up" />
+      </button>
+      <button
+        type="button"
+        className="squisq-find-button"
+        aria-label="Next match"
+        data-tooltip="Next match (Enter)"
+        disabled={matchCount === 0}
+        onClick={() => moveSelection(1)}
+      >
+        <Icon icon="fa-solid fa-chevron-down" />
+      </button>
+      <button
+        type="button"
+        className="squisq-find-button squisq-find-close"
+        aria-label="Close find"
+        data-tooltip="Close find (Esc)"
+        onClick={onClose}
+      >
+        <Icon icon="fa-solid fa-xmark" />
+      </button>
+    </div>
+  );
+}
+
+function monacoDecorationOptions(selected: boolean): MonacoEditorNs.IModelDecorationOptions {
+  return {
+    inlineClassName: selected
+      ? 'squisq-find-match squisq-find-match--selected'
+      : 'squisq-find-match',
+  };
+}
+
+function applyPreviewHighlights(
+  root: HTMLElement,
+  query: string,
+  selectedIndex: number,
+  highlightName: string,
+  selectedName: string,
+): PreviewHighlightResult {
+  const ranges = collectTextRanges(root, query);
+  const selected = normalizeFindIndex(selectedIndex, ranges.length);
+  const css = globalThis.CSS as (typeof CSS & { highlights?: HighlightRegistryLike }) | undefined;
+  const HighlightConstructor = (
+    globalThis as typeof globalThis & {
+      Highlight?: HighlightConstructorLike;
+    }
+  ).Highlight;
+
+  if (css?.highlights && HighlightConstructor) {
+    css.highlights.set(highlightName, new HighlightConstructor(...ranges));
+    if (ranges.length > 0) {
+      css.highlights.set(selectedName, new HighlightConstructor(ranges[selected]));
+      scrollRangeIntoView(ranges[selected]);
+    } else {
+      css.highlights.delete(selectedName);
+    }
+    return {
+      count: ranges.length,
+      cleanup: () => {
+        css.highlights?.delete(highlightName);
+        css.highlights?.delete(selectedName);
+      },
+    };
+  }
+
+  // CSS Custom Highlight is broadly available in current browsers. Keep a
+  // DOM-mark fallback for older embedded webviews; Preview is read-only, and
+  // every inserted mark is unwrapped when the query changes or Find closes.
+  const marks = markPreviewRanges(ranges, selected);
+  marks
+    .find((mark) => mark.classList.contains('squisq-find-match--selected'))
+    ?.scrollIntoView?.({
+      block: 'center',
+      inline: 'nearest',
+    });
+  return {
+    count: ranges.length,
+    cleanup: () => {
+      const parents = new Set<Node>();
+      for (const mark of marks) {
+        const parent = mark.parentNode;
+        if (!parent) continue;
+        parents.add(parent);
+        mark.replaceWith(...Array.from(mark.childNodes));
+      }
+      parents.forEach((parent) => parent.normalize());
+    },
+  };
+}
+
+function collectTextRanges(root: HTMLElement, query: string): Range[] {
+  if (!query.trim()) return [];
+  const doc = root.ownerDocument;
+  const showText = doc.defaultView?.NodeFilter.SHOW_TEXT ?? 4;
+  const walker = doc.createTreeWalker(root, showText);
+  const ranges: Range[] = [];
+  let current = walker.nextNode();
+  while (current) {
+    const text = current as Text;
+    const parent = text.parentElement;
+    if (
+      parent &&
+      !parent.closest(
+        'button, input, textarea, select, script, style, [aria-hidden="true"], [data-squisq-find-ignore]',
+      )
+    ) {
+      for (const match of findTextMatches(text.data, query)) {
+        const range = doc.createRange();
+        range.setStart(text, match.from);
+        range.setEnd(text, match.to);
+        ranges.push(range);
+      }
+    }
+    current = walker.nextNode();
+  }
+  return ranges;
+}
+
+function scrollRangeIntoView(range: Range): void {
+  const element =
+    range.startContainer instanceof Element
+      ? range.startContainer
+      : range.startContainer.parentElement;
+  (element as HTMLElement | null)?.scrollIntoView?.({ block: 'center', inline: 'nearest' });
+}
+
+function markPreviewRanges(ranges: Range[], selectedIndex: number): HTMLElement[] {
+  const marks: HTMLElement[] = [];
+  // Work backwards so splitting a text node does not invalidate the offsets
+  // of an earlier match in that same node.
+  [...ranges]
+    .map((range, index) => ({ range, index }))
+    .reverse()
+    .forEach(({ range, index }) => {
+      const text = range.startContainer;
+      if (!(text instanceof Text) || text !== range.endContainer || !text.parentNode) return;
+      const after = text.splitText(range.endOffset);
+      const matched = text.splitText(range.startOffset);
+      const mark = text.ownerDocument.createElement('mark');
+      mark.className =
+        index === selectedIndex
+          ? 'squisq-find-match squisq-find-match--selected'
+          : 'squisq-find-match';
+      matched.replaceWith(mark);
+      mark.append(matched);
+      marks.push(mark);
+      // Keep the tail referenced so aggressive DOM implementations do not
+      // discard it before the next reverse-ordered range is processed.
+      void after;
+    });
+  return marks;
+}

package/src/find/findModel.ts

@@ -0,0 +1,77 @@
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+export interface FindTextMatch {
+  from: number;
+  to: number;
+}
+
+/**
+ * Find non-overlapping, case-insensitive literal matches. Offsets are UTF-16
+ * code-unit offsets, matching DOM Range, Monaco, and ProseMirror positions.
+ */
+export function findTextMatches(text: string, query: string): FindTextMatch[] {
+  const needle = query.trim();
+  if (!needle || !text) return [];
+
+  const matcher = new RegExp(escapeRegExp(needle), 'giu');
+  const matches: FindTextMatch[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = matcher.exec(text)) !== null) {
+    matches.push({ from: match.index, to: match.index + match[0].length });
+    // Literal non-empty queries always advance, but retain this guard so a
+    // future matcher change cannot create an infinite loop.
+    if (match[0].length === 0) matcher.lastIndex += 1;
+  }
+  return matches;
+}
+
+export function normalizeFindIndex(index: number, count: number): number {
+  if (count <= 0) return 0;
+  return ((index % count) + count) % count;
+}
+
+/**
+ * Resolve visible text matches to ProseMirror document positions. Text from
+ * adjacent marked spans in one text block is searched as one run, so a query
+ * can cross a bold/italic boundary without matching across separate blocks.
+ */
+export function findProseMirrorMatches(doc: ProseMirrorNode, query: string): FindTextMatch[] {
+  const matches: FindTextMatch[] = [];
+
+  doc.descendants((node, blockPos) => {
+    if (!node.isTextblock) return true;
+
+    const spans: Array<FindTextMatch & { docFrom: number }> = [];
+    let text = '';
+    node.descendants((child, offset) => {
+      if (child.isText && child.text) {
+        const from = text.length;
+        text += child.text;
+        spans.push({ from, to: text.length, docFrom: blockPos + 1 + offset });
+      } else if (child.isInline) {
+        // Prevent a phrase from matching invisibly across an atom or hard break.
+        text += '\u0000';
+      }
+      return true;
+    });
+
+    for (const match of findTextMatches(text, query)) {
+      const startSpan = spans.find((span) => match.from >= span.from && match.from < span.to);
+      const endOffset = match.to - 1;
+      const endSpan = spans.find((span) => endOffset >= span.from && endOffset < span.to);
+      if (!startSpan || !endSpan) continue;
+      matches.push({
+        from: startSpan.docFrom + match.from - startSpan.from,
+        to: endSpan.docFrom + match.to - endSpan.from,
+      });
+    }
+
+    return false;
+  });
+
+  return matches;
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}