@threadlabs/looma 0.26.23 → 0.26.24

package/package.json

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

package/vue/editor/index.js

@@ -2178,7 +2178,10 @@ var LoomaEditor = defineComponent({
 					}
 				}).catch(() => {});
 			}
-			nextTick(() => (linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus());
+			nextTick(() => {
+				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setProps({ getReferenceClientRect: () => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to) });
+				(linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
+			});
 		};
 		const saveLink = () => {
 			const instance = editor.value;
@@ -3378,7 +3381,10 @@ var LoomaEditor = defineComponent({
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
-				instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
+				h(Stack, {
+					key: "looma-formatting-popup-host",
+					gap: "none"
+				}, () => [instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
 					updateDelay: 0,
@@ -3407,8 +3413,11 @@ var LoomaEditor = defineComponent({
 							}
 						}] } } : {}
 					}
-				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
-				instance && props.editable ? h(BubbleMenu, {
+				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null]),
+				h(Stack, {
+					key: "looma-link-popup-host",
+					gap: "none"
+				}, () => [instance && props.editable ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-link-context-menu",
 					updateDelay: 0,
@@ -3426,7 +3435,7 @@ var LoomaEditor = defineComponent({
 						maxWidth: Math.min(480, window.innerWidth - 24),
 						placement: "top"
 					}
-				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null,
+				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null]),
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",
@@ -3576,7 +3585,7 @@ var LoomaEditor = defineComponent({
 						const current = editor.value?.state.selection;
 						if (current && !current.empty && linkSelection && current.from === linkSelection.from && current.to === linkSelection.to) editor.value?.commands.setTextSelection(current.to);
 					}
-				}, renderLinkForm),
+				}, () => linkOpen.value ? renderLinkForm() : null),
 				props.editable && props.compactToolbar && !mobile.value ? h(Popover, {
 					class: "looma-editor__compact-formatting",
 					for: formatAnchorId,