@threadlabs/looma 0.28.5 → 0.28.7

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, 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 { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, 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";
@@ -22,7 +22,9 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorTableToolbar: "ui-editor-table-toolbar",
 	EditorInsertTableGrid: "ui-editor-insert-table-grid",
 	EditorTableOverlay: "ui-editor-table-overlay",
-	EditorImageToolbar: "ui-editor-image-toolbar"
+	EditorImageToolbar: "ui-editor-image-toolbar",
+	EditorLinkCard: "ui-editor-link-card",
+	EditorBlockActions: "ui-editor-block-actions"
 };
 //#endregion
 //#region src/components/shared/overlay.js
@@ -1983,7 +1985,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(() => {})));
 		}));
 	};
@@ -2481,7 +2483,6 @@ var LoomaEditor = defineComponent({
 		const fileInput = ref(null);
 		const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const blockActionAnchorId = `ui-block-tools-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-		let blockActionTarget = null;
 		const linkAnchorId = `looma-editor-link-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const linkPopoverAnchorId = ref(linkAnchorId);
 		const linkDestinationInput = () => linkFormRoot.value?.querySelector("[data-link-destination]");
@@ -3110,96 +3111,35 @@ var LoomaEditor = defineComponent({
 				role: "alert"
 			}, () => linkError.value) : null
 		])]);
-		const renderLinkContext = (instance) => {
-			if (linkContextEditing.value) return renderLinkForm();
+		const renderLinkContextCard = (instance) => {
+			if (linkContextEditing.value) return h(Card, {
+				variant: "elevated",
+				padding: "sm",
+				size: "sm",
+				class: "looma-editor__link-context"
+			}, () => [renderLinkForm()]);
 			const rawHref = instance.getAttributes("link").href;
 			const href = typeof rawHref === "string" ? rawHref : "";
-			const safeHref = validLinkHref(href);
-			const editId = `${toolbarScope}-link-edit`;
-			const removeId = `${toolbarScope}-link-remove`;
-			const openId = `${toolbarScope}-link-open`;
 			const target = linkContextTarget.value;
-			return h(Cluster, {
-				gap: "xs",
-				wrap: "nowrap",
-				role: "group",
-				"aria-label": "Link actions"
-			}, () => [
-				loomaIcon(target ? "file-text" : "link"),
-				h(Stack, {
-					gap: "none",
-					title: href,
-					"aria-label": `${target ? props.linkTargetLabel : "URL"}: ${target?.label ?? href}`
-				}, () => [h(Text, {
-					as: "strong",
-					size: "sm",
-					weight: "medium",
-					font: "sans",
-					wrap: "anywhere"
-				}, () => target?.label ?? href), target?.detail ? h(Text, {
-					as: "small",
-					size: "xs",
-					tone: "secondary",
-					font: "sans"
-				}, () => target.detail) : null]),
-				safeHref ? h(Button, {
-					id: openId,
-					as: "a",
-					variant: "ghost",
-					tone: "neutral",
-					size: "sm",
-					href: safeHref,
-					target: "_blank",
-					rel: "noopener noreferrer",
-					"aria-label": "Open link"
-				}, () => h(Cluster, {
-					gap: "xs",
-					wrap: "nowrap"
-				}, () => [loomaIcon("external-link"), "Open link"])) : null,
-				safeHref ? h(Tooltip, { for: openId }, () => "Open link") : null,
-				h(IconButton, {
-					id: editId,
-					label: "Edit link",
-					variant: "ghost",
-					size: "sm",
-					onPointerdown: (event) => event.preventDefault(),
-					onClick: () => openLinkEditor(true)
-				}, () => loomaIcon("pencil")),
-				h(Tooltip, { for: editId }, () => "Edit link"),
-				h(IconButton, {
-					id: removeId,
-					label: "Remove link",
-					variant: "ghost",
-					size: "sm",
-					onPointerdown: (event) => event.preventDefault(),
-					onClick: removeCurrentLink
-				}, () => loomaIcon("unlink")),
-				h(Tooltip, { for: removeId }, () => "Remove link")
-			]);
-		};
-		const renderLinkContextCard = (instance) => h(Card, {
-			variant: "elevated",
-			padding: linkContextEditing.value ? "sm" : "xs",
-			size: linkContextEditing.value ? "sm" : "content",
-			class: ["looma-editor__link-context", { "looma-editor__link-context--editing": linkContextEditing.value }]
-		}, () => [renderLinkContext(instance)]);
-		const captureBlockAction = () => {
-			const instance = editor.value;
-			const head = instance?.state.selection.$head;
-			const position = head && head.depth > 0 ? head.before(1) : null;
-			blockActionTarget = position === null ? null : {
-				position,
-				node: instance?.state.doc.nodeAt(position) ?? null
-			};
+			return h(EditorLinkCard, {
+				class: "looma-editor__link-context",
+				href,
+				openHref: validLinkHref(href) ?? "",
+				label: target?.label ?? "",
+				detail: target?.detail ?? "",
+				targetLabel: props.linkTargetLabel,
+				onEdit: () => openLinkEditor(true),
+				onRemove: removeCurrentLink
+			});
 		};
 		const runBlockAction = (value) => {
 			const instance = editor.value;
-			const target = blockActionTarget;
-			if (!instance || !target || !props.editable) return;
+			const head = instance?.state.selection.$head;
+			if (!instance || !head || head.depth === 0 || !props.editable) return;
 			const { state } = instance;
-			const { position } = target;
+			const position = head.before(1);
 			const block = state.doc.nodeAt(position);
-			if (!block || block !== target.node) return;
+			if (!block) return;
 			const end = position + block.nodeSize;
 			const transaction = state.tr;
 			let focusAt = end + 1;
@@ -4323,16 +4263,11 @@ var LoomaEditor = defineComponent({
 						formatOpen.value = false;
 					}
 				}, () => instance ? renderToolbar(instance, true, false, true) : null) : null,
-				h(Menu, {
+				h(EditorBlockActions, {
 					for: blockActionAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
-					onOpen: captureBlockAction,
-					onSelect: (event) => runBlockAction(event.detail.value)
-				}, () => [
-					h(MenuItem, { value: "insert-below" }, () => "Insert paragraph below"),
-					h(MenuItem, { value: "duplicate" }, () => "Duplicate block"),
-					h(MenuItem, { value: "delete" }, () => "Delete block")
-				]),
+					onAction: (event) => runBlockAction(event.detail.action)
+				}),
 				h(Popover, {
 					class: "looma-editor__table-picker-popover",
 					open: tablePickerOpen.value,
@@ -4462,4 +4397,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorImageToolbar, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };

package/vue/editor/primitives.d.ts

@@ -3,12 +3,14 @@
  * `@threadlabs/looma/vue`, re-exported beside the editor that composes them.
  */
 import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail } from "@threadlabs/looma/editor";
-export { EditorImageToolbar, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
+export { EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, 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;
+    action: TableContextMenuActionEventDetail | {
+        action: "insert-below" | "duplicate" | "delete";
+    };
     insert: InsertTableEventDetail;
     placement: {
         placement: "block" | "center" | "wrap-left" | "wrap-right";
@@ -17,6 +19,8 @@ export interface VueEditorAdapterEventMap {
         alt: string;
     };
     delete: Record<string, never>;
+    edit: Record<string, never>;
+    remove: Record<string, never>;
     "add-row-before": {
         boundaryIndex: number;
     };
@@ -81,4 +85,6 @@ export declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorInsertTableGrid: "ui-editor-insert-table-grid";
     readonly EditorTableOverlay: "ui-editor-table-overlay";
     readonly EditorImageToolbar: "ui-editor-image-toolbar";
+    readonly EditorLinkCard: "ui-editor-link-card";
+    readonly EditorBlockActions: "ui-editor-block-actions";
 };