@threadlabs/looma 0.28.0 → 0.28.2

package/editor/code-highlighting.d.ts

@@ -0,0 +1,25 @@
+import type { Editor } from "@tiptap/core";
+import { createLowlight } from "lowlight";
+import type { LoomaCodeLanguages } from "./extensions/preset.js";
+/** Code-block highlighting for one editor: its lowlight registry, picker languages, and grammar loading. */
+export interface LoomaCodeHighlighting {
+    /** The registry the code-block extension highlights with. */
+    readonly lowlight: ReturnType<typeof createLowlight>;
+    /** Languages the picker offers, in display order. */
+    readonly languageNames: readonly string[];
+    /**
+     * Loads the grammar a code block needs, then re-highlights the document.
+     *
+     * @contract Does nothing when the host supplied its own languages; each grammar loads once.
+     * @failure A failed import is forgotten so a later call retries it.
+     */
+    loadForCodeBlock(editor: Editor, language: unknown, value: string): void;
+}
+/**
+ * Highlighting from the host's `codeLanguages`, or, when that is null, from the built-in catalog,
+ * whose grammars load on demand and whose automatic detection uses a common subset.
+ *
+ * @lifecycle `onGrammarsLoaded` runs after each lazy load, before the document is re-highlighted,
+ * because the lowlight registry is mutable rather than reactive.
+ */
+export declare function createCodeHighlighting(codeLanguages: LoomaCodeLanguages | null, onGrammarsLoaded: () => void): LoomaCodeHighlighting;

package/editor/content.d.ts

@@ -0,0 +1,10 @@
+import type { JSONContent } from "@tiptap/core";
+/** Whether a controlled document already matches the editor, so applying it would only reset the selection. */
+export declare function sameDocument(left: JSONContent, right: JSONContent): boolean;
+/**
+ * A link destination the editor may store: a site-relative path, fragment, or query, or an
+ * absolute http, https, mailto, or tel URL.
+ *
+ * @failure Returns null for empty input, control characters, other schemes, and unparseable URLs.
+ */
+export declare function validLinkHref(value: string): string | null;

package/{vue/editor → editor}/image-delivery.d.ts

@@ -1,5 +1,5 @@
 import { Extension, type Editor, type JSONContent } from "@tiptap/core";
-export { normalizeImageDimension } from "../../editor/extensions/image.js";
+export { normalizeImageDimension } from "./extensions/image.js";
 /** What caused an overlay to open or close. */
 type OverlayTrigger = "keyboard" | "pointer" | "programmatic";
 /**

package/editor/selection-geometry.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from "@tiptap/core";
+import type { SlashMenuAnchorRect } from "./slash-menu.js";
+/** A plain copy of a client rectangle, the anchor shape the slash and mention menus accept as a prop. */
+export declare function menuAnchorRect(rect: DOMRect | null): SlashMenuAnchorRect | null;
+/** The rendered table that holds the selection's start. */
+export declare function selectedTableElement(editor: Editor): HTMLTableElement | null;
+/** The rendered cell that holds the selection's start. */
+export declare function selectedTableCellElement(editor: Editor): HTMLTableCellElement | null;

package/editor/session.d.ts

