@threadlabs/looma 0.28.11 → 0.28.12

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
@@ -2856,7 +2857,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");
@@ -2979,7 +2985,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;
@@ -4267,46 +4273,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 +4450,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 };