@threadlabs/looma 0.28.1 → 0.28.2

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/package.json

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

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.js

@@ -1,8 +1,8 @@
 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 { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
@@ -737,6 +737,63 @@ 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
@@ -2206,13 +2263,7 @@ 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 codeHighlighting = createCodeHighlighting(props.codeLanguages, () => {
@@ -2228,83 +2279,96 @@ var LoomaEditor = defineComponent({
 			style: {}
 		});
 		const loadForCodeBlock = codeHighlighting.loadForCodeBlock;
-		const editor = useEditor({
-			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();
+		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;
@@ -2773,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;
@@ -3710,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",