@ai-matrx/rich-editor 0.1.2 → 0.2.0

package/dist/source/cm-theme.js

@@ -0,0 +1,71 @@
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+const richEditorTheme = EditorView.theme({
+  "&": {
+    backgroundColor: "transparent",
+    color: "hsl(var(--foreground))",
+    fontSize: "0.9375rem"
+  },
+  "&.cm-focused": { outline: "none" },
+  ".cm-scroller": {
+    fontFamily: "var(--font-sans, ui-sans-serif, system-ui)",
+    lineHeight: "1.65"
+  },
+  ".cm-content": { caretColor: "hsl(var(--foreground))", padding: "12px 0" },
+  ".cm-line": { padding: "0 16px" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "hsl(var(--foreground))" },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": {
+    backgroundColor: "hsl(var(--primary) / 0.18) !important"
+  },
+  ".cm-activeLine": { backgroundColor: "hsl(var(--muted) / 0.35)" },
+  ".cm-gutters": { display: "none" },
+  ".cm-tooltip": {
+    backgroundColor: "hsl(var(--popover))",
+    color: "hsl(var(--popover-foreground))",
+    border: "1px solid hsl(var(--border))",
+    borderRadius: "8px",
+    overflow: "hidden"
+  },
+  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    backgroundColor: "hsl(var(--accent))",
+    color: "hsl(var(--accent-foreground))"
+  },
+  ".cm-panels": { backgroundColor: "hsl(var(--card))", color: "hsl(var(--foreground))" }
+});
+const monoTheme = EditorView.theme({
+  ".cm-scroller": {
+    fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
+    fontSize: "0.8125rem",
+    lineHeight: "1.55"
+  },
+  ".cm-line": { padding: "0 12px" },
+  ".cm-content": { padding: "8px 0" }
+});
+const richHighlight = syntaxHighlighting(
+  HighlightStyle.define([
+    { tag: tags.heading1, fontSize: "1.6em", fontWeight: "700" },
+    { tag: tags.heading2, fontSize: "1.35em", fontWeight: "700" },
+    { tag: tags.heading3, fontSize: "1.15em", fontWeight: "650" },
+    { tag: [tags.heading4, tags.heading5, tags.heading6], fontWeight: "650" },
+    { tag: tags.strong, fontWeight: "700" },
+    { tag: tags.emphasis, fontStyle: "italic" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: tags.link, color: "hsl(var(--primary))", textDecoration: "underline" },
+    { tag: tags.url, color: "hsl(var(--muted-foreground))" },
+    { tag: tags.monospace, fontFamily: "var(--font-mono, ui-monospace, monospace)", fontSize: "0.9em" },
+    { tag: tags.quote, color: "hsl(var(--muted-foreground))" },
+    { tag: [tags.processingInstruction, tags.meta], color: "hsl(var(--muted-foreground))" },
+    { tag: [tags.keyword, tags.operatorKeyword], color: "hsl(var(--primary))" },
+    { tag: [tags.string, tags.special(tags.string)], color: "hsl(142 60% 38%)" },
+    { tag: [tags.number, tags.bool, tags.null], color: "hsl(24 80% 48%)" },
+    { tag: [tags.propertyName, tags.attributeName], color: "hsl(210 70% 50%)" },
+    { tag: [tags.comment, tags.lineComment, tags.blockComment], color: "hsl(var(--muted-foreground))", fontStyle: "italic" },
+    { tag: [tags.tagName, tags.angleBracket], color: "hsl(280 50% 55%)" }
+  ])
+);
+export {
+  monoTheme,
+  richEditorTheme,
+  richHighlight
+};

package/dist/source/live-preview.d.ts

@@ -0,0 +1,30 @@
+import { StateField, type Extension } from "@codemirror/state";
+import { type DecorationSet } from "@codemirror/view";
+import { type DeclaredVariable } from "../core/variables.js";
+export interface IslandPortal {
+    element: HTMLElement;
+    raw: string;
+    islandType: string;
+}
+export declare class IslandPortalRegistry {
+    private portals;
+    private listeners;
+    private snapshot;
+    add(portal: IslandPortal): void;
+    remove(element: HTMLElement): void;
+    subscribe: (listener: () => void) => (() => void);
+    getSnapshot: () => IslandPortal[];
+    private emit;
+}
+export declare const setIslandRendering: import("@codemirror/state").StateEffectType<boolean>;
+export declare const setFindHighlights: import("@codemirror/state").StateEffectType<{
+    from: number;
+    to: number;
+    current: boolean;
+}[]>;
+/** Find highlights only decorate matches, so the RAW source view keeps them too. */
+export declare const findField: StateField<DecorationSet>;
+export declare function livePreviewExtensions(options: {
+    registry: IslandPortalRegistry;
+    getVariables: () => readonly DeclaredVariable[] | null;
+}): Extension[];

