@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/fileKind.ts

@@ -1,158 +0,0 @@
-/**
- * fileKind
- *
- * Maps a file name (or bare extension) to a Monaco language ID and decides
- * whether the editor shell should operate in markdown mode (full WYSIWYG +
- * Preview experience) or code mode (Monaco-only view with formatting
- * buttons hidden).
- *
- * The mapping favors common web / systems languages that Monaco ships with
- * out of the box. Unknown extensions fall back to markdown mode so the
- * existing UX remains the default for anything we don't recognize.
- */
-
-export interface FileKind {
-  /**
-   * 'markdown' keeps the full editor (WYSIWYG + Preview tabs); 'code' is
-   * Monaco-only; 'image' renders a dedicated image viewer with no text
-   * editing surface.
-   */
-  mode: 'markdown' | 'code' | 'image';
-  /** Monaco language ID — passed to `<Editor defaultLanguage={...} />`. */
-  language: string;
-}
-
-/**
- * Extension → Monaco language ID. Keys are lowercase, no leading dot.
- * Extend as needed; unknown extensions fall back to markdown mode.
- */
-const EXT_TO_LANGUAGE: Record<string, string> = {
-  md: 'markdown',
-  markdown: 'markdown',
-  mdown: 'markdown',
-  txt: 'plaintext',
-  ts: 'typescript',
-  tsx: 'typescript',
-  js: 'javascript',
-  jsx: 'javascript',
-  mjs: 'javascript',
-  cjs: 'javascript',
-  json: 'json',
-  jsonc: 'json',
-  html: 'html',
-  htm: 'html',
-  css: 'css',
-  scss: 'scss',
-  less: 'less',
-  py: 'python',
-  go: 'go',
-  rs: 'rust',
-  rb: 'ruby',
-  java: 'java',
-  c: 'c',
-  h: 'c',
-  cpp: 'cpp',
-  hpp: 'cpp',
-  cc: 'cpp',
-  cs: 'csharp',
-  php: 'php',
-  sh: 'shell',
-  bash: 'shell',
-  zsh: 'shell',
-  yml: 'yaml',
-  yaml: 'yaml',
-  toml: 'ini',
-  ini: 'ini',
-  xml: 'xml',
-  svg: 'xml',
-  sql: 'sql',
-  lua: 'lua',
-  swift: 'swift',
-  kt: 'kotlin',
-  kts: 'kotlin',
-  dockerfile: 'dockerfile',
-  png: 'image',
-  jpg: 'image',
-  jpeg: 'image',
-  gif: 'image',
-  webp: 'image',
-  bmp: 'image',
-  ico: 'image',
-  avif: 'image',
-};
-
-/**
- * Languages that keep the full markdown shell (WYSIWYG + Preview). Anything
- * outside this set is treated as code, except for languages in
- * `IMAGE_MODE_LANGUAGES`.
- */
-const MARKDOWN_MODE_LANGUAGES = new Set(['markdown', 'plaintext']);
-
-/**
- * Languages that switch the shell into image-viewer mode — no text editing
- * surface, no markdown chrome.
- */
-const IMAGE_MODE_LANGUAGES = new Set(['image']);
-
-/**
- * Pull the lowercase extension (no leading dot) from a file name or bare
- * extension string. Returns null when none is discernible.
- *
- * Examples:
- *   "foo.ts"       → "ts"
- *   "foo.tar.gz"   → "gz"
- *   ".ts"          → "ts"
- *   "ts"           → "ts"
- *   "Dockerfile"   → "dockerfile"   (full name match for extensionless files)
- *   ""             → null
- */
-function extractExtension(fileName: string): string | null {
-  const trimmed = fileName.trim();
-  if (!trimmed) return null;
-
-  // Strip any leading path — take only the basename.
-  const base = trimmed.replace(/^.*[/\\]/, '');
-  if (!base) return null;
-
-  const dotIdx = base.lastIndexOf('.');
-  if (dotIdx === -1) {
-    // No dot — could still be a recognized bare name (Dockerfile) or a bare
-    // extension passed by a caller like "ts". Lower-case and return.
-    return base.toLowerCase();
-  }
-  if (dotIdx === base.length - 1) return null; // Trailing dot, no extension.
-  return base.slice(dotIdx + 1).toLowerCase();
-}
-
-/**
- * Detect a Monaco language ID from a file name. Returns null when the
- * extension (or bare name) is not in the mapping.
- */
-export function detectLanguageFromFileName(fileName: string): string | null {
-  const ext = extractExtension(fileName);
-  if (!ext) return null;
-  return EXT_TO_LANGUAGE[ext] ?? null;
-}
-
-/**
- * Resolve the editor mode + Monaco language for a given file. The explicit
- * `language` argument, if provided, wins over any detection from
- * `fileName`. When nothing matches, falls back to markdown mode.
- */
-export function resolveFileKind(fileName?: string, language?: string): FileKind {
-  const resolvedLanguage = language ?? (fileName ? detectLanguageFromFileName(fileName) : null);
-
-  if (!resolvedLanguage) {
-    return { mode: 'markdown', language: 'markdown' };
-  }
-
-  let mode: FileKind['mode'];
-  if (IMAGE_MODE_LANGUAGES.has(resolvedLanguage)) {
-    mode = 'image';
-  } else if (MARKDOWN_MODE_LANGUAGES.has(resolvedLanguage)) {
-    mode = 'markdown';
-  } else {
-    mode = 'code';
-  }
-  return { mode, language: resolvedLanguage };
-}

