@threadlabs/looma 0.27.6 → 0.28.1

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, 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 { 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 { 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.
@@ -1382,6 +1510,42 @@ var dividerNodeView = ({ editor, getPos }) => {
 	};
 };
 //#endregion
+//#region src/vue/editor/callout.ts
+/**
+* Draws an editor callout with Looma's Callout, so it looks the same as a callout in any page.
+* @lifecycle ProseMirror owns the content DOM inside Callout's slot; destroying the view
+* releases its Vue app.
+*/
+var calloutNodeView = ({ node }) => {
+	const dom = document.createElement("div");
+	dom.dataset.loomaCallout = "";
+	const current = shallowRef(node);
+	let contentDOM;
+	const app = createApp({ render: () => h(Callout, {
+		tone: current.value.attrs.tone,
+		heading: current.value.attrs.heading || void 0
+	}, () => h("div", {
+		"data-looma-callout-body": "",
+		ref: (element) => {
+			if (element) contentDOM = element;
+		}
+	})) });
+	app.mount(dom);
+	return {
+		dom,
+		contentDOM,
+		update(next) {
+			if (next.type !== current.value.type) return false;
+			current.value = next;
+			return true;
+		},
+		ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target),
+		destroy() {
+			app.unmount();
+		}
+	};
+};
+//#endregion
 //#region src/vue/editor/image-controls.ts
 var placements = [
 	{
@@ -1633,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: []
@@ -1672,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()) {
@@ -1724,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",
@@ -2108,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,
@@ -2122,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({
@@ -2162,10 +2236,11 @@ var LoomaEditor = defineComponent({
 					mention: mentionExtension ?? false,
 					disableHighlight: props.disableHighlight,
 					codeLanguages: props.codeLanguages ?? void 0,
-					codeLowlight: codeHighlightLowlight,
+					codeLowlight: codeHighlighting.lowlight,
 					tableOfContentsNodeView,
 					expandNodeView,
 					dividerNodeView,
+					calloutNodeView,
 					imageNodeView
 				}),
 				imageDelivery.extension,
@@ -2786,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",
@@ -3799,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);
 					},
@@ -3820,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;