@threadlabs/looma 0.6.2 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/index.js

@@ -1,6 +1,6 @@
 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 { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover } from "@threadlabs/looma/vue";
+import { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover, Tooltip } from "@threadlabs/looma/vue";
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Extension } from "@tiptap/core";
@@ -314,6 +314,32 @@ var LoomaEditor = defineComponent({
 		const root = ref(null);
 		const fileInput = ref(null);
 		const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const tooltipFor = ref("");
+		const tooltipLabel = ref("");
+		const tooltipOpen = ref(false);
+		let tooltipTimer = 0;
+		const clearTooltipTimer = () => {
+			if (tooltipTimer) window.clearTimeout(tooltipTimer);
+			tooltipTimer = 0;
+		};
+		const showTool = (id, label, immediate) => {
+			clearTooltipTimer();
+			tooltipFor.value = id;
+			tooltipLabel.value = label;
+			if (immediate || tooltipOpen.value) {
+				tooltipOpen.value = true;
+				return;
+			}
+			tooltipTimer = window.setTimeout(() => {
+				tooltipOpen.value = true;
+			}, 400);
+		};
+		const hideTool = () => {
+			clearTooltipTimer();
+			tooltipOpen.value = false;
+		};
+		onBeforeUnmount(clearTooltipTimer);
 		const tableToolbarShell = ref(null);
 		const tableOverlayShell = ref(null);
 		const tableMenuShell = ref(null);
@@ -788,11 +814,16 @@ var LoomaEditor = defineComponent({
 				const button = vnode.el instanceof HTMLButtonElement ? vnode.el : vnode.el.querySelector("button");
 				if (button) button.disabled = disabled;
 			};
+			const id = `${toolbarScope}-${label.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
 			return h(IconButton, {
+				id,
 				class: "looma-editor__toolbar-button",
 				label,
-				title: label,
 				size: "sm",
+				onPointerenter: () => showTool(id, label, false),
+				onPointerleave: hideTool,
+				onFocusin: () => showTool(id, label, true),
+				onFocusout: hideTool,
 				variant: "ghost",
 				disabled,
 				"aria-pressed": active ? "true" : "false",
@@ -831,8 +862,11 @@ var LoomaEditor = defineComponent({
 					id: tablePickerAnchorId,
 					class: "looma-editor__toolbar-button",
 					label: "Insert table",
-					title: "Insert table",
 					size: "sm",
+					onPointerenter: () => showTool(tablePickerAnchorId, "Insert table", false),
+					onPointerleave: hideTool,
+					onFocusin: () => showTool(tablePickerAnchorId, "Insert table", true),
+					onFocusout: hideTool,
 					variant: tablePickerOpen.value ? "solid" : "ghost",
 					"aria-expanded": tablePickerOpen.value ? "true" : "false",
 					onClick: () => {
@@ -847,7 +881,13 @@ var LoomaEditor = defineComponent({
 				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
 				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
 			];
-			return h(EditorToolbar, { floating }, () => buttons);
+			return h(EditorToolbar, { floating }, () => [...buttons, h(Tooltip, {
+				class: "looma-editor__toolbar-tip",
+				for: tooltipFor.value,
+				open: tooltipOpen.value,
+				placement: floating ? "top" : "bottom",
+				trigger: "focus"
+			}, () => tooltipLabel.value)]);
 		};
 		const focus = (position = "start") => {
 			editor.value?.commands.focus(position);