@threadlabs/looma 0.28.11 → 0.28.13

package/vue/editor/index.js

@@ -1,6 +1,6 @@
 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 } from "@threadlabs/looma/editor";
-import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, 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, Text, Tooltip } from "@threadlabs/looma/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 { 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, 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";
 import { closeHistory } from "@tiptap/pm/history";
@@ -28,7 +28,8 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorLinkCard: "ui-editor-link-card",
 	EditorLinkForm: "ui-editor-link-form",
 	EditorBlockActions: "ui-editor-block-actions",
-	EditorCodeLanguage: "ui-editor-code-language"
+	EditorCodeLanguage: "ui-editor-code-language",
+	EditorChipEditor: "ui-editor-chip-editor"
 };
 //#endregion
 //#region src/components/shared/overlay.js
@@ -1130,6 +1131,76 @@ function runBlockAction(editor, action) {
 	return true;
 }
 //#endregion
+//#region src/editor/formatting-selection.ts
+var HOLD_MS = 500;
+var HOLD_SLOP_PX = 8;
+function createFormattingSelection(options) {
+	const { editor } = options;
+	let dismissedSelection = null;
+	let heldSelection = null;
+	let held = null;
+	let timer;
+	const cancel = () => {
+		clearTimeout(timer);
+		timer = void 0;
+		held = null;
+	};
+	return {
+		active() {
+			const selection = editor.state.selection;
+			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(editor.state.doc.textContent)) && !dismissedSelection?.eq(selection) && (!selection.empty || Boolean(heldSelection?.eq(selection)) || options.shownAtCaret());
+		},
+		dismissed: (selection) => Boolean(dismissedSelection?.eq(selection)),
+		dismiss(selection) {
+			const current = editor.state.selection;
+			dismissedSelection = selection !== void 0 ? selection : current instanceof TextSelection || current instanceof AllSelection ? current : null;
+			heldSelection = null;
+		},
+		undismiss() {
+			dismissedSelection = null;
+		},
+		release() {
+			heldSelection = null;
+		},
+		selectionChanged() {
+			const selection = editor.state.selection;
+			if (!dismissedSelection?.eq(selection)) dismissedSelection = null;
+			if (!heldSelection?.eq(selection)) heldSelection = null;
+		},
+		press: {
+			down(event) {
+				cancel();
+				if (!options.canHold() || editor.isDestroyed || event.button !== 0 || !event.isPrimary || !(event.target instanceof Element) || !editor.view.dom.contains(event.target) || event.target.closest("button, input, select, textarea, [data-looma-image-node]")) return;
+				held = {
+					id: event.pointerId,
+					x: event.clientX,
+					y: event.clientY,
+					time: event.timeStamp
+				};
+				timer = setTimeout(() => {
+					timer = void 0;
+					const selection = editor.state.selection;
+					if (!held || !options.canHold() || !editor.isFocused || options.menuOpen() || !(selection instanceof TextSelection)) return;
+					dismissedSelection = null;
+					heldSelection = selection;
+					options.onHold(selection);
+				}, HOLD_MS);
+			},
+			move(event) {
+				if (held?.id === event.pointerId && Math.hypot(event.clientX - held.x, event.clientY - held.y) > HOLD_SLOP_PX) cancel();
+			},
+			end(event) {
+				if (held?.id === event.pointerId) cancel();
+			},
+			cancel,
+			viewportChanged(event) {
+				if (!event || !held || event.timeStamp >= held.time) cancel();
+			}
+		},
+		destroy: cancel
+	};
+}
+//#endregion
 //#region src/editor/table-overlay.ts
 function mapTableCells(table) {
 	const rows = Array.from(table.rows);
@@ -2856,7 +2927,12 @@ var LoomaEditor = defineComponent({
 		let linkEditing;
 		const linkState = shallowRef(LOOMA_LINK_EDITING_IDLE);
 		const chipAnchorId = `looma-editor-chip-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-		const chipInput = ref(null);
+		const chipEditorRoot = ref(null);
+		const setChipEditorRoot = (instance) => {
+			const element = instance?.$el;
+			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");
@@ -2902,29 +2978,18 @@ var LoomaEditor = defineComponent({
 		const mobileToolbarStyle = ref({});
 		const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
 		const editorFocused = ref(false);
-		let dismissedFormattingSelection = null;
-		let heldFormattingSelection = null;
+		let formatting;
 		let formattingPopup = null;
 		let linkPopup = null;
 		let imagePopup = null;
-		let heldPressTimer;
-		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
 		const formattingPickerOpen = () => linkState.value.surface === "popover" || tablePickerOpen.value || formatOpen.value;
-		const cancelHeldPress = () => {
-			clearTimeout(heldPressTimer);
-			heldPressTimer = void 0;
-			heldPress = null;
-		};
 		const activeRangeActions = (instance) => {
 			const selection = instance.state.selection;
 			if (!(selection instanceof TextSelection) || !selection.empty) return [];
 			return props.rangeActions.filter((action) => Number.isSafeInteger(action.from) && Number.isSafeInteger(action.to) && action.from >= 0 && action.to > action.from && action.to <= instance.state.doc.content.size && action.from <= selection.from && selection.from <= action.to);
 		};
-		const formattingSelectionActive = (instance) => {
-			const selection = instance.state.selection;
-			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(instance.state.doc.textContent)) && !dismissedFormattingSelection?.eq(selection) && (!selection.empty || Boolean(heldFormattingSelection?.eq(selection)) || activeRangeActions(instance).length > 0);
-		};
+		const formattingActive = () => formatting?.active() ?? false;
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
 		let dragLeaveTimer = null;
@@ -2979,7 +3044,7 @@ var LoomaEditor = defineComponent({
 			chipLabel.value = String(node.attrs.label ?? "");
 			chipColor.value = normalizeLoomaChipColor(node.attrs.color);
 			chipOpen.value = true;
-			nextTick(() => chipInput.value?.focus());
+			nextTick(() => chipInput()?.focus());
 		};
 		const changeChip = (changes) => {
 			const instance = editor.value;
@@ -3094,7 +3159,7 @@ var LoomaEditor = defineComponent({
 							window.open(href, "_blank", "noopener,noreferrer");
 							return true;
 						}
-						dismissedFormattingSelection = null;
+						formatting?.undismiss();
 						requestAnimationFrame(() => {
 							if (view.isDestroyed) return;
 							editorStateVersion.value += 1;
@@ -3117,10 +3182,9 @@ var LoomaEditor = defineComponent({
 				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();
+						instance.state.selection;
+						formatting?.selectionChanged();
+						if (!formattingActive()) formattingPopup?.hide();
 					}
 				},
 				onUpdate: ({ editor: instance }) => {
@@ -3143,6 +3207,17 @@ var LoomaEditor = defineComponent({
 				linkState.value = engine.state;
 			});
 			linkEditing = engine;
+			const instance = session.editor;
+			formatting = createFormattingSelection({
+				editor: instance,
+				canHold: () => floatingFormattingMode() && !tableResizeActive && props.editable,
+				menuOpen: () => slash.active || mention.active,
+				shownAtCaret: () => activeRangeActions(instance).length > 0,
+				onHold: (selection) => {
+					formattingPopup?.setAnchor(() => posToDOMRect(instance.view, selection.from, selection.to));
+					formattingPopup?.show();
+				}
+			});
 		});
 		const attachDocument = (element) => {
 			if (element instanceof HTMLElement) session?.attach(element);
@@ -3164,7 +3239,7 @@ var LoomaEditor = defineComponent({
 			const to = selection?.to ?? current.to;
 			linkEditing?.open(from, to, context ? "context" : "popover");
 			nextTick(() => {
-				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setAnchor(() => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to));
+				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive() ? formattingPopup : linkPopup)?.setAnchor(() => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to));
 				(linkState.value.mode === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
 			});
 		};
@@ -3172,8 +3247,7 @@ var LoomaEditor = defineComponent({
 			linkEditing?.close();
 			const range = linkState.value.range;
 			if (restoreFocus && range) editor.value?.chain().focus().setTextSelection(range.to).run();
-			dismissedFormattingSelection = editor.value?.state.selection ?? null;
-			heldFormattingSelection = null;
+			formatting?.dismiss(editor.value?.state.selection ?? null);
 			linkPopup?.hide();
 			formattingPopup?.hide();
 		};
@@ -3242,8 +3316,8 @@ var LoomaEditor = defineComponent({
 			editor.value?.commands.dismissLoomaSlashMenu();
 		});
 		watch(() => props.editable, (editable) => {
-			cancelHeldPress();
-			heldFormattingSelection = null;
+			formatting?.press.cancel();
+			formatting?.release();
 			editor.value?.setEditable(editable);
 			if (!editable) formattingPopup?.hide();
 			if (editor.value) imageDelivery.reset(editor.value);
@@ -3258,7 +3332,7 @@ var LoomaEditor = defineComponent({
 			formatOpen
 		], ([linking, table, format]) => {
 			if (linking || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.element.contains(document.activeElement)) return;
-			heldFormattingSelection = null;
+			formatting?.release();
 			formattingPopup?.hide();
 		});
 		watch(() => props.rangeActions, () => {
@@ -3434,12 +3508,12 @@ var LoomaEditor = defineComponent({
 			updateMobileViewport();
 		};
 		const onEditorBlur = () => {
-			cancelHeldPress();
+			formatting?.press.cancel();
 			queueMicrotask(updateTableUi);
 			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused && !mobileToolbarShell.value?.contains(document.activeElement)) editorFocused.value = false;
-				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.element.contains(document.activeElement)) heldFormattingSelection = null;
+				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.element.contains(document.activeElement)) formatting?.release();
 			}, 0);
 		};
 		const bindEditorUi = (instance) => {
@@ -3465,15 +3539,15 @@ var LoomaEditor = defineComponent({
 		}, { immediate: true });
 		const onViewportChange = (event) => {
 			if (event?.type === "scroll" && event.target instanceof Node && (tableToolbarShell.value?.contains(event.target) || tableMenuShell.value?.contains(event.target))) return;
-			if (!event || !heldPress || event.timeStamp >= heldPress.time) cancelHeldPress();
+			formatting?.press.viewportChanged(event);
 			const wasMobile = mobile.value;
 			if (slash.active && slash.getRect) slash.rect = slash.getRect();
 			if (mention.active && mention.getRect) mention.rect = mention.getRect();
 			updateMobileViewport();
-			if (wasMobile !== mobile.value) heldFormattingSelection = null;
+			if (wasMobile !== mobile.value) formatting?.release();
 			updateTableUi();
 			updateCodeUi();
-			if (floatingFormattingMode() && editor.value && !formattingSelectionActive(editor.value)) formattingPopup?.hide();
+			if (floatingFormattingMode() && editor.value && !formattingActive()) formattingPopup?.hide();
 			tableUi.menuOpen = false;
 		};
 		let stopViewport;
@@ -3510,42 +3584,17 @@ var LoomaEditor = defineComponent({
 			}, 0);
 			if ((tableUi.toolbarOpen || tableUi.overlayOpen || tableUi.menuOpen) && !inElement(root.value) && !inTableUi) closeTableUi();
 		};
-		const onFormattingPointerDown = (event) => {
-			cancelHeldPress();
-			const instance = editor.value;
-			if (!floatingFormattingMode() || tableResizeActive || !props.editable || !instance || event.button !== 0 || !event.isPrimary || !(event.target instanceof Element) || !instance.view.dom.contains(event.target) || event.target.closest("button, input, select, textarea, [data-looma-image-node]")) return;
-			heldPress = {
-				id: event.pointerId,
-				x: event.clientX,
-				y: event.clientY,
-				time: event.timeStamp
-			};
-			heldPressTimer = setTimeout(() => {
-				heldPressTimer = void 0;
-				const selection = instance.state.selection;
-				if (!heldPress || !floatingFormattingMode() || tableResizeActive || !props.editable || !instance.isFocused || slash.active || mention.active || !(selection instanceof TextSelection)) return;
-				dismissedFormattingSelection = null;
-				heldFormattingSelection = selection;
-				formattingPopup?.setAnchor(() => posToDOMRect(instance.view, selection.from, selection.to));
-				formattingPopup?.show();
-			}, 500);
-		};
-		const onFormattingPointerMove = (event) => {
-			if (heldPress?.id === event.pointerId && Math.hypot(event.clientX - heldPress.x, event.clientY - heldPress.y) > 8) cancelHeldPress();
-		};
-		const onFormattingPointerEnd = (event) => {
-			if (heldPress?.id === event.pointerId) cancelHeldPress();
-		};
+		const onFormattingPointerDown = (event) => formatting?.press.down(event);
+		const onFormattingPointerMove = (event) => formatting?.press.move(event);
+		const onFormattingPointerEnd = (event) => formatting?.press.end(event);
 		const onFormattingKeyDown = (event) => {
-			cancelHeldPress();
+			formatting?.press.cancel();
 			if (event.key !== "Escape" || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.element.contains(event.target) || linkPopup?.element.contains(event.target)) || !(formatOpen.value || formattingPopup?.isOpen() || linkPopup?.isOpen())) return false;
 			dismissFormatting();
 			return true;
 		};
 		const dismissFormatting = () => {
-			const selection = editor.value?.state.selection;
-			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
-			heldFormattingSelection = null;
+			formatting?.dismiss();
 			formatOpen.value = false;
 			formattingPopup?.hide();
 			linkPopup?.hide();
@@ -3568,10 +3617,10 @@ var LoomaEditor = defineComponent({
 			editor: instance,
 			element,
 			pluginKey: "looma-text-formatting-menu",
-			shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.element.contains(document.activeElement) || linkState.value.surface === "context" || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
+			shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.element.contains(document.activeElement) || linkState.value.surface === "context" || formattingPickerOpen()) && formattingActive(),
 			boundary: () => props.toolbarMode === "contextual" ? root.value : null,
 			related: editorRoot,
-			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
+			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingActive() ? false : void 0,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : formattingPopup?.hide()
 		}));
 		const linkSurfaceRef = surfaceRef((surface) => {
@@ -3580,7 +3629,7 @@ var LoomaEditor = defineComponent({
 			editor: instance,
 			element,
 			pluginKey: "looma-link-context-menu",
-			shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && linkState.value.surface !== "popover" && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkState.value.surface === "context" || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
+			shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && linkState.value.surface !== "popover" && !formatting?.dismissed(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkState.value.surface === "context" || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive()),
 			maxWidth: () => Math.min(480, window.innerWidth - 24),
 			related: editorRoot,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
@@ -3747,7 +3796,7 @@ var LoomaEditor = defineComponent({
 			window.removeEventListener("keyup", onLinkNavigationModifier);
 			window.removeEventListener("pointermove", onLinkNavigationModifier);
 			window.removeEventListener("blur", clearLinkNavigationModifier);
-			cancelHeldPress();
+			formatting?.destroy();
 			formattingPopup = null;
 			document.removeEventListener("pointerdown", onDocumentPointerDown, true);
 			document.removeEventListener("pointerdown", onFormattingPointerDown);
@@ -4177,12 +4226,12 @@ var LoomaEditor = defineComponent({
 					ref: formattingSurfaceRef,
 					class: "looma-editor__floating-shell looma-editor__formatting-shell",
 					hidden: true
-				}, [props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkState.value.surface === "context" || instance.state.selection.empty && instance.isActive("link")) && linkState.value.surface !== "popover" && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover")])]) : null,
+				}, [props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkState.value.surface === "context" || instance.state.selection.empty && instance.isActive("link")) && linkState.value.surface !== "popover" && formattingActive() ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover")])]) : null,
 				instance && props.editable ? h("div", { key: "looma-link-host" }, [h("div", {
 					ref: linkSurfaceRef,
 					class: "looma-editor__floating-shell looma-editor__link-shell",
 					hidden: true
-				}, [props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance)])]) : null,
+				}, [props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive() ? null : renderLinkContextCard(instance)])]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",
@@ -4267,46 +4316,20 @@ var LoomaEditor = defineComponent({
 					onClose: () => {
 						chipOpen.value = false;
 					}
-				}, () => h("div", {
-					class: "looma-editor__chip-form",
-					role: "dialog",
-					"aria-label": "Edit chip"
-				}, [h("input", {
-					ref: chipInput,
-					type: "text",
-					value: chipLabel.value,
-					placeholder: "Set a label",
-					"aria-label": "Chip text",
-					onInput: (event) => {
-						chipLabel.value = event.target.value;
+				}, () => h(EditorChipEditor, {
+					ref: setChipEditorRoot,
+					label: chipLabel.value,
+					color: chipColor.value,
+					onLabel: (event) => {
+						chipLabel.value = event.detail.label;
 						changeChip({ label: chipLabel.value });
 					},
-					onKeydown: (event) => {
-						if (event.key === "Enter" || event.key === "Escape") {
-							event.preventDefault();
-							closeChip(true);
-						}
-					}
-				}), h("div", {
-					class: "looma-editor__chip-colors",
-					role: "group",
-					"aria-label": "Chip color"
-				}, LOOMA_CHIP_COLORS.map((color) => h("button", {
-					type: "button",
-					class: "looma-editor__chip-color",
-					"data-color": color,
-					"aria-label": `${color[0].toUpperCase()}${color.slice(1)} chip`,
-					"aria-pressed": chipColor.value === color,
-					onClick: () => {
-						if (chipColor.value === color) {
-							chipInput.value?.focus();
-							return;
-						}
-						chipColor.value = color;
-						changeChip({ color });
-						chipInput.value?.focus();
-					}
-				}, chipColor.value === color ? "✓" : "")))])),
+					onColor: (event) => {
+						chipColor.value = event.detail.color;
+						changeChip({ color: event.detail.color });
+					},
+					onDone: () => closeChip(true)
+				})),
 				h(Popover, {
 					class: "looma-editor__link-popover",
 					size: "sm",
@@ -4470,4 +4493,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };

package/vue/editor/primitives.d.ts

@@ -3,7 +3,7 @@
  * `@threadlabs/looma/vue`, re-exported beside the editor that composes them.
  */
 import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail } from "@threadlabs/looma/editor";
-export { EditorBlockActions, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
+export { EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
 /** The editor components' event details, by event name. */
 export interface VueEditorAdapterEventMap {
     highlight: MentionMenuHighlightEventDetail | SlashMenuHighlightEventDetail;
@@ -39,6 +39,13 @@ export interface VueEditorAdapterEventMap {
     language: {
         value: string;
     };
+    label: {
+        label: string;
+    };
+    color: {
+        color: "neutral" | "blue" | "green" | "yellow" | "red" | "purple";
+    };
+    done: Record<string, never>;
     "add-row-before": {
         boundaryIndex: number;
     };
@@ -107,4 +114,5 @@ export declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorLinkForm: "ui-editor-link-form";
     readonly EditorBlockActions: "ui-editor-block-actions";
     readonly EditorCodeLanguage: "ui-editor-code-language";
+    readonly EditorChipEditor: "ui-editor-chip-editor";
 };

package/vue/index.d.ts

@@ -20,6 +20,7 @@ export { default as Dialog } from "./UiDialog.js";
 export { default as Disclosure } from "./UiDisclosure.js";
 export { default as Editable } from "./UiEditable.js";
 export { default as EditorBlockActions } from "./UiEditorBlockActions.js";
+export { default as EditorChipEditor } from "./UiEditorChipEditor.js";
 export { default as EditorCodeLanguage } from "./UiEditorCodeLanguage.js";
 export { default as EditorImageToolbar } from "./UiEditorImageToolbar.js";
 export { default as EditorInsertTableGrid } from "./UiEditorInsertTableGrid.js";
@@ -66,6 +67,7 @@ export { default as Sidebar } from "./UiSidebar.js";
 export { default as Spinner } from "./UiSpinner.js";
 export { default as Stack } from "./UiStack.js";
 export { default as StatusMessage } from "./UiStatusMessage.js";
+export { default as Swatch } from "./UiSwatch.js";
 export { default as Switch } from "./UiSwitch.js";
 export { default as Switcher } from "./UiSwitcher.js";
 export { default as Table } from "./UiTable.js";

package/vue/index.js

@@ -26,13 +26,16 @@ import { t as UiEditable_default } from "./chunks/UiEditable.js";
 import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
 import { t as UiEditorBlockActions_default } from "./chunks/UiEditorBlockActions.js";
+import { t as UiInput_default } from "./chunks/UiInput.js";
+import { t as UiRadioGroup_default } from "./chunks/UiRadioGroup.js";
+import { t as UiStack_default } from "./chunks/UiStack.js";
+import { t as UiSwatch_default } from "./chunks/UiSwatch.js";
+import { t as UiEditorChipEditor_default } from "./chunks/UiEditorChipEditor.js";
 import { t as UiEditorCodeLanguage_default } from "./chunks/UiEditorCodeLanguage.js";
 import { t as UiEditorToolbar_default } from "./chunks/UiEditorToolbar.js";
 import { t as UiFormField_default } from "./chunks/UiFormField.js";
 import { t as UiIconButton_default } from "./chunks/UiIconButton.js";
-import { t as UiInput_default } from "./chunks/UiInput.js";
 import { t as UiPopover_default } from "./chunks/UiPopover.js";
-import { t as UiStack_default } from "./chunks/UiStack.js";
 import { t as UiText_default } from "./chunks/UiText.js";
 import { t as UiEditorImageToolbar_default } from "./chunks/UiEditorImageToolbar.js";
 import { t as UiEditorInsertTableGrid_default } from "./chunks/UiEditorInsertTableGrid.js";
@@ -60,7 +63,6 @@ import { t as UiMeter_default } from "./chunks/UiMeter.js";
 import { t as UiNavItem_default } from "./chunks/UiNavItem.js";
 import { t as UiPageHeader_default } from "./chunks/UiPageHeader.js";
 import { t as UiRadio_default } from "./chunks/UiRadio.js";
-import { t as UiRadioGroup_default } from "./chunks/UiRadioGroup.js";
 import { t as UiReel_default } from "./chunks/UiReel.js";
 import { t as UiSearchShell_default } from "./chunks/UiSearchShell.js";
 import { t as UiSection_default } from "./chunks/UiSection.js";
@@ -79,4 +81,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };