@threadlabs/looma 0.28.6 → 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
@@ -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";
 };

package/vue/index.d.ts

@@ -19,8 +19,10 @@ export { default as DescriptionList } from "./UiDescriptionList.js";
 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 EditorImageToolbar } from "./UiEditorImageToolbar.js";
 export { default as EditorInsertTableGrid } from "./UiEditorInsertTableGrid.js";
+export { default as EditorLinkCard } from "./UiEditorLinkCard.js";
 export { default as EditorMentionMenu } from "./UiEditorMentionMenu.js";
 export { default as EditorMentionMenuItem } from "./UiEditorMentionMenuItem.js";
 export { default as EditorSlashMenu } from "./UiEditorSlashMenu.js";

package/vue/index.js

@@ -23,6 +23,9 @@ import { t as UiScrollArea_default } from "./chunks/UiScrollArea.js";
 import { t as UiDialog_default } from "./chunks/UiDialog.js";
 import { t as UiDisclosure_default } from "./chunks/UiDisclosure.js";
 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 UiEditorToolbar_default } from "./chunks/UiEditorToolbar.js";
 import { t as UiFormField_default } from "./chunks/UiFormField.js";
 import { t as UiIconButton_default } from "./chunks/UiIconButton.js";
@@ -32,6 +35,7 @@ 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";
+import { t as UiEditorLinkCard_default } from "./chunks/UiEditorLinkCard.js";
 import { t as UiEditorMentionMenu_default } from "./chunks/UiEditorMentionMenu.js";
 import { t as UiEditorMentionMenuItem_default } from "./chunks/UiEditorMentionMenuItem.js";
 import { t as UiEditorSlashMenu_default } from "./chunks/UiEditorSlashMenu.js";
@@ -48,9 +52,7 @@ import { t as UiInputGroup_default } from "./chunks/UiInputGroup.js";
 import { t as UiList_default } from "./chunks/UiList.js";
 import { t as UiListItem_default } from "./chunks/UiListItem.js";
 import { t as UiListbox_default } from "./chunks/UiListbox.js";
-import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuGroup_default } from "./chunks/UiMenuGroup.js";
-import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
 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";
@@ -75,4 +77,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, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, 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, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, 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 };