@threadlabs/looma 0.18.4 → 0.18.5

package/package.json

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

package/styles/ui-popover.css

@@ -23,6 +23,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-popover-padding {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
@@ -31,6 +35,7 @@
       --_ui-popover-border: var(--ui-popover-border);
       --_ui-popover-radius: var(--ui-popover-radius);
       --_ui-popover-shadow: var(--ui-popover-shadow);
+      --_ui-popover-padding: var(--ui-popover-padding);
       box-sizing: border-box;
       max-inline-size: min(
         20rem,
@@ -51,7 +56,7 @@
       max-inline-size: inherit;
       max-block-size: inherit;
       overflow: auto;
-      padding: var(--ui-space-3);
+      padding: var(--_ui-popover-padding, var(--ui-space-3));
       background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));

package/vue/UiPopover.vue

@@ -120,12 +120,17 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-popover-padding {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-popover"] {
   --_ui-popover-surface: var(--ui-popover-surface);
   --_ui-popover-border: var(--ui-popover-border);
   --_ui-popover-radius: var(--ui-popover-radius);
   --_ui-popover-shadow: var(--ui-popover-shadow);
+  --_ui-popover-padding: var(--ui-popover-padding);
   box-sizing: border-box;
   max-inline-size: min(
     20rem,
@@ -146,7 +151,7 @@ useComponentHost(controllerModule.default, {
   max-inline-size: inherit;
   max-block-size: inherit;
   overflow: auto;
-  padding: var(--ui-space-3);
+  padding: var(--_ui-popover-padding, var(--ui-space-3));
   background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));

package/vue/chunks/UiPopover.js

@@ -56,6 +56,6 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-dc71213c"]]);
+}), [["__scopeId", "data-v-fd69c5a5"]]);
 //#endregion
 export { UiPopover_default as t };

package/vue/components.css

