@ai-matrx/rich-editor 0.1.2 → 0.2.0

package/dist/panels/KindPicker.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@ai-matrx/design-system";
+import { Shapes } from "lucide-react";
+import { kindCanonicalExample, searchKindDefinitions } from "@ai-matrx/rich-content/host/app-bindings";
+import { kindMarkdown } from "../core/commands.js";
+import { ErrorAlchemyMenu } from "@ai-matrx/rich-content/host/ErrorActions";
+import { asClause } from "@ai-matrx/kit/text";
+const PICKER_LIMIT = 60;
+function asRecord(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+async function searchKinds(query) {
+  return await searchKindDefinitions(query);
+}
+async function exampleFor(row) {
+  return asRecord(await kindCanonicalExample(row));
+}
+function KindPicker({
+  open,
+  onResolve
+}) {
+  const [query, setQuery] = useState("");
+  const [rows, setRows] = useState([]);
+  const [state, setState] = useState("idle");
+  const [message, setMessage] = useState(null);
+  const [highlighted, setHighlighted] = useState("");
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setState("loading");
+    const handle = window.setTimeout(() => {
+      searchKinds(query).then((found) => {
+        if (cancelled) return;
+        setRows(found);
+        setHighlighted(found[0]?.id ?? "");
+        setState("idle");
+      }).catch((error) => {
+        if (cancelled) return;
+        setState("error");
+        setMessage(error instanceof Error ? error.message : String(error));
+      });
+    }, 150);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(handle);
+    };
+  }, [open, query]);
+  const choose = async (row) => {
+    try {
+      onResolve(kindMarkdown(row.kind, await exampleFor(row)));
+    } catch (error) {
+      setState("error");
+      setMessage(error instanceof Error ? error.message : String(error));
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => !next && onResolve(null), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg p-0", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Shapes, { className: "h-4 w-4" }),
+        " Insert a structured block"
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Pick a kind from the shape registry. It is inserted with its example data as a protected block you edit in its own editor." })
+    ] }),
+    /* @__PURE__ */ jsxs(Command, { shouldFilter: false, value: highlighted, onValueChange: setHighlighted, className: "border-t border-border", children: [
+      /* @__PURE__ */ jsx(CommandInput, { value: query, onValueChange: setQuery, placeholder: "Search kinds \u2014 flashcards, checklist, timeline\u2026" }),
+      /* @__PURE__ */ jsxs(CommandList, { className: "max-h-[50dvh]", children: [
+        state === "error" && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 text-sm text-destructive", children: [
+          "The kind list could not load: ",
+          asClause(message),
+          ". Close this and try again.",
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+        ] }),
+        state !== "error" && /* @__PURE__ */ jsx(CommandEmpty, { children: state === "loading" ? "Searching the shape registry\u2026" : "No kind matches that search." }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: rows.map((row) => /* @__PURE__ */ jsx(CommandItem, { value: row.id, onSelect: () => void choose(row), children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: row.label }) }, row.id)) })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  KindPicker
+};

package/dist/panels/OutlinePanel.d.ts

@@ -0,0 +1,6 @@
+import type { OutlineEntry } from "../core/outline.js";
+export declare function OutlinePanel({ entries, onJump, className, }: {
+    entries: readonly OutlineEntry[];
+    onJump: (entry: OutlineEntry) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/panels/OutlinePanel.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { Link2, ListTree } from "lucide-react";
+import { toast } from "@ai-matrx/rich-content/host/toast";
+import { cn } from "@ai-matrx/design-system";
+function OutlinePanel({
+  entries,
+  onJump,
+  className
+}) {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const minLevel = Math.min(...entries.map((entry) => entry.level), 6);
+  const copyLink = async (entry) => {
+    const url = `${window.location.origin}${window.location.pathname}${window.location.search}#${entry.slug}`;
+    try {
+      if (!await copyText(url)) return;
+      toast.success(`Link to \u201C${entry.text}\u201D copied.`);
+    } catch {
+      toast.error("Copy failed \u2014 your browser blocked clipboard access.");
+    }
+  };
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Outline", className: cn("flex h-full flex-col overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(ListTree, { className: "h-3.5 w-3.5" }),
+      " Outline"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-1 pb-4", children: [
+      entries.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 text-xs text-muted-foreground", children: "Headings you add appear here. Type \u201C# \u201D at the start of a line, or use / \u2192 Heading." }),
+      entries.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "group/outline flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onJump(entry),
+            className: "min-w-0 flex-1 truncate rounded px-2 py-1 text-left text-sm text-foreground/80 hover:bg-muted hover:text-foreground",
+            style: { paddingLeft: `${0.5 + (entry.level - minLevel) * 0.75}rem` },
+            title: entry.text,
+            children: entry.text || "(empty heading)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Copy link to ${entry.text}`,
+            onClick: () => void copyLink(entry),
+            className: "rounded p-1 text-muted-foreground opacity-0 hover:bg-muted hover:text-foreground group-hover/outline:opacity-100 focus:opacity-100",
+            children: /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }, `${entry.slug}-${index}`))
+    ] })
+  ] });
+}
+export {
+  OutlinePanel
+};

