@threadlabs/looma 0.29.1 → 0.29.2

package/editor/chip-editing.d.ts

@@ -0,0 +1,39 @@
+import type { Editor } from "@tiptap/core";
+import { type LoomaChipColor } from "./extensions/chip.js";
+/** The chip editor's state: whether it is open, and the label and tone of the chip it edits. */
+export interface LoomaChipEditingState {
+    readonly open: boolean;
+    readonly label: string;
+    readonly color: LoomaChipColor;
+}
+export declare const LOOMA_CHIP_EDITING_IDLE: LoomaChipEditingState;
+/**
+ * The chip editor as a state machine: it opens on one chip and writes each label and tone change to
+ * that chip as the author makes it.
+ *
+ * @ownership The host owns presentation: the popover, its anchor, and focus. This owns which chip is
+ * edited and the node attributes it writes.
+ * @failure A change after the chip was deleted, or moved out of its node, closes the editor and writes
+ * nothing.
+ */
+export interface LoomaChipEditing {
+    readonly state: LoomaChipEditingState;
+    /** The edited chip's element, for anchoring the editor, or null while it is closed. */
+    readonly element: HTMLElement | null;
+    /** Calls `listener` after every state change; returns the unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    /**
+     * Opens on the chip at `position`.
+     * @failure Returns false, and stays as it was, when the editor is read-only or no chip is there.
+     */
+    open(position: number): boolean;
+    setLabel(label: string): void;
+    setColor(color: LoomaChipColor): void;
+    close(): void;
+}
+export interface LoomaChipEditingOptions {
+    editor: Editor;
+    /** Read on each opening, so a host can change it while the editor runs. */
+    isEditable: () => boolean;
+}
+export declare function createChipEditing(options: LoomaChipEditingOptions): LoomaChipEditing;

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -402,10 +402,10 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
 }>, {
-    extensions: LoomaEditorExtensions | undefined;
-    editable: boolean;
     label: string;
     placeholder: string;
+    extensions: LoomaEditorExtensions | undefined;
+    editable: boolean;
     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;
 }>, {
+    id: string;
+    label: 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.js

@@ -1,5 +1,5 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
 import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
@@ -1536,6 +1536,221 @@ function validLinkHref(value) {
 	}
 }
 //#endregion