@@ -5732,11 +5732,16 @@ svg[data-v-9828be81-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-popover"][data-v-dc71213c] {
+@property --ui-popover-padding {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-popover"][data-v-fd69c5a5] {
   --_ui-popover-surface: var(--ui-popover-surface);
   --_ui-popover-border: var(--ui-popover-border);
   --_ui-popover-radius: var(--ui-popover-radius);
   --_ui-popover-shadow: var(--ui-popover-shadow);
+  --_ui-popover-padding: var(--ui-popover-padding);
   box-sizing: border-box;
   max-inline-size: min(
     20rem,
@@ -5751,12 +5756,12 @@ svg[data-v-9828be81-s] {
   background: transparent;
   box-shadow: none;
 }
-.surface[data-v-dc71213c] {
+.surface[data-v-fd69c5a5] {
   box-sizing: border-box;
   max-inline-size: inherit;
   max-block-size: inherit;
   overflow: auto;
-  padding: var(--ui-space-3);
+  padding: var(--_ui-popover-padding, var(--ui-space-3));
   background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
@@ -5765,10 +5770,10 @@ svg[data-v-9828be81-s] {
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
 }
-[data-component~="ui-popover"][data-v-dc71213c]:not([data-component~="ui-popover"][data-ui-popover-state~="internalOpen"]) {
+[data-component~="ui-popover"][data-v-fd69c5a5]:not([data-component~="ui-popover"][data-ui-popover-state~="internalOpen"]) {
   display: none;
 }
-[data-component~="ui-popover"][popover][data-v-dc71213c] {
+[data-component~="ui-popover"][popover][data-v-fd69c5a5] {
   position: fixed;
   inset: auto;
   margin: 0;
@@ -5780,21 +5785,21 @@ svg[data-v-9828be81-s] {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-[data-component~="ui-popover"][popover][data-v-dc71213c]:popover-open {
+[data-component~="ui-popover"][popover][data-v-fd69c5a5]:popover-open {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
 @starting-style {
-[data-component~="ui-popover"][popover][data-v-dc71213c]:popover-open {
+[data-component~="ui-popover"][popover][data-v-fd69c5a5]:popover-open {
     opacity: 0;
     transform: translateY(-4px) scale(0.99);
 }
 }
-[data-component~="ui-popover"][hidden][data-v-dc71213c] {
+[data-component~="ui-popover"][hidden][data-v-fd69c5a5] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-popover"][popover][data-v-dc71213c] {
+[data-component~="ui-popover"][popover][data-v-fd69c5a5] {
     transition: none;
 }
 }
@@ -8884,6 +8889,73 @@ html[data-ui-input-modality="touch"]
   inline-size: min(22rem, calc(100vw - 2rem));
 }
 
+/* The floating toolbar supplies the surface; the containing popover only
+   positions it beside the app-owned trigger. */
+.looma-editor__formatting-popover {
+  --ui-popover-padding: 0;
+  --ui-popover-surface: transparent;
+  --ui-popover-border: transparent;
+  --ui-popover-shadow: none;
+}
+
+.looma-editor__link-context {
+  box-sizing: border-box;
+  max-width: min(24rem, calc(100vw - 1.5rem));
+  padding: var(--ui-editor-toolbar-floating-padding, 4px);
+  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+  box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans, sans-serif);
+}
+
+.looma-editor__link-context-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+}
+
+.looma-editor__link-context-url {
+  min-width: 0;
+  max-width: 10rem;
+  overflow: hidden;
+  padding-inline: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.looma-editor__link-context-actions :is(button, a) {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-height: var(--ui-control-min-block-size);
+  padding: 0 var(--ui-space-2);
+  border: 0;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-text-primary);
+  font: inherit;
+  font-size: var(--ui-font-size-sm);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.looma-editor__link-context-actions :is(button, a):is(:hover, :focus-visible) {
+  background: var(--ui-surface-subtle);
+}
+
+.looma-editor__link-context-actions :is(button, a):focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+.looma-editor__link-context--editing {
+  width: min(22rem, calc(100vw - 1.5rem));
+  padding: var(--ui-space-3);
+}
+
 .looma-editor__chip-popover {
   inline-size: min(15rem, calc(100vw - 2rem));
 }

package/vue/editor/index.js

@@ -370,6 +370,7 @@ var LoomaEditor = defineComponent({
 		const linkAnchorId = `looma-editor-link-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const linkUrlInput = ref(null);
 		const linkOpen = ref(false);
+		const linkContextEditing = ref(false);
 		const linkHref = ref("");
 		const linkText = ref("");
 		const linkNewTab = ref(true);
@@ -550,7 +551,10 @@ var LoomaEditor = defineComponent({
 			} },
 			onCreate: ({ editor: instance }) => emit("ready", instance),
 			onFocus: ({ editor: instance }) => rememberSelection(instance),
-			onSelectionUpdate: ({ editor: instance }) => rememberSelection(instance),
+			onSelectionUpdate: ({ editor: instance }) => {
+				rememberSelection(instance);
+				if (linkContextEditing.value && instance.state.selection.from !== linkSelection?.from) linkContextEditing.value = false;
+			},
 			onTransaction: () => {
 				editorStateVersion.value += 1;
 			},
@@ -560,7 +564,7 @@ var LoomaEditor = defineComponent({
 				emit("update", value);
 			}
 		});
-		const openLinkEditor = () => {
+		const openLinkEditor = (context = false) => {
 			const instance = editor.value;
 			if (!instance || !props.editable) return;
 			const current = instance.state.selection;
@@ -581,7 +585,8 @@ var LoomaEditor = defineComponent({
 			linkNewTab.value = attrs.target !== "_self";
 			linkText.value = empty && !existing ? "" : instance.state.doc.textBetween(from, to);
 			linkError.value = "";
-			linkOpen.value = true;
+			linkContextEditing.value = context;
+			linkOpen.value = !context;
 			nextTick(() => linkUrlInput.value?.focus());
 		};
 		const saveLink = () => {
@@ -622,6 +627,7 @@ var LoomaEditor = defineComponent({
 				chain.setLink(attrs).run();
 			}
 			linkOpen.value = false;
+			linkContextEditing.value = false;
 		};
 		const removeLink = () => {
 			const instance = editor.value;
@@ -632,6 +638,92 @@ var LoomaEditor = defineComponent({
 				to: selection.to
 			}).extendMarkRange("link").unsetLink().run();
 			linkOpen.value = false;
+			linkContextEditing.value = false;
+		};
+		const removeCurrentLink = () => {
+			const instance = editor.value;
+			if (!instance?.isActive("link")) return;
+			instance.chain().focus().extendMarkRange("link").unsetLink().run();
+			linkContextEditing.value = false;
+		};
+		const renderLinkForm = () => h("form", {
+			class: "looma-editor__link-form",
+			"aria-label": "Edit link",
+			onSubmit: (event) => {
+				event.preventDefault();
+				saveLink();
+			}
+		}, [
+			linkSelection?.from === linkSelection?.to && !linkSelection?.existing ? h("label", [h("span", "Text"), h("input", {
+				value: linkText.value,
+				onInput: (event) => {
+					linkText.value = event.target.value;
+					linkError.value = "";
+				}
+			})]) : null,
+			h("label", [h("span", "URL"), h("input", {
+				ref: linkUrlInput,
+				type: "text",
+				inputmode: "url",
+				value: linkHref.value,
+				"aria-invalid": linkError.value ? "true" : void 0,
+				onInput: (event) => {
+					linkHref.value = event.target.value;
+					linkError.value = "";
+				}
+			})]),
+			h("label", { class: "looma-editor__link-new-tab" }, [h("input", {
+				type: "checkbox",
+				checked: linkNewTab.value,
+				onChange: (event) => {
+					linkNewTab.value = event.target.checked;
+				}
+			}), h("span", "Open in new tab")]),
+			linkError.value ? h("p", {
+				class: "looma-editor__link-error",
+				role: "alert"
+			}, linkError.value) : null,
+			validLinkHref(linkHref.value) ? h("a", {
+				class: "looma-editor__link-preview",
+				href: validLinkHref(linkHref.value),
+				target: "_blank",
+				rel: "noopener noreferrer"
+			}, "Preview link") : null,
+			h("div", { class: "looma-editor__link-actions" }, [linkSelection?.existing ? h("button", {
+				type: "button",
+				onClick: removeLink
+			}, "Remove link") : null, h("button", { type: "submit" }, "Save link")])
+		]);
+		const renderLinkContext = (instance) => {
+			if (linkContextEditing.value) return renderLinkForm();
+			const rawHref = instance.getAttributes("link").href;
+			const href = typeof rawHref === "string" ? rawHref : "";
+			const safeHref = validLinkHref(href);
+			return h("div", {
+				class: "looma-editor__link-context-actions",
+				role: "group",
+				"aria-label": "Link actions"
+			}, [
+				h("span", {
+					class: "looma-editor__link-context-url",
+					title: href
+				}, href),
+				h("button", {
+					type: "button",
+					onPointerdown: (event) => event.preventDefault(),
+					onClick: () => openLinkEditor(true)
+				}, "Edit link"),
+				h("button", {
+					type: "button",
+					onPointerdown: (event) => event.preventDefault(),
+					onClick: removeCurrentLink
+				}, "Remove link"),
+				safeHref ? h("a", {
+					href: safeHref,
+					target: "_blank",
+					rel: "noopener noreferrer"
+				}, "Open link") : null
+			]);
 		};
 		const captureBlockAction = () => {
 			const instance = editor.value;
@@ -1330,10 +1422,10 @@ var LoomaEditor = defineComponent({
 				onDblclick: onImageDoubleClick,
 				onKeydown: onImageKeyDown
 			}, [
-				instance && props.editable && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" && !props.toolbarOpen) ? h(BubbleMenu, {
+				instance && props.editable && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover") ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
-					shouldShow: ({ editor: menuEditor, from, to }) => shouldShowTextFormattingToolbar(menuEditor, from, to),
+					shouldShow: ({ editor: menuEditor, from, to }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && shouldShowTextFormattingToolbar(menuEditor, from, to),
 					tippyOptions: {
 						appendTo: () => root.value ?? document.body,
 						duration: 100,
@@ -1341,6 +1433,17 @@ var LoomaEditor = defineComponent({
 						placement: "top"
 					}
 				}, { default: () => renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
+				instance && props.editable && !mobile.value ? h(BubbleMenu, {
+					editor: instance,
+					pluginKey: "looma-link-context-menu",
+					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value,
+					tippyOptions: {
+						appendTo: () => root.value ?? document.body,
+						duration: 100,
+						maxWidth: "none",
+						placement: "bottom"
+					}
+				}, { default: () => h("div", { class: ["looma-editor__link-context", { "looma-editor__link-context--editing": linkContextEditing.value }] }, [renderLinkContext(instance)]) }) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",
@@ -1350,7 +1453,7 @@ var LoomaEditor = defineComponent({
 					placement: "bottom-end",
 					onOpen: () => emit("update:toolbarOpen", true),
 					onClose: () => emit("update:toolbarOpen", false)
-				}, () => [renderToolbar(instance, false)]) : null,
+				}, () => [renderToolbar(instance, true)]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "sticky" ? h("div", {
 					class: "looma-editor__sticky-toolbar-shell",
 					role: "toolbar",
@@ -1467,59 +1570,12 @@ var LoomaEditor = defineComponent({
 					open: linkOpen.value,
 					for: linkAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
-					onOpen: openLinkEditor,
+					onOpen: () => openLinkEditor(),
 					onClose: () => {
 						linkOpen.value = false;
 						linkPressedSelection = null;
 					}
-				}, () => h("form", {
-					class: "looma-editor__link-form",
-					"aria-label": "Edit link",
-					onSubmit: (event) => {
-						event.preventDefault();
-						saveLink();
-					}
-				}, [
-					linkSelection?.from === linkSelection?.to && !linkSelection?.existing ? h("label", [h("span", "Text"), h("input", {
-						value: linkText.value,
-						onInput: (event) => {
-							linkText.value = event.target.value;
-							linkError.value = "";
-						}
-					})]) : null,
-					h("label", [h("span", "URL"), h("input", {
-						ref: linkUrlInput,
-						type: "text",
-						inputmode: "url",
-						value: linkHref.value,
-						"aria-invalid": linkError.value ? "true" : void 0,
-						onInput: (event) => {
-							linkHref.value = event.target.value;
-							linkError.value = "";
-						}
-					})]),
-					h("label", { class: "looma-editor__link-new-tab" }, [h("input", {
-						type: "checkbox",
-						checked: linkNewTab.value,
-						onChange: (event) => {
-							linkNewTab.value = event.target.checked;
-						}
-					}), h("span", "Open in new tab")]),
-					linkError.value ? h("p", {
-						class: "looma-editor__link-error",
-						role: "alert"
-					}, linkError.value) : null,
-					validLinkHref(linkHref.value) ? h("a", {
-						class: "looma-editor__link-preview",
-						href: validLinkHref(linkHref.value),
-						target: "_blank",
-						rel: "noopener noreferrer"
-					}, "Preview link") : null,
-					h("div", { class: "looma-editor__link-actions" }, [linkSelection?.existing ? h("button", {
-						type: "button",
-						onClick: removeLink
-					}, "Remove link") : null, h("button", { type: "submit" }, "Save link")])
-				])),
+				}, renderLinkForm),
 				h(Menu, {
 					for: blockActionAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",