@threadlabs/looma 0.31.0 → 0.31.1

package/vue/editor/index.js

@@ -1,16 +1,16 @@
 import { computed, 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, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
-import { Button, Card, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover, 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 { Button, Card, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorFootnoteEditor, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
+import { Editor, Extension, InputRule, Node as Node$1, PasteRule, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
-import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { AllSelection, NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { createLowlight } from "lowlight";
 import { RequestEvent, componentRegistry } from "@nextwebwg/html-next/runtime";
 import "@tiptap/pm/tables";
+import { DOMParser, DOMSerializer, Fragment as Fragment$1, Slice } from "@tiptap/pm/model";
 import "@tiptap/pm/transform";
 import { closeHistory } from "@tiptap/pm/history";
-import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
 import { IndexedList, NONCONFORMING, READY_INPUT, UNRESOLVED_INPUT, acceptProps, activateModule, armElement, attachGeneratedController, awaitInput, buildTemplate, checkBoolean, checkConstrained, checkFormat, checkInteger, checkNumber, checkObject, checkSelected, checkString, clearRegion, computedCycle, defineComponent as defineComponent$1, detailCheck, dispatchDeclared, dispose, evaluateInput, fillSlot, formatOf, generatedInputs, hostState, inputRead, keywordFormat, manageProps, notifyPropertySet, project, readIndex, readMember, readonlyView, readsChanged, rec, replaceRoot, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, writeUrlAttribute } from "@nextwebwg/html-next/generated-runtime";
 export * from "@threadlabs/looma/editor";
 //#region \0rolldown/runtime.js
@@ -43,7 +43,8 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorLinkForm: "ui-editor-link-form",
 	EditorBlockActions: "ui-editor-block-actions",
 	EditorCodeLanguage: "ui-editor-code-language",
-	EditorChipEditor: "ui-editor-chip-editor"
+	EditorChipEditor: "ui-editor-chip-editor",
+	EditorFootnoteEditor: "ui-editor-footnote-editor"
 };
 //#endregion
 //#region src/components/shared/overlay.js
@@ -1678,6 +1679,528 @@ function createChipEditing(options) {
 	};
 }
 //#endregion
+//#region src/editor/extensions/footnote.ts
+var labelFrom = (href, prefix) => href?.startsWith(`#${prefix}`) ? href.slice(prefix.length + 1) : null;
+/** A footnote label as Looma Markdown reads it in `[^label]`: no whitespace and no `]`. */
+var LOOMA_FOOTNOTE_LABEL = /^[^\s\]]+$/;
+var REFERENCE = "loomaFootnoteReference";
+var NOTES = "loomaFootnotes";
+var NOTE = "loomaFootnote";
+var isLabel = (label) => LOOMA_FOOTNOTE_LABEL.test(label);
+/** Every label a reference or note in `doc` uses. */
+function usedLabels(doc) {
+	const labels = /* @__PURE__ */ new Set();
+	doc.descendants((node) => {
+		if (node.type.name === REFERENCE || node.type.name === NOTE) labels.add(String(node.attrs.label));
+	});
+	return labels;
+}
+/**
+* The first note for `label` in `doc` and its position.
+* @failure Returns null when no note has that label.
+*/
+function findLoomaFootnote(doc, label) {
+	let found = null;
+	doc.descendants((node, position) => {
+		if (found) return false;
+		if (node.type.name === NOTE && node.attrs.label === label) {
+			found = {
+				node,
+				position
+			};
+			return false;
+		}
+	});
+	return found;
+}
+function mapReferences(node, change) {
+	if (node.type.name === REFERENCE) return change(node);
+	if (node.isLeaf) return node;
+	const children = [];
+	node.content.forEach((child) => children.push(mapReferences(child, change)));
+	return node.copy(Fragment$1.from(children));
+}
+function noteAt(doc, position) {
+	const $position = doc.resolve(position);
+	for (let depth = $position.depth; depth > 0; depth--) {
+		const node = $position.node(depth);
+		if (node.type.name === NOTE) return {
+			node,
+			start: $position.before(depth)
+		};
+	}
+	return null;
+}
+/**
+* Keeps footnotes on Looma Markdown's rule, so the saved HTML is the HTML Looma Markdown renders for
+* the same document. Notes are numbered by first reference, in the text and then in the notes, and
+* every reference carries its note's number and its place among that note's references. The notes
+* live in one `loomaFootnotes` section at the end of the document, in number order. A note no
+* reference points to leaves the document; a reference with no note gets one back, the note it last
+* had in this editor (so cutting a reference and pasting it keeps its note) or an empty one.
+* @invariant Changing nothing but text inside a note never rebuilds the section.
+*/
+function footnoteTransaction(state, known) {
+	const { doc, schema } = state;
+	const sections = [];
+	const notes = /* @__PURE__ */ new Map();
+	const body = [];
+	doc.descendants((node, position) => {
+		if (node.type.name === NOTES) {
+			sections.push({
+				node,
+				position
+			});
+			node.forEach((note) => {
+				if (!notes.has(note.attrs.label)) notes.set(note.attrs.label, note);
+			});
+			return false;
+		}
+		if (node.type.name === REFERENCE) body.push({
+			node,
+			position
+		});
+	});
+	if (!sections.length && !body.length) return null;
+	const order = [];
+	const counts = /* @__PURE__ */ new Map();
+	const numbered = (reference) => {
+		const label = String(reference.attrs.label);
+		if (!counts.has(label)) order.push(label);
+		counts.set(label, (counts.get(label) ?? 0) + 1);
+		const attrs = {
+			...reference.attrs,
+			number: order.indexOf(label) + 1,
+			occurrence: counts.get(label)
+		};
+		return attrs.number === reference.attrs.number && attrs.occurrence === reference.attrs.occurrence ? reference : reference.type.create(attrs, null, reference.marks);
+	};
+	const transaction = state.tr;
+	for (const { node, position } of body) {
+		const next = numbered(node);
+		if (next !== node) transaction.setNodeMarkup(position, void 0, next.attrs);
+	}
+	const built = [];
+	for (let index = 0; index < order.length; index++) {
+		const label = order[index];
+		const note = notes.get(label) ?? known.get(label) ?? schema.nodes[NOTE].create({ label }, schema.nodes.paragraph.create());
+		built.push(mapReferences(note, numbered));
+	}
+	const wanted = built.map((note) => note.attrs.count === counts.get(note.attrs.label) ? note : note.type.create({
+		...note.attrs,
+		count: counts.get(note.attrs.label)
+	}, note.content));
+	for (const note of [...notes.values(), ...wanted]) known.set(note.attrs.label, note);
+	const section = wanted.length ? schema.nodes[NOTES].create(null, wanted) : null;
+	const last = doc.lastChild?.type.name === NOTES ? {
+		node: doc.lastChild,
+		position: doc.content.size - doc.lastChild.nodeSize
+	} : null;
+	if (!(section && last && sections.length === 1 && last.node.eq(section)) && (sections.length || section)) {
+		const { selection } = state;
+		const inside = noteAt(doc, selection.from);
+		const keep = inside && selection.to <= inside.start + inside.node.nodeSize ? {
+			label: inside.node.attrs.label,
+			start: inside.start
+		} : null;
+		for (const { node, position } of [...sections].reverse()) if (node !== last?.node) transaction.delete(position, position + node.nodeSize);
+		if (last) {
+			const position = transaction.mapping.map(last.position);
+			if (section) transaction.replaceWith(position, position + last.node.nodeSize, section);
+			else transaction.delete(position, position + last.node.nodeSize);
+		} else if (section) transaction.insert(transaction.doc.content.size, section);
+		const moved = keep && findLoomaFootnote(transaction.doc, keep.label);
+		if (keep && moved) {
+			const json = selection.toJSON();
+			json.anchor += moved.position - keep.start;
+			if (json.head !== void 0) json.head += moved.position - keep.start;
+			try {
+				transaction.setSelection(Selection.fromJSON(transaction.doc, json));
+			} catch {}
+		}
+	}
+	return transaction.docChanged ? transaction : null;
+}
+function appendBackLinks(item, label, number, count) {
+	const document = item.ownerDocument;
+	let paragraph = item.lastElementChild;
+	if (paragraph?.nodeName !== "P") item.append(paragraph = document.createElement("p"));
+	for (let occurrence = 1; occurrence <= count; occurrence++) {
+		const link = document.createElement("a");
+		link.setAttribute("href", `#fnref:${label}${occurrence > 1 ? `:${occurrence}` : ""}`);
+		link.setAttribute("data-footnote-backref", "");
+		link.setAttribute("aria-label", `Back to reference ${number}${occurrence > 1 ? `-${occurrence}` : ""}`);
+		link.append("↩");
+		if (occurrence > 1) link.append(Object.assign(document.createElement("sup"), { textContent: String(occurrence) }));
+		paragraph.append(" ", link);
+	}
+}
+var FootnoteSerializer = class extends DOMSerializer {
+	serializeFragment(fragment, options = {}, target) {
+		const dom = super.serializeFragment(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,
+	group: "inline",
+	inline: true,
+	atom: true,
+	selectable: true,
+	addAttributes() {
+		const link = (element) => element.querySelector(":scope > a[data-footnote-ref]");
+		const label = (element) => labelFrom(link(element)?.getAttribute("href"), "fn:") ?? "";
+		return {
+			label: {
+				default: "",
+				parseHTML: label,
+				renderHTML: () => ({})
+			},
+			number: {
+				default: null,
+				parseHTML: (element) => Number(element.textContent) || null,
+				renderHTML: () => ({})
+			},
+			occurrence: {
+				default: 1,
+				parseHTML: (element) => Number(link(element)?.id.slice(`fnref:${label(element)}:`.length)) || 1,
+				renderHTML: () => ({})
+			}
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "sup",
+			priority: 1100,
+			getAttrs: (element) => element.querySelector(":scope > a[data-footnote-ref]") ? null : false
+		}];
+	},
+	renderHTML({ node }) {
+		const { label, number, occurrence } = node.attrs;
+		return ["sup", [
+			"a",
+			{
+				href: `#fn:${label}`,
+				id: `fnref:${label}${occurrence > 1 ? `:${occurrence}` : ""}`,
+				"data-footnote-ref": "",
+				"aria-describedby": "footnote:label"
+			},
+			String(number ?? label)
+		]];
+	},
+	renderText({ node }) {
+		return `[^${node.attrs.label}]`;
+	},
+	addInputRules() {
+		return [new InputRule({
+			find: /\[\^([^\s\]]+)\]$/,
+			handler: ({ state, range, match }) => {
+				state.tr.replaceWith(range.from, range.to, this.type.create({ label: match[1] }));
+			}
+		})];
+	},
+	addPasteRules() {
+		return [new PasteRule({
+			find: /\[\^([^\s\]]+)\]/g,
+			handler: ({ state, range, match }) => {
+				state.tr.replaceWith(range.from, range.to, this.type.create({ label: match[1] }));
+			}
+		})];
+	},
+	addNodeView() {
+		return ({ node, editor }) => {
+			const dom = document.createElement("sup");
+			dom.dataset.loomaFootnoteRef = "";
+			dom.contentEditable = "false";
+			dom.setAttribute("role", "button");
+			dom.setAttribute("aria-haspopup", "dialog");
+			dom.setAttribute("aria-disabled", String(!editor.isEditable));
+			dom.tabIndex = 0;
+			const number = dom.appendChild(document.createElement("a"));
+			const update = (next) => {
+				if (next.type !== node.type) return false;
+				const shown = String(next.attrs.number ?? next.attrs.label);
+				dom.dataset.label = String(next.attrs.label);
+				if (number.textContent !== shown) number.textContent = shown;
+				dom.setAttribute("aria-label", `Footnote ${shown}`);
+				return true;
+			};
+			update(node);
+			return {
+				dom,
+				update,
+				stopEvent: (event) => event.type === "click" || event.type === "keydown"
+			};
+		};
+	}
+});
+Node$1.create({
+	name: NOTES,
+	group: "block",
+	content: `${NOTE}+`,
+	isolating: true,
+	parseHTML() {
+		return [{
+			tag: "section[data-footnotes]",
+			contentElement: "ol"
+		}];
+	},
+	renderHTML() {
+		return [
+			"section",
+			{
+				"data-footnotes": "",
+				class: "footnotes"
+			},
+			[
+				"h2",
+				{
+					id: "footnote:label",
+					class: "sr-only"
+				},
+				"Footnotes"
+			],
+			["ol", 0]
+		];
+	},
+	onBeforeCreate() {
+		installSerializer(this.editor.schema);
+	},
+	onCreate() {
+		const transaction = footnoteTransaction(this.editor.state, this.storage.known);
+		if (transaction) this.editor.view.dispatch(transaction.setMeta("addToHistory", false));
+	},
+	addStorage: () => ({ known: /* @__PURE__ */ new Map() }),
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			appendTransaction: (transactions, _oldState, state) => transactions.some((transaction) => transaction.docChanged) ? footnoteTransaction(state, this.storage.known) : null,
+			props: { transformPasted: (slice) => {
+				const kept = [];
+				slice.content.forEach((node) => {
+					if (node.type.name === NOTES) node.forEach((note) => {
+						this.storage.known.set(note.attrs.label, note);
+					});
+					else kept.push(node);
+				});
+				if (!kept.length || kept.length === slice.content.childCount) return slice;
+				const content = Fragment$1.from(kept);
+				const open = Slice.maxOpen(content);
+				return new Slice(content, kept[0] === slice.content.firstChild ? slice.openStart : open.openStart, kept.at(-1) === slice.content.lastChild ? slice.openEnd : open.openEnd);
+			} }
+		})];
+	},
+	addCommands() {
+		return {
+			insertLoomaFootnote: (label) => ({ state, tr, dispatch }) => {
+				const name = label ?? (() => {
+					const used = usedLabels(state.doc);
+					let next = 1;
+					while (used.has(String(next))) next++;
+					return String(next);
+				})();
+				const { $from, $to } = state.selection;
+				if (!isLabel(name) || !$from.parent.canReplaceWith($from.index(), $to.index(), state.schema.nodes[REFERENCE])) return false;
+				if (!dispatch) return true;
+				tr.replaceSelectionWith(state.schema.nodes[REFERENCE].create({ label: name }));
+				if (!findLoomaFootnote(tr.doc, name)) {
+					const note = state.schema.nodes[NOTE].create({ label: name }, state.schema.nodes.paragraph.create());
+					if (tr.doc.lastChild?.type.name === NOTES) tr.insert(tr.doc.content.size - 1, note);
+					else tr.insert(tr.doc.content.size, state.schema.nodes[NOTES].create(null, note));
+					tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size - 3));
+				}
+				tr.scrollIntoView();
+				return true;
+			},
+			renameLoomaFootnote: (from, to) => ({ state, tr, dispatch }) => {
+				if (!isLabel(to) || usedLabels(state.doc).has(to) || !findLoomaFootnote(state.doc, from)) return false;
+				if (dispatch) state.doc.descendants((node, position) => {
+					if ((node.type.name === REFERENCE || node.type.name === NOTE) && node.attrs.label === from) tr.setNodeMarkup(position, void 0, {
+						...node.attrs,
+						label: to
+					});
+				});
+				return true;
+			},
+			goToLoomaFootnote: () => ({ state, tr, dispatch }) => {
+				const { selection } = state;
+				const reference = selection instanceof NodeSelection ? selection.node : selection.empty ? selection.$from.nodeBefore : null;
+				if (reference?.type.name === REFERENCE) {
+					const note = findLoomaFootnote(state.doc, reference.attrs.label);
+					if (!note) return false;
+					if (dispatch) tr.setSelection(Selection.near(state.doc.resolve(note.position + note.node.nodeSize - 1), -1)).scrollIntoView();
+					return true;
+				}
+				const note = noteAt(state.doc, selection.from);
+				let first = -1;
+				if (note) state.doc.descendants((node, position) => {
+					if (first >= 0) return false;
+					if (node.type.name === REFERENCE && node.attrs.label === note.node.attrs.label) first = position;
+				});
+				if (first < 0) return false;
+				if (dispatch) tr.setSelection(TextSelection.create(state.doc, first + 1)).scrollIntoView();
+				return true;
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-Alt-f": () => this.editor.commands.insertLoomaFootnote(),
+			"Mod-Alt-n": () => this.editor.commands.goToLoomaFootnote()
+		};
+	}
+});
+Node$1.create({
+	name: NOTE,
+	content: "block+",
+	defining: true,
+	addAttributes() {
+		return {
+			label: {
+				default: "",
+				parseHTML: (element) => labelFrom(`#${element.id}`, "fn:") ?? "",
+				renderHTML: () => ({})
+			},
+			count: {
+				default: 1,
+				parseHTML: (element) => element.querySelectorAll("a[data-footnote-backref]").length || 1,
+				renderHTML: () => ({})
+			}
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "li",
+			priority: 1100,
+			context: `${NOTES}/`
+		}, {
+			tag: "a[data-footnote-backref]",
+			priority: 1100,
+			ignore: true
+		}];
+	},
+	renderHTML({ node }) {
+		return [
+			"li",
+			{ id: `fn:${node.attrs.label}` },
+			0
+		];
+	}
+});
+//#endregion
+//#region src/editor/footnote-editing.ts
+var LOOMA_FOOTNOTE_EDITING_IDLE = Object.freeze({
+	open: false,
+	label: "",
+	note: "",
+	editable: false,
+	error: ""
+});
+var plain = (note) => {
+	const paragraph = note.firstChild;
+	if (note.childCount !== 1 || paragraph?.type.name !== "paragraph") return false;
+	let text = true;
+	paragraph.forEach((child) => {
+		if (!child.isText || child.marks.length) text = false;
+	});
+	return text;
+};
+function createFootnoteEditing(options) {
+	const { editor } = options;
+	const listeners = /* @__PURE__ */ new Set();
+	let state = LOOMA_FOOTNOTE_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 note = () => state.open && !editor.isDestroyed && element?.isConnected ? findLoomaFootnote(editor.state.doc, state.label) : null;
+	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 !== "loomaFootnoteReference" || !(dom instanceof HTMLElement)) return false;
+			const label = String(node.attrs.label);
+			const found = findLoomaFootnote(editor.state.doc, label);
+			if (!found) return false;
+			element = dom;
+			set({
+				open: true,
+				label,
+				note: found.node.textBetween(0, found.node.content.size, "\n"),
+				editable: plain(found.node),
+				error: ""
+			});
+			return true;
+		},
+		setNote(text) {
+			const found = note();
+			if (!found) return close();
+			if (!state.editable) return;
+			const value = text.replace(/\s*\n\s*/g, " ");
+			const start = found.position + 2;
+			const end = start + found.node.firstChild.content.size;
+			editor.view.dispatch(editor.state.tr.replaceWith(start, end, value ? editor.schema.text(value) : Fragment$1.empty));
+			set({
+				...state,
+				note: value
+			});
+		},
+		rename(label) {
+			if (!note()) return close();
+			if (label === state.label) return state.error ? set({
+				...state,
+				error: ""
+			}) : void 0;
+			if (!LOOMA_FOOTNOTE_LABEL.test(label)) return set({
+				...state,
+				error: "A label is one word, without ]."
+			});
+			if (!editor.commands.renameLoomaFootnote(state.label, label)) return set({
+				...state,
+				error: "Another footnote uses this label."
+			});
+			set({
+				...state,
+				label,
+				error: ""
+			});
+		},
+		goToNote() {
+			const reference = element;
+			close();
+			if (!reference?.isConnected || editor.isDestroyed) return;
+			editor.chain().focus().setNodeSelection(editor.view.posAtDOM(reference, 0)).goToLoomaFootnote().run();
+		},
+		close
+	};
+}
+//#endregion
 //#region src/editor/host-actions.ts
 /** Characters of context on each side of a selected passage. */
 var CONTEXT = 48;
