@threadlabs/looma 0.28.0 → 0.28.1

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/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.1",
   "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/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

@@ -4,9 +4,9 @@ import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorI
 import { Extension, Node as Node$1, getText, getTextSerializersFromSchema, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { BubbleMenu, EditorContent, useEditor } 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,134 @@ 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/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 +1797,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 +1819,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 +1839,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",
@@ -2144,12 +2215,10 @@ var LoomaEditor = defineComponent({
 			};
 		};
 		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,38 +2227,7 @@ 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 loadForCodeBlock = codeHighlighting.loadForCodeBlock;
 		const editor = useEditor({
 			extensions: [
 				...getDefaultEditorExtensions({
@@ -2198,7 +2236,7 @@ var LoomaEditor = defineComponent({
 					mention: mentionExtension ?? false,
 					disableHighlight: props.disableHighlight,
 					codeLanguages: props.codeLanguages ?? void 0,
-					codeLowlight: codeHighlightLowlight,
+					codeLowlight: codeHighlighting.lowlight,
 					tableOfContentsNodeView,
 					expandNodeView,
 					dividerNodeView,
@@ -2823,7 +2861,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",
@@ -3836,7 +3874,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 +3895,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;