@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/mediaReferences.ts

@@ -1,299 +0,0 @@
-import { splitKeyValueToken, tokenizeAttrTokens } from '@bendyline/squisq/markdown';
-
-interface MediaReferenceRange {
-  start: number;
-  end: number;
-}
-
-interface MarkdownReferenceMatch {
-  destination: string;
-  range: MediaReferenceRange;
-}
-
-const MEDIA_REFERENCE_PARAM_KEYS = new Set([
-  'audio',
-  'file',
-  'href',
-  'image',
-  'imagesrc',
-  'path',
-  'poster',
-  'src',
-  'url',
-  'video',
-]);
-
-const HTML_MEDIA_ATTRS = ['src', 'href', 'poster'] as const;
-
-/**
- * Collect media references from the document source. Used by the Files panel
- * to distinguish stored files that are actually referenced by the document
- * from files that only exist in the bin.
- */
-export function collectMediaReferencesFromMarkdown(source: string): ReadonlySet<string> {
-  const refs = new Set<string>();
-  collectMarkdownInlineReferences(source, refs);
-  collectHtmlAttributeReferences(source, refs);
-  collectAnnotationReferences(source, refs);
-  return refs;
-}
-
-/**
- * Remove markdown/html references to a media asset without reparsing and
- * reserializing the whole document. This targets the ref shapes the editor
- * emits for uploaded files while preserving unrelated author formatting.
- */
-export function removeMediaReferencesFromMarkdown(source: string, mediaPath: string): string {
-  if (!mediaPath) return source;
-  const withoutMarkdownRefs = removeMarkdownInlineReferences(source, mediaPath);
-  const withoutImageTags = removeHtmlTagsByAttribute(withoutMarkdownRefs, 'img', 'src', mediaPath);
-  return removeHtmlTagsByAttribute(withoutImageTags, 'a', 'href', mediaPath);
-}
-
-function removeMarkdownInlineReferences(source: string, mediaPath: string): string {
-  let result = '';
-  let cursor = 0;
-
-  while (cursor < source.length) {
-    const range = findNextMarkdownReference(source, cursor, mediaPath);
-    if (!range) break;
-    result += source.slice(cursor, range.start);
-    cursor = range.end;
-  }
-
-  return result + source.slice(cursor);
-}
-
-function findNextMarkdownReference(
-  source: string,
-  startIndex: number,
-  mediaPath: string,
-): MediaReferenceRange | null {
-  const match = findNextMarkdownReferenceMatch(source, startIndex, mediaPath);
-  return match?.range ?? null;
-}
-
-function collectMarkdownInlineReferences(source: string, refs: Set<string>): void {
-  let cursor = 0;
-  while (cursor < source.length) {
-    const match = findNextMarkdownReferenceMatch(source, cursor);
-    if (!match) return;
-    refs.add(match.destination);
-    cursor = Math.max(match.range.end, cursor + 1);
-  }
-}
-
-function findNextMarkdownReferenceMatch(
-  source: string,
-  startIndex: number,
-  mediaPath?: string,
-): MarkdownReferenceMatch | null {
-  let bracketIndex = source.indexOf('[', startIndex);
-
-  while (bracketIndex !== -1) {
-    const previous = source[bracketIndex - 1];
-    const isImage = previous === '!';
-    if (previous === '@') {
-      bracketIndex = source.indexOf('[', bracketIndex + 1);
-      continue;
-    }
-
-    const closeBracket = findClosingBracket(source, bracketIndex);
-    if (closeBracket === -1 || source[closeBracket + 1] !== '(') {
-      bracketIndex = source.indexOf('[', bracketIndex + 1);
-      continue;
-    }
-
-    const openParen = closeBracket + 1;
-    const closeParen = findClosingParen(source, openParen);
-    if (closeParen === -1) {
-      bracketIndex = source.indexOf('[', bracketIndex + 1);
-      continue;
-    }
-
-    const destination = readLinkDestination(source.slice(openParen + 1, closeParen));
-    if (destination && (mediaPath === undefined || destination === mediaPath)) {
-      const tokenStart = isImage ? bracketIndex - 1 : bracketIndex;
-      return {
-        destination,
-        range: expandStandaloneLine(source, tokenStart, closeParen + 1),
-      };
-    }
-
-    bracketIndex = source.indexOf('[', bracketIndex + 1);
-  }
-
-  return null;
-}
-
-function collectHtmlAttributeReferences(source: string, refs: Set<string>): void {
-  const tagPattern = /<[a-z][^>]*>/gi;
-  let match: RegExpExecArray | null;
-
-  while ((match = tagPattern.exec(source))) {
-    const tag = match[0];
-    for (const attrName of HTML_MEDIA_ATTRS) {
-      const value = readHtmlAttribute(tag, attrName);
-      if (value) refs.add(value);
-    }
-  }
-}
-
-function collectAnnotationReferences(source: string, refs: Set<string>): void {
-  const annotationPattern = /\{\[([^\]]*)\]\}/g;
-  let match: RegExpExecArray | null;
-
-  while ((match = annotationPattern.exec(source))) {
-    const inner = match[1];
-    if (!inner) continue;
-    const tokens = tokenizeAttrTokens(inner);
-    for (const token of tokens) {
-      const pair = splitKeyValueToken(token);
-      if (!pair) continue;
-      if (MEDIA_REFERENCE_PARAM_KEYS.has(pair.key.toLowerCase())) {
-        refs.add(pair.value);
-      }
-    }
-  }
-}
-
-function findClosingBracket(source: string, openIndex: number): number {
-  let depth = 0;
-  for (let i = openIndex; i < source.length; i++) {
-    if (source[i] === '\\') {
-      i += 1;
-      continue;
-    }
-    if (source[i] === '[') depth += 1;
-    if (source[i] === ']') {
-      depth -= 1;
-      if (depth === 0) return i;
-    }
-  }
-  return -1;
-}
-
-function findClosingParen(source: string, openIndex: number): number {
-  let depth = 0;
-  let inAngleDestination = false;
-
-  for (let i = openIndex; i < source.length; i++) {
-    const ch = source[i];
-    if (ch === '\\') {
-      i += 1;
-      continue;
-    }
-    if (inAngleDestination) {
-      if (ch === '>') inAngleDestination = false;
-      continue;
-    }
-    if (ch === '<') {
-      inAngleDestination = true;
-      continue;
-    }
-    if (ch === '(') {
-      depth += 1;
-      continue;
-    }
-    if (ch === ')') {
-      depth -= 1;
-      if (depth === 0) return i;
-    }
-  }
-
-  return -1;
-}
-
-function readLinkDestination(raw: string): string {
-  const content = raw.trimStart();
-  if (!content) return '';
-
-  if (content.startsWith('<')) {
-    const close = findUnescaped(content, '>', 1);
-    if (close === -1) return '';
-    return unescapeMarkdownUrl(content.slice(1, close));
-  }
-
-  let depth = 0;
-  for (let i = 0; i < content.length; i++) {
-    const ch = content[i];
-    if (ch === '\\') {
-      i += 1;
-      continue;
-    }
-    if (ch === '(') {
-      depth += 1;
-      continue;
-    }
-    if (ch === ')' && depth > 0) {
-      depth -= 1;
-      continue;
-    }
-    if (depth === 0 && /\s/.test(ch)) {
-      return unescapeMarkdownUrl(content.slice(0, i));
-    }
-  }
-
-  return unescapeMarkdownUrl(content);
-}
-
-function findUnescaped(source: string, needle: string, startIndex: number): number {
-  for (let i = startIndex; i < source.length; i++) {
-    if (source[i] === '\\') {
-      i += 1;
-      continue;
-    }
-    if (source[i] === needle) return i;
-  }
-  return -1;
-}
-
-function unescapeMarkdownUrl(value: string): string {
-  return value.replace(/\\([\\`*{}[\]()#+\-.!_>])/g, '$1');
-}
-
-function expandStandaloneLine(source: string, start: number, end: number): MediaReferenceRange {
-  const lineStart = source.lastIndexOf('\n', start - 1) + 1;
-  const nextNewline = source.indexOf('\n', end);
-  const lineEnd = nextNewline === -1 ? source.length : nextNewline;
-  const before = source.slice(lineStart, start);
-  const after = source.slice(end, lineEnd);
-
-  if (before.trim() === '' && after.trim() === '') {
-    return {
-      start: lineStart,
-      end: nextNewline === -1 ? lineEnd : lineEnd + 1,
-    };
-  }
-
-  return { start, end };
-}
-
-function removeHtmlTagsByAttribute(
-  source: string,
-  tagName: 'a' | 'img',
-  attrName: 'href' | 'src',
-  mediaPath: string,
-): string {
-  const tagPattern = tagName === 'img' ? /<img\b[^>]*>/gi : /<a\b[^>]*>[\s\S]*?<\/a>/gi;
-  return source.replace(tagPattern, (tag) => {
-    const value = readHtmlAttribute(tag, attrName);
-    return value === mediaPath ? '' : tag;
-  });
-}
-
-function readHtmlAttribute(tag: string, attrName: string): string | null {
-  const attrPattern = new RegExp(`\\b${attrName}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i');
-  const match = attrPattern.exec(tag);
-  if (!match) return null;
-  return unescapeHtmlAttribute(match[2] ?? match[3] ?? match[4] ?? '');
-}
-
-function unescapeHtmlAttribute(value: string): string {
-  return value
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;|&apos;/g, "'")
-    .replace(/&amp;/g, '&');
-}

package/src/monaco.ts

@@ -1,35 +0,0 @@
-/**
- * Canonical Monaco entry for squisq — and for apps downstream of it.
- *
- * Anything that needs Monaco (squisq's own RawEditor via {@link useMonacoLoader},
- * or a downstream app that wants its own editor) should get it from *here*
- * rather than importing `monaco-editor` directly. That guarantees a single
- * shared instance — one language / theme / completion-provider registry — and
- * gives squisq one place to decide which slice of Monaco ships. Downstream
- * hosts therefore need no bundler aliasing or hand-rolled "slim" Monaco entry
- * (getting that recipe wrong silently breaks features like the suggest widget).
- *
- * This is the FULL editor. `editor.main.js` pulls in:
- *   - every editor-feature contribution — the suggest-widget controller
- *     (completion popups), hover, folding, find, parameter hints, bracket
- *     matching, …
- *   - TM grammars for ~70 languages (syntax highlighting in fenced code), and
- *   - the rich css / html / json / typescript language *services*.
- *
- * `editor.main.js` has no sibling `.d.ts` (only `editor.api.d.ts` is
- * published), so we take the types from `editor.api`: the side-effect import
- * registers all the contributions, and the re-export exposes the — now
- * augmented — API surface. Both reference the same underlying singleton.
- *
- * NOTE: the language *services* (css/html/json/typescript) need Monaco web
- * workers wired via `globalThis.MonacoEnvironment`. Without that host-side
- * setup their in-editor IntelliSense stays dormant — but highlighting,
- * editing, and custom completion providers (e.g. the `{[template]}` typeahead)
- * all run on the main thread and work with no worker configuration.
- */
-
-// Side-effect: register the full editor + all language contributions.
-import 'monaco-editor/esm/vs/editor/editor.main.js';
-
-// Typed API surface (the only barrel Monaco publishes declarations for).
-export * from 'monaco-editor/esm/vs/editor/editor.api';

package/src/monacoWorkers.ts

@@ -1,89 +0,0 @@
-/**
- * Monaco language-service worker wiring.
- *
- * Monaco offloads its heavy language services — css / html / json / typescript
- * IntelliSense — plus a base editor service (word-based completions, link
- * detection, diffing) to web workers. Those worker bundles must be produced by
- * the HOST application's bundler: the mechanisms for it (Vite's `?worker`
- * import suffix, `new Worker(new URL(...))`, webpack loaders) are all
- * bundler-specific and cannot live inside this tsup-built library.
- *
- * So the division of labor is: the host supplies the five worker constructors
- * (one line each with Vite's `?worker`), and this helper owns the
- * `label → worker` mapping — the part that's fiddly and easy to get wrong.
- *
- * Call once, before the first editor mounts (typically in the app entry):
- *
- * ```ts
- * import { configureMonacoWorkers } from '@bendyline/squisq-editor-react';
- * import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
- * import JsonWorker   from 'monaco-editor/esm/vs/language/json/json.worker?worker';
- * import CssWorker    from 'monaco-editor/esm/vs/language/css/css.worker?worker';
- * import HtmlWorker   from 'monaco-editor/esm/vs/language/html/html.worker?worker';
- * import TsWorker     from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
- *
- * configureMonacoWorkers({
- *   editor: EditorWorker, json: JsonWorker, css: CssWorker,
- *   html: HtmlWorker, ts: TsWorker,
- * });
- * ```
- *
- * This is purely additive: without it, highlighting, editing, and custom
- * completion providers (e.g. the `{[template]}` typeahead) still work — they
- * run on the main thread. Only the language-service IntelliSense is dormant
- * until the workers are wired.
- */
-
-/** Zero-arg worker constructor, as produced by Vite's `?worker` import. */
-export type MonacoWorkerConstructor = new () => Worker;
-
-export interface MonacoWorkerConstructors {
-  /** Base editor worker (word completions, links, diff). Required. */
-  editor: MonacoWorkerConstructor;
-  /** JSON language service. */
-  json?: MonacoWorkerConstructor;
-  /** CSS/SCSS/LESS language service. */
-  css?: MonacoWorkerConstructor;
-  /** HTML/Handlebars/Razor language service. */
-  html?: MonacoWorkerConstructor;
-  /** TypeScript service — also handles JavaScript. */
-  ts?: MonacoWorkerConstructor;
-}
-
-type MonacoEnvironmentHost = typeof globalThis & {
-  MonacoEnvironment?: { getWorker(workerId: string, label: string): Worker };
-};
-
-/**
- * Install `globalThis.MonacoEnvironment.getWorker` so Monaco routes each
- * language to the matching worker, falling back to the base editor worker for
- * any label without a dedicated service (which is every plain language — its
- * grammar-based highlighting needs no worker).
- */
-export function configureMonacoWorkers(workers: MonacoWorkerConstructors): void {
-  const host = globalThis as MonacoEnvironmentHost;
-  host.MonacoEnvironment = {
-    getWorker(_workerId: string, label: string): Worker {
-      switch (label) {
-        case 'json':
-          if (workers.json) return new workers.json();
-          break;
-        case 'css':
-        case 'scss':
-        case 'less':
-          if (workers.css) return new workers.css();
-          break;
-        case 'html':
-        case 'handlebars':
-        case 'razor':
-          if (workers.html) return new workers.html();
-          break;
-        case 'typescript':
-        case 'javascript':
-          if (workers.ts) return new workers.ts();
-          break;
-      }
-      return new workers.editor();
-    },
-  };
-}

package/src/outlineSource.ts

@@ -1,171 +0,0 @@
-/**
- * Source-preserving section moves for the document outline.
- *
- * Markdown headings form a flat AST, so a section extends from its heading
- * through the next heading of equal or shallower depth. Reordering only direct
- * siblings keeps heading levels and hierarchy intact; promote/demote remains a
- * separate outline operation.
- */
-
-import { parseMarkdown } from '@bendyline/squisq/markdown';
-
-export type OutlineDropPlacement = 'before' | 'after';
-
-interface SourceHeading {
-  line: number;
-  depth: number;
-  parentLine: number | null;
-  start: number;
-  end: number;
-}
-
-interface SectionSlot extends SourceHeading {
-  content: string;
-  gap: string;
-}
-
-/**
- * Move one heading-rooted section before or after a sibling section.
- *
- * The current source is parsed inside the helper so fenced-code lookalikes and
- * stale/non-heading line numbers are rejected. The moved section includes its
- * body and every descendant heading. Returns `null` for an invalid or no-op
- * move.
- */
-export function moveHeadingSectionInSource(
-  source: string,
-  fromHeadingLine: number,
-  targetHeadingLine: number,
-  placement: OutlineDropPlacement,
-): string | null {
-  if (fromHeadingLine === targetHeadingLine || (placement !== 'before' && placement !== 'after')) {
-    return null;
-  }
-
-  const headings = readSourceHeadings(source);
-  if (!headings) return null;
-
-  const from = headings.find((heading) => heading.line === fromHeadingLine);
-  const target = headings.find((heading) => heading.line === targetHeadingLine);
-  if (!from || !target) return null;
-
-  // A reorder must not silently promote, demote, or re-parent a section.
-  if (from.depth !== target.depth || from.parentLine !== target.parentLine) return null;
-
-  const siblings = headings.filter((heading) => heading.parentLine === from.parentLine);
-  const fromIndex = siblings.findIndex((heading) => heading.line === fromHeadingLine);
-  const targetIndex = siblings.findIndex((heading) => heading.line === targetHeadingLine);
-  if (fromIndex < 0 || targetIndex < 0) return null;
-
-  // Direct sibling ranges must be contiguous. Aborting here is safer than
-  // rewriting source if a parser ever reports an unexpected position shape.
-  for (let i = 0; i < siblings.length - 1; i++) {
-    if (siblings[i].end !== siblings[i + 1].start) return null;
-  }
-
-  const slots: SectionSlot[] = siblings.map((heading) => {
-    const raw = source.slice(heading.start, heading.end);
-    const { content, gap } = splitTrailingLineGap(raw);
-    return { ...heading, content, gap };
-  });
-
-  const reordered = [...slots];
-  const [moved] = reordered.splice(fromIndex, 1);
-  const targetAfterRemoval = reordered.findIndex((heading) => heading.line === targetHeadingLine);
-  if (!moved || targetAfterRemoval < 0) return null;
-
-  const insertionIndex = targetAfterRemoval + (placement === 'after' ? 1 : 0);
-  reordered.splice(insertionIndex, 0, moved);
-
-  if (reordered.every((heading, index) => heading.line === slots[index].line)) return null;
-
-  // Whitespace belongs to positions, not to the section being moved. Keeping
-  // the original slot gaps preserves blank-line style, CRLF, and the exact
-  // final-newline state even when the former EOF section moves earlier.
-  const replacement = reordered
-    .map((heading, index) => heading.content + slots[index].gap)
-    .join('');
-  const rangeStart = slots[0].start;
-  const rangeEnd = slots[slots.length - 1].end;
-  const next = source.slice(0, rangeStart) + replacement + source.slice(rangeEnd);
-
-  // The move should never change the number of authored headings. This also
-  // catches any unforeseen boundary issue before the editor source is updated.
-  const nextHeadings = readSourceHeadings(next);
-  if (!nextHeadings || nextHeadings.length !== headings.length) return null;
-
-  return next;
-}
-
-/** Parse source headings and derive their parent + complete-section range. */
-function readSourceHeadings(source: string): SourceHeading[] | null {
-  try {
-    const document = parseMarkdown(source);
-    const lineStarts = sourceLineStarts(source);
-    const headings: SourceHeading[] = [];
-    const stack: SourceHeading[] = [];
-
-    for (const node of document.children) {
-      if (node.type !== 'heading' || !node.position) continue;
-
-      const line = node.position.start.line;
-      const start = lineStarts[line - 1];
-      if (start == null) return null;
-
-      while (stack.length > 0 && stack[stack.length - 1].depth >= node.depth) {
-        stack.pop();
-      }
-
-      const heading: SourceHeading = {
-        line,
-        depth: node.depth,
-        parentLine: stack[stack.length - 1]?.line ?? null,
-        start,
-        end: source.length,
-      };
-      headings.push(heading);
-      stack.push(heading);
-    }
-
-    for (let i = 0; i < headings.length; i++) {
-      const heading = headings[i];
-      for (let j = i + 1; j < headings.length; j++) {
-        if (headings[j].depth <= heading.depth) {
-          heading.end = headings[j].start;
-          break;
-        }
-      }
-    }
-
-    return headings;
-  } catch (err: unknown) {
-    // Source mutations are best-effort UI operations. A parse failure leaves
-    // the current markdown untouched; EditorContext owns user-facing errors.
-    void err;
-    return null;
-  }
-}
-
-/** 0-based offsets of every physical line, preserving mixed EOL sequences. */
-function sourceLineStarts(source: string): number[] {
-  const starts = [0];
-  const eol = /\r\n|\r|\n/g;
-  let match: RegExpExecArray | null;
-  while ((match = eol.exec(source)) != null) {
-    starts.push(match.index + match[0].length);
-  }
-  return starts;
-}
-
-/**
- * Split the line-ending separator from a section without stealing spaces
- * before the first newline (which may be an authored Markdown hard break).
- */
-function splitTrailingLineGap(value: string): { content: string; gap: string } {
-  const match = value.match(/(?:\r\n|\r|\n)(?:[ \t]*(?:\r\n|\r|\n))*[ \t]*$/);
-  if (!match || match.index == null) return { content: value, gap: '' };
-  return {
-    content: value.slice(0, match.index),
-    gap: value.slice(match.index),
-  };
-}