@@ -0,0 +1,39 @@
+import { Editor, type EditorOptions, type JSONContent } from "@tiptap/core";
+import { type Selection, type SelectionBookmark } from "@tiptap/pm/state";
+/** A selection remembered so a controlled document replacement can put it back. */
+export interface LoomaSelectionSnapshot {
+    bookmark: SelectionBookmark;
+    from: number;
+    to: number;
+    text: boolean;
+}
+export declare function selectionSnapshot(selection: Selection): LoomaSelectionSnapshot;
+/**
+ * One editor's Tiptap instance, independent of any component framework.
+ *
+ * @ownership The session owns the `Editor` from creation until `destroy()`. A host renders an
+ * element for the document and hands it to `attach()`; it never creates or destroys the editor.
+ * @lifecycle The editor, its document, and its undo history survive `attach()` to a new element,
+ * so a host can remount its view without losing state.
+ */
+export interface LoomaEditorSession<E extends Editor = Editor> {
+    readonly editor: E;
+    /** Moves the editor's view into `element` (idempotent). */
+    attach(element: HTMLElement): void;
+    /**
+     * Applies a controlled document.
+     *
+     * @contract Returns false, and leaves the editor untouched, when the document already matches.
+     * A focused editor keeps `selection` (or its current selection) in the same transaction.
+     * @failure A selection the new document cannot hold becomes the closest valid text range.
+     */
+    setContent(content: JSONContent, selection?: LoomaSelectionSnapshot | null): boolean;
+    /** Calls `listener` after every transaction; returns the unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    destroy(): void;
+}
+/**
+ * Creates the session's editor from `options`. A framework layer may pass its own `Editor`
+ * subclass, such as `@tiptap/vue-3`'s reactive one, so the editor it exposes keeps that behavior.
+ */
+export declare function createEditorSession<E extends Editor = Editor>(options: Partial<EditorOptions>, EditorClass?: new (options: Partial<EditorOptions>) => E): LoomaEditorSession<E>;

package/editor/shortcuts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
+ * it: modifier symbols in Apple's order on Apple devices (⇧⌘8), and Ctrl+Shift+8 elsewhere.
+ */
+export declare function formatEditorShortcut(keys: string, apple: boolean): string;
+export declare const isApplePlatform: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/LoomaEditor.d.ts

@@ -3,7 +3,7 @@ import "./looma-editor.css";
 import { type AnyExtension, type Editor, type JSONContent } from "@tiptap/core";
 import { type PropType, type VNode } from "vue";
 import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaMentionProvider, type LoomaCodeLanguages } from "@threadlabs/looma/editor";
-import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "./image-delivery.js";
+import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
 /**
  * Host upload result normalized into the editor's durable image descriptor.
  * `url` becomes the stored `src`; optional dimensions preserve layout before
@@ -368,10 +368,10 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
 }>, {
-    label: string;
-    placeholder: string;
     extensions: AnyExtension[];
     editable: boolean;
+    label: string;
+    placeholder: string;
     linkBaseUrl: string;
     disableHighlight: boolean;
     codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>> | null;

package/vue/editor/compact/index.d.ts

@@ -62,10 +62,10 @@ export declare const LoomaCompactEditor: import("vue").DefineComponent<import("v
     "onUpdate:modelValue"?: ((_value: JSONContent) => any) | undefined;
     onReady?: ((_editor: Editor) => any) | undefined;
 }>, {
-    label: string;
-    id: string;
     extensions: AnyExtension[];
     editable: boolean;
+    label: string;
+    id: string;
     modelValue: JSONContent;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** Renders basic compact JSON as escaped Vue nodes, including during SSR. */

