@threadlabs/looma 0.31.4 → 0.32.0

package/editor/chunks/extensions.js

@@ -1,5 +1,5 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "./table-backgrounds.js";
-import { _ as parseLoomaAttributes, b as splitLoomaFrontmatter, c as LOOMA_CONTAINER_NAMES, d as formatLoomaAttributes, f as loomaCodeFence, g as normalizeLoomaChipTone, h as normalizeLoomaCalloutTone, i as referenceDisplay, l as applyLoomaCodeNotation, m as loomaHeadingSlug, n as LoomaReferencePresentation, p as loomaContainerMarker, r as getReferenceDisplay, s as LOOMA_CHIP_TONES, t as LoomaReference, u as assignLoomaHeadingIds, v as parseLoomaFenceInfo, y as readLoomaAttributes } from "./reference-display.js";
+import { _ as normalizeLoomaChipTone, b as readLoomaAttributes, c as LOOMA_CONTAINER_NAMES, d as assignLoomaHeadingIds, f as formatLoomaAttributes, g as normalizeLoomaCalloutTone, h as loomaHeadingSlug, i as referenceDisplay, l as LOOMA_MENTION_HANDLE, m as loomaContainerMarker, n as LoomaReferencePresentation, p as loomaCodeFence, r as getReferenceDisplay, s as LOOMA_CHIP_TONES, t as LoomaReference, u as applyLoomaCodeNotation, v as parseLoomaAttributes, x as splitLoomaFrontmatter, y as parseLoomaFenceInfo } from "./reference-display.js";
 import { Extension, InputRule, Mark, Node as Node$1, PasteRule, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, getText, getTextSerializersFromSchema, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
@@ -631,17 +631,17 @@ function appendBackLinks(item, label, number, count) {
 		paragraph.append(" ", link);
 	}
 }
-var FootnoteSerializer = class extends DOMSerializer {
-	serializeFragment(fragment, options = {}, target) {
-		const dom = super.serializeFragment(fragment, options, target);
+function installSerializer(schema) {
+	const serializer = DOMSerializer.fromSchema(schema);
+	if (Object.prototype.hasOwnProperty.call(serializer, "serializeFragment")) return;
+	const serializeFragment = serializer.serializeFragment;
+	serializer.serializeFragment = function(fragment, options = {}, target) {
+		const dom = serializeFragment.call(this, fragment, options, target);
 		fragment.forEach((node, _offset, index) => {
 			if (node.type.name === NOTE) appendBackLinks(dom.childNodes[index], String(node.attrs.label), index + 1, Number(node.attrs.count) || 1);
 		});
 		return dom;
-	}
-};
-function installSerializer(schema) {
-	if (!(schema.cached.domSerializer instanceof FootnoteSerializer)) schema.cached.domSerializer = new FootnoteSerializer(DOMSerializer.nodesFromSchema(schema), DOMSerializer.marksFromSchema(schema));
+	};
 }
 /**
 * A footnote reference, `[^label]`, saved as `<sup><a data-footnote-ref>`. Typing or pasting
@@ -10072,7 +10072,7 @@ function taskLists(state) {
 function directive(state, silent) {
 	const { src, pos } = state;
 	if (src.charCodeAt(pos) !== 58) return false;
-	const name = /^:(chip|mention)\[/.exec(src.slice(pos, pos + 10))?.[1];
+	const name = /^:(chip)\[/.exec(src.slice(pos, pos + 10))?.[1];
 	if (!name) return false;
 	let label = "";
 	let index = pos + name.length + 2;
@@ -10086,7 +10086,6 @@ function directive(state, silent) {
 		end: index + 1
 	};
 	if (!read || read.end > state.posMax) return false;
-	if (name === "mention" && typeof read.attributes.id !== "string") return false;
 	if (!silent) {
 		const token = state.push(`looma_${name}`, "span", 0);
 		token.meta = {
@@ -10097,6 +10096,37 @@ function directive(state, silent) {
 	state.pos = read.end;
 	return true;
 }
+function mention(state, silent) {
+	const { src, pos } = state;
+	if (src.charCodeAt(pos) !== 64 || pos > 0 && !/\s/u.test(src[pos - 1])) return false;
+	let index = pos + 1;
+	let label = "";
+	if (src[index] === "[") {
+		for (index++; index < state.posMax && src[index] !== "]"; index++) {
+			if (src[index] === "\\" && index + 1 < state.posMax) index++;
+			label += src[index];
+		}
+		if (src[index] !== "]" || !label) return false;
+		index++;
+	} else {
+		label = LOOMA_MENTION_HANDLE.exec(src.slice(index, state.posMax))?.[0] ?? "";
+		if (!label) return false;
+		index += label.length;
+	}
+	let ref = src[index] === "#" ? LOOMA_MENTION_HANDLE.exec(src.slice(index + 1, state.posMax))?.[0] : void 0;
+	if (ref) index += ref.length + 1;
+	const read = src[index] === "{" ? readLoomaAttributes(src, index) : null;
+	if (read && read.end <= state.posMax) {
+		if (typeof read.attributes.ref === "string") ref ??= read.attributes.ref;
+		index = read.end;
+	}
+	if (!silent) state.push("looma_mention", "span", 0).meta = {
+		label,
+		ref
+	};
+	state.pos = index;
+	return true;
+}
 function inlineText(token) {
 	return (token?.children ?? []).map((child) => child.type === "image" ? inlineText(child) : child.content).join("");
 }
@@ -10318,6 +10348,7 @@ function loomaMarkdown$1(md, { codeNotation = "apply" } = {}) {
 		"list"
 	] });
 	md.inline.ruler.before("link", "looma_directive", directive);
+	md.inline.ruler.before("link", "looma_mention", mention);
 	md.inline.ruler.before("link", "looma_footnote_ref", footnoteReference);
 	md.core.ruler.after("block", "looma_task_lists", taskLists);
 	md.core.ruler.before("inline", "looma_alerts", alerts);
@@ -10367,9 +10398,8 @@ function loomaMarkdown$1(md, { codeNotation = "apply" } = {}) {
 		return `<span data-looma-chip="" data-label="${escape(label)}" data-color="${tone}"${label ? "" : " data-placeholder=\"\""}>${escape(label)}</span>`;
 	};
 	rules.looma_mention = (tokens, index) => {
-		const { label, attributes } = tokens[index].meta;
-		const id = String(attributes.id);
-		return `<span data-type="mention" class="looma-mention" data-id="${escape(id)}" data-label="${escape(label || id)}">@${escape(label || id)}</span>`;
+		const { label, ref } = tokens[index].meta;
+		return `<span data-type="mention" class="looma-mention"${ref === void 0 ? "" : ` data-id="${escape(ref)}"`} data-label="${escape(label)}">@${escape(label)}</span>`;
 	};
 	const code = (content, info) => {
 		const { language, meta } = parseLoomaFenceInfo(info);
@@ -10525,8 +10555,9 @@ var NODES = {
 		state.write(`:chip[${label(String(node.attrs.label ?? ""))}]${formatLoomaAttributes({ tone: tone !== "neutral" ? tone : null })}`);
 	},
 	mention: (state, node) => {
-		const id = String(node.attrs.id ?? "");
-		state.write(`:mention[${label(String(node.attrs.label ?? id))}]${formatLoomaAttributes({ id }, { hashId: false })}`);
+		const id = node.attrs.id == null ? "" : String(node.attrs.id);
+		const reference = !id ? "" : LOOMA_MENTION_HANDLE.exec(id)?.[0] === id ? `#${id}` : formatLoomaAttributes({ ref: id });
+		state.write(`@[${label(String(node.attrs.label || id))}]${reference}`);
 	},
 	loomaReference: (state, node) => {
 		const wrapper = document.createElement("span");
@@ -11155,21 +11186,31 @@ var TableHeader = Node$1.create({
 });
 //#endregion
 //#region src/editor/extensions/table-formatting.ts
-/** Table chrome lives outside the horizontal scroller, within the table's document block. */
-var LoomaTableView = class extends TableView {
+/**
+* Table chrome lives outside the horizontal scroller, within the table's document block.
+* @invariant It holds Tiptap's TableView rather than extending it: a bundler that lowers classes
+* calls the base as a function, which a native class rejects.
+*/
+var LoomaTableView = class {
+	table;
+	dom;
+	contentDOM;
 	toolbarHost;
 	constructor(node, cellMinWidth) {
-		super(node, cellMinWidth);
-		const scroller = this.dom;
+		this.table = new TableView(node, cellMinWidth);
+		this.contentDOM = this.table.contentDOM;
 		this.dom = document.createElement("div");
 		this.dom.dataset.loomaTableBlock = "";
 		this.toolbarHost = document.createElement("div");
 		this.toolbarHost.dataset.loomaTableToolbarHost = "";
 		this.toolbarHost.contentEditable = "false";
-		this.dom.append(scroller, this.toolbarHost);
+		this.dom.append(this.table.dom, this.toolbarHost);
+	}
+	update(node) {
+		return this.table.update(node);
 	}
 	ignoreMutation(mutation) {
-		return mutation.type !== "selection" && this.toolbarHost.contains(mutation.target) || super.ignoreMutation(mutation);
+		return mutation.type !== "selection" && this.toolbarHost.contains(mutation.target) || this.table.ignoreMutation(mutation);
 	}
 	stopEvent(event) {
 		return event.target instanceof globalThis.Node && this.toolbarHost.contains(event.target);

package/editor/chunks/reference-display.js

@@ -44,6 +44,11 @@ function normalizeLoomaChipTone(value) {
 	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
 }
 /**
+* A mention handle, as `@handle` and the `#ref` of `@[Label]#ref` spell it: a letter, number or
+* underscore, then letters, marks, numbers, underscores and hyphens.
+*/
+var LOOMA_MENTION_HANDLE = /^[\p{L}\p{N}_][\p{L}\p{M}\p{N}_-]*/u;
+/**
 * Names that open a `:::` container, matched without regard to case. A container with any other
 * name is ordinary text.
 */
@@ -445,4 +450,4 @@ var LoomaReferencePresentation = Extension.create({
 	}
 });
 //#endregion
-export { parseLoomaAttributes as _, setReferenceDisplay as a, splitLoomaFrontmatter as b, LOOMA_CONTAINER_NAMES as c, formatLoomaAttributes as d, loomaCodeFence as f, normalizeLoomaChipTone as g, normalizeLoomaCalloutTone as h, referenceDisplay as i, applyLoomaCodeNotation as l, loomaHeadingSlug as m, LoomaReferencePresentation as n, LOOMA_CALLOUT_TONES as o, loomaContainerMarker as p, getReferenceDisplay as r, LOOMA_CHIP_TONES as s, LoomaReference as t, assignLoomaHeadingIds as u, parseLoomaFenceInfo as v, readLoomaAttributes as y };
+export { normalizeLoomaChipTone as _, setReferenceDisplay as a, readLoomaAttributes as b, LOOMA_CONTAINER_NAMES as c, assignLoomaHeadingIds as d, formatLoomaAttributes as f, normalizeLoomaCalloutTone as g, loomaHeadingSlug as h, referenceDisplay as i, LOOMA_MENTION_HANDLE as l, loomaContainerMarker as m, LoomaReferencePresentation as n, LOOMA_CALLOUT_TONES as o, loomaCodeFence as p, getReferenceDisplay as r, LOOMA_CHIP_TONES as s, LoomaReference as t, applyLoomaCodeNotation as u, parseLoomaAttributes as v, splitLoomaFrontmatter as x, parseLoomaFenceInfo as y };

package/editor/expressmark.js

@@ -1,4 +1,4 @@
-import { m as loomaHeadingSlug, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, s as LOOMA_CHIP_TONES } from "./chunks/reference-display.js";
+import { h as loomaHeadingSlug, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, s as LOOMA_CHIP_TONES } from "./chunks/reference-display.js";
 import { parse, stringify } from "expressmark";
 //#region src/editor/expressmark.ts
 /**

package/markdown/fixtures.js

@@ -96,7 +96,7 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/lists/blocks.html": "<ul>\n<li>One\n<ul>\n<li>Nested</li>\n</ul>\n</li>\n<li>Two</li>\n</ul>\n<ol start=\"3\">\n<li>Three</li>\n<li>Four</li>\n</ol>\n<blockquote>\n<p>Quoted</p>\n</blockquote>\n<hr>\n",
 	"../../markdown-fixtures/lists/blocks.md": "- One\n  - Nested\n- Two\n\n3. Three\n4. Four\n\n> Quoted\n\n---\n",
 	"../../markdown-fixtures/mentions/person.html": "<p>Thanks, <span data-type=\"mention\" class=\"looma-mention\" data-id=\"u1\" data-label=\"Ada Lovelace\">@Ada Lovelace</span>.</p>\n",
-	"../../markdown-fixtures/mentions/person.md": "Thanks, :mention[Ada Lovelace]{id=u1}.\n",
+	"../../markdown-fixtures/mentions/person.md": "Thanks, @[Ada Lovelace]#u1.\n",
 	"../../markdown-fixtures/tables/gfm.html": "<table>\n<thead>\n<tr>\n<th>Package</th>\n<th style=\"text-align:right\">Version</th>\n<th style=\"text-align:center\">Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>looma</td>\n<td style=\"text-align:right\">0.28</td>\n<td style=\"text-align:center\">Components</td>\n</tr>\n</tbody>\n</table>\n",
 	"../../markdown-fixtures/tables/gfm.md": "| Package | Version | Notes |\n| --- | ---: | :---: |\n| looma | 0.28 | Components |\n",
 	"../../markdown-fixtures/tables/left-aligned.html": "<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">Name</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">a | b</td>\n<td><code>x | y</code></td>\n</tr>\n</tbody>\n</table>\n",

package/markdown/index.d.ts

@@ -32,6 +32,11 @@ export type LoomaChipTone = (typeof LOOMA_CHIP_TONES)[number];
  * @failure Unknown values become `neutral`.
  */
 export declare function normalizeLoomaChipTone(value: unknown): LoomaChipTone;
+/**
+ * A mention handle, as `@handle` and the `#ref` of `@[Label]#ref` spell it: a letter, number or
+ * underscore, then letters, marks, numbers, underscores and hyphens.
+ */
+export declare const LOOMA_MENTION_HANDLE: RegExp;
 /**
  * Names that open a `:::` container, matched without regard to case. A container with any other
  * name is ordinary text.

package/markdown/index.js

@@ -66,6 +66,11 @@ function normalizeLoomaChipTone(value) {
 	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
 }
 /**
+* A mention handle, as `@handle` and the `#ref` of `@[Label]#ref` spell it: a letter, number or
+* underscore, then letters, marks, numbers, underscores and hyphens.
+*/
+var LOOMA_MENTION_HANDLE = /^[\p{L}\p{N}_][\p{L}\p{M}\p{N}_-]*/u;
+/**
 * Names that open a `:::` container, matched without regard to case. A container with any other
 * name is ordinary text.
 */
@@ -263,4 +268,4 @@ function loomaCodeFence(code) {
 	return "`".repeat(Math.max(3, longest + 1));
 }
 //#endregion
-export { LOOMA_BADGE_TONES, LOOMA_CALLOUT_TONES, LOOMA_CALLOUT_TONE_ALIASES, LOOMA_CHIP_TONES, LOOMA_CONTAINER_NAMES, LOOMA_MEANING_TONES, applyLoomaCodeNotation, assignLoomaHeadingIds, formatLoomaAttributes, loomaCodeFence, loomaContainerMarker, loomaHeadingSlug, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter };
+export { LOOMA_BADGE_TONES, LOOMA_CALLOUT_TONES, LOOMA_CALLOUT_TONE_ALIASES, LOOMA_CHIP_TONES, LOOMA_CONTAINER_NAMES, LOOMA_MEANING_TONES, LOOMA_MENTION_HANDLE, applyLoomaCodeNotation, assignLoomaHeadingIds, formatLoomaAttributes, loomaCodeFence, loomaContainerMarker, loomaHeadingSlug, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter };

package/markdown/markdown-it.js

@@ -1,4 +1,4 @@
-import { LOOMA_CONTAINER_NAMES, applyLoomaCodeNotation, assignLoomaHeadingIds, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter } from "./index.js";
+import { LOOMA_CONTAINER_NAMES, LOOMA_MENTION_HANDLE, applyLoomaCodeNotation, assignLoomaHeadingIds, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter } from "./index.js";
 import MarkdownIt from "markdown-it";
 //#region src/markdown/markdown-it.ts
 var CONTAINER_OPEN = /^(:{3,})[ \t]*([A-Za-z][\w-]*)(?:[ \t]+(.*?))?[ \t]*$/;
@@ -210,7 +210,7 @@ function taskLists(state) {
 function directive(state, silent) {
 	const { src, pos } = state;
 	if (src.charCodeAt(pos) !== 58) return false;
-	const name = /^:(chip|mention)\[/.exec(src.slice(pos, pos + 10))?.[1];
+	const name = /^:(chip)\[/.exec(src.slice(pos, pos + 10))?.[1];
 	if (!name) return false;
 	let label = "";
 	let index = pos + name.length + 2;
@@ -224,7 +224,6 @@ function directive(state, silent) {
 		end: index + 1
 	};
 	if (!read || read.end > state.posMax) return false;
-	if (name === "mention" && typeof read.attributes.id !== "string") return false;
 	if (!silent) {
 		const token = state.push(`looma_${name}`, "span", 0);
 		token.meta = {
@@ -235,6 +234,37 @@ function directive(state, silent) {
 	state.pos = read.end;
 	return true;
 }
+function mention(state, silent) {
+	const { src, pos } = state;
+	if (src.charCodeAt(pos) !== 64 || pos > 0 && !/\s/u.test(src[pos - 1])) return false;
+	let index = pos + 1;
+	let label = "";
+	if (src[index] === "[") {
+		for (index++; index < state.posMax && src[index] !== "]"; index++) {
+			if (src[index] === "\\" && index + 1 < state.posMax) index++;
+			label += src[index];
+		}
+		if (src[index] !== "]" || !label) return false;
+		index++;
+	} else {
+		label = LOOMA_MENTION_HANDLE.exec(src.slice(index, state.posMax))?.[0] ?? "";
+		if (!label) return false;
+		index += label.length;
+	}
+	let ref = src[index] === "#" ? LOOMA_MENTION_HANDLE.exec(src.slice(index + 1, state.posMax))?.[0] : void 0;
+	if (ref) index += ref.length + 1;
+	const read = src[index] === "{" ? readLoomaAttributes(src, index) : null;
+	if (read && read.end <= state.posMax) {
+		if (typeof read.attributes.ref === "string") ref ??= read.attributes.ref;
+		index = read.end;
+	}
+	if (!silent) state.push("looma_mention", "span", 0).meta = {
+		label,
+		ref
+	};
+	state.pos = index;
+	return true;
+}
 function inlineText(token) {
 	return (token?.children ?? []).map((child) => child.type === "image" ? inlineText(child) : child.content).join("");
 }
@@ -456,6 +486,7 @@ function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 		"list"
 	] });
 	md.inline.ruler.before("link", "looma_directive", directive);
+	md.inline.ruler.before("link", "looma_mention", mention);
 	md.inline.ruler.before("link", "looma_footnote_ref", footnoteReference);
 	md.core.ruler.after("block", "looma_task_lists", taskLists);
 	md.core.ruler.before("inline", "looma_alerts", alerts);
@@ -505,9 +536,8 @@ function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 		return `<span data-looma-chip="" data-label="${escape(label)}" data-color="${tone}"${label ? "" : " data-placeholder=\"\""}>${escape(label)}</span>`;
 	};
 	rules.looma_mention = (tokens, index) => {
-		const { label, attributes } = tokens[index].meta;
-		const id = String(attributes.id);
-		return `<span data-type="mention" class="looma-mention" data-id="${escape(id)}" data-label="${escape(label || id)}">@${escape(label || id)}</span>`;
+		const { label, ref } = tokens[index].meta;
+		return `<span data-type="mention" class="looma-mention"${ref === void 0 ? "" : ` data-id="${escape(ref)}"`} data-label="${escape(label)}">@${escape(label)}</span>`;
 	};
 	const code = (content, info) => {
 		const { language, meta } = parseLoomaFenceInfo(info);

package/package.json

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

package/vue/editor/index.js

@@ -1836,17 +1836,17 @@ function appendBackLinks(item, label, number, count) {
 		paragraph.append(" ", link);
 	}
 }
-var FootnoteSerializer = class extends DOMSerializer {
-	serializeFragment(fragment, options = {}, target) {
-		const dom = super.serializeFragment(fragment, options, target);
+function installSerializer(schema) {
+	const serializer = DOMSerializer.fromSchema(schema);
+	if (Object.prototype.hasOwnProperty.call(serializer, "serializeFragment")) return;
+	const serializeFragment = serializer.serializeFragment;
+	serializer.serializeFragment = function(fragment, options = {}, target) {
+		const dom = serializeFragment.call(this, fragment, options, target);
 		fragment.forEach((node, _offset, index) => {
 			if (node.type.name === NOTE) appendBackLinks(dom.childNodes[index], String(node.attrs.label), index + 1, Number(node.attrs.count) || 1);
 		});
 		return dom;
-	}
-};
-function installSerializer(schema) {
-	if (!(schema.cached.domSerializer instanceof FootnoteSerializer)) schema.cached.domSerializer = new FootnoteSerializer(DOMSerializer.nodesFromSchema(schema), DOMSerializer.marksFromSchema(schema));
+	};
 }
 Node$1.create({
 	name: REFERENCE,