@threadlabs/looma 0.26.9 → 0.26.10

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -34,6 +34,19 @@ export interface LoomaEditorSelectionAction {
     id: string;
     label: string;
 }
+/** Host action available at a collapsed caret inside an ephemeral editor range. */
+export interface LoomaEditorRangeAction extends LoomaEditorSelectionAction {
+    from: number;
+    to: number;
+}
+/** Matching ranges are grouped into one control for each action ID. */
+export interface LoomaEditorRangeActionDetail {
+    id: string;
+    ranges: {
+        from: number;
+        to: number;
+    }[];
+}
 /** Exact editor range captured before focus leaves for a host action. */
 export interface LoomaEditorSelectionActionDetail {
     id: string;
@@ -184,6 +197,11 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaEditorSelectionAction[]>;
         default: () => never[];
     };
+    /** Opt-in caret actions; the host owns durable identities and recalculates positions after edits. */
+    rangeActions: {
+        type: PropType<LoomaEditorRangeAction[]>;
+        default: () => never[];
+    };
     toolbarTriggerId: {
         type: StringConstructor;
         default: string;
@@ -209,6 +227,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     update: (_value: JSONContent) => true;
     ready: (_editor: Editor) => true;
     selectionAction: (_detail: LoomaEditorSelectionActionDetail) => true;
+    rangeAction: (_detail: LoomaEditorRangeActionDetail) => true;
     uploadError: (_error: unknown, _file: File) => true;
     imageActivate: (_detail: LoomaImageActivationDetail) => true;
     imageRenditionError: (_detail: LoomaImageRenditionErrorDetail) => true;
@@ -316,6 +335,11 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaEditorSelectionAction[]>;
         default: () => never[];
     };
+    /** Opt-in caret actions; the host owns durable identities and recalculates positions after edits. */
+    rangeActions: {
+        type: PropType<LoomaEditorRangeAction[]>;
+        default: () => never[];
+    };
     toolbarTriggerId: {
         type: StringConstructor;
         default: string;
@@ -339,6 +363,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     "onUpdate:toolbarOpen"?: ((_value: boolean) => any) | undefined;
     onReady?: ((_editor: Editor) => any) | undefined;
     onSelectionAction?: ((_detail: LoomaEditorSelectionActionDetail) => any) | undefined;
+    onRangeAction?: ((_detail: LoomaEditorRangeActionDetail) => any) | undefined;
     onUploadError?: ((_error: unknown, _file: File) => any) | undefined;
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
@@ -364,6 +389,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     toolbarMode: LoomaEditorToolbarMode;
     compactToolbar: boolean;
     selectionActions: LoomaEditorSelectionAction[];
+    rangeActions: LoomaEditorRangeAction[];
     toolbarTriggerId: string;
     toolbarOpen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/editor/index.d.ts

@@ -1,4 +1,4 @@
 export * from "@threadlabs/looma/editor";
 export * from "./primitives.js";
-export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorSlashCommands, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkResolve, type LoomaImageUploader, type LoomaImageUploadResult, } from "./LoomaEditor.js";
+export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorSlashCommands, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkResolve, type LoomaImageUploader, type LoomaImageUploadResult, } from "./LoomaEditor.js";
 export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "./image-delivery.js";

package/vue/editor/index.js

@@ -1710,6 +1710,11 @@ var LoomaEditor = defineComponent({
 			type: Array,
 			default: () => []
 		},
+		/** Opt-in caret actions; the host owns durable identities and recalculates positions after edits. */
+		rangeActions: {
+			type: Array,
+			default: () => []
+		},
 		toolbarTriggerId: {
 			type: String,
 			default: ""
@@ -1734,6 +1739,7 @@ var LoomaEditor = defineComponent({
 		update: (_value) => true,
 		ready: (_editor) => true,
 		selectionAction: (_detail) => true,
+		rangeAction: (_detail) => true,
 		uploadError: (_error, _file) => true,
 		imageActivate: (_detail) => true,
 		imageRenditionError: (_detail) => true
@@ -1825,9 +1831,14 @@ var LoomaEditor = defineComponent({
 			heldPressTimer = void 0;
 			heldPress = null;
 		};
+		const activeRangeActions = (instance) => {
+			const selection = instance.state.selection;
+			if (!(selection instanceof TextSelection) || !selection.empty) return [];
+			return props.rangeActions.filter((action) => Number.isSafeInteger(action.from) && Number.isSafeInteger(action.to) && action.from >= 0 && action.to > action.from && action.to <= instance.state.doc.content.size && action.from <= selection.from && selection.from <= action.to);
+		};
 		const formattingSelectionActive = (instance) => {
 			const selection = instance.state.selection;
-			return (selection instanceof TextSelection || selection instanceof AllSelection && Boolean(instance.state.doc.textContent)) && !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)) || activeRangeActions(instance).length > 0);
 		};
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
@@ -2501,6 +2512,10 @@ var LoomaEditor = defineComponent({
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 		});
+		watch(() => props.rangeActions, () => {
+			const instance = editor.value;
+			if (instance) instance.view.dispatch(instance.state.tr.setMeta("loomaRangeActionsChanged", true));
+		});
 		watch(() => props.label, (label) => {
 			editor.value?.setOptions({ editorProps: { attributes: {
 				role: "textbox",
@@ -3054,9 +3069,40 @@ var LoomaEditor = defineComponent({
 				onClick: run
 			}, () => loomaIcon(icon));
 		};
+		const renderRangeActions = (instance) => {
+			const groups = /* @__PURE__ */ new Map();
+			for (const action of activeRangeActions(instance)) {
+				const group = groups.get(action.id) ?? {
+					label: action.label,
+					ranges: /* @__PURE__ */ new Map()
+				};
+				group.ranges.set(`${action.from}:${action.to}`, {
+					from: action.from,
+					to: action.to
+				});
+				groups.set(action.id, group);
+			}
+			return [...groups].map(([id, group]) => h(Button, {
+				key: id,
+				"aria-label": group.label,
+				type: "button",
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				onPointerdown: (event) => event.preventDefault(),
+				onClick: () => {
+					emit("rangeAction", {
+						id,
+						ranges: [...group.ranges.values()]
+					});
+					formattingPopup?.hide();
+				}
+			}, () => group.label));
+		};
 		const renderSelectionActions = (instance) => {
 			const selection = instance.state.selection;
-			if (selection.empty || !(selection instanceof TextSelection || selection instanceof AllSelection)) return [];
+			if (selection.empty) return renderRangeActions(instance);
+			if (!(selection instanceof TextSelection || selection instanceof AllSelection)) return [];
 			return props.selectionActions.map((action) => h(Button, {
 				key: action.id,
 				"aria-label": action.label,
@@ -3277,11 +3323,11 @@ var LoomaEditor = defineComponent({
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
-				instance && (props.editable || props.selectionActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
+				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,
-					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && props.selectionActions.length > 0 || menuEditor.isFocused || formattingPopup?.popper.contains(document.activeElement) || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
+					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.popper.contains(document.activeElement) || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
 					tippyOptions: {
 						onCreate: (popup) => {
 							formattingPopup = popup;
@@ -3364,7 +3410,7 @@ var LoomaEditor = defineComponent({
 					value: codeUi.language,
 					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) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
+				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty || activeRangeActions(instance).length > 0) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
 					ref: mobileToolbarShell,
 					class: "looma-editor__mobile-toolbar-shell",
 					"data-mode": mobileToolbarMode.value,