@threadlabs/looma 0.28.4 → 0.28.6

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, 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 { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorImageToolbar, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, InputGroup, List, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, 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";
@@ -21,7 +21,8 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorTableContextMenu: "ui-editor-table-context-menu",
 	EditorTableToolbar: "ui-editor-table-toolbar",
 	EditorInsertTableGrid: "ui-editor-insert-table-grid",
-	EditorTableOverlay: "ui-editor-table-overlay"
+	EditorTableOverlay: "ui-editor-table-overlay",
+	EditorImageToolbar: "ui-editor-image-toolbar"
 };
 //#endregion
 //#region src/components/shared/overlay.js
@@ -1982,7 +1983,7 @@ var expandNodeView = ({ editor, node, getPos }) => {
 		expanded.value = true;
 		event.detail.pending.push(nextTick().then(async () => {
 			await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-			const panel = dom.querySelector("[data-component='ui-disclosure'] .panel");
+			const panel = dom.querySelector(":is([data-component~='ui-disclosure'], .ui-disclosure) .panel");
 			await Promise.all((panel?.getAnimations() ?? []).map((animation) => animation.finished.catch(() => {})));
 		}));
 	};
@@ -2188,172 +2189,6 @@ var calloutNodeView = ({ node }) => {
 	};
 };
 //#endregion
