@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/monaco.ts

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

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

@@ -0,0 +1,171 @@
+/**
+ * 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),
+  };
+}