@threadlabs/looma 0.29.2 → 0.29.3

package/editor/host-actions.d.ts

@@ -0,0 +1,47 @@
+import type { EditorState } from "@tiptap/pm/state";
+/** Host-owned non-mutating commands for the selected passage. */
+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;
+    from: number;
+    to: number;
+    text: string;
+    before: string;
+    after: string;
+}
+/**
+ * The range actions whose range holds the collapsed text caret.
+ * @contract Ranges that are not whole numbers, are empty, or fall outside the document are ignored.
+ */
+export declare function rangeActionsAtCaret(state: EditorState, actions: readonly LoomaEditorRangeAction[]): LoomaEditorRangeAction[];
+/** One control per action ID: its label and each distinct range it covers at the caret, in order. */
+export declare function groupRangeActions(actions: readonly LoomaEditorRangeAction[]): Array<{
+    id: string;
+    label: string;
+    detail: LoomaEditorRangeActionDetail;
+}>;
+/** Whether the selection is a passage that selection actions apply to: nonempty text, or everything. */
+export declare function selectsPassage(state: EditorState): boolean;
+/**
+ * A selection action's detail for the current passage: its range, its text, and up to 48 characters
+ * of context on each side, captured before focus leaves the editor.
+ * @failure Returns null when the selection is empty.
+ */
+export declare function selectionActionDetail(state: EditorState, id: string): LoomaEditorSelectionActionDetail | null;

package/package.json

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

package/vue/editor/LoomaEditor.d.ts

@@ -6,6 +6,7 @@ import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaCodeLanguages
 import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageSourceResolver, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
 import { type LoomaImageUploadDetail } from "../../editor/image-uploads.js";
 import { type LoomaResponder } from "../../editor/requests.js";
+import { type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail } from "../../editor/host-actions.js";
 import { type LoomaLinkTarget } from "../../editor/link-editing.js";
 export type { LoomaImageUploadDetail } from "../../editor/image-uploads.js";
 export type { LoomaRequestInit, LoomaResponder } from "../../editor/requests.js";
@@ -17,33 +18,7 @@ export type { LoomaRequestInit, LoomaResponder } from "../../editor/requests.js"
  * 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;
-}
-/** 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;
-    from: number;
-    to: number;
-    text: string;
-    before: string;
-    after: string;
-}
+export type { LoomaEditorRangeAction, LoomaEditorRangeActionDetail, LoomaEditorSelectionAction, LoomaEditorSelectionActionDetail, } from "../../editor/host-actions.js";
 export type { LoomaLinkTarget } from "../../editor/link-editing.js";
 /** The `slash-commands` request's detail: this editor's default commands. */
 export interface LoomaSlashCommandsDetail {

package/vue/editor/index.js

@@ -1751,6 +1751,66 @@ function createChipEditing(options) {
 	};
 }
 //#endregion
+//#region src/editor/host-actions.ts
+/** Characters of context on each side of a selected passage. */
+var CONTEXT = 48;
+/**
+* The range actions whose range holds the collapsed text caret.
+* @contract Ranges that are not whole numbers, are empty, or fall outside the document are ignored.
+*/
+function rangeActionsAtCaret(state, actions) {
+	const selection = state.selection;
+	if (!(selection instanceof TextSelection) || !selection.empty) return [];
+	const size = state.doc.content.size;
+	return actions.filter(({ from, to }) => Number.isSafeInteger(from) && Number.isSafeInteger(to) && from >= 0 && to > from && to <= size && from <= selection.from && selection.from <= to);
+}
+/** One control per action ID: its label and each distinct range it covers at the caret, in order. */
+function groupRangeActions(actions) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const { id, label, from, to } of actions) {
+		const group = groups.get(id) ?? {
+			label,
+			ranges: /* @__PURE__ */ new Map()
+		};
+		group.ranges.set(`${from}:${to}`, {
+			from,
+			to
+		});
+		groups.set(id, group);
+	}
+	return [...groups].map(([id, { label, ranges }]) => ({
+		id,
+		label,
+		detail: {
+			id,
+			ranges: [...ranges.values()]
+		}
+	}));
+}
+/** Whether the selection is a passage that selection actions apply to: nonempty text, or everything. */
+function selectsPassage(state) {
+	const selection = state.selection;
+	return !selection.empty && (selection instanceof TextSelection || selection instanceof AllSelection);
+}
+/**
+* A selection action's detail for the current passage: its range, its text, and up to 48 characters
+* of context on each side, captured before focus leaves the editor.
+* @failure Returns null when the selection is empty.
+*/
+function selectionActionDetail(state, id) {
+	const { from, to } = state.selection;
+	if (from === to) return null;
+	const doc = state.doc;
+	return {
+		id,
+		from,
+		to,
+		text: doc.textBetween(from, to, "\n"),
+		before: doc.textBetween(Math.max(0, from - CONTEXT), from, "\n"),
+		after: doc.textBetween(to, Math.min(doc.content.size, to + CONTEXT), "\n")
+	};
+}
+//#endregion
 //#region src/editor/extensions/relative-links.ts
 /** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
 function siteRelativeHref(href, baseUrl) {
@@ -3456,11 +3516,7 @@ var LoomaEditor = defineComponent({
 		let imagePopup = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
 		const formattingPickerOpen = () => linkState.value.surface === "popover" || tablePickerOpen.value || formatOpen.value;
-		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 activeRangeActions = (instance) => rangeActionsAtCaret(instance.state, props.rangeActions);
 		const formattingActive = () => formatting?.active() ?? false;
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
@@ -4514,40 +4570,22 @@ 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);
+		const renderRangeActions = (instance) => groupRangeActions(activeRangeActions(instance)).map(({ id, label, detail }) => h(Button, {
+			key: id,
+			"aria-label": label,
+			type: "button",
+			variant: "ghost",
+			tone: "neutral",
+			size: "sm",
+			onPointerdown: (event) => event.preventDefault(),
+			onClick: () => {
+				emit("rangeAction", detail);
+				formattingPopup?.hide();
 			}
-			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));
-		};
+		}, () => label));
 		const renderSelectionActions = (instance) => {
-			const selection = instance.state.selection;
-			if (selection.empty) return renderRangeActions(instance);
-			if (!(selection instanceof TextSelection || selection instanceof AllSelection)) return [];
+			if (instance.state.selection.empty) return renderRangeActions(instance);
+			if (!selectsPassage(instance.state)) return [];
 			return props.selectionActions.map((action) => h(Button, {
 				key: action.id,
 				"aria-label": action.label,
@@ -4557,17 +4595,9 @@ var LoomaEditor = defineComponent({
 				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")
-					});
+					const detail = selectionActionDetail(instance.state, action.id);
+					if (!detail) return;
+					emit("selectionAction", detail);
 					formattingPopup?.hide();
 				}
 			}, () => action.label));