package/dist/panels/ShortcutsDialog.d.ts

@@ -0,0 +1,4 @@
+export declare function ShortcutsDialog({ open, onOpenChange }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/panels/ShortcutsDialog.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@ai-matrx/design-system";
+import { RICH_EDITOR_SHORTCUTS, formatKeys } from "../core/shortcuts.js";
+const GROUPS = ["Text", "Blocks", "Insert", "Document", "Views"];
+function ShortcutsDialog({ open, onOpenChange }) {
+  const apple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[85dvh] max-w-2xl overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Keyboard shortcuts" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "The same keys work in the visual and source views. Where Google Docs and Notion differ, both work." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: GROUPS.map((group) => /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: group }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: RICH_EDITOR_SHORTCUTS.filter((spec) => spec.group === group).map((spec) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { children: spec.label }),
+        /* @__PURE__ */ jsx("span", { className: "flex shrink-0 gap-1", children: spec.keys.map((key) => /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[11px]", children: formatKeys(key, apple) }, key)) })
+      ] }, spec.id)) })
+    ] }, group)) })
+  ] }) });
+}
+export {
+  ShortcutsDialog
+};

package/dist/source/SourceEditor.d.ts

@@ -0,0 +1,28 @@
+import { type Ref } from "react";
+import type { EditorViewHandle } from "../visual/VisualEditor.js";
+import type { RichShellActions } from "../visual/visual-extensions.js";
+export interface SourceEditorProps {
+    initialText: string;
+    onChange: (text: string) => void;
+    shell: RichShellActions;
+    placeholder?: string;
+    focusMode: boolean;
+    renderIslands: boolean;
+    handleRef: Ref<EditorViewHandle>;
+    /**
+     * CONTROLLED text. When the host replaces the whole document (a template or
+     * sample loaded, an agent write, Clear), the editor follows. The editor's own
+     * keystrokes echo back as the same string and are ignored cheaply.
+     */
+    value?: string;
+    /** "document" (default): the centred reading column. "pane": fills a tool pane edge to edge. */
+    layout?: "document" | "pane";
+    /** The editor's scroll container scrolled (a host that syncs another pane). */
+    onScroll?: () => void;
+    /**
+     * RAW: the bytes as plain monospace text — no live-preview decorations, no
+     * markdown styling. The same editor (history, keymap, paste), just undressed.
+     */
+    raw?: boolean;
+}
+export declare function SourceEditor({ initialText, onChange, shell, placeholder, focusMode, renderIslands, handleRef, value, layout, onScroll, raw, }: SourceEditorProps): import("react").JSX.Element;

package/dist/source/SourceEditor.js