package/dist/source/live-preview.js

@@ -0,0 +1,304 @@
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+import { tokenizeSource } from "@ai-matrx/content-ir/source";
+import { classifyVariable } from "../core/variables.js";
+class IslandPortalRegistry {
+  portals = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  snapshot = [];
+  add(portal) {
+    this.portals.set(portal.element, portal);
+    this.emit();
+  }
+  remove(element) {
+    if (this.portals.delete(element)) this.emit();
+  }
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  getSnapshot = () => this.snapshot;
+  emit() {
+    this.snapshot = [...this.portals.values()];
+    for (const listener of this.listeners) listener();
+  }
+}
+class IslandWidget extends WidgetType {
+  constructor(raw, islandType, from, registry) {
+    super();
+    this.raw = raw;
+    this.islandType = islandType;
+    this.from = from;
+    this.registry = registry;
+  }
+  raw;
+  islandType;
+  from;
+  registry;
+  eq(other) {
+    return other.raw === this.raw && other.islandType === this.islandType;
+  }
+  toDOM(view) {
+    const element = document.createElement("div");
+    element.className = "cm-rich-island";
+    element.setAttribute("role", "button");
+    element.setAttribute("aria-label", "Protected block \u2014 click to edit its source");
+    element.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      view.dispatch({ selection: { anchor: this.from } });
+      view.focus();
+    });
+    this.registry.add({ element, raw: this.raw, islandType: this.islandType });
+    return element;
+  }
+  destroy(dom) {
+    this.registry.remove(dom);
+  }
+  get estimatedHeight() {
+    return 80;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+const RENDERED_ISLANDS = /* @__PURE__ */ new Set([
+  "fence",
+  "json",
+  "xml_region",
+  "xml_attr",
+  "xml_container",
+  "html_block",
+  "math_block",
+  "tree",
+  "html_comment"
+]);
+function islandDecorations(state, registry, render, blocks = tokenizeSource(state.doc.toString())) {
+  const builder = new RangeSetBuilder();
+  const { from: selFrom, to: selTo } = state.selection.main;
+  for (const block of blocks) {
+    if (block.kind !== "island" || !block.complete) continue;
+    const active = selTo >= block.start && selFrom <= block.end;
+    const startLine = state.doc.lineAt(block.start);
+    const endLine = state.doc.lineAt(Math.max(block.start, block.end - 1));
+    const whole = startLine.from === block.start && endLine.to === block.end;
+    if (render && !active && whole && RENDERED_ISLANDS.has(block.islandType ?? "")) {
+      builder.add(
+        block.start,
+        block.end,
+        Decoration.replace({
+          widget: new IslandWidget(block.raw, block.islandType ?? "fence", block.start, registry),
+          block: true
+        })
+      );
+      continue;
+    }
+    for (let line = startLine.number; line <= endLine.number; line += 1) {
+      const at = state.doc.line(line).from;
+      builder.add(at, at, Decoration.line({ class: "cm-rich-island-line" }));
+    }
+  }
+  return builder.finish();
+}
+const setIslandRendering = StateEffect.define();
+const refreshIslands = StateEffect.define();
+const LARGE_SOURCE = 5e4;
+const REFRESH_AFTER_MS = 250;
+function islandField(registry) {
+  const field = StateField.define({
+    create: (state) => {
+      const blocks = tokenizeSource(state.doc.toString());
+      return { render: true, blocks, decorations: islandDecorations(state, registry, true, blocks) };
+    },
+    update: (value, tr) => {
+      let render = value.render;
+      let refresh = false;
+      for (const effect of tr.effects) {
+        if (effect.is(setIslandRendering)) render = effect.value;
+        if (effect.is(refreshIslands)) refresh = true;
+      }
+      if (render === value.render && !refresh && !tr.docChanged && !tr.selection) return value;
+      if (tr.docChanged && !refresh && tr.state.doc.length >= LARGE_SOURCE) {
+        const touched = [];
+        tr.changes.iterChangedRanges((_fa, _ta, fromB, toB) => touched.push([fromB, toB]));
+        const doc = tr.state.doc;
+        const decorations = value.decorations.map(tr.changes).update({
+          filter: (from, to, deco) => {
+            if (!deco.spec.block) return true;
+            if (touched.some(([f, t]) => from <= t + 1 && to >= f - 1)) return false;
+            return doc.lineAt(from).from === from && doc.lineAt(to).to === to;
+          }
+        });
+        return { render, blocks: null, decorations };
+      }
+      const blocks = tr.docChanged || refresh || !value.blocks ? tokenizeSource(tr.state.doc.toString()) : value.blocks;
+      return { render, blocks, decorations: islandDecorations(tr.state, registry, render, blocks) };
+    },
+    provide: (f) => EditorView.decorations.from(f, (value) => value.decorations)
+  });
+  const refresher = ViewPlugin.fromClass(
+    class {
+      constructor(view) {
+        this.view = view;
+      }
+      view;
+      timer = null;
+      update(update) {
+        if (!update.docChanged || update.state.field(field).blocks) return;
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.timer = null;
+          this.view.dispatch({ effects: refreshIslands.of(null) });
+        }, REFRESH_AFTER_MS);
+      }
+      destroy() {
+        if (this.timer) clearTimeout(this.timer);
+      }
+    }
+  );
+  return [field, refresher];
+}
+const HIDDEN_MARKS = /* @__PURE__ */ new Set(["HeaderMark", "EmphasisMark", "CodeMark", "StrikethroughMark", "LinkMark"]);
+const hideMark = Decoration.replace({});
+const dimMark = Decoration.mark({ class: "cm-rich-mark" });
+function activeLines(state) {
+  const lines = /* @__PURE__ */ new Set();
+  for (const range of state.selection.ranges) {
+    const first = state.doc.lineAt(range.from).number;
+    const last = state.doc.lineAt(range.to).number;
+    for (let line = first; line <= last; line += 1) lines.add(line);
+  }
+  return lines;
+}
+function previewDecorations(view) {
+  const { state } = view;
+  const active = activeLines(state);
+  const ranges = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        const name = node.name;
+        if (/^ATXHeading(\d)$/.test(name)) {
+          const level = name.slice(-1);
+          const line = state.doc.lineAt(node.from);
+          ranges.push({ from: line.from, to: line.from, deco: Decoration.line({ class: `cm-rich-h${level}` }) });
+        }
+        if (name === "Blockquote") {
+          const first = state.doc.lineAt(node.from).number;
+          const last = state.doc.lineAt(node.to).number;
+          for (let line = first; line <= last; line += 1) {
+            const at = state.doc.line(line).from;
+            ranges.push({ from: at, to: at, deco: Decoration.line({ class: "cm-rich-quote" }) });
+          }
+        }
+        if (name === "FencedCode" || name === "CodeBlock") return false;
+        if (name === "URL" && node.node.parent?.name === "Link") {
+          const line = state.doc.lineAt(node.from).number;
+          if (!active.has(line)) ranges.push({ from: node.from - 1, to: node.to + 1, deco: hideMark });
+          return void 0;
+        }
+        if (HIDDEN_MARKS.has(name)) {
+          if (name === "CodeMark" && node.node.parent?.name !== "InlineCode") return void 0;
+          if (name === "LinkMark" && node.node.parent?.name !== "Link") return void 0;
+          const mark = state.sliceDoc(node.from, node.to);
+          if (name === "LinkMark" && (mark === "(" || mark === ")")) return void 0;
+          const line = state.doc.lineAt(node.from).number;
+          const end = name === "HeaderMark" && state.sliceDoc(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
+          ranges.push({ from: node.from, to: end, deco: active.has(line) ? dimMark : hideMark });
+        }
+        return void 0;
+      }
+    });
+  }
+  ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+  const builder = new RangeSetBuilder();
+  let lastTo = -1;
+  for (const range of ranges) {
+    if (range.from === range.to) {
+      builder.add(range.from, range.to, range.deco);
+      continue;
+    }
+    if (range.from < lastTo) continue;
+    builder.add(range.from, range.to, range.deco);
+    lastTo = range.to;
+  }
+  return builder.finish();
+}
+const livePreview = ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = previewDecorations(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged || update.selectionSet) {
+        this.decorations = previewDecorations(update.view);
+      }
+    }
+  },
+  { decorations: (plugin) => plugin.decorations }
+);
+const VARIABLE_CLASS = {
+  declared: "cm-rich-var cm-rich-var-declared",
+  undeclared: "cm-rich-var cm-rich-var-undeclared",
+  literal: "cm-rich-var cm-rich-var-literal",
+  unbound: "cm-rich-var cm-rich-var-unbound"
+};
+function variableHighlighter(getVariables) {
+  const matcher = new MatchDecorator({
+    regexp: /\{\{[^{}\n]+\}\}/g,
+    decoration: (match) => {
+      const info = classifyVariable(match[0], getVariables());
+      return Decoration.mark({ class: VARIABLE_CLASS[info.state], attributes: { title: info.title } });
+    }
+  });
+  return ViewPlugin.fromClass(
+    class {
+      decorations;
+      constructor(view) {
+        this.decorations = matcher.createDeco(view);
+      }
+      update(update) {
+        this.decorations = matcher.updateDeco(update, this.decorations);
+      }
+    },
+    { decorations: (plugin) => plugin.decorations }
+  );
+}
+const setFindHighlights = StateEffect.define();
+const findField = StateField.define({
+  create: () => Decoration.none,
+  update: (value, tr) => {
+    let next = value.map(tr.changes);
+    for (const effect of tr.effects) {
+      if (effect.is(setFindHighlights)) {
+        const builder = new RangeSetBuilder();
+        for (const range of [...effect.value].sort((a, b) => a.from - b.from)) {
+          if (range.to <= range.from) continue;
+          builder.add(range.from, range.to, Decoration.mark({ class: range.current ? "cm-rich-find-current" : "cm-rich-find" }));
+        }
+        next = builder.finish();
+      }
+    }
+    return next;
+  },
+  provide: (field) => EditorView.decorations.from(field)
+});
+function livePreviewExtensions(options) {
+  return [livePreview, variableHighlighter(options.getVariables), islandField(options.registry), findField];
+}
+export {
+  IslandPortalRegistry,
+  findField,
+  livePreviewExtensions,
+  setFindHighlights,
+  setIslandRendering
+};

