@threadlabs/looma 0.29.1 → 0.29.3

package/editor/chip-editing.d.ts

@@ -0,0 +1,39 @@
+import type { Editor } from "@tiptap/core";
+import { type LoomaChipColor } from "./extensions/chip.js";
+/** The chip editor's state: whether it is open, and the label and tone of the chip it edits. */
+export interface LoomaChipEditingState {
+    readonly open: boolean;
+    readonly label: string;
+    readonly color: LoomaChipColor;
+}
+export declare const LOOMA_CHIP_EDITING_IDLE: LoomaChipEditingState;
+/**
+ * The chip editor as a state machine: it opens on one chip and writes each label and tone change to
+ * that chip as the author makes it.
+ *
+ * @ownership The host owns presentation: the popover, its anchor, and focus. This owns which chip is
+ * edited and the node attributes it writes.
+ * @failure A change after the chip was deleted, or moved out of its node, closes the editor and writes
+ * nothing.
+ */
+export interface LoomaChipEditing {
+    readonly state: LoomaChipEditingState;
+    /** The edited chip's element, for anchoring the editor, or null while it is closed. */
+    readonly element: HTMLElement | null;
+    /** Calls `listener` after every state change; returns the unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    /**
+     * Opens on the chip at `position`.
+     * @failure Returns false, and stays as it was, when the editor is read-only or no chip is there.
+     */
+    open(position: number): boolean;
+    setLabel(label: string): void;
+    setColor(color: LoomaChipColor): void;
+    close(): void;
+}
+export interface LoomaChipEditingOptions {
+    editor: Editor;
+    /** Read on each opening, so a host can change it while the editor runs. */
+    isEditable: () => boolean;
+}
+export declare function createChipEditing(options: LoomaChipEditingOptions): LoomaChipEditing;

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.1",
+  "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 {
@@ -402,10 +377,10 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
 }>, {
-    extensions: LoomaEditorExtensions | undefined;
-    editable: boolean;
     label: string;
     placeholder: string;
+    extensions: LoomaEditorExtensions | undefined;
+    editable: boolean;
     linkBaseUrl: string;
     disableHighlight: boolean;
     codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>> | null;

package/vue/editor/compact/index.d.ts

@@ -62,10 +62,10 @@ export declare const LoomaCompactEditor: import("vue").DefineComponent<import("v
     "onUpdate:modelValue"?: ((_value: JSONContent) => any) | undefined;
     onReady?: ((_editor: Editor) => any) | undefined;
 }>, {
+    id: string;
+    label: string;
     extensions: AnyExtension[];
     editable: boolean;
-    label: string;
-    id: string;
     modelValue: JSONContent;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** Renders basic compact JSON as escaped Vue nodes, including during SSR. */

package/vue/editor/index.js

@@ -1,5 +1,5 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
 import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
@@ -1536,6 +1536,281 @@ function validLinkHref(value) {
 	}
 }
 //#endregion
+//#region src/markdown/index.ts
+/**
+* Callout tones a document stores, in the order the editor offers them. The Callout component also
+* takes `neutral` and `success`, which Markdown and the editor store as `note`.
+*/
+var LOOMA_CALLOUT_TONES = [
+	"note",
+	"tip",
+	"info",
+	"important",
+	"warning",
+	"danger"
+];
+/** The hues chips and swatches take as their tone, written `:chip[Label]{tone=green}`. */
+var LOOMA_CHIP_TONES = [
+	"neutral",
+	"blue",
+	"green",
+	"yellow",
+	"red",
+	"purple"
+];
+/**
+* Keeps a chip tone within the palette.
+* @failure Unknown values become `neutral`.
+*/
+function normalizeLoomaChipTone(value) {
+	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
+}
+[...LOOMA_CALLOUT_TONES];
+/**
+* The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
+* marks, with every other run of characters one hyphen.
+* @failure Text with no letters or numbers, such as only emoji, derives `heading`.
+*/
+function loomaHeadingSlug(text) {
+	return text.normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}\p{M}]+/gu, "-").replace(/^-+|-+$/g, "") || "heading";
+}
+/**
+* Gives every heading of a document its anchor, in document order.
+* @contract A custom ID is kept unless an earlier heading already has it. Any other heading takes
+* its slug, or the slug's first free suffix (`-1`, `-2`…), never one a later custom ID reserves.
+*/
+function assignLoomaHeadingIds(headings) {
+	const reserved = new Set(headings.map(({ id }) => id).filter((id) => Boolean(id)));
+	const used = /* @__PURE__ */ new Set();
+	return headings.map(({ text, id: custom }) => {
+		let id = custom || loomaHeadingSlug(text);
+		if (custom ? used.has(id) : used.has(id) || reserved.has(id)) {
+			const stem = id;
+			let suffix = 1;
+			while (used.has(`${stem}-${suffix}`) || reserved.has(`${stem}-${suffix}`)) suffix++;
+			id = `${stem}-${suffix}`;
+		}
+		used.add(id);
+		return id;
+	});
+}
+//#endregion
+//#region src/editor/extensions/chip.ts
+var CHIP_PLACEHOLDER = "Set a label";
+/** Keep imported or programmatic colors within the supported palette. */
+function normalizeLoomaChipColor(value) {
+	return normalizeLoomaChipTone(value);
+}
+Node$1.create({
+	name: "loomaChip",
+	group: "inline",
+	inline: true,
+	atom: true,
+	selectable: true,
+	addAttributes() {
+		return {
+			label: {
+				default: "",
+				parseHTML: (element) => element.getAttribute("data-label") ?? (element.hasAttribute("data-placeholder") ? "" : element.textContent ?? "")
+			},
+			color: {
+				default: "neutral",
+				parseHTML: (element) => normalizeLoomaChipColor(element.getAttribute("data-color"))
+			}
+		};
+	},
+	parseHTML() {
+		return [{ tag: "span[data-looma-chip]" }];
+	},
+	renderHTML({ node }) {
+		const label = String(node.attrs.label ?? "");
+		return [
+			"span",
+			{
+				"data-looma-chip": "",
+				"data-label": label,
+				"data-color": normalizeLoomaChipColor(node.attrs.color),
+				...label ? {} : { "data-placeholder": "" }
+			},
+			label || CHIP_PLACEHOLDER
+		];
+	},
+	renderText({ node }) {
+		return String(node.attrs.label ?? "");
+	},
+	addNodeView() {
+		return ({ node, editor }) => {
+			const dom = document.createElement("span");
+			dom.dataset.loomaChip = "";
+			dom.contentEditable = "false";
+			dom.setAttribute("role", "button");
+			dom.setAttribute("aria-disabled", String(!editor.isEditable));
+			dom.tabIndex = 0;
+			const update = (next) => {
+				if (next.type !== node.type) return false;
+				const label = String(next.attrs.label ?? "");
+				if (dom.dataset.label !== label) {
+					dom.dataset.label = label;
+					dom.textContent = label || CHIP_PLACEHOLDER;
+					dom.setAttribute("aria-label", label ? `Edit chip: ${label}` : "Set chip label");
+					if (label) delete dom.dataset.placeholder;
+					else dom.dataset.placeholder = "";
+				}
+				const color = normalizeLoomaChipColor(next.attrs.color);
+				if (dom.dataset.color !== color) dom.dataset.color = color;
+				return true;
+			};
+			update(node);
+			return {
+				dom,
+				update,
+				stopEvent: (event) => event.type === "click" || event.type === "keydown"
+			};
+		};
+	},
+	addCommands() {
+		return { insertLoomaChip: (attributes = {}) => ({ commands, state }) => {
+			const selection = state.selection;
+			const label = attributes.label ?? state.doc.textBetween(selection.from, selection.to);
+			return commands.insertContent({
+				type: this.name,
+				attrs: {
+					label,
+					color: normalizeLoomaChipColor(attributes.color)
+				}
+			});
+		} };
+	}
+});
+//#endregion
+//#region src/editor/chip-editing.ts
+var LOOMA_CHIP_EDITING_IDLE = Object.freeze({
+	open: false,
+	label: "",
+	color: "neutral"
+});
+function createChipEditing(options) {
+	const { editor } = options;
+	const listeners = /* @__PURE__ */ new Set();
+	let state = LOOMA_CHIP_EDITING_IDLE;
+	let element = null;
+	const set = (next) => {
+		state = next;
+		listeners.forEach((listener) => listener());
+	};
+	const close = () => {
+		element = null;
+		if (state.open) set({
+			...state,
+			open: false
+		});
+	};
+	const change = (changes) => {
+		if (!element || editor.isDestroyed || !element.isConnected) return close();
+		const position = editor.view.posAtDOM(element, 0);
+		const node = editor.state.doc.nodeAt(position);
+		if (node?.type.name !== "loomaChip") return close();
+		set({
+			...state,
+			...changes
+		});
+		editor.view.dispatch(editor.state.tr.setNodeMarkup(position, void 0, {
+			...node.attrs,
+			...changes
+		}));
+	};
+	return {
+		get state() {
+			return state;
+		},
+		get element() {
+			return element;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		open(position) {
+			if (!options.isEditable() || editor.isDestroyed) return false;
+			const node = editor.state.doc.nodeAt(position);
+			const dom = editor.view.nodeDOM(position);
+			if (node?.type.name !== "loomaChip" || !(dom instanceof HTMLElement)) return false;
+			element = dom;
+			set({
+				open: true,
+				label: String(node.attrs.label ?? ""),
+				color: normalizeLoomaChipColor(node.attrs.color)
+			});
+			return true;
+		},
+		setLabel: (label) => change({ label }),
+		setColor: (color) => change({ color }),
+		close
+	};
+}
+//#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) {
@@ -2056,34 +2331,6 @@ function formatEditorShortcut(keys, apple) {
 	].filter(Boolean).join("+");
 }
 var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