@@ -6212,6 +6735,20 @@ function createUiIcon(options = {}, html) {
 				"y2": "12"
 			}
 		],
+		"superscript": [
+			{
+				"tag": "path",
+				"d": "m4 19 8-8"
+			},
+			{
+				"tag": "path",
+				"d": "m12 19-8-8"
+			},
+			{
+				"tag": "path",
+				"d": "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06"
+			}
+		],
 		"table": [{
 			"tag": "path",
 			"d": "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"
@@ -14210,6 +14747,14 @@ var LoomaEditor = defineComponent({
 		const chipInput = () => chipEditorRoot.value?.querySelector("[data-chip-label]");
 		let chipEditing;
 		const chipState = shallowRef(LOOMA_CHIP_EDITING_IDLE);
+		const footnoteAnchorId = `looma-editor-footnote-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const footnoteEditorRoot = ref(null);
+		const setFootnoteEditorRoot = (instance) => {
+			const element = instance?.$el;
+			footnoteEditorRoot.value = element instanceof HTMLElement ? element : null;
+		};
+		let footnoteEditing;
+		const footnoteState = shallowRef(LOOMA_FOOTNOTE_EDITING_IDLE);
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const toolbarTooltip = createToolbarTooltip((state) => {
 			tooltip.value = state;
@@ -14296,6 +14841,17 @@ var LoomaEditor = defineComponent({
 			chipEditing.element.id = chipAnchorId;
 			nextTick(() => chipInput()?.focus());
 		};
+		const openFootnoteEditor = (position) => {
+			if (!footnoteEditing?.open(position)) return;
+			root.value?.querySelector(`#${footnoteAnchorId}`)?.removeAttribute("id");
+			footnoteEditing.element.id = footnoteAnchorId;
+			nextTick(() => footnoteEditorRoot.value?.querySelector("[data-footnote-note]")?.focus());
+		};
+		const closeFootnote = (focusReference = false) => {
+			const element = footnoteEditing?.element;
+			footnoteEditing?.close();
+			if (focusReference) element?.focus();
+		};
 		const closeChip = (focusChip = false) => {
 			const element = chipEditing?.element;
 			chipEditing?.close();
@@ -14525,6 +15081,14 @@ var LoomaEditor = defineComponent({
 				chipState.value = chips.state;
 			});
 			chipEditing = chips;
+			const footnotes = createFootnoteEditing({
+				editor: session.editor,
+				isEditable: () => props.editable
+			});
+			footnotes.subscribe(() => {
+				footnoteState.value = footnotes.state;
+			});
+			footnoteEditing = footnotes;
 			const imageUploads = createImageUploads({
 				editor: session.editor,
 				upload: () => (file, init) => ask("image-upload", { file }, init),
@@ -14551,6 +15115,7 @@ var LoomaEditor = defineComponent({
 			const content = edited ? previous.editor.getJSON() : props.modelValue;
 			linkEditing?.destroy();
 			chipEditing?.close();
+			footnoteEditing?.close();
 			formatting?.destroy();
 			uploads?.cancel();
 			previous.destroy();
@@ -14673,10 +15238,11 @@ var LoomaEditor = defineComponent({
 			editor.value?.setEditable(editable, false);
 			if (!editable) formattingPopup?.hide();
 			if (editor.value) imageDelivery.reset(editor.value);
-			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
+			root.value?.querySelectorAll("[data-looma-chip], [data-looma-footnote-ref]").forEach((chip) => {
 				chip.setAttribute("aria-disabled", String(!editable));
 			});
 			if (!editable) chipEditing?.close();
+			if (!editable) footnoteEditing?.close();
 		});
 		watch([
 			() => linkState.value.surface === "popover",
@@ -15023,7 +15589,18 @@ var LoomaEditor = defineComponent({
 			const element = event.target instanceof Element ? event.target.closest("[data-looma-chip]") : null;
 			return element && root.value?.contains(element) ? element : null;
 		};
+		const footnoteElementForEvent = (event) => {
+			const element = event.target instanceof Element ? event.target.closest("[data-looma-footnote-ref]") : null;
+			return element && root.value?.contains(element) ? element : null;
+		};
 		const onChipClickCapture = (event) => {
+			const reference = footnoteElementForEvent(event);
+			if (reference && editor.value && props.editable) {
+				event.preventDefault();
+				event.stopPropagation();
+				openFootnoteEditor(editor.value.view.posAtDOM(reference, 0));
+				return;
+			}
 			const chip = chipElementForEvent(event);
 			if (chip && editor.value && props.editable) {
 				event.preventDefault();
@@ -15041,6 +15618,12 @@ var LoomaEditor = defineComponent({
 		};
 		const onImageKeyDown = (event) => {
 			if (event.key !== "Enter" && event.key !== " ") return;
+			const reference = footnoteElementForEvent(event);
+			if (reference && editor.value && props.editable) {
+				event.preventDefault();
+				openFootnoteEditor(editor.value.view.posAtDOM(reference, 0));
+				return;
+			}
 			const chip = chipElementForEvent(event);
 			if (chip && editor.value && props.editable) {
 				event.preventDefault();
@@ -15576,6 +16159,23 @@ var LoomaEditor = defineComponent({
 					onColor: (event) => chipEditing?.setColor(event.detail.color),
 					onDone: () => closeChip(true)
 				})),
+				h(Popover, {
+					size: "sm",
+					open: footnoteState.value.open,
+					for: footnoteAnchorId,
+					placement: mobile.value ? "top-start" : "bottom-start",
+					onClose: () => footnoteEditing?.close()
+				}, () => h(EditorFootnoteEditor, {
+					ref: setFootnoteEditorRoot,
+					label: footnoteState.value.label,
+					note: footnoteState.value.note,
+					editable: footnoteState.value.editable,
+					error: footnoteState.value.error,
+					onText: (event) => footnoteEditing?.setNote(event.detail.text),
+					onLabel: (event) => footnoteEditing?.rename(event.detail.label),
+					onGo: () => footnoteEditing?.goToNote(),
+					onDone: () => closeFootnote(true)
+				})),
 				h(Popover, {
 					class: "looma-editor__link-popover",
 					size: "sm",
@@ -15739,4 +16339,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorFootnoteEditor, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };