@threadlabs/looma 0.15.7 → 0.16.1

package/vue/editor/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, resolveTableCellAt, shouldShowTextFormattingToolbar } from "@threadlabs/looma/editor";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, resolveTableCellAt, shouldShowTextFormattingToolbar } from "@threadlabs/looma/editor";
 import { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Menu, MenuItem, Popover, Tooltip } from "@threadlabs/looma/vue";
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
@@ -353,6 +353,11 @@ var LoomaEditor = defineComponent({
 		const linkText = ref("");
 		const linkNewTab = ref(true);
 		const linkError = ref("");
+		const chipAnchorId = `looma-editor-chip-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const chipInput = ref(null);
+		const chipOpen = ref(false);
+		const chipLabel = ref("");
+		const chipColor = ref("neutral");
 		let linkSelection = null;
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
@@ -435,8 +440,43 @@ 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;
+			root.value?.querySelector(`#${chipAnchorId}`)?.removeAttribute("id");
+			element.id = chipAnchorId;
+			chipLabel.value = String(node.attrs.label ?? "");
+			chipColor.value = normalizeLoomaChipColor(node.attrs.color);
+			chipOpen.value = true;
+			nextTick(() => chipInput.value?.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 slashExtension = createLoomaSlashCommandExtension({
 			onOpenImagePicker: () => fileInput.value?.click(),
+			onOpenChipEditor: openChipEditor,
 			onStateChange: (state) => {
 				Object.assign(slash, state);
 			}
@@ -602,7 +642,13 @@ var LoomaEditor = defineComponent({
 			instance.view.dispatch(transaction);
 			instance.commands.focus();
 		};
-		watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
+		watch(() => props.editable, (editable) => {
+			editor.value?.setEditable(editable);
+			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
+				chip.setAttribute("aria-disabled", String(!editable));
+			});
+			if (!editable) chipOpen.value = false;
+		});
 		watch(() => props.label, (label) => {
 			editor.value?.setOptions({ editorProps: { attributes: {
 				role: "textbox",
@@ -796,6 +842,18 @@ var LoomaEditor = defineComponent({
 				trigger
 			});
 		};
+		const chipElementForEvent = (event) => {
+			const element = event.target instanceof Element ? event.target.closest("[data-looma-chip]") : null;
+			return element && root.value?.contains(element) ? element : null;
+		};
+		const onChipClickCapture = (event) => {
+			const chip = chipElementForEvent(event);
+			if (chip && editor.value && props.editable) {
+				event.preventDefault();
+				event.stopPropagation();
+				openChipEditor(editor.value, editor.value.view.posAtDOM(chip, 0));
+			}
+		};
 		const onImageClick = (event) => {
 			const element = imageElementForEvent(event);
 			if (element && !props.editable) activateImage(element, "pointer");
@@ -806,6 +864,12 @@ var LoomaEditor = defineComponent({
 		};
 		const onImageKeyDown = (event) => {
 			if (event.key !== "Enter" && event.key !== " ") return;
+			const chip = chipElementForEvent(event);
+			if (chip && editor.value && props.editable) {
+				event.preventDefault();
+				openChipEditor(editor.value, editor.value.view.posAtDOM(chip, 0));
+				return;
+			}
 			const element = imageElementForEvent(event);
 			if (!element) return;
 			event.preventDefault();
@@ -1149,6 +1213,7 @@ var LoomaEditor = defineComponent({
 					}, 100);
 				},
 				onDrop,
+				onClickCapture: onChipClickCapture,
 				onClick: onImageClick,
 				onDblclick: onImageDoubleClick,
 				onKeydown: onImageKeyDown
@@ -1213,6 +1278,54 @@ var LoomaEditor = defineComponent({
 					class: "looma-editor__drop-overlay",
 					"aria-hidden": "true"
 				}, [loomaIcon("image"), h("span", "Drop image to upload")]) : null,
+				h(Popover, {
+					class: "looma-editor__chip-popover",
+					open: chipOpen.value,
+					for: chipAnchorId,
+					placement: mobile.value ? "top-start" : "bottom-start",
+					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;
+						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 ? "✓" : "")))])),
 				h(Popover, {
 					class: "looma-editor__link-popover",
 					open: linkOpen.value,