-/**
-* The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
-* marks, with every other run of characters one hyphen.
-* @failure Text with no letters or numbers, such as only emoji, derives `heading`.
-*/
-function loomaHeadingSlug(text) {
-	return text.normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}\p{M}]+/gu, "-").replace(/^-+|-+$/g, "") || "heading";
-}
-/**
-* Gives every heading of a document its anchor, in document order.
-* @contract A custom ID is kept unless an earlier heading already has it. Any other heading takes
-* its slug, or the slug's first free suffix (`-1`, `-2`…), never one a later custom ID reserves.
-*/
-function assignLoomaHeadingIds(headings) {
-	const reserved = new Set(headings.map(({ id }) => id).filter((id) => Boolean(id)));
-	const used = /* @__PURE__ */ new Set();
-	return headings.map(({ text, id: custom }) => {
-		let id = custom || loomaHeadingSlug(text);
-		if (custom ? used.has(id) : used.has(id) || reserved.has(id)) {
-			const stem = id;
-			let suffix = 1;
-			while (used.has(`${stem}-${suffix}`) || reserved.has(`${stem}-${suffix}`)) suffix++;
-			id = `${stem}-${suffix}`;
-		}
-		used.add(id);
-		return id;
-	});
-}
 //#endregion
 //#region src/editor/extensions/expand.ts
 /**
@@ -3215,9 +3462,8 @@ var LoomaEditor = defineComponent({
 			chipEditorRoot.value = element instanceof HTMLElement ? element : null;
 		};
 		const chipInput = () => chipEditorRoot.value?.querySelector("[data-chip-label]");
-		const chipOpen = ref(false);
-		const chipLabel = ref("");
-		const chipColor = ref("neutral");
+		let chipEditing;
+		const chipState = shallowRef(LOOMA_CHIP_EDITING_IDLE);
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
 		const tooltipLabel = ref("");
@@ -3270,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");
@@ -3320,39 +3562,16 @@ var LoomaEditor = defineComponent({
 			menuStyle: {},
 			capabilities: { ...EMPTY_CAPABILITIES }
 		});
-		const openChipEditor = (instance, position) => {
-			if (!props.editable) return;
-			const node = instance.state.doc.nodeAt(position);
-			const element = instance.view.nodeDOM(position);
-			if (node?.type.name !== "loomaChip" || !(element instanceof HTMLElement)) return;
+		const openChipEditor = (_instance, position) => {
+			if (!chipEditing?.open(position)) return;
 			root.value?.querySelector(`#${chipAnchorId}`)?.removeAttribute("id");
-			element.id = chipAnchorId;
-			chipLabel.value = String(node.attrs.label ?? "");
-			chipColor.value = normalizeLoomaChipColor(node.attrs.color);
-			chipOpen.value = true;
+			chipEditing.element.id = chipAnchorId;
 			nextTick(() => chipInput()?.focus());
 		};
-		const changeChip = (changes) => {
-			const instance = editor.value;
-			const element = root.value?.querySelector(`#${chipAnchorId}`);
-			if (!instance || !element) {
-				chipOpen.value = false;
-				return;
-			}
-			const position = instance.view.posAtDOM(element, 0);
-			const node = instance.state.doc.nodeAt(position);
-			if (node?.type.name !== "loomaChip") {
-				chipOpen.value = false;
-				return;
-			}
-			instance.view.dispatch(instance.state.tr.setNodeMarkup(position, void 0, {
-				...node.attrs,
-				...changes
-			}));
-		};
 		const closeChip = (focusChip = false) => {
-			chipOpen.value = false;
-			if (focusChip) root.value?.querySelector(`#${chipAnchorId}`)?.focus();
+			const element = chipEditing?.element;
+			chipEditing?.close();
+			if (focusChip) element?.focus();
 		};
 		const found = reactive(/* @__PURE__ */ new Set());
 		const answers = (name) => {
@@ -3565,6 +3784,14 @@ var LoomaEditor = defineComponent({
 				linkState.value = engine.state;
 			});
 			linkEditing = engine;
+			const chips = createChipEditing({
+				editor: session.editor,
+				isEditable: () => props.editable
+			});
+			chips.subscribe(() => {
+				chipState.value = chips.state;
+			});
+			chipEditing = chips;
 			const imageUploads = createImageUploads({
 				editor: session.editor,
 				upload: () => async (file, init) => {
@@ -3597,6 +3824,7 @@ var LoomaEditor = defineComponent({
 			const previous = session;
 			const content = edited ? previous.editor.getJSON() : props.modelValue;
 			linkEditing?.destroy();
+			chipEditing?.close();
 			formatting?.destroy();
 			uploads?.cancel();
 			previous.destroy();
@@ -3721,7 +3949,7 @@ var LoomaEditor = defineComponent({
 			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
 				chip.setAttribute("aria-disabled", String(!editable));
 			});
-			if (!editable) chipOpen.value = false;
+			if (!editable) chipEditing?.close();
 		});
 		watch([
 			() => linkState.value.surface === "popover",
@@ -4342,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,
@@ -4385,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));
@@ -4691,24 +4893,16 @@ var LoomaEditor = defineComponent({
 				}, [loomaIcon("image"), h("span", "Drop image to upload")]) : null,
 				h(Popover, {
 					class: "looma-editor__chip-popover",
-					open: chipOpen.value,
+					open: chipState.value.open,
 					for: chipAnchorId,
 					placement: "bottom-start",
-					onClose: () => {
-						chipOpen.value = false;
-					}
+					onClose: () => chipEditing?.close()
 				}, () => h(EditorChipEditor, {
 					ref: setChipEditorRoot,
-					label: chipLabel.value,
-					color: chipColor.value,
-					onLabel: (event) => {
-						chipLabel.value = event.detail.label;
-						changeChip({ label: chipLabel.value });
-					},
-					onColor: (event) => {
-						chipColor.value = event.detail.color;
-						changeChip({ color: event.detail.color });
-					},
+					label: chipState.value.label,
+					color: chipState.value.color,
+					onLabel: (event) => chipEditing?.setLabel(event.detail.label),
+					onColor: (event) => chipEditing?.setColor(event.detail.color),
 					onDone: () => closeChip(true)
 				})),
 				h(Popover, {