@threadlabs/looma 0.26.4 → 0.26.6

package/vue/editor/LoomaEditor.d.ts

@@ -29,6 +29,20 @@ export type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUplo
  * set. Narrow viewports retain a dock; document commands/content are unchanged.
  */
 export type LoomaEditorToolbarMode = "bubble" | "sticky" | "popover" | "contextual";
+/** Host-owned non-mutating commands for the selected passage. */
+export interface LoomaEditorSelectionAction {
+    id: string;
+    label: string;
+}
+/** Exact editor range captured before focus leaves for a host action. */
+export interface LoomaEditorSelectionActionDetail {
+    id: string;
+    from: number;
+    to: number;
+    text: string;
+    before: string;
+    after: string;
+}
 /**
  * Replace the slash inventory, or return retained defaults plus host commands.
  * @ownership The host owns its command objects and mutations; Looma supplies
@@ -160,6 +174,16 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
      * In `popover` mode, the ID of the app's button that toggles the full toolbar and anchors it.
      * The button needs no click handler of its own.
      */
+    /** Keep frequent inline styles visible; Format opens the complete existing inventory. */
+    compactToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Optional passage actions also work on read-only selections without granting editing. */
+    selectionActions: {
+        type: PropType<LoomaEditorSelectionAction[]>;
+        default: () => never[];
+    };
     toolbarTriggerId: {
         type: StringConstructor;
         default: string;
@@ -184,6 +208,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     "update:toolbarOpen": (_value: boolean) => true;
     update: (_value: JSONContent) => true;
     ready: (_editor: Editor) => true;
+    selectionAction: (_detail: LoomaEditorSelectionActionDetail) => true;
     uploadError: (_error: unknown, _file: File) => true;
     imageActivate: (_detail: LoomaImageActivationDetail) => true;
     imageRenditionError: (_detail: LoomaImageRenditionErrorDetail) => true;
@@ -281,6 +306,16 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
      * In `popover` mode, the ID of the app's button that toggles the full toolbar and anchors it.
      * The button needs no click handler of its own.
      */
+    /** Keep frequent inline styles visible; Format opens the complete existing inventory. */
+    compactToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Optional passage actions also work on read-only selections without granting editing. */
+    selectionActions: {
+        type: PropType<LoomaEditorSelectionAction[]>;
+        default: () => never[];
+    };
     toolbarTriggerId: {
         type: StringConstructor;
         default: string;
@@ -303,6 +338,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     "onUpdate:modelValue"?: ((_value: JSONContent) => any) | undefined;
     "onUpdate:toolbarOpen"?: ((_value: boolean) => any) | undefined;
     onReady?: ((_editor: Editor) => any) | undefined;
+    onSelectionAction?: ((_detail: LoomaEditorSelectionActionDetail) => any) | undefined;
     onUploadError?: ((_error: unknown, _file: File) => any) | undefined;
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
@@ -326,6 +362,8 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     uploadImage: LoomaImageUploader | undefined;
     resolveImageAttributes: LoomaImageAttributeResolver | undefined;
     toolbarMode: LoomaEditorToolbarMode;
+    compactToolbar: boolean;
+    selectionActions: LoomaEditorSelectionAction[];
     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 LoomaEditorSlashCommands, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkResolve, type LoomaImageUploader, type LoomaImageUploadResult, } from "./LoomaEditor.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 type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "./image-delivery.js";

package/vue/editor/index.js

@@ -1700,6 +1700,16 @@ var LoomaEditor = defineComponent({
 		* In `popover` mode, the ID of the app's button that toggles the full toolbar and anchors it.
 		* The button needs no click handler of its own.
 		*/
+		/** Keep frequent inline styles visible; Format opens the complete existing inventory. */
+		compactToolbar: {
+			type: Boolean,
+			default: false
+		},
+		/** Optional passage actions also work on read-only selections without granting editing. */
+		selectionActions: {
+			type: Array,
+			default: () => []
+		},
 		toolbarTriggerId: {
 			type: String,
 			default: ""
@@ -1723,12 +1733,15 @@ var LoomaEditor = defineComponent({
 		"update:toolbarOpen": (_value) => true,
 		update: (_value) => true,
 		ready: (_editor) => true,
+		selectionAction: (_detail) => true,
 		uploadError: (_error, _file) => true,
 		imageActivate: (_detail) => true,
 		imageRenditionError: (_detail) => true
 	},
 	setup(props, { attrs, emit, expose }) {
 		const root = ref(null);
+		const formatAnchorId = `looma-editor-format-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const formatOpen = ref(false);
 		const fileInput = ref(null);
 		const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const blockActionAnchorId = `ui-block-tools-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -1806,7 +1819,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 formattingPickerOpen = () => linkOpen.value || tablePickerOpen.value || formatOpen.value;
 		const cancelHeldPress = () => {
 			clearTimeout(heldPressTimer);
 			heldPressTimer = void 0;
@@ -2479,8 +2492,12 @@ 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;
+		watch([
+			linkOpen,
+			tablePickerOpen,
+			formatOpen
+		], ([link, table, format]) => {
+			if (link || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.popper.contains(document.activeElement)) return;
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 		});
@@ -3036,7 +3053,34 @@ var LoomaEditor = defineComponent({
 				onClick: run
 			}, () => loomaIcon(icon));
 		};
-		const renderToolbar = (instance, floating = true, textOnly = false) => {
+		const renderSelectionActions = (instance) => {
+			const selection = instance.state.selection;
+			if (selection.empty || !(selection instanceof TextSelection || selection instanceof AllSelection)) return [];
+			return props.selectionActions.map((action) => h(Button, {
+				key: action.id,
+				"aria-label": action.label,
+				type: "button",
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				onPointerdown: (event) => event.preventDefault(),
+				onClick: () => {
+					const { from, to } = instance.state.selection;
+					if (from === to) return;
+					const doc = instance.state.doc;
+					emit("selectionAction", {
+						id: action.id,
+						from,
+						to,
+						text: doc.textBetween(from, to, "\n"),
+						before: doc.textBetween(Math.max(0, from - 48), from, "\n"),
+						after: doc.textBetween(to, Math.min(doc.content.size, to + 48), "\n")
+					});
+					formattingPopup?.hide();
+				}
+			}, () => action.label));
+		};
+		const renderToolbar = (instance, floating = true, textOnly = false, full = false) => {
 			const textButtons = [
 				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run(), "Mod-b"),
 				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run(), "Mod-i"),
@@ -3045,7 +3089,7 @@ var LoomaEditor = defineComponent({
 				...authorHighlight ? [commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run(), "Mod-Shift-h")] : [],
 				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run(), "Mod-e")
 			];
-			const linkTriggerId = textOnly ? `${linkAnchorId}-selection` : linkAnchorId;
+			const linkTriggerId = full ? `${linkAnchorId}-full` : textOnly ? `${linkAnchorId}-selection` : linkAnchorId;
 			textButtons.push(h(IconButton, {
 				id: linkTriggerId,
 				class: "looma-editor__toolbar-button",
@@ -3072,7 +3116,7 @@ var LoomaEditor = defineComponent({
 				},
 				onFocusout: hideTool
 			}, () => loomaIcon("link")));
-			const buttons = textOnly ? textButtons : [
+			let buttons = textOnly ? textButtons : [
 				...textButtons,
 				h("span", {
 					class: "divider",
@@ -3120,7 +3164,24 @@ var LoomaEditor = defineComponent({
 				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run(), "Mod-z"),
 				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run(), isApplePlatform() ? "Mod-Shift-z" : "Mod-y")
 			];
-			return h(EditorToolbar, { floating }, () => [...buttons, h(Tooltip, {
+			if (!props.editable) buttons = [];
+			else if (props.compactToolbar && !mobile.value && !full) buttons = [
+				textButtons[0],
+				textButtons[1],
+				textButtons.at(-1),
+				h(Button, {
+					id: formatAnchorId,
+					type: "button",
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					"aria-label": "Format",
+					"aria-expanded": formatOpen.value ? "true" : "false",
+					onPointerdown: (event) => event.preventDefault()
+				}, () => "Format")
+			];
+			const actions = full ? [] : renderSelectionActions(instance);
+			return h(EditorToolbar, { floating }, () => [...mobile.value ? [...actions, ...buttons] : [...buttons, ...actions], h(Tooltip, {
 				class: "looma-editor__toolbar-tip",
 				for: tooltipFor.value,
 				open: tooltipOpen.value,
@@ -3215,11 +3276,11 @@ var LoomaEditor = defineComponent({
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
-				instance && props.editable && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
+				instance && (props.editable || props.selectionActions.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 && (menuEditor.isFocused || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
+					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),
 					tippyOptions: {
 						onCreate: (popup) => {
 							formattingPopup = popup;
@@ -3302,7 +3363,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 && mobile.value && (editorFocused.value || linkOpen.value) ? h("div", {
+				instance && (props.editable || props.selectionActions.length && !instance.state.selection.empty) && mobile.value && (editorFocused.value || linkOpen.value || !props.editable) ? h("div", {
 					ref: mobileToolbarShell,
 					class: "looma-editor__mobile-toolbar-shell",
 					"data-mode": mobileToolbarMode.value,
@@ -3407,6 +3468,18 @@ var LoomaEditor = defineComponent({
 						if (current && !current.empty && linkSelection && current.from === linkSelection.from && current.to === linkSelection.to) editor.value?.commands.setTextSelection(current.to);
 					}
 				}, renderLinkForm),
+				props.editable && props.compactToolbar && !mobile.value ? h(Popover, {
+					class: "looma-editor__compact-formatting",
+					for: formatAnchorId,
+					open: formatOpen.value,
+					placement: "bottom-start",
+					onOpen: () => {
+						formatOpen.value = true;
+					},
+					onClose: () => {
+						formatOpen.value = false;
+					}
+				}, () => instance ? renderToolbar(instance, true, false, true) : null) : null,
 				h(Menu, {
 					for: blockActionAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",