+//#region src/markdown/index.ts
+/**
+* Callout tones a document stores, in the order the editor offers them. The Callout component also
+* takes `neutral` and `success`, which Markdown and the editor store as `note`.
+*/
+var LOOMA_CALLOUT_TONES = [
+	"note",
+	"tip",
+	"info",
+	"important",
+	"warning",
+	"danger"
+];
+/** The hues chips and swatches take as their tone, written `:chip[Label]{tone=green}`. */
+var LOOMA_CHIP_TONES = [
+	"neutral",
+	"blue",
+	"green",
+	"yellow",
+	"red",
+	"purple"
+];
+/**
+* Keeps a chip tone within the palette.
+* @failure Unknown values become `neutral`.
+*/
+function normalizeLoomaChipTone(value) {
+	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
+}
+[...LOOMA_CALLOUT_TONES];
+/**
+* The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
+* marks, with every other run of characters one hyphen.
+* @failure Text with no letters or numbers, such as only emoji, derives `heading`.
+*/
+function loomaHeadingSlug(text) {
+	return text.normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}\p{M}]+/gu, "-").replace(/^-+|-+$/g, "") || "heading";
+}
+/**
+* Gives every heading of a document its anchor, in document order.
+* @contract A custom ID is kept unless an earlier heading already has it. Any other heading takes
+* its slug, or the slug's first free suffix (`-1`, `-2`…), never one a later custom ID reserves.
+*/
+function assignLoomaHeadingIds(headings) {
+	const reserved = new Set(headings.map(({ id }) => id).filter((id) => Boolean(id)));
+	const used = /* @__PURE__ */ new Set();
+	return headings.map(({ text, id: custom }) => {
+		let id = custom || loomaHeadingSlug(text);
+		if (custom ? used.has(id) : used.has(id) || reserved.has(id)) {
+			const stem = id;
+			let suffix = 1;
+			while (used.has(`${stem}-${suffix}`) || reserved.has(`${stem}-${suffix}`)) suffix++;
+			id = `${stem}-${suffix}`;
+		}
+		used.add(id);
+		return id;
+	});
+}
+//#endregion
+//#region src/editor/extensions/chip.ts
+var CHIP_PLACEHOLDER = "Set a label";
+/** Keep imported or programmatic colors within the supported palette. */
+function normalizeLoomaChipColor(value) {
+	return normalizeLoomaChipTone(value);
+}
+Node$1.create({
+	name: "loomaChip",
+	group: "inline",
+	inline: true,
+	atom: true,
+	selectable: true,
+	addAttributes() {
+		return {
+			label: {
+				default: "",
+				parseHTML: (element) => element.getAttribute("data-label") ?? (element.hasAttribute("data-placeholder") ? "" : element.textContent ?? "")
+			},
+			color: {
+				default: "neutral",
+				parseHTML: (element) => normalizeLoomaChipColor(element.getAttribute("data-color"))
+			}
+		};
+	},
+	parseHTML() {
+		return [{ tag: "span[data-looma-chip]" }];
+	},
+	renderHTML({ node }) {
+		const label = String(node.attrs.label ?? "");
+		return [
+			"span",
+			{
+				"data-looma-chip": "",
+				"data-label": label,
+				"data-color": normalizeLoomaChipColor(node.attrs.color),
+				...label ? {} : { "data-placeholder": "" }
+			},
+			label || CHIP_PLACEHOLDER
+		];
+	},
+	renderText({ node }) {
+		return String(node.attrs.label ?? "");
+	},
+	addNodeView() {
+		return ({ node, editor }) => {
+			const dom = document.createElement("span");
+			dom.dataset.loomaChip = "";
+			dom.contentEditable = "false";
+			dom.setAttribute("role", "button");
+			dom.setAttribute("aria-disabled", String(!editor.isEditable));
+			dom.tabIndex = 0;
+			const update = (next) => {
+				if (next.type !== node.type) return false;
+				const label = String(next.attrs.label ?? "");
+				if (dom.dataset.label !== label) {
+					dom.dataset.label = label;
+					dom.textContent = label || CHIP_PLACEHOLDER;
+					dom.setAttribute("aria-label", label ? `Edit chip: ${label}` : "Set chip label");
+					if (label) delete dom.dataset.placeholder;
+					else dom.dataset.placeholder = "";
+				}
+				const color = normalizeLoomaChipColor(next.attrs.color);
+				if (dom.dataset.color !== color) dom.dataset.color = color;
+				return true;
+			};
+			update(node);
+			return {
+				dom,
+				update,
+				stopEvent: (event) => event.type === "click" || event.type === "keydown"
+			};
+		};
+	},
+	addCommands() {
+		return { insertLoomaChip: (attributes = {}) => ({ commands, state }) => {
+			const selection = state.selection;
+			const label = attributes.label ?? state.doc.textBetween(selection.from, selection.to);
+			return commands.insertContent({
+				type: this.name,
+				attrs: {
+					label,
+					color: normalizeLoomaChipColor(attributes.color)
+				}
+			});
+		} };
+	}
+});
+//#endregion
+//#region src/editor/chip-editing.ts
+var LOOMA_CHIP_EDITING_IDLE = Object.freeze({
+	open: false,
+	label: "",
+	color: "neutral"
+});
+function createChipEditing(options) {
+	const { editor } = options;
+	const listeners = /* @__PURE__ */ new Set();
+	let state = LOOMA_CHIP_EDITING_IDLE;
+	let element = null;
+	const set = (next) => {
+		state = next;
+		listeners.forEach((listener) => listener());
+	};
+	const close = () => {
+		element = null;
+		if (state.open) set({
+			...state,
+			open: false
+		});
+	};
+	const change = (changes) => {
+		if (!element || editor.isDestroyed || !element.isConnected) return close();
+		const position = editor.view.posAtDOM(element, 0);
+		const node = editor.state.doc.nodeAt(position);
+		if (node?.type.name !== "loomaChip") return close();
+		set({
+			...state,
+			...changes
+		});
+		editor.view.dispatch(editor.state.tr.setNodeMarkup(position, void 0, {
+			...node.attrs,
+			...changes
+		}));
+	};
+	return {
+		get state() {
+			return state;
+		},
+		get element() {
+			return element;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		open(position) {
+			if (!options.isEditable() || editor.isDestroyed) return false;
+			const node = editor.state.doc.nodeAt(position);
+			const dom = editor.view.nodeDOM(position);
+			if (node?.type.name !== "loomaChip" || !(dom instanceof HTMLElement)) return false;
+			element = dom;
+			set({
+				open: true,
+				label: String(node.attrs.label ?? ""),
+				color: normalizeLoomaChipColor(node.attrs.color)
+			});
+			return true;
+		},
+		setLabel: (label) => change({ label }),
+		setColor: (color) => change({ color }),
+		close
+	};
+}
+//#endregion
 //#region src/editor/extensions/relative-links.ts
 /** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
 function siteRelativeHref(href, baseUrl) {
@@ -2056,34 +2271,6 @@ function formatEditorShortcut(keys, apple) {
 	].filter(Boolean).join("+");
 }
 var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
-/**
-* The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
-* marks, with every other run of characters one hyphen.
-* @failure Text with no letters or numbers, such as only emoji, derives `heading`.
-*/
-function loomaHeadingSlug(text) {
-	return text.normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}\p{M}]+/gu, "-").replace(/^-+|-+$/g, "") || "heading";
-}
-/**
-* Gives every heading of a document its anchor, in document order.
-* @contract A custom ID is kept unless an earlier heading already has it. Any other heading takes
-* its slug, or the slug's first free suffix (`-1`, `-2`…), never one a later custom ID reserves.
-*/
-function assignLoomaHeadingIds(headings) {
-	const reserved = new Set(headings.map(({ id }) => id).filter((id) => Boolean(id)));
-	const used = /* @__PURE__ */ new Set();
-	return headings.map(({ text, id: custom }) => {
-		let id = custom || loomaHeadingSlug(text);
-		if (custom ? used.has(id) : used.has(id) || reserved.has(id)) {
-			const stem = id;
-			let suffix = 1;
-			while (used.has(`${stem}-${suffix}`) || reserved.has(`${stem}-${suffix}`)) suffix++;
-			id = `${stem}-${suffix}`;
-		}
-		used.add(id);
-		return id;
-	});
-}
 //#endregion
 //#region src/editor/extensions/expand.ts
 /**
@@ -3215,9 +3402,8 @@ var LoomaEditor = defineComponent({
 			chipEditorRoot.value = element instanceof HTMLElement ? element : null;
 		};
 		const chipInput = () => chipEditorRoot.value?.querySelector("[data-chip-label]");
-		const chipOpen = ref(false);
-		const chipLabel = ref("");
-		const chipColor = ref("neutral");
+		let chipEditing;
+		const chipState = shallowRef(LOOMA_CHIP_EDITING_IDLE);
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
 		const tooltipLabel = ref("");
@@ -3320,39 +3506,16 @@ var LoomaEditor = defineComponent({
 			menuStyle: {},
 			capabilities: { ...EMPTY_CAPABILITIES }
 		});
-		const openChipEditor = (instance, position) => {
-			if (!props.editable) return;
-			const node = instance.state.doc.nodeAt(position);
-			const element = instance.view.nodeDOM(position);
-			if (node?.type.name !== "loomaChip" || !(element instanceof HTMLElement)) return;
+		const openChipEditor = (_instance, position) => {
+			if (!chipEditing?.open(position)) return;
 			root.value?.querySelector(`#${chipAnchorId}`)?.removeAttribute("id");
-			element.id = chipAnchorId;
-			chipLabel.value = String(node.attrs.label ?? "");
-			chipColor.value = normalizeLoomaChipColor(node.attrs.color);
-			chipOpen.value = true;
+			chipEditing.element.id = chipAnchorId;
 			nextTick(() => chipInput()?.focus());
 		};
-		const changeChip = (changes) => {
-			const instance = editor.value;
-			const element = root.value?.querySelector(`#${chipAnchorId}`);
-			if (!instance || !element) {
-				chipOpen.value = false;
-				return;
-			}
-			const position = instance.view.posAtDOM(element, 0);
-			const node = instance.state.doc.nodeAt(position);
-			if (node?.type.name !== "loomaChip") {
-				chipOpen.value = false;
-				return;
-			}
-			instance.view.dispatch(instance.state.tr.setNodeMarkup(position, void 0, {
-				...node.attrs,
-				...changes
-			}));
-		};
 		const closeChip = (focusChip = false) => {
-			chipOpen.value = false;
-			if (focusChip) root.value?.querySelector(`#${chipAnchorId}`)?.focus();
+			const element = chipEditing?.element;
+			chipEditing?.close();
+			if (focusChip) element?.focus();
 		};
 		const found = reactive(/* @__PURE__ */ new Set());
 		const answers = (name) => {
@@ -3565,6 +3728,14 @@ var LoomaEditor = defineComponent({
 				linkState.value = engine.state;
 			});
 			linkEditing = engine;
+			const chips = createChipEditing({
+				editor: session.editor,
+				isEditable: () => props.editable
+			});
+			chips.subscribe(() => {
+				chipState.value = chips.state;
+			});
+			chipEditing = chips;
 			const imageUploads = createImageUploads({
 				editor: session.editor,
 				upload: () => async (file, init) => {
@@ -3597,6 +3768,7 @@ var LoomaEditor = defineComponent({
 			const previous = session;
 			const content = edited ? previous.editor.getJSON() : props.modelValue;
 			linkEditing?.destroy();
+			chipEditing?.close();
 			formatting?.destroy();
 			uploads?.cancel();
 			previous.destroy();
@@ -3721,7 +3893,7 @@ var LoomaEditor = defineComponent({
 			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
 				chip.setAttribute("aria-disabled", String(!editable));
 			});
-			if (!editable) chipOpen.value = false;
+			if (!editable) chipEditing?.close();
 		});
 		watch([
 			() => linkState.value.surface === "popover",
@@ -4691,24 +4863,16 @@ var LoomaEditor = defineComponent({
 				}, [loomaIcon("image"), h("span", "Drop image to upload")]) : null,
 				h(Popover, {
 					class: "looma-editor__chip-popover",
-					open: chipOpen.value,
+					open: chipState.value.open,
 					for: chipAnchorId,
 					placement: "bottom-start",
-					onClose: () => {
-						chipOpen.value = false;
-					}
+					onClose: () => chipEditing?.close()
 				}, () => h(EditorChipEditor, {
 					ref: setChipEditorRoot,
-					label: chipLabel.value,
-					color: chipColor.value,
-					onLabel: (event) => {
-						chipLabel.value = event.detail.label;
-						changeChip({ label: chipLabel.value });
-					},
-					onColor: (event) => {
-						chipColor.value = event.detail.color;
-						changeChip({ color: event.detail.color });
-					},
+					label: chipState.value.label,
+					color: chipState.value.color,
+					onLabel: (event) => chipEditing?.setLabel(event.detail.label),
+					onColor: (event) => chipEditing?.setColor(event.detail.color),
 					onDone: () => closeChip(true)
 				})),
 				h(Popover, {