@@ -0,0 +1,429 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { EditorSelection, EditorState, Prec } from "@codemirror/state";
+import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  redoDepth,
+  undoDepth,
+  indentWithTab,
+  moveLineDown,
+  moveLineUp,
+  redo,
+  undo
+} from "@codemirror/commands";
+import { autocompletion } from "@codemirror/autocomplete";
+import { getSchema } from "@tiptap/core";
+import { cn } from "@ai-matrx/design-system";
+import { toast } from "@ai-matrx/rich-content/host/toast";
+import { createRichEditorExtensions } from "../core/extensions.js";
+import { locateCaret } from "../core/caret-context.js";
+import { htmlToMarkdown } from "../core/html-to-markdown.js";
+import { mergedCellsNotice, normalizePastedHtml } from "../core/paste-html.js";
+import { findMatches, replaceMatches } from "../core/find-replace.js";
+import { continueMarkupOnEnter, makeLink, setLinePrefix, toggleWrap } from "../core/source-format.js";
+import { markdownSourceLanguage } from "./markdown-language.js";
+import { formatMarkdown } from "../core/markdown-format.js";
+import { markdownFormatHost, textFormatTarget } from "../format/format-target.js";
+import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
+import { RICH_EDITOR_SHORTCUTS, TYPED_TRIGGERS } from "../core/shortcuts.js";
+import { variableNamesInText, variableSuggestions } from "../core/variables.js";
+import { islandsReleasedBetweenTexts } from "../core/history-approval.js";
+import { IslandPreview } from "../islands/IslandPreview.js";
+import { useRichEditorContext } from "../editor/RichEditorContext.js";
+import { richEditorTheme, richHighlight } from "./cm-theme.js";
+import {
+  IslandPortalRegistry,
+  livePreviewExtensions,
+  findField,
+  setFindHighlights,
+  setIslandRendering
+} from "./live-preview.js";
+import { blockBoundary } from "../core/text-insertion.js";
+const RAW_THEME = EditorView.theme({
+  ".cm-content, .cm-line": {
+    fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
+    fontSize: "13px"
+  }
+});
+const PASTE_SCHEMA = getSchema(createRichEditorExtensions());
+function applyResult(view, result) {
+  view.dispatch({
+    changes: result.changes,
+    selection: EditorSelection.single(result.anchor, result.head),
+    scrollIntoView: true,
+    userEvent: "input.format"
+  });
+  return true;
+}
+function wrap(marker) {
+  return (view) => {
+    const { from, to } = view.state.selection.main;
+    return applyResult(view, toggleWrap(view.state.doc.toString(), from, to, marker));
+  };
+}
+function command(id) {
+  return (view) => {
+    if (view.state.readOnly) return false;
+    const { from, to } = view.state.selection.main;
+    const result = formatMarkdown(view.state.doc.toString(), from, to, id);
+    return result.changes.length ? applyResult(view, result) : true;
+  };
+}
+function sourceFormatTarget(getView) {
+  return textFormatTarget(
+    "source",
+    () => {
+      const v = getView();
+      if (!v) return null;
+      const { from, to } = v.state.selection.main;
+      return { text: v.state.doc.toString(), from, to, editable: !v.state.readOnly };
+    },
+    (result) => {
+      const v = getView();
+      if (v) applyResult(v, result);
+    }
+  );
+}
+function prefix(value) {
+  return (view) => {
+    const { from, to } = view.state.selection.main;
+    return applyResult(view, setLinePrefix(view.state.doc.toString(), from, to, value));
+  };
+}
+function SourceEditor({
+  initialText,
+  onChange,
+  shell,
+  placeholder,
+  focusMode,
+  renderIslands,
+  handleRef,
+  value,
+  layout = "document",
+  onScroll,
+  raw = false
+}) {
+  const context = useRichEditorContext();
+  const host = useRef(null);
+  const scroller = useRef(null);
+  const lastEmitted = useRef(initialText);
+  const view = useRef(null);
+  const [registry] = useState(() => new IslandPortalRegistry());
+  const portals = useSyncExternalStore(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
+  const findState = useRef({ matches: [], index: -1 });
+  const emitChange = useEffectEvent((text) => onChange(text));
+  const getShell = useEffectEvent(() => shell);
+  const getVariables = useEffectEvent(() => context.variables);
+  const approveIsland = useEffectEvent((raw2) => context.approveIsland(raw2));
+  const initial = useEffectEvent(() => initialText);
+  useEffect(() => {
+    if (!host.current) return;
+    const verbs = {
+      bold: command("bold"),
+      italic: command("italic"),
+      strike: command("strike"),
+      code: command("code"),
+      link: command("link"),
+      paragraph: prefix(null),
+      heading1: command("heading1"),
+      heading2: command("heading2"),
+      heading3: command("heading3"),
+      heading4: prefix("#### "),
+      heading5: prefix("##### "),
+      heading6: prefix("###### "),
+      orderedList: command("orderedList"),
+      bulletList: command("bulletList"),
+      taskList: command("taskList"),
+      quote: command("quote"),
+      moveUp: moveLineUp,
+      moveDown: moveLineDown,
+      codeBlock: command("codeBlock"),
+      inlineMath: wrap("$"),
+      undo,
+      redo,
+      find: () => (getShell().find(), true),
+      replace: () => (getShell().replace(), true),
+      save: () => (getShell().save(), true),
+      wordCount: () => (getShell().showWordCount(), true),
+      outline: () => (getShell().toggleOutline(), true),
+      focus: () => (getShell().toggleFocus(), true),
+      cycleView: () => (getShell().cycleView(), true),
+      help: () => (getShell().showHelp(), true)
+    };
+    const bindings = RICH_EDITOR_SHORTCUTS.flatMap(
+      (spec) => spec.keys.filter((key) => !TYPED_TRIGGERS.has(key) && verbs[spec.id]).map((key) => ({ key, run: verbs[spec.id], preventDefault: true }))
+    );
+    const variableCompletion = (completion) => {
+      const match = completion.matchBefore(/\{\{[^{}\n]*/);
+      if (!match) return null;
+      const typed = match.text.slice(2);
+      const inDocument = variableNamesInText(completion.state.doc.toString());
+      const options = variableSuggestions(getVariables() ?? [], inDocument, typed).map((suggestion) => ({
+        label: `{{${suggestion.name}}}`,
+        detail: suggestion.source === "new" ? "new variable" : suggestion.source === "document" ? "in this document" : suggestion.type,
+        info: suggestion.description,
+        apply: `{{${suggestion.name}}}`
+      }));
+      return { from: match.from, options, validFor: /^\{\{[^{}\n]*$/ };
+    };
+    const instance = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: initial(),
+        extensions: [
+          history(),
+          Prec.high(keymap.of(bindings)),
+          keymap.of([
+            {
+              key: "Enter",
+              run: (v) => {
+                const { from, to } = v.state.selection.main;
+                if (from !== to) return false;
+                const result = continueMarkupOnEnter(v.state.doc.toString(), from);
+                return result ? applyResult(v, result) : false;
+              }
+            },
+            indentWithTab,
+            ...defaultKeymap,
+            ...historyKeymap
+          ]),
+          ...raw ? [] : [markdownSourceLanguage, richHighlight],
+          richEditorTheme,
+          ...raw ? [RAW_THEME] : [],
+          EditorView.lineWrapping,
+          cmPlaceholder(placeholder ?? "Write\u2026"),
+          EditorView.editable.of(!context.readOnly),
+          EditorView.contentAttributes.of({ "aria-label": "Document source", spellcheck: "true" }),
+          autocompletion({ override: [variableCompletion], activateOnTyping: true }),
+          ...raw ? [findField] : [livePreviewExtensions({ registry, getVariables: () => getVariables() })],
+          EditorView.domEventHandlers({
+            paste: (event, v) => {
+              const html = event.clipboardData?.getData("text/html");
+              const images = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith("image/"));
+              if (images.length) {
+                event.preventDefault();
+                for (const image of images) {
+                  void getShell().uploadImage(image).then((markdownImage) => {
+                    if (!markdownImage) return;
+                    const { from: from2, to: to2 } = v.state.selection.main;
+                    v.dispatch({ changes: { from: from2, to: to2, insert: markdownImage } });
+                  });
+                }
+                return true;
+              }
+              if (!html || !html.trim()) return false;
+              event.preventDefault();
+              const notice = mergedCellsNotice(normalizePastedHtml(html).mergedCellsSplit);
+              if (notice) toast.info(notice);
+              const converted = htmlToMarkdown(html, PASTE_SCHEMA);
+              const { from, to } = v.state.selection.main;
+              v.dispatch({
+                changes: { from, to, insert: converted },
+                selection: { anchor: from + converted.length },
+                userEvent: "input.paste"
+              });
+              return true;
+            }
+          }),
+          EditorView.updateListener.of((update) => {
+            if (!update.docChanged) return;
+            const text = update.state.doc.toString();
+            if (update.transactions.some((tr) => tr.isUserEvent("undo") || tr.isUserEvent("redo"))) {
+              for (const raw2 of islandsReleasedBetweenTexts(update.startState.doc.toString(), text)) approveIsland(raw2);
+            }
+            lastEmitted.current = text;
+            emitChange(text);
+          })
+        ]
+      })
+    });
+    view.current = instance;
+    return () => {
+      instance.destroy();
+      view.current = null;
+    };
+  }, [registry, context.readOnly, placeholder, raw]);
+  useEffect(() => {
+    view.current?.dispatch({ effects: setIslandRendering.of(renderIslands) });
+  }, [renderIslands]);
+  useEffect(() => {
+    const v = view.current;
+    if (value === void 0 || !v || value === lastEmitted.current) return;
+    if (v.state.doc.toString() === value) {
+      lastEmitted.current = value;
+      return;
+    }
+    lastEmitted.current = value;
+    v.dispatch({
+      changes: { from: 0, to: v.state.doc.length, insert: value },
+      selection: { anchor: Math.min(v.state.selection.main.head, value.length) },
+      userEvent: "input.replace"
+    });
+  }, [value]);
+  const highlight = (current) => {
+    view.current?.dispatch({
+      effects: setFindHighlights.of(
+        findState.current.matches.map((match, index) => ({ from: match.start, to: match.end, current: index === current }))
+      )
+    });
+  };
+  const [zoneElement, setZoneElement] = useState(null);
+  useSelectionZone(zoneElement, { editable: !context.readOnly, host: markdownFormatHost(sourceFormatTarget(() => view.current)) });
+  useImperativeHandle(handleRef, () => ({
+    focus: () => view.current?.focus(),
+    selectedText: () => {
+      const v = view.current;
+      if (!v) return "";
+      const { from, to } = v.state.selection.main;
+      return v.state.sliceDoc(from, to);
+    },
+    replaceSelection: (text) => {
+      const v = view.current;
+      if (!v) return;
+      const { from, to } = v.state.selection.main;
+      v.dispatch({ changes: { from, to, insert: text }, selection: { anchor: from, head: from + text.length } });
+    },
+    insertText: (text, where) => {
+      const v = view.current;
+      if (!v) return false;
+      const { from, to } = v.state.selection.main;
+      const at = blockBoundary(v.state.doc.toString(), from, to, where);
+      const insert = where === "before" ? `${text}
+
+` : `
+
+${text}`;
+      v.dispatch({ changes: { from: at, insert } });
+      return true;
+    },
+    flush: () => view.current?.state.doc.toString() ?? initialText,
+    historyDepth: () => {
+      const v = view.current;
+      return v ? { undo: undoDepth(v.state), redo: redoDepth(v.state) } : { undo: 0, redo: 0 };
+    },
+    placeCaret: (context2) => {
+      const v = view.current;
+      if (!v) return false;
+      const index = locateCaret(v.state.doc.toString(), context2);
+      if (index === null) return false;
+      v.dispatch({ selection: { anchor: index }, effects: EditorView.scrollIntoView(index, { y: "center" }) });
+      v.focus();
+      return true;
+    },
+    scrollToHeading: (_slug, offset) => {
+      const v = view.current;
+      if (!v) return;
+      v.dispatch({ selection: { anchor: offset }, effects: EditorView.scrollIntoView(offset, { y: "start" }) });
+      v.focus();
+    },
+    find: (query, options, step) => {
+      const v = view.current;
+      if (!v) return { count: 0, current: -1, skippedProtected: 0, error: null };
+      const result = findMatches(v.state.doc.toString(), query, options);
+      const cursor = v.state.selection.main.from;
+      let index = result.matches.findIndex((match2) => match2.start >= cursor);
+      if (index === -1) index = result.matches.length ? 0 : -1;
+      const previous = findState.current;
+      if (step && previous.index >= 0 && result.matches.length) {
+        index = (previous.index + step + result.matches.length) % result.matches.length;
+      }
+      findState.current = { matches: result.matches, index };
+      highlight(index);
+      const match = result.matches[index];
+      if (match && step) {
+        v.dispatch({ selection: { anchor: match.start, head: match.end }, scrollIntoView: true });
+      }
+      return { count: result.matches.length, current: index, skippedProtected: result.skippedProtected, error: result.error };
+    },
+    replaceCurrent: (query, replacement, options) => {
+      const v = view.current;
+      const match = findState.current.matches[findState.current.index];
+      if (!v || !match) return [];
+      const text = v.state.doc.toString();
+      const found = findMatches(text, query, options).matches.find((candidate) => candidate.start === match.start);
+      if (!found) return [];
+      const next = replaceMatches(text, [found], query, replacement, options);
+      const insert = next.slice(found.start, next.length - (text.length - found.end));
+      v.dispatch({ changes: { from: found.start, to: found.end, insert } });
+      return found.islandRaw ? [found.islandRaw] : [];
+    },
+    replaceAll: (query, replacement, options) => {
+      const v = view.current;
+      if (!v) return [];
+      const text = v.state.doc.toString();
+      const { matches } = findMatches(text, query, options);
+      const changes = matches.map((match) => {
+        const next = replaceMatches(text, [match], query, replacement, options);
+        return { from: match.start, to: match.end, insert: next.slice(match.start, next.length - (text.length - match.end)) };
+      });
+      v.dispatch({ changes });
+      return matches.flatMap((match) => match.islandRaw ? [match.islandRaw] : []);
+    },
+    clearFind: () => {
+      findState.current = { matches: [], index: -1 };
+      highlight(-1);
+    },
+    editLink: (href) => {
+      const v = view.current;
+      if (!v || !href) return;
+      const { from, to } = v.state.selection.main;
+      applyResult(v, makeLink(v.state.doc.toString(), from, to, href));
+    },
+    currentLink: () => null,
+    scroller: () => scroller.current,
+    topLine: () => {
+      const v = view.current;
+      const el = scroller.current;
+      if (!v || !el) return 0;
+      const y = el.getBoundingClientRect().top - v.documentTop;
+      if (y <= 0) return 0;
+      const block = v.lineBlockAtHeight(y);
+      const index = v.state.doc.lineAt(block.from).number - 1;
+      return index + (block.height > 0 ? Math.min(1, Math.max(0, (y - block.top) / block.height)) : 0);
+    },
+    scrollToLine: (lineIndex) => {
+      const v = view.current;
+      if (!v) return;
+      const index = Math.min(Math.max(0, Math.floor(lineIndex)), v.state.doc.lines - 1);
+      const line = v.state.doc.line(index + 1);
+      const at = line.from + Math.round((lineIndex - index) * line.length);
+      v.dispatch({ effects: EditorView.scrollIntoView(at, { y: "start" }) });
+    }
+  }));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scroller,
+      onScroll,
+      className: cn("rich-editor-source relative h-full overflow-y-auto", focusMode && "rich-editor-focus"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (node) => {
+              host.current = node;
+              setZoneElement(node);
+            },
+            className: layout === "pane" ? "min-h-full" : "mx-auto min-h-full max-w-3xl pb-[40dvh]",
+            "data-testid": "rich-editor-source"
+          }
+        ),
+        portals.map(
+          (portal, index) => createPortal(
+            /* @__PURE__ */ jsx("div", { className: "cm-rich-island-body pointer-events-none", children: /* @__PURE__ */ jsx(IslandPreview, { raw: portal.raw, islandType: portal.islandType }) }),
+            portal.element,
+            `island-${index}`
+          )
+        )
+      ]
+    }
+  );
+}
+export {
+  SourceEditor
+};

package/dist/source/cm-theme.d.ts

@@ -0,0 +1,4 @@
+export declare const richEditorTheme: import("@codemirror/state").Extension;
+/** Code-shaped editors (islands) use the mono face. */
+export declare const monoTheme: import("@codemirror/state").Extension;
+export declare const richHighlight: import("@codemirror/state").Extension;