package/src/find/FindHighlightExtension.ts

@@ -1,81 +0,0 @@
-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

@@ -1,314 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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, '\\$&');
-}

package/src/frontmatter.ts

@@ -1,29 +0,0 @@
-/**
- * frontmatter
- *
- * Small helpers for the YAML frontmatter block at the top of a markdown
- * document. The WYSIWYG editor hides frontmatter from its editing surface
- * (and re-prepends it on save), and the block-at-a-time slicer
- * (`blockRange.ts`) needs to know where the body starts so it never folds
- * frontmatter into a block slice. Both share this one definition.
- */
-
-/** Regex matching a YAML frontmatter block at the start of the document. */
-export const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
-
-/** Strip YAML frontmatter from markdown, returning both parts. */
-export function stripFrontmatter(md: string): { body: string; frontmatter: string } {
-  const m = md.match(FRONTMATTER_RE);
-  if (!m) return { body: md, frontmatter: '' };
-  return { body: md.slice(m[0].length), frontmatter: m[0] };
-}
-
-/**
- * Character offset where the document body begins — i.e. the length of the
- * leading frontmatter block (including its trailing newline), or 0 when the
- * source has no frontmatter.
- */
-export function frontmatterEndOffset(source: string): number {
-  const m = source.match(FRONTMATTER_RE);
-  return m ? m[0].length : 0;
-}

package/src/frontmatterSettings.ts

@@ -1,23 +0,0 @@
-/** Canonical and legacy keys for frontmatter settings managed by the editor. */
-export const FRONTMATTER_SETTING_KEYS = {
-  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] as const },
-  transform: { canonical: 'squisq-transform', legacy: 'transform-style' as const },
-  captions: { canonical: 'squisq-captions', legacy: 'caption-style' as const },
-  coverSlide: { canonical: 'squisq-cover-slide', legacy: 'cover-slide' as const },
-} as const;
-
-/** Runtime defaults whose equivalent frontmatter entries can be omitted. */
-export const FRONTMATTER_SETTING_DEFAULTS = {
-  theme: 'standard',
-  transform: '',
-  captions: 'standard',
-  coverSlide: true,
-} as const;
-
-/** Return `null` when a setting matches its runtime default so writers remove it. */
-export function omitFrontmatterDefault<T extends string | number | boolean>(
-  value: T,
-  defaultValue: T,
-): T | null {
-  return value === defaultValue ? null : value;
-}