-//#region src/vue/editor/image-controls.ts
-var placements = [
-	{
-		value: "block",
-		label: "Image in line",
-		icon: "panel-top"
-	},
-	{
-		value: "center",
-		label: "Center image",
-		icon: "align-center"
-	},
-	{
-		value: "wrap-left",
-		label: "Wrap text to the right",
-		icon: "panel-left"
-	},
-	{
-		value: "wrap-right",
-		label: "Wrap text to the left",
-		icon: "panel-right"
-	}
-];
-/** One contextual editing bar; sizing belongs to the image's corner handles.
-* @contract Placement applies immediately. Alt text is a secondary draft with
-* Save/Cancel; editing another node cancels it rather than changing that node.
-*/
-var ImageControls = defineComponent({
-	props: { editor: {
-		type: Object,
-		required: true
-	} },
-	setup(props) {
-		const id = `looma-image-${useId()}`;
-		const open = ref(false);
-		const alt = ref("");
-		const placement = ref("block");
-		let target = null;
-		const selected = () => props.editor.state.selection instanceof NodeSelection && props.editor.state.selection.node.type.name === "image" ? props.editor.state.selection : null;
-		const refresh = () => {
-			const selection = selected();
-			placement.value = normalizeImagePlacement(selection?.node.attrs.placement);
-			if (open.value && selection?.node !== target) open.value = false;
-		};
-		props.editor.on("transaction", refresh);
-		onBeforeUnmount(() => props.editor.off("transaction", refresh));
-		const begin = () => {
-			const selection = selected();
-			if (!selection) return;
-			target = selection.node;
-			alt.value = selection.node.attrs.alt ?? "";
-			open.value = true;
-		};
-		const update = (attrs) => {
-			const selection = selected();
-			if (!selection || !props.editor.isEditable) return;
-			props.editor.view.dispatch(props.editor.state.tr.setNodeMarkup(selection.from, void 0, {
-				...selection.node.attrs,
-				...attrs
-			}));
-			props.editor.view.focus();
-		};
-		return () => h(Text, {
-			as: "div",
-			font: "sans"
-		}, () => [
-			h(EditorToolbar$1, {
-				floating: true,
-				"aria-label": "Image actions"
-			}, () => [
-				...placements.map((option) => h(IconButton, {
-					id: `${id}-${option.value}`,
-					label: option.label,
-					size: "sm",
-					variant: placement.value === option.value ? "outline" : "ghost",
-					"aria-pressed": placement.value === option.value,
-					onClick: () => update({
-						placement: option.value,
-						...option.value.startsWith("wrap-") ? {
-							width: null,
-							height: null
-						} : {}
-					})
-				}, () => h(Icon, {
-					name: option.icon,
-					size: "sm"
-				}))),
-				h(IconButton, {
-					id,
-					label: "Image description",
-					size: "sm",
-					variant: "ghost"
-				}, () => h(Icon, {
-					name: "file-text",
-					size: "sm"
-				})),
-				h(IconButton, {
-					id: `${id}-delete`,
-					label: "Delete image",
-					size: "sm",
-					variant: "ghost",
-					onClick: () => {
-						if (selected() && props.editor.isEditable) props.editor.chain().focus().deleteSelection().run();
-					}
-				}, () => h(Icon, {
-					name: "trash",
-					size: "sm"
-				}))
-			]),
-			...placements.map((option) => h(Tooltip, { for: `${id}-${option.value}` }, () => option.label)),
-			h(Tooltip, { for: id }, () => "Image description"),
-			h(Tooltip, { for: `${id}-delete` }, () => "Delete image"),
-			h(Popover, {
-				for: id,
-				open: open.value,
-				size: "sm",
-				"aria-label": "Image description",
-				onOpen: begin,
-				onClose: () => {
-					open.value = false;
-				}
-			}, () => h("form", {
-				"aria-label": "Image description",
-				onSubmit: (event) => {
-					event.preventDefault();
-					if (selected()?.node !== target) return;
-					open.value = false;
-					update({ alt: alt.value });
-				}
-			}, [h(Stack, { gap: "s" }, () => [
-				h(FormField, {}, {
-					label: () => h("label", { for: `${id}-alt` }, "Alt text"),
-					default: () => h(Input, {
-						id: `${id}-alt`,
-						size: "sm",
-						value: alt.value,
-						onInput: (event) => {
-							alt.value = event.target.value;
-						}
-					})
-				}),
-				h(Text, {
-					size: "xs",
-					tone: "secondary"
-				}, () => "Describe the image for people using a screen reader."),
-				h(Cluster, {
-					justify: "end",
-					gap: "xs"
-				}, () => [h(Button, {
-					type: "button",
-					variant: "ghost",
-					tone: "neutral",
-					size: "sm",
-					onClick: () => {
-						open.value = false;
-					}
-				}, () => "Cancel"), h(Button, {
-					type: "submit",
-					variant: "solid",
-					size: "sm"
-				}, () => "Save")])
-			])]))
-		]);
-	}
-});
-//#endregion
 //#region src/vue/editor/image.ts
 /** Projects the shared image's resize intent into a single document transaction.
 * @ownership Delivery decorations belong to the inner image, never the figure;
@@ -3731,6 +3566,42 @@ var LoomaEditor = defineComponent({
 			related: editorRoot,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
 		}));
+		const imageTargets = /* @__PURE__ */ new WeakMap();
+		let imageTargetSequence = 0;
+		const selectedImage = (instance) => instance.state.selection instanceof NodeSelection && instance.state.selection.node.type.name === "image" ? instance.state.selection : null;
+		const updateSelectedImage = (instance, attrs) => {
+			const selection = selectedImage(instance);
+			if (!selection || !instance.isEditable) return;
+			instance.view.dispatch(instance.state.tr.setNodeMarkup(selection.from, void 0, {
+				...selection.node.attrs,
+				...attrs
+			}));
+			instance.view.focus();
+		};
+		const renderImageToolbar = (instance) => {
+			const node = selectedImage(instance)?.node;
+			let target = "";
+			if (node) {
+				target = imageTargets.get(node) ?? `image-${++imageTargetSequence}`;
+				imageTargets.set(node, target);
+			}
+			return h(EditorImageToolbar, {
+				placement: normalizeImagePlacement(node?.attrs.placement),
+				alt: node?.attrs.alt ?? "",
+				target,
+				onPlacement: (event) => updateSelectedImage(instance, {
+					placement: event.detail.placement,
+					...event.detail.placement.startsWith("wrap-") ? {
+						width: null,
+						height: null
+					} : {}
+				}),
+				onDescribe: (event) => updateSelectedImage(instance, { alt: event.detail.alt }),
+				onDelete: () => {
+					if (selectedImage(instance) && instance.isEditable) instance.chain().focus().deleteSelection().run();
+				}
+			});
+		};
 		const imageSurfaceRef = surfaceRef((surface) => {
 			imagePopup = surface;
 		}, (element, instance) => ({
@@ -4317,7 +4188,7 @@ var LoomaEditor = defineComponent({
 					ref: imageSurfaceRef,
 					class: "looma-editor__floating-shell looma-editor__image-shell",
 					hidden: true
-				}, [h(ImageControls, { editor: instance })])]) : null,
+				}, [renderImageToolbar(instance)])]) : null,
 				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h("div", { ref: attachDocument })) : null,
 				codeUi.open ? h("div", {
 					key: "looma-code-language-shell",
@@ -4591,4 +4462,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorImageToolbar, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };

package/vue/editor/primitives.d.ts

@@ -3,13 +3,20 @@
  * `@threadlabs/looma/vue`, re-exported beside the editor that composes them.
  */
 import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail } from "@threadlabs/looma/editor";
-export { EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
+export { EditorImageToolbar, EditorInsertTableGrid, 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;
     select: MentionMenuSelectEventDetail | SlashMenuSelectEventDetail;
     action: TableContextMenuActionEventDetail;
     insert: InsertTableEventDetail;
+    placement: {
+        placement: "block" | "center" | "wrap-left" | "wrap-right";
+    };
+    describe: {
+        alt: string;
+    };
+    delete: Record<string, never>;
     "add-row-before": {
         boundaryIndex: number;
     };
@@ -73,4 +80,5 @@ export declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorTableToolbar: "ui-editor-table-toolbar";
     readonly EditorInsertTableGrid: "ui-editor-insert-table-grid";
     readonly EditorTableOverlay: "ui-editor-table-overlay";
+    readonly EditorImageToolbar: "ui-editor-image-toolbar";
 };