package/dist/source/markdown-language.d.ts

@@ -0,0 +1,2 @@
+import { Language } from "@codemirror/language";
+export declare const markdownSourceLanguage: Language;

package/dist/source/markdown-language.js

@@ -0,0 +1,7 @@
+import { Language, defineLanguageFacet } from "@codemirror/language";
+import { GFM, parser } from "@lezer/markdown";
+const data = defineLanguageFacet({ commentTokens: { block: { open: "<!--", close: "-->" } } });
+const markdownSourceLanguage = new Language(data, parser.configure([GFM]), [], "markdown");
+export {
+  markdownSourceLanguage
+};

package/dist/visual/BlockHandle.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from "react";
+import type { Editor } from "@tiptap/core";
+export declare function BlockHandle({ editor, container }: {
+    editor: Editor | null;
+    container: RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element | null;

package/dist/visual/BlockHandle.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { NodeSelection } from "@tiptap/pm/state";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+import { ArrowDown, ArrowUp, GripVertical, Heading1, Heading2, List, ListOrdered, Pilcrow, Quote, Trash2 } from "lucide-react";
+import { moveBlock, toggleTaskList } from "../core/commands.js";
+import { useRichEditorContext } from "../editor/RichEditorContext.js";
+function blockAt(editor, clientX, clientY) {
+  const view = editor.view;
+  const found = view.posAtCoords({ left: clientX, top: clientY });
+  if (!found) return null;
+  const $pos = view.state.doc.resolve(Math.min(found.inside >= 0 ? found.inside : found.pos, view.state.doc.content.size));
+  if ($pos.depth === 0 && found.inside < 0) return null;
+  const top = $pos.depth >= 1 ? $pos.before(1) : found.inside;
+  const topNode = view.state.doc.nodeAt(top);
+  let pos = top;
+  if (topNode?.type.name === "sourceBlock" && topNode.childCount > 1 && $pos.depth >= 2) pos = $pos.before(2);
+  const dom = view.nodeDOM(pos);
+  return dom instanceof HTMLElement ? { pos, dom } : null;
+}
+function BlockHandle({ editor, container }) {
+  const context = useRichEditorContext();
+  const [target, setTarget] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  useEffect(() => {
+    const host = container.current;
+    if (!host || !editor || context.readOnly) return;
+    if (!window.matchMedia("(pointer: fine)").matches) return;
+    const onMove = (event) => {
+      if (menuOpen) return;
+      const content = host.querySelector(".ProseMirror");
+      if (!content) return;
+      const bounds = content.getBoundingClientRect();
+      const hit = blockAt(editor, Math.max(event.clientX, bounds.left + 24), event.clientY);
+      if (!hit) return;
+      const rect = hit.dom.getBoundingClientRect();
+      const hostRect = host.getBoundingClientRect();
+      const left = Math.max(0, rect.left - hostRect.left - 28);
+      setTarget({ pos: hit.pos, top: rect.top - hostRect.top + host.scrollTop, left, height: rect.height });
+    };
+    const onLeave = () => {
+      if (!menuOpen) setTarget(null);
+    };
+    host.addEventListener("mousemove", onMove);
+    host.addEventListener("mouseleave", onLeave);
+    return () => {
+      host.removeEventListener("mousemove", onMove);
+      host.removeEventListener("mouseleave", onLeave);
+    };
+  }, [editor, container, menuOpen, context.readOnly]);
+  if (!editor || !target || context.readOnly) return null;
+  const select = () => {
+    const node = editor.state.doc.nodeAt(target.pos);
+    if (!node) return false;
+    editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, target.pos)));
+    return true;
+  };
+  const approveIslandsInside = () => {
+    const node = editor.state.doc.nodeAt(target.pos);
+    node?.descendants((child) => {
+      if (child.type.name === "inlineIsland" || child.type.name === "islandBlock") context.approveIsland(String(child.attrs.raw));
+      return true;
+    });
+    if (node?.type.name === "islandBlock") context.approveIsland(String(node.attrs.raw));
+  };
+  const turnInto = (run) => {
+    const node = editor.state.doc.nodeAt(target.pos);
+    if (node?.isTextblock || node?.type.name === "sourceBlock") {
+      editor.commands.setTextSelection(target.pos + (node.isTextblock ? 1 : 2));
+      run();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "absolute z-10 flex w-7 items-start justify-center",
+      style: { top: target.top, left: target.left, height: Math.min(target.height, 32) },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            draggable: true,
+            "aria-label": "Drag to move, or click for block actions",
+            "aria-haspopup": "menu",
+            "aria-expanded": menuOpen,
+            title: "Drag to move \xB7 click for actions",
+            className: "mt-1 flex h-6 w-5 cursor-grab items-center justify-center rounded text-muted-foreground/70 hover:bg-muted hover:text-foreground active:cursor-grabbing",
+            onClick: () => setMenuOpen(true),
+            onDragStart: (event) => {
+              if (!select()) return;
+              const slice = editor.state.selection.content();
+              editor.view.dragging = { slice, move: true };
+              const dom = editor.view.nodeDOM(target.pos);
+              event.dataTransfer.effectAllowed = "move";
+              event.dataTransfer.setData("text/plain", editor.state.doc.textBetween(target.pos, target.pos + (editor.state.doc.nodeAt(target.pos)?.nodeSize ?? 0), "\n"));
+              if (dom instanceof HTMLElement) event.dataTransfer.setDragImage(dom, 0, 0);
+            },
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute left-0 top-1 h-6 w-5" }) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "left", className: "w-52", children: [
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => select() && moveBlock(editor, "up"), children: [
+              /* @__PURE__ */ jsx(ArrowUp, { className: "mr-2 h-4 w-4" }),
+              " Move up"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => select() && moveBlock(editor, "down"), children: [
+              /* @__PURE__ */ jsx(ArrowDown, { className: "mr-2 h-4 w-4" }),
+              " Move down"
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => editor.chain().focus().setParagraph().run()), children: [
+              /* @__PURE__ */ jsx(Pilcrow, { className: "mr-2 h-4 w-4" }),
+              " Turn into text"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => editor.chain().focus().setHeading({ level: 1 }).run()), children: [
+              /* @__PURE__ */ jsx(Heading1, { className: "mr-2 h-4 w-4" }),
+              " Turn into heading 1"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => editor.chain().focus().setHeading({ level: 2 }).run()), children: [
+              /* @__PURE__ */ jsx(Heading2, { className: "mr-2 h-4 w-4" }),
+              " Turn into heading 2"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => editor.chain().focus().toggleBulletList().run()), children: [
+              /* @__PURE__ */ jsx(List, { className: "mr-2 h-4 w-4" }),
+              " Turn into bulleted list"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => editor.chain().focus().toggleOrderedList().run()), children: [
+              /* @__PURE__ */ jsx(ListOrdered, { className: "mr-2 h-4 w-4" }),
+              " Turn into numbered list"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => toggleTaskList(editor)), children: [
+              /* @__PURE__ */ jsx(List, { className: "mr-2 h-4 w-4" }),
+              " Turn into checklist"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => turnInto(() => editor.chain().focus().toggleBlockquote().run()), children: [
+              /* @__PURE__ */ jsx(Quote, { className: "mr-2 h-4 w-4" }),
+              " Turn into quote"
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                className: "text-destructive focus:text-destructive",
+                onSelect: () => {
+                  approveIslandsInside();
+                  if (select()) editor.commands.deleteSelection();
+                  setTarget(null);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                  " Delete block (Undo brings it back)"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  BlockHandle
+};

package/dist/visual/VisualEditor.d.ts

@@ -0,0 +1,56 @@
+import { type Ref } from "react";
+import { type VisualLoadStats } from "../core/visual-document.js";
+import { type CaretContext } from "../core/caret-context.js";
+import type { FindOptions } from "../core/find-replace.js";
+import { type RichShellActions } from "./visual-extensions.js";
+export interface ViewFindState {
+    count: number;
+    current: number;
+    skippedProtected: number;
+    error: string | null;
+}
+/** What the shell drives in whichever view is showing. */
+export interface EditorViewHandle {
+    focus: () => void;
+    selectedText: () => string;
+    /** Replace the selection with literal text (markdown typed by an AI stays markdown). */
+    replaceSelection: (text: string) => void;
+    /** Insert a block before / after the selection; false when it could not. */
+    insertText: (text: string, where: "before" | "after") => boolean;
+    /** Flush pending text now (before a save or a view switch). */
+    flush: () => string;
+    /**
+     * Steps this view's own undo history holds. Zero after a (re)mount — a host
+     * that keeps a record-level history (notes) answers ⌘Z then.
+     */
+    historyDepth: () => {
+        undo: number;
+        redo: number;
+    };
+    scrollToHeading: (slug: string, offset: number) => void;
+    /** Put the caret at the text the person double-clicked in the rendered view; false when not found. */
+    placeCaret: (context: CaretContext) => boolean;
+    find: (query: string, options: FindOptions, step?: 1 | -1) => ViewFindState;
+    replaceCurrent: (query: string, replacement: string, options: FindOptions) => string[];
+    replaceAll: (query: string, replacement: string, options: FindOptions) => string[];
+    clearFind: () => void;
+    editLink: (href: string | null) => void;
+    currentLink: () => string | null;
+    /**
+     * Source view only: the scroll container, the (0-based, fractional) line at
+     * the top of the viewport, and scrolling a line to the top.
+     */
+    scroller?: () => HTMLElement | null;
+    topLine?: () => number;
+    scrollToLine?: (lineIndex: number) => void;
+}
+export interface VisualEditorProps {
+    initialText: string;
+    onChange: (text: string) => void;
+    onLoadStats?: (stats: VisualLoadStats) => void;
+    shell: RichShellActions;
+    placeholder?: string;
+    focusMode: boolean;
+    handleRef: Ref<EditorViewHandle>;
+}
+export declare function VisualEditor({ initialText, onChange, onLoadStats, shell, placeholder, focusMode, handleRef, }: VisualEditorProps): import("react").JSX.Element;