@threadlabs/looma 0.26.21 → 0.26.23

package/vue/components.css

@@ -2211,7 +2211,7 @@ input[data-v-a7d28848]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-v-33359776] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-combobox-label-text: var(--ui-combobox-label-text);
   --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -2236,20 +2236,20 @@ input[data-v-a7d28848]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-2be0ffde] {
+label[data-v-33359776] {
   color: var(--_ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-2be0ffde] {
+.control[data-v-33359776] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-2be0ffde] {
+.field[data-v-33359776] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -2261,19 +2261,19 @@ label[data-v-2be0ffde] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-2be0ffde]:focus-within {
+.field[data-v-33359776]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-.entry[data-v-2be0ffde] {
+.entry[data-v-33359776] {
   display: flex;
   flex: 1 1 auto;
   min-inline-size: 0;
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-2be0ffde] {
+.help[data-v-33359776] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -2290,28 +2290,28 @@ label[data-v-2be0ffde] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-2be0ffde]:hover:enabled,
-.help[aria-expanded="true"][data-v-2be0ffde] {
+.help[data-v-33359776]:hover:enabled,
+.help[aria-expanded="true"][data-v-33359776] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-2be0ffde]:focus-visible {
+.help[data-v-33359776]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-2be0ffde]:disabled {
+.help[data-v-33359776]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-2be0ffde] {
+.help-icon[data-v-33359776] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-2be0ffde]::selection {
+input[data-v-33359776]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-2be0ffde] {
+input[data-v-33359776] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -2327,20 +2327,20 @@ input[data-v-2be0ffde] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-33359776] {
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-33359776] {
   min-block-size: calc(var(--_row) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-33359776] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
-button[data-v-2be0ffde] {
+button[data-v-33359776] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -2355,36 +2355,36 @@ button[data-v-2be0ffde] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-2be0ffde] {
+.affordance-icon[data-v-33359776] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-2be0ffde]:hover:enabled {
+button[data-v-33359776]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-2be0ffde]:focus-visible {
+button[data-v-33359776]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 var(--ui-focus-width)
     color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-2be0ffde]:disabled, button[data-v-2be0ffde]:disabled {
+input[data-v-33359776]:disabled, button[data-v-33359776]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-2be0ffde]:has(input:disabled) {
+.field[data-v-33359776]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-2be0ffde],
-[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-33359776],
+[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-33359776] {
   border-color: var(
     --_ui-combobox-invalid-border,
     var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
   );
 }
-.popup[data-v-2be0ffde] {
+.popup[data-v-33359776] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -2405,46 +2405,46 @@ input[data-v-2be0ffde]:disabled, button[data-v-2be0ffde]:disabled {
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
 }
-[hidden][data-v-2be0ffde] {
+[hidden][data-v-33359776] {
   display: none;
 }
-.option[aria-disabled="true"] .primary[data-v-2be0ffde],
-.option[aria-disabled="true"] .secondary[data-v-2be0ffde] {
+.option[aria-disabled="true"] .primary[data-v-33359776],
+.option[aria-disabled="true"] .secondary[data-v-33359776] {
   color: var(--ui-disabled-text);
 }
-.primary[data-v-2be0ffde] {
+.primary[data-v-33359776] {
   display: block;
   color: var(--_ui-combobox-option-text, inherit);
   font-weight: 500;
 }
 /* A row with a tag or a description: the label and its tag on one line, the description under them. */
-.detail[data-v-2be0ffde] {
+.detail[data-v-33359776] {
   display: grid;
   gap: var(--ui-space-0-5);
   min-inline-size: 0;
 }
-.line[data-v-2be0ffde] {
+.line[data-v-33359776] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.description[data-v-2be0ffde] {
+.description[data-v-33359776] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.message[data-v-2be0ffde], .group[data-v-2be0ffde] {
+.message[data-v-33359776], .group[data-v-33359776] {
   color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-2be0ffde], .popup .message[data-v-2be0ffde] {
+.group[data-v-33359776], .popup .message[data-v-33359776] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-2be0ffde] {
+.sr-only[data-v-33359776] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -2453,45 +2453,45 @@ input[data-v-2be0ffde]:disabled, button[data-v-2be0ffde]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-2be0ffde] {
+button[data-v-33359776] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
   /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
      body-size text: below 16px, iOS zooms the page into the focused field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-33359776] {
     --_row: var(--ui-control-min-block-size);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-33359776] {
     font-size: inherit;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-2be0ffde], .popup[data-v-2be0ffde] {
+.field[data-v-33359776], .popup[data-v-33359776] {
     border-color: CanvasText;
 }
-.option.active[data-v-2be0ffde] {
+.option.active[data-v-33359776] {
     outline-color: Highlight;
 }
 }
 
 /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
    while the clear and disclosure controls remain fixed at the end of the field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-33359776] {
   align-items: center;
   min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-33359776] {
   align-items: center;
   gap: var(--ui-space-1);
   overflow-x: auto;
   scrollbar-width: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-2be0ffde]::-webkit-scrollbar {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-33359776]::-webkit-scrollbar {
   display: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-2be0ffde] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-33359776] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
@@ -2499,27 +2499,27 @@ button[data-v-2be0ffde] {
 }
 /* Size variants keep their control height as selections are added. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  .field[data-v-2be0ffde] {
+  .field[data-v-33359776] {
   min-block-size: 0;
   padding: var(--ui-space-0-5);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  input[data-v-2be0ffde] {
+  input[data-v-33359776] {
   min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
   padding: 0 var(--ui-space-1);
 }
 /* A large multiple field starts at the large control height, as sm starts at the small one. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  .field[data-v-2be0ffde] {
+  .field[data-v-33359776] {
   min-block-size: 0;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  input[data-v-2be0ffde] {
+  input[data-v-33359776] {
   min-block-size: calc(
     var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
   );
 }
-.item[data-v-2be0ffde] {
+.item[data-v-33359776] {
   appearance: none;
   display: inline-flex;
   flex: none;
@@ -2534,16 +2534,16 @@ button[data-v-2be0ffde] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-2be0ffde]:focus-visible {
+.item[data-v-33359776]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: var(--ui-border-width);
 }
-.item[data-v-2be0ffde]:disabled {
+.item[data-v-33359776]:disabled {
   color: var(--ui-disabled-text);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-2be0ffde] {
+[data-component~="ui-combobox"][hidden][data-v-33359776] {
   display: none;
 }
 
@@ -10097,6 +10097,15 @@ html[data-ui-input-modality="touch"]
 .looma-editor .ProseMirror li > :is(ul, ol) {
   margin-block: var(--ui-space-1) 0;
 }
+
+/* A held navigation modifier makes links actionable without interrupting editing. */
+[data-component~="ui-editor-surface"] .ProseMirror[contenteditable="true"] a[href] {
+  cursor: text;
+}
+
+[data-component~="ui-editor-surface"] .ProseMirror[data-link-navigation] a[href] {
+  cursor: pointer;
+}
 /**
  * Looma editor styles (tokens-based).
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.

package/vue/editor/index.js

@@ -1822,6 +1822,7 @@ var LoomaEditor = defineComponent({
 		let dismissedFormattingSelection = null;
 		let heldFormattingSelection = null;
 		let formattingPopup = null;
+		let linkPopup = null;
 		let heldPressTimer;
 		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
@@ -2032,7 +2033,30 @@ var LoomaEditor = defineComponent({
 					"aria-multiline": "true",
 					"aria-label": props.label
 				},
-				handleKeyDown: (_view, event) => onFormattingKeyDown(event)
+				handleKeyDown: (_view, event) => onFormattingKeyDown(event),
+				handleDOMEvents: { click: (view, event) => {
+					if (!(event.target instanceof Element) || event.button !== 0) return false;
+					const link = event.target.closest("a[href]");
+					if (!link || !view.dom.contains(link)) return false;
+					const href = validLinkHref(link.getAttribute("href") ?? "");
+					if (!href) return false;
+					if (isApplePlatform() ? event.metaKey : event.ctrlKey) {
+						event.preventDefault();
+						window.open(href, "_blank", "noopener,noreferrer");
+						return true;
+					}
+					dismissedFormattingSelection = null;
+					requestAnimationFrame(() => {
+						if (view.isDestroyed) return;
+						editorStateVersion.value += 1;
+						const instance = editor.value;
+						if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
+							linkPopup?.setProps({ getReferenceClientRect: () => link.getBoundingClientRect() });
+							linkPopup?.show();
+						}
+					});
+					return false;
+				} }
 			},
 			onCreate: ({ editor: instance }) => {
 				emit("ready", instance);
@@ -2360,31 +2384,38 @@ var LoomaEditor = defineComponent({
 			h(Separator),
 			h(Cluster, {
 				gap: "xs",
-				justify: "between"
-			}, () => [h(Cluster, { gap: "xs" }, () => [linkSelection?.existing ? h(Button, {
+				justify: "between",
+				wrap: "nowrap"
+			}, () => [linkSelection?.existing ? h(Button, {
 				type: "button",
 				variant: "ghost",
 				tone: "danger",
 				size: "sm",
 				onClick: removeLink
-			}, () => "Remove link") : null, linkMode.value === "url" && validLinkHref(linkHref.value) ? h(Button, {
+			}, () => "Remove link") : null, validLinkHref(linkHref.value) ? h(Button, {
 				as: "a",
-				variant: "link",
+				variant: "outline",
+				tone: "accent",
 				size: "sm",
 				href: validLinkHref(linkHref.value),
 				target: "_blank",
 				rel: "noopener noreferrer"
-			}, () => "Preview link") : null]), h(Cluster, { gap: "xs" }, () => [h(Button, {
+			}, () => "Open link") : null]),
+			h(Cluster, {
+				gap: "xs",
+				justify: "end",
+				wrap: "nowrap"
+			}, () => [h(Button, {
 				type: "button",
-				variant: "ghost",
-				tone: "neutral",
+				variant: "outline",
+				tone: "accent",
 				size: "sm",
 				onClick: cancelLink
 			}, () => "Cancel"), h(Button, {
 				type: "submit",
 				variant: "solid",
 				size: "sm"
-			}, () => "Save link")])])
+			}, () => "Save link")])
 		])]);
 		const renderLinkContext = (instance) => {
 			if (linkContextEditing.value) return renderLinkForm();
@@ -2428,7 +2459,10 @@ var LoomaEditor = defineComponent({
 					target: "_blank",
 					rel: "noopener noreferrer",
 					"aria-label": "Open link"
-				}, () => loomaIcon("external-link")) : null,
+				}, () => h(Cluster, {
+					gap: "xs",
+					wrap: "nowrap"
+				}, () => [loomaIcon("external-link"), "Open link"])) : null,
 				safeHref ? h(Tooltip, { for: openId }, () => "Open link") : null,
 				h(IconButton, {
 					id: editId,
@@ -2787,12 +2821,13 @@ var LoomaEditor = defineComponent({
 		};
 		const onFormattingKeyDown = (event) => {
 			cancelHeldPress();
-			if (event.key !== "Escape" || !floatingFormattingMode() || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target)) || !(formatOpen.value || formattingPopup?.popper.style.visibility === "visible")) return false;
+			if (event.key !== "Escape" || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target) || linkPopup?.popper.contains(event.target)) || !(formatOpen.value || formattingPopup?.popper.style.visibility === "visible" || linkPopup?.popper.style.visibility === "visible")) return false;
 			const selection = editor.value?.state.selection;
 			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
 			heldFormattingSelection = null;
 			formatOpen.value = false;
 			formattingPopup?.hide();
+			linkPopup?.hide();
 			hideTool();
 			return true;
 		};
@@ -2877,7 +2912,17 @@ var LoomaEditor = defineComponent({
 				trigger: "programmatic"
 			});
 		};
+		const onLinkNavigationModifier = (event) => {
+			const dom = editor.value?.view.dom;
+			const active = isApplePlatform() ? event.metaKey : event.ctrlKey;
+			if (dom && dom.hasAttribute("data-link-navigation") !== active) dom.toggleAttribute("data-link-navigation", active);
+		};
+		const clearLinkNavigationModifier = () => editor.value?.view.dom.removeAttribute("data-link-navigation");
 		onMounted(() => {
+			window.addEventListener("keydown", onLinkNavigationModifier);
+			window.addEventListener("keyup", onLinkNavigationModifier);
+			window.addEventListener("pointermove", onLinkNavigationModifier);
+			window.addEventListener("blur", clearLinkNavigationModifier);
 			updateMobileViewport();
 			window.addEventListener("resize", onViewportChange);
 			window.addEventListener("scroll", onViewportChange, true);
@@ -2894,6 +2939,10 @@ var LoomaEditor = defineComponent({
 			root.value?.addEventListener("error", onImageError, true);
 		});
 		onBeforeUnmount(() => {
+			window.removeEventListener("keydown", onLinkNavigationModifier);
+			window.removeEventListener("keyup", onLinkNavigationModifier);
+			window.removeEventListener("pointermove", onLinkNavigationModifier);
+			window.removeEventListener("blur", clearLinkNavigationModifier);
 			window.removeEventListener("resize", onViewportChange);
 			window.removeEventListener("scroll", onViewportChange, true);
 			window.visualViewport?.removeEventListener("resize", onViewportChange);
@@ -3358,19 +3407,26 @@ 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 ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
-				instance && props.editable && !mobile.value && props.toolbarMode !== "contextual" ? 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,
+				instance && props.editable ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-link-context-menu",
-					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value,
+					updateDelay: 0,
+					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkContextEditing.value || linkPopup?.popper.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
 					tippyOptions: {
+						onCreate: (popup) => {
+							linkPopup = popup;
+						},
+						onDestroy: () => {
+							linkPopup = null;
+						},
 						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
 						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
 						duration: 100,
 						maxWidth: Math.min(480, window.innerWidth - 24),
-						placement: "bottom"
+						placement: "top"
 					}
-				}, { default: () => 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",