package/vue/editor/compact/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import { Extension, Mark, Node, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
-import { Editor, EditorContent } from "@tiptap/vue-3";
+import { Editor as Editor$1, EditorContent } from "@tiptap/vue-3";
 import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
 import { Plugin } from "@tiptap/pm/state";
 //#region ../../node_modules/.pnpm/@tiptap+extension-document@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-document/dist/index.js
@@ -498,7 +498,7 @@ var LoomaCompactEditor = defineComponent({
 	setup(props, { attrs, emit, expose }) {
 		const editor = shallowRef();
 		onMounted(() => {
-			editor.value = new Editor({
+			editor.value = new Editor$1({
 				extensions: [...getCompactEditorExtensions(), ...props.extensions],
 				content: props.modelValue,
 				editable: props.editable,

package/vue/editor/index.d.ts

@@ -1,4 +1,4 @@
 export * from "@threadlabs/looma/editor";
 export * from "./primitives.js";
 export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorSlashCommands, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkResolve, type LoomaImageUploader, type LoomaImageUploadResult, } from "./LoomaEditor.js";
-export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "./image-delivery.js";
+export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "../../editor/image-delivery.js";

package/vue/editor/index.js

@@ -1,12 +1,12 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt, siteRelativeHref } from "@threadlabs/looma/editor";
 import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, EditorToolbar as EditorToolbar$1, FormField, Icon, IconButton, Image, Input, InputGroup, List, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
-import { Extension, Node as Node$1, getText, getTextSerializersFromSchema, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
-import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
+import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
+import { BubbleMenu, Editor as Editor$1 } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
-import { createLowlight } from "lowlight";
 import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { createLowlight } from "lowlight";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
 //#region src/vue/editor/primitives.ts
@@ -272,7 +272,7 @@ Image$1.extend({ addAttributes() {
 	};
 } });
 //#endregion
-//#region src/vue/editor/image-delivery.ts
+//#region src/editor/image-delivery.ts
 function optionalString(value) {
 	return typeof value === "string" && value.length > 0 ? value : void 0;
 }
@@ -409,7 +409,7 @@ function imageUploadContent(image) {
 	};
 }
 //#endregion
-//#region src/vue/editor/code-language-catalog.ts
+//#region src/editor/code-language-catalog.ts
 var codeLanguageCatalog = {
 	"1c": () => import("../chunks/1c.js").then((module) => module.default),
 	"abnf": () => import("../chunks/abnf.js").then((module) => module.default),
@@ -628,6 +628,191 @@ var autoCodeLanguageNames = [
 	"yaml"
 ];
 //#endregion
+//#region src/editor/code-highlighting.ts
+/**
+* Highlighting from the host's `codeLanguages`, or, when that is null, from the built-in catalog,
+* whose grammars load on demand and whose automatic detection uses a common subset.
+*
+* @lifecycle `onGrammarsLoaded` runs after each lazy load, before the document is re-highlighted,
+* because the lowlight registry is mutable rather than reactive.
+*/
+function createCodeHighlighting(codeLanguages, onGrammarsLoaded) {
+	const registry = createLowlight(codeLanguages ?? void 0);
+	const lowlight = codeLanguages === null ? {
+		...registry,
+		highlightAuto: (value) => registry.highlightAuto(value, { subset: [...autoCodeLanguageNames] })
+	} : registry;
+	const languageNames = codeLanguages === null ? [...autoCodeLanguageNames, ...Object.keys(codeLanguageCatalog).filter((name) => !autoCodeLanguageNames.includes(name)).sort()] : Object.keys(codeLanguages).sort();
+	const grammarLoads = /* @__PURE__ */ new Map();
+	let catalogLoad;
+	const refresh = (editor) => {
+		if (editor.isDestroyed) return;
+		onGrammarsLoaded();
+		const tr = editor.state.tr;
+		editor.state.doc.descendants((node, pos) => {
+			if (node.type.name === "codeBlock") tr.setNodeMarkup(pos, void 0, node.attrs);
+		});
+		if (tr.docChanged) editor.view.dispatch(tr.setMeta("addToHistory", false));
+	};
+	const loadGrammar = (name) => {
+		const existing = grammarLoads.get(name);
+		if (existing) return existing;
+		const pending = codeLanguageCatalog[name]().then((grammar) => {
+			registry.register({ [name]: grammar });
+		}).catch((error) => {
+			grammarLoads.delete(name);
+			throw error;
+		});
+		grammarLoads.set(name, pending);
+		return pending;
+	};
+	return {
+		lowlight,
+		languageNames,
+		loadForCodeBlock(editor, language, value) {
+			if (codeLanguages !== null || editor.isDestroyed) return;
+			if (typeof language === "string" && Object.hasOwn(codeLanguageCatalog, language)) {
+				if (registry.registered(language) || grammarLoads.has(language)) return;
+				loadGrammar(language).then(() => refresh(editor)).catch(() => {});
+			} else if (!language && value.trim()) catalogLoad ??= Promise.all(autoCodeLanguageNames.map((name) => loadGrammar(name))).then(() => refresh(editor)).catch(() => {
+				catalogLoad = void 0;
+			});
+		}
+	};
+}
+//#endregion
+//#region src/editor/content.ts
+/** Whether a controlled document already matches the editor, so applying it would only reset the selection. */
+function sameDocument(left, right) {
+	return JSON.stringify(left) === JSON.stringify(right);
+}
+/**
+* A link destination the editor may store: a site-relative path, fragment, or query, or an
+* absolute http, https, mailto, or tel URL.
+*
+* @failure Returns null for empty input, control characters, other schemes, and unparseable URLs.
+*/
+function validLinkHref(value) {
+	const href = value.trim();
+	if (!href || /[\u0000-\u001f\u007f]/.test(href)) return null;
+	if (/^(\/|#|\?)/.test(href)) return href;
+	try {
+		const url = new URL(href);
+		return [
+			"http:",
+			"https:",
+			"mailto:",
+			"tel:"
+		].includes(url.protocol) ? href : null;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/editor/selection-geometry.ts
+/** A plain copy of a client rectangle, the anchor shape the slash and mention menus accept as a prop. */
+function menuAnchorRect(rect) {
+	if (!rect) return null;
+	return {
+		left: rect.left,
+		top: rect.top,
+		right: rect.right,
+		bottom: rect.bottom,
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height
+	};
+}
+function selectionElement(editor) {
+	const { node } = editor.view.domAtPos(editor.state.selection.from);
+	return node instanceof HTMLElement ? node : node.parentElement;
+}
+/** The rendered table that holds the selection's start. */
+function selectedTableElement(editor) {
+	return selectionElement(editor)?.closest("table");
+}
+/** The rendered cell that holds the selection's start. */
+function selectedTableCellElement(editor) {
+	return selectionElement(editor)?.closest("td, th");
+}
+//#endregion
+//#region src/editor/session.ts
+function selectionSnapshot(selection) {
+	return {
+		bookmark: selection.getBookmark(),
+		from: selection.from,
+		to: selection.to,
+		text: selection instanceof TextSelection
+	};
+}
+/**
+* Creates the session's editor from `options`. A framework layer may pass its own `Editor`
+* subclass, such as `@tiptap/vue-3`'s reactive one, so the editor it exposes keeps that behavior.
+*/
+function createEditorSession(options, EditorClass = Editor) {
+	const editor = new EditorClass(options);
+	return {
+		editor,
+		attach(element) {
+			const current = editor.options.element;
+			if (editor.isDestroyed || current === element || !current.firstChild) return;
+			element.append(...current.childNodes);
+			editor.setOptions({ element });
+			editor.createNodeViews();
+		},
+		setContent(content, selection) {
+			if (editor.isDestroyed || sameDocument(editor.getJSON(), content)) return false;
+			const previous = selection ?? selectionSnapshot(editor.view.state.selection);
+			if (!editor.isFocused) {
+				editor.commands.setContent(content, false);
+				return true;
+			}
+			editor.chain().setContent(content, false).command(({ tr }) => {
+				try {
+					tr.setSelection(previous.text ? TextSelection.create(tr.doc, previous.from, previous.to) : previous.bookmark.resolve(tr.doc));
+				} catch {
+					const max = tr.doc.content.size;
+					const from = Math.max(1, Math.min(previous.from, max));
+					const to = Math.max(from, Math.min(previous.to, max));
+					tr.setSelection(TextSelection.create(tr.doc, from, to));
+				}
+				return true;
+			}).run();
+			editor.view.focus();
+			return true;
+		},
+		subscribe(listener) {
+			editor.on("transaction", listener);
+			return () => {
+				editor.off("transaction", listener);
+			};
+		},
+		destroy() {
+			editor.destroy();
+		}
+	};
+}
+//#endregion
+//#region src/editor/shortcuts.ts
+/**
+* Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
+* it: modifier symbols in Apple's order on Apple devices (⇧⌘8), and Ctrl+Shift+8 elsewhere.
+*/
+function formatEditorShortcut(keys, apple) {
+	const parts = keys.split("-");
+	const key = (parts.pop() ?? "").toUpperCase();
+	const has = (name) => parts.includes(name);
+	if (apple) return `${has("Ctrl") ? "⌃" : ""}${has("Alt") ? "⌥" : ""}${has("Shift") ? "⇧" : ""}${has("Mod") ? "⌘" : ""}${key}`;
+	return [
+		has("Mod") || has("Ctrl") ? "Ctrl" : "",
+		has("Alt") ? "Alt" : "",
+		has("Shift") ? "Shift" : "",
+		key
+	].filter(Boolean).join("+");
+}
+var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
+//#endregion
 //#region src/editor/extensions/expand.ts
 /**
 * Reveals collapsed ancestors before a host navigates to a document position.
@@ -1669,23 +1854,6 @@ var imageNodeView = ({ editor, node, getPos, decorations }) => {
 };
 //#endregion
 //#region src/vue/editor/LoomaEditor.ts
-/**
-* Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
-* it: modifier symbols in Apple's order on Apple devices (⇧⌘8), and Ctrl+Shift+8 elsewhere.
-*/
-function formatEditorShortcut(keys, apple) {
-	const parts = keys.split("-");
-	const key = (parts.pop() ?? "").toUpperCase();
-	const has = (name) => parts.includes(name);
-	if (apple) return `${has("Ctrl") ? "⌃" : ""}${has("Alt") ? "⌥" : ""}${has("Shift") ? "⇧" : ""}${has("Mod") ? "⌘" : ""}${key}`;
-	return [
-		has("Mod") || has("Ctrl") ? "Ctrl" : "",
-		has("Alt") ? "Alt" : "",
-		has("Shift") ? "Shift" : "",
-		key
-	].filter(Boolean).join("+");
-}
-var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
 var EMPTY_DOCUMENT = {
 	type: "doc",
 	content: []
@@ -1708,38 +1876,6 @@ var EMPTY_CAPABILITIES = {
 	canMergeCells: false,
 	canSplitCell: false
 };
-function sameDocument(left, right) {
-	return JSON.stringify(left) === JSON.stringify(right);
-}
-function validLinkHref(value) {
-	const href = value.trim();
-	if (!href || /[\u0000-\u001f\u007f]/.test(href)) return null;
-	if (/^(\/|#|\?)/.test(href)) return href;
-	try {
-		const url = new URL(href);
-		return [
-			"http:",
-			"https:",
-			"mailto:",
-			"tel:"
-		].includes(url.protocol) ? href : null;
-	} catch {
-		return null;
-	}
-}
-function managedMenuAnchorRect(rect) {
-	if (!rect) return null;
-	return {
-		left: rect.left,
-		top: rect.top,
-		right: rect.right,
-		bottom: rect.bottom,
-		x: rect.x,
-		y: rect.y,
-		width: rect.width,
-		height: rect.height
-	};
-}
 function slashMenuRows(items) {
 	const groups = [];
 	for (const [index, item] of items.entries()) {
@@ -1760,14 +1896,6 @@ function slashMenuRows(items) {
 		label
 	}, () => rows)] : rows);
 }
-function selectedTableElement(editor) {
-	const { node } = editor.view.domAtPos(editor.state.selection.from);
-	return (node instanceof HTMLElement ? node : node.parentElement)?.closest("table");
-}
-function selectedTableCellElement(editor) {
-	const { node } = editor.view.domAtPos(editor.state.selection.from);
-	return (node instanceof HTMLElement ? node : node.parentElement)?.closest("td, th");
-}
 function loomaIcon(name) {
 	return h("svg", {
 		class: "looma-icon",
@@ -2135,21 +2263,13 @@ var LoomaEditor = defineComponent({
 		let linkPressedSelection = null;
 		const rememberSelection = (instance) => {
 			if (!instance.isFocused) return;
-			const selection = instance.view.state.selection;
-			lastFocusedSelection = {
-				bookmark: selection.getBookmark(),
-				from: selection.from,
-				to: selection.to,
-				text: selection instanceof TextSelection
-			};
+			lastFocusedSelection = selectionSnapshot(instance.view.state.selection);
 		};
 		const authorHighlight = !props.disableHighlight;
-		const codeLowlight = createLowlight(props.codeLanguages ?? void 0);
-		const codeHighlightLowlight = props.codeLanguages === null ? {
-			...codeLowlight,
-			highlightAuto: (value) => codeLowlight.highlightAuto(value, { subset: [...autoCodeLanguageNames] })
-		} : codeLowlight;
-		const codeLanguageNames = props.codeLanguages === null ? [...autoCodeLanguageNames, ...Object.keys(codeLanguageCatalog).filter((name) => !autoCodeLanguageNames.includes(name)).sort()] : Object.keys(props.codeLanguages).sort();
+		const codeHighlighting = createCodeHighlighting(props.codeLanguages, () => {
+			codeUi.grammarVersion += 1;
+		});
+		const codeLanguageNames = codeHighlighting.languageNames;
 		const codeUi = reactive({
 			open: false,
 			pos: 0,
@@ -2158,115 +2278,97 @@ var LoomaEditor = defineComponent({
 			grammarVersion: 0,
 			style: {}
 		});
-		const grammarLoads = /* @__PURE__ */ new Map();
-		let catalogLoad;
-		const refreshCodeHighlights = (instance) => {
-			if (instance.isDestroyed) return;
-			codeUi.grammarVersion += 1;
-			const tr = instance.state.tr;
-			instance.state.doc.descendants((node, pos) => {
-				if (node.type.name === "codeBlock") tr.setNodeMarkup(pos, void 0, node.attrs);
-			});
-			if (tr.docChanged) instance.view.dispatch(tr.setMeta("addToHistory", false));
-		};
-		const loadGrammar = (name) => {
-			const existing = grammarLoads.get(name);
-			if (existing) return existing;
-			const pending = codeLanguageCatalog[name]().then((grammar) => {
-				codeLowlight.register({ [name]: grammar });
-			}).catch((error) => {
-				grammarLoads.delete(name);
-				throw error;
-			});
-			grammarLoads.set(name, pending);
-			return pending;
-		};
-		const loadForCodeBlock = (instance, language, value) => {
-			if (props.codeLanguages !== null || instance.isDestroyed) return;
-			if (typeof language === "string" && Object.hasOwn(codeLanguageCatalog, language)) {
-				if (codeLowlight.registered(language) || grammarLoads.has(language)) return;
-				loadGrammar(language).then(() => refreshCodeHighlights(instance)).catch(() => {});
-			} else if (!language && value.trim()) catalogLoad ??= Promise.all(autoCodeLanguageNames.map((name) => loadGrammar(name))).then(() => refreshCodeHighlights(instance)).catch(() => {
-				catalogLoad = void 0;
-			});
-		};
-		const editor = useEditor({
-			extensions: [
-				...getDefaultEditorExtensions({
-					placeholder: props.placeholder,
-					linkBaseUrl: props.linkBaseUrl,
-					mention: mentionExtension ?? false,
-					disableHighlight: props.disableHighlight,
-					codeLanguages: props.codeLanguages ?? void 0,
-					codeLowlight: codeHighlightLowlight,
-					tableOfContentsNodeView,
-					expandNodeView,
-					dividerNodeView,
-					calloutNodeView,
-					imageNodeView
-				}),
-				imageDelivery.extension,
-				slashExtension,
-				...props.extensions
-			],
-			content: props.modelValue,
-			editable: props.editable,
-			editorProps: {
-				attributes: {
-					role: "textbox",
-					"aria-multiline": "true",
-					"aria-label": props.label
-				},
-				handleKeyDown: (_view, event) => onFormattingKeyDown(event),
-				handleDOMEvents: { click: (view, event) => {
-					if (!(event.target instanceof Element) || event.button !== 0) return false;
-					const link = event.target.closest("a[href]");
-					if (!link || !view.dom.contains(link)) return false;
-					const href = validLinkHref(link.getAttribute("href") ?? "");
-					if (!href) return false;
-					if (isApplePlatform() ? event.metaKey : event.ctrlKey) {
-						event.preventDefault();
-						window.open(href, "_blank", "noopener,noreferrer");
-						return true;
-					}
-					dismissedFormattingSelection = null;
-					requestAnimationFrame(() => {
-						if (view.isDestroyed) return;
-						editorStateVersion.value += 1;
-						const instance = editor.value;
-						if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
-							linkPopup?.setProps({ getReferenceClientRect: () => link.getBoundingClientRect() });
-							linkPopup?.show();
+		const loadForCodeBlock = codeHighlighting.loadForCodeBlock;
+		const editor = shallowRef();
+		let session;
+		onMounted(() => {
+			session = createEditorSession({
+				extensions: [
+					...getDefaultEditorExtensions({
+						placeholder: props.placeholder,
+						linkBaseUrl: props.linkBaseUrl,
+						mention: mentionExtension ?? false,
+						disableHighlight: props.disableHighlight,
+						codeLanguages: props.codeLanguages ?? void 0,
+						codeLowlight: codeHighlighting.lowlight,
+						tableOfContentsNodeView,
+						expandNodeView,
+						dividerNodeView,
+						calloutNodeView,
+						imageNodeView
+					}),
+					imageDelivery.extension,
+					slashExtension,
+					...props.extensions
+				],
+				content: props.modelValue,
+				editable: props.editable,
+				editorProps: {
+					attributes: {
+						role: "textbox",
+						"aria-multiline": "true",
+						"aria-label": props.label
+					},
+					handleKeyDown: (_view, event) => onFormattingKeyDown(event),
+					handleDOMEvents: { click: (view, event) => {
+						if (!(event.target instanceof Element) || event.button !== 0) return false;
+						const link = event.target.closest("a[href]");
+						if (!link || !view.dom.contains(link)) return false;
+						const href = validLinkHref(link.getAttribute("href") ?? "");
+						if (!href) return false;
+						if (isApplePlatform() ? event.metaKey : event.ctrlKey) {
+							event.preventDefault();
+							window.open(href, "_blank", "noopener,noreferrer");
+							return true;
 						}
+						dismissedFormattingSelection = null;
+						requestAnimationFrame(() => {
+							if (view.isDestroyed) return;
+							editorStateVersion.value += 1;
+							const instance = editor.value;
+							if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
+								linkPopup?.setProps({ getReferenceClientRect: () => link.getBoundingClientRect() });
+								linkPopup?.show();
+							}
+						});
+						return false;
+					} }
+				},
+				onCreate: ({ editor: instance }) => {
+					emit("ready", instance);
+					instance.state.doc.descendants((node) => {
+						if (node.type.name === "codeBlock") loadForCodeBlock(instance, node.attrs.language, node.textContent);
 					});
-					return false;
-				} }
-			},
-			onCreate: ({ editor: instance }) => {
-				emit("ready", instance);
-				instance.state.doc.descendants((node) => {
-					if (node.type.name === "codeBlock") loadForCodeBlock(instance, node.attrs.language, node.textContent);
-				});
-			},
-			onFocus: ({ editor: instance }) => rememberSelection(instance),
-			onSelectionUpdate: ({ editor: instance }) => {
-				rememberSelection(instance);
-				if (floatingFormattingMode()) {
-					const selection = instance.state.selection;
-					if (!dismissedFormattingSelection?.eq(selection)) dismissedFormattingSelection = null;
-					if (!heldFormattingSelection?.eq(selection)) heldFormattingSelection = null;
-					if (!formattingSelectionActive(instance)) formattingPopup?.hide();
+				},
+				onFocus: ({ editor: instance }) => rememberSelection(instance),
+				onSelectionUpdate: ({ editor: instance }) => {
+					rememberSelection(instance);
+					if (floatingFormattingMode()) {
+						const selection = instance.state.selection;
+						if (!dismissedFormattingSelection?.eq(selection)) dismissedFormattingSelection = null;
+						if (!heldFormattingSelection?.eq(selection)) heldFormattingSelection = null;
+						if (!formattingSelectionActive(instance)) formattingPopup?.hide();
+					}
+					if (linkContextEditing.value && instance.state.selection.from !== linkSelection?.from) linkContextEditing.value = false;
+				},
+				onUpdate: ({ editor: instance }) => {
+					const value = instance.getJSON();
+					emit("update:modelValue", value);
+					emit("update", value);
 				}
-				if (linkContextEditing.value && instance.state.selection.from !== linkSelection?.from) linkContextEditing.value = false;
-			},
-			onTransaction: () => {
+			}, Editor$1);
+			session.subscribe(() => {
 				editorStateVersion.value += 1;
-			},
-			onUpdate: ({ editor: instance }) => {
-				const value = instance.getJSON();
-				emit("update:modelValue", value);
-				emit("update", value);
-			}
+			});
+			editor.value = session.editor;
+		});
+		const attachDocument = (element) => {
+			if (element instanceof HTMLElement) session?.attach(element);
+		};
+		onBeforeUnmount(() => {
+			const element = session?.editor.options.element;
+			element?.parentNode?.replaceChild(element.cloneNode(true), element);
+			session?.destroy();
 		});
 		watch(() => {
 			editorStateVersion.value;
@@ -2735,31 +2837,9 @@ var LoomaEditor = defineComponent({
 		});
 		watch(() => props.modelValue, (value) => {
 			const instance = editor.value;
-			if (!instance || sameDocument(instance.getJSON(), value)) return;
+			if (!instance || !session) return;
 			const wasFocused = instance.isFocused;
-			const previousSelection = lastFocusedSelection ?? {
-				bookmark: instance.view.state.selection.getBookmark(),
-				from: instance.view.state.selection.from,
-				to: instance.view.state.selection.to,
-				text: instance.view.state.selection instanceof TextSelection
-			};
-			if (!wasFocused) {
-				instance.commands.setContent(value, false);
-				return;
-			}
-			instance.chain().setContent(value, false).command(({ tr }) => {
-				try {
-					tr.setSelection(previousSelection.text ? TextSelection.create(tr.doc, previousSelection.from, previousSelection.to) : previousSelection.bookmark.resolve(tr.doc));
-				} catch {
-					const max = tr.doc.content.size;
-					const from = Math.max(1, Math.min(previousSelection.from, max));
-					const to = Math.max(from, Math.min(previousSelection.to, max));
-					tr.setSelection(TextSelection.create(tr.doc, from, to));
-				}
-				return true;
-			}).run();
-			instance.view.focus();
-			rememberSelection(instance);
+			if (session.setContent(value, lastFocusedSelection) && wasFocused) rememberSelection(instance);
 		}, { deep: true });
 		const closeTableUi = () => {
 			tableUi.toolbarOpen = false;
@@ -2823,7 +2903,7 @@ var LoomaEditor = defineComponent({
 		};
 		const codeLanguageOptions = computed(() => {
 			codeUi.grammarVersion;
-			const detected = codeUi.open && codeUi.text.trim() ? codeHighlightLowlight.highlightAuto(codeUi.text).data?.language : null;
+			const detected = codeUi.open && codeUi.text.trim() ? codeHighlighting.lowlight.highlightAuto(codeUi.text).data?.language : null;
 			return [
 				{
 					value: "auto",
@@ -3672,7 +3752,7 @@ var LoomaEditor = defineComponent({
 						}
 					}
 				}, { default: () => h(ImageControls, { editor: instance }) }) : null,
-				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h(EditorContent, { editor: instance })) : null,
+				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h("div", { ref: attachDocument })) : null,
 				codeUi.open ? h("div", {
 					ref: codeLanguageRef,
 					class: "looma-editor__code-language",
@@ -3836,7 +3916,7 @@ var LoomaEditor = defineComponent({
 					open: true,
 					query: slash.query,
 					selectedIndex: slash.selectedIndex,
-					anchorRect: managedMenuAnchorRect(slash.rect),
+					anchorRect: menuAnchorRect(slash.rect),
 					onHighlight: (event) => {
 						slash.highlight?.(event.detail.index);
 					},
@@ -3857,7 +3937,7 @@ var LoomaEditor = defineComponent({
 					query: mention.query,
 					items: mention.items,
 					selectedIndex: mention.selectedIndex,
-					anchorRect: managedMenuAnchorRect(mention.rect),
+					anchorRect: menuAnchorRect(mention.rect),
 					loading: mention.loading,
 					onHighlight: (event) => {
 						mention.selectedIndex = event.detail.index;