@threadlabs/looma 0.28.3 → 0.28.4

package/package.json

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

package/vue/editor/index.js

@@ -3640,6 +3640,11 @@ var LoomaEditor = defineComponent({
 		const tableToolbarRef = popupRef(tableToolbarShell);
 		const codeLanguageRef = popupRef(codeLanguageShell, true);
 		const mobileToolbarRef = popupRef(mobileToolbarShell, true);
+		const presentTableOverlay = popupRef(tableOverlayShell);
+		const tableOverlayRef = (node) => {
+			presentTableOverlay(node);
+			if (node instanceof HTMLElement) node.hidden = !tableUi.overlayOpen;
+		};
 		const onDocumentPointerDown = (event) => {
 			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
 			const inElement = (element) => Boolean(element && (path.includes(element) || event.target instanceof Node && element.contains(event.target)));
@@ -4315,6 +4320,7 @@ var LoomaEditor = defineComponent({
 				}, [h(ImageControls, { editor: 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",
 					ref: codeLanguageRef,
 					class: "looma-editor__code-language",
 					style: codeUi.style,
@@ -4329,6 +4335,7 @@ var LoomaEditor = defineComponent({
 					onValueChange: (event) => chooseCodeLanguage(event.detail)
 				}, () => codeLanguageOptions.value.map((option) => h("option", { value: option.value }, option.label)))]) : null,
 				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty || activeRangeActions(instance).length > 0) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
+					key: "looma-mobile-toolbar-shell",
 					ref: mobileToolbarRef,
 					class: "looma-editor__mobile-toolbar-shell",
 					"data-mode": mobileToolbarMode.value,
@@ -4509,17 +4516,20 @@ var LoomaEditor = defineComponent({
 					}
 				}) : null,
 				tableUi.toolbarOpen ? h("div", {
+					key: "looma-table-toolbar-shell",
 					ref: tableToolbarRef,
 					class: "looma-editor__table-toolbar-shell",
 					style: tableUi.toolbarStyle
 				}, [h(EditorTableToolbar, tableProps)]) : null,
-				tableUi.overlayOpen ? h("div", {
-					ref: tableOverlayShell,
+				instance && props.editable && !mobile.value ? h("div", {
+					key: "looma-table-overlay-shell",
+					ref: tableOverlayRef,
 					class: "looma-editor__table-overlay-shell",
 					style: tableUi.overlayStyle,
+					hidden: !tableUi.overlayOpen,
 					onMousedown: onTableOverlayMouseDown,
 					onPointerleave: onTableOverlayPointerLeave
-				}, [h(EditorTableOverlay, {
+				}, [tableUi.overlayOpen ? h(EditorTableOverlay, {
 					open: true,
 					geometry: tableUi.geometry,
 					onAddRowBefore: (event) => runOverlayAction({
@@ -4566,8 +4576,9 @@ var LoomaEditor = defineComponent({
 						action: "open-column-menu",
 						...event.detail
 					})
-				})]) : null,
+				}) : null]) : null,
 				tableUi.menuOpen ? h("div", {
+					key: "looma-table-menu-shell",
 					ref: tableMenuShell,
 					class: "looma-editor__table-menu-shell"
 				}, [h(EditorTableContextMenu, {