@threadlabs/looma 0.24.0 → 0.24.1

package/components/shared/overlay.js

@@ -219,8 +219,16 @@ export function createAnchoredSurface(surface, options = {}) {
       fallbackPosition(surface, { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 }, "bottom-start", gap(), viewportGap);
       return;
     }
-    if (!anchor) return;
-    lastAnchorRect = anchor.getBoundingClientRect();
+    const rect = anchor?.getBoundingClientRect();
+    // A disappearing trigger has no usable position. Keep the last valid position, or wait before first opening.
+    if (!anchor || anchor.isConnected === false || !rect || rect.width === 0 && rect.height === 0
+      || anchor instanceof owner.Element && owner.getComputedStyle(anchor).visibility !== "visible") {
+      if (lastAnchorRect) fallbackPosition(surface, lastAnchorRect, placement, gap(), viewportGap);
+      else hide(surface);
+      return;
+    }
+    lastAnchorRect = rect;
+    show(surface);
     fallbackPosition(surface, lastAnchorRect, placement, gap(), viewportGap);
   };
   const schedule = () => {

package/package.json

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

package/vue/editor/index.js

@@ -5,7 +5,7 @@ import { Extension, Node as Node$1, getText, getTextSerializersFromSchema, merge
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
 import { createLowlight } from "lowlight";
-import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 export * from "@threadlabs/looma/editor";
@@ -1801,6 +1801,7 @@ var LoomaEditor = defineComponent({
 		let heldPressTimer;
 		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
+		const formattingPickerOpen = () => linkOpen.value || tablePickerOpen.value;
 		const cancelHeldPress = () => {
 			clearTimeout(heldPressTimer);
 			heldPressTimer = void 0;
@@ -1808,7 +1809,7 @@ var LoomaEditor = defineComponent({
 		};
 		const formattingSelectionActive = (instance) => {
 			const selection = instance.state.selection;
-			return selection instanceof TextSelection && !dismissedFormattingSelection?.eq(selection) && (!selection.empty || Boolean(heldFormattingSelection?.eq(selection)));
+			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(instance.state.doc.textContent)) && !dismissedFormattingSelection?.eq(selection) && (!selection.empty || Boolean(heldFormattingSelection?.eq(selection)));
 		};
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
@@ -2473,6 +2474,11 @@ var LoomaEditor = defineComponent({
 			});
 			if (!editable) chipOpen.value = false;
 		});
+		watch([linkOpen, tablePickerOpen], ([link, table]) => {
+			if (link || table || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.popper.contains(document.activeElement)) return;
+			heldFormattingSelection = null;
+			formattingPopup?.hide();
+		});
 		watch(() => props.label, (label) => {
 			editor.value?.setOptions({ editorProps: { attributes: {
 				role: "textbox",
@@ -2667,7 +2673,7 @@ var LoomaEditor = defineComponent({
 			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
-				if (!editor.value?.isFocused && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
+				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
 			}, 0);
 		};
 		const bindEditorUi = (instance) => {
@@ -2741,7 +2747,7 @@ var LoomaEditor = defineComponent({
 			cancelHeldPress();
 			if (event.key !== "Escape" || !floatingFormattingMode() || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target))) return;
 			const selection = editor.value?.state.selection;
-			dismissedFormattingSelection = selection instanceof TextSelection ? selection : null;
+			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 			hideTool();
@@ -3208,7 +3214,7 @@ var LoomaEditor = defineComponent({
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
 					updateDelay: 0,
-					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (menuEditor.isFocused || linkContextEditing.value) && formattingSelectionActive(menuEditor),
+					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (menuEditor.isFocused || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
 					tippyOptions: {
 						onCreate: (popup) => {
 							formattingPopup = popup;
@@ -3218,6 +3224,7 @@ var LoomaEditor = defineComponent({
 						},
 						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
 						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
+						onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
 						duration: 100,
 						maxWidth: "none",
 						placement: "top",