@threadlabs/looma 0.30.9 → 0.31.1

package/vue/editor/index.js

@@ -1,18 +1,30 @@
 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, 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";
+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
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
 //#region src/vue/editor/primitives.ts
 /** Each Vue editor component's element tag, for tooling that enumerates them. */
 var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
@@ -31,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
@@ -1666,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;
@@ -2691,6 +3226,7 @@ function setCodeBlockLanguage(editor, pos, value, names) {
 }
 //#endregion
 //#region components/ui-button/ui-button.js
+var ui_button_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$11 });
 function connect$11(host) {
 	const onClick = (event) => {
 		if (!host.props.loading.value && !host.props.pending.value) return;
@@ -2700,10 +3236,6 @@ function connect$11(host) {
 	host.element.addEventListener("click", onClick, true);
 	return () => host.element.removeEventListener("click", onClick, true);
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$11(host) {
-	host.on("connect", () => connect$11(host));
-}
 //#endregion
 //#region vanilla/UiButton.js
 var T0$16 = [
@@ -2859,6 +3391,7 @@ var S$18 = {
 	t: [],
 	f: import.meta.url,
 	g: "ui-button",
+	a: (host, I) => C$11(host, I),
 	b: generatedInputs
 };
 var A$3 = [
@@ -3130,7 +3663,7 @@ var D$18 = {
 		}
 	}
 };
-var C$11 = (host) => controller$11(host);
+var C$11 = (host) => activateModule(ui_button_exports, host);
 function createUiButton(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const v = [
@@ -3828,7 +4361,7 @@ function createUiButton(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$18, v, p, C$11, void 0, I);
+	attachGeneratedController(element, S$18, v, p, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -4456,6 +4989,7 @@ function createIdResolver(document, onLate) {
 }
 //#endregion
 //#region components/ui-affordance-scope/ui-affordance-scope.js
+var ui_affordance_scope_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$10 });
 function distance(point, rect) {
 	const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
 	const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
@@ -4538,10 +5072,6 @@ function connect$10(host) {
 		clear();
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$10(host) {
-	host.on("connect", () => connect$10(host));
-}
 //#endregion
 //#region vanilla/UiAffordanceScope.js
 var T0$15 = [
@@ -4557,6 +5087,7 @@ var S$17 = {
 	t: ["b"],
 	f: import.meta.url,
 	g: "ui-affordance-scope",
+	a: (host, I) => C$10(host, I),
 	b: generatedInputs,
 	i: [false]
 };
@@ -4582,7 +5113,7 @@ var D$17 = {
 		}
 	}
 };
-var C$10 = (host) => controller$10(host);
+var C$10 = (host) => activateModule(ui_affordance_scope_exports, host);
 function createUiAffordanceScope(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("span");
@@ -4634,7 +5165,7 @@ function createUiAffordanceScope(options = {}, html) {
 	attachGeneratedController(element, S$17, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$10, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -4856,6 +5387,7 @@ function warnOnce(warned, problems, element) {
 }
 //#endregion
 //#region components/ui-form-field/ui-form-field.js
+var ui_form_field_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$9 });
 var nextFieldId = 0;
 function id(prefix) {
 	nextFieldId += 1;
@@ -4936,10 +5468,6 @@ function connect$9(host) {
 		removeOwned(activeInput);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$9(host) {
-	host.on("connect", () => connect$9(host));
-}
 //#endregion
 //#region vanilla/UiFormField.js
 var T0$13 = [
@@ -4991,6 +5519,7 @@ var S$15 = {
 	t: [],
 	f: import.meta.url,
 	g: "ui-form-field",
+	a: (host, I) => C$9(host, I),
 	b: generatedInputs
 };
 var D$15 = {
@@ -5022,7 +5551,7 @@ var D$15 = {
 		}
 	}
 };
-var C$9 = (host) => controller$9(host);
+var C$9 = (host) => activateModule(ui_form_field_exports, host);
 function createUiFormField(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("div");
@@ -5152,7 +5681,7 @@ function createUiFormField(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$15, v, ((c, d) => p0(R, c, d)), C$9, void 0, I);
+	attachGeneratedController(element, S$15, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -6206,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"
@@ -6597,6 +7140,7 @@ function createUiIcon(options = {}, html) {
 defineComponent$1("ui-icon", createUiIcon, ["name", "tone"]);
 //#endregion
 //#region components/ui-icon-button/ui-icon-button.js
+var ui_icon_button_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$8 });
 function connect$8(host) {
 	const stop = host.effect(() => {
 		if (host.props.anticipatory.value) host.element.setAttribute("data-ui-affordance", "button");
@@ -6613,10 +7157,6 @@ function connect$8(host) {
 		host.element.removeEventListener("click", onClick, true);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$8(host) {
-	host.on("connect", () => connect$8(host));
-}
 //#endregion
 //#region vanilla/UiIconButton.js
 var T0$11 = [
@@ -6642,6 +7182,7 @@ var S$13 = {
 	t: [],
 	f: import.meta.url,
 	g: "ui-icon-button",
+	a: (host, I) => C$8(host, I),
 	b: generatedInputs
 };
 var D$13 = {
@@ -6755,7 +7296,7 @@ var D$13 = {
 		}
 	}
 };
-var C$8 = (host) => controller$8(host);
+var C$8 = (host) => activateModule(ui_icon_button_exports, host);
 function createUiIconButton(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("button");
@@ -6886,7 +7427,7 @@ function createUiIconButton(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$13, v, ((c, d) => p0(R, c, d)), C$8, void 0, I);
+	attachGeneratedController(element, S$13, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -7211,6 +7752,7 @@ function navigateMenu(event, menu) {
 }
 //#endregion
 //#region components/ui-menu/ui-menu.js
+var ui_menu_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$7 });
 function triggerFor(event) {
 	if (event instanceof KeyboardEvent) return "keyboard";
 	if (event instanceof MouseEvent || event instanceof PointerEvent) return event.detail === 0 ? "keyboard" : "pointer";
@@ -7378,10 +7920,6 @@ function connect$7(host) {
 		releaseAnchor();
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$7(host) {
-	host.on("connect", () => connect$7(host));
-}
 //#endregion
 //#region vanilla/UiMenu.js
 var T0$9 = [
@@ -7487,6 +8025,7 @@ var S$11 = {
 		]
 	},
 	x: dispatchDeclared,
+	a: (host, I) => C$7(host, I),
 	b: generatedInputs,
 	i: [false]
 };
@@ -7553,7 +8092,7 @@ var D$11 = {
 		}
 	}
 };
-var C$7 = (host) => controller$7(host);
+var C$7 = (host) => activateModule(ui_menu_exports, host);
 function createUiMenu(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("div");
@@ -7624,7 +8163,7 @@ function createUiMenu(options = {}, html) {
 	attachGeneratedController(element, S$11, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$7, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -7639,6 +8178,7 @@ defineComponent$1("ui-menu", createUiMenu, [
 ]);
 //#endregion
 //#region components/ui-menu-item/ui-menu-item.js
+var ui_menu_item_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$6 });
 function radioScope(item) {
 	return item.closest("[role=\"group\"]") ?? item.closest("[role=\"menu\"]");
 }
@@ -7692,10 +8232,6 @@ function connect$6(host) {
 		item.removeEventListener("ui-menu-item-clear", onClear);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$6(host) {
-	host.on("connect", () => connect$6(host));
-}
 //#endregion
 //#region vanilla/UiMenuItem.js
 var T0$8 = [
@@ -7830,6 +8366,7 @@ var S$10 = {
 		false
 	] },
 	x: dispatchDeclared,
+	a: (host, I) => C$6(host, I),
 	b: generatedInputs,
 	i: [false]
 };
@@ -7934,7 +8471,7 @@ var D$10 = {
 		}
 	}
 };
-var C$6 = (host) => controller$6(host);
+var C$6 = (host) => activateModule(ui_menu_item_exports, host);
 function createUiMenuItem(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const v = [
@@ -8224,7 +8761,7 @@ function createUiMenuItem(options = {}, html) {
 	attachGeneratedController(element, S$10, v, (c, d) => {
 		p(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$6, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -8238,6 +8775,7 @@ defineComponent$1("ui-menu-item", createUiMenuItem, [
 ]);
 //#endregion
 //#region components/ui-popover/ui-popover.js
+var ui_popover_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$5 });
 function connect$5(host) {
 	const element = host.element;
 	const document = element.ownerDocument;
@@ -8355,10 +8893,6 @@ function connect$5(host) {
 		releaseAnchor();
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$5(host) {
-	host.on("connect", () => connect$5(host));
-}
 //#endregion
 //#region vanilla/UiPopover.js
 var T0$7 = [
@@ -8443,6 +8977,7 @@ var S$9 = {
 		]
 	},
 	x: dispatchDeclared,
+	a: (host, I) => C$5(host, I),
 	b: generatedInputs,
 	i: [false]
 };
@@ -8503,7 +9038,7 @@ var D$9 = {
 		}
 	}
 };
-var C$5 = (host) => controller$5(host);
+var C$5 = (host) => activateModule(ui_popover_exports, host);
 function createUiPopover(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("span");
@@ -8557,7 +9092,7 @@ function createUiPopover(options = {}, html) {
 	attachGeneratedController(element, S$9, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$5, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -9996,6 +10531,7 @@ defineComponent$1("ui-text", createUiText, [
 ]);
 //#endregion
 //#region components/ui-tooltip/ui-tooltip.js
+var ui_tooltip_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$4 });
 var warmTooltips = /* @__PURE__ */ new WeakMap();
 function connect$4(host) {
 	const element = host.element;
@@ -10232,10 +10768,6 @@ function connect$4(host) {
 		closeOverlay(document, overlayId);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$4(host) {
-	host.on("connect", () => connect$4(host));
-}
 //#endregion
 //#region vanilla/UiTooltip.js
 var T0$4 = [
@@ -10334,6 +10866,7 @@ var S$6 = {
 		]
 	},
 	x: dispatchDeclared,
+	a: (host, I) => C$4(host, I),
 	b: generatedInputs,
 	i: [false]
 };
@@ -10417,7 +10950,7 @@ var D$6 = {
 		}
 	}
 };
-var C$4 = (host) => controller$4(host);
+var C$4 = (host) => activateModule(ui_tooltip_exports, host);
 function createUiTooltip(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("span");
@@ -10502,7 +11035,7 @@ function createUiTooltip(options = {}, html) {
 	attachGeneratedController(element, S$6, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$4, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -11310,6 +11843,7 @@ function trackTrigger(host) {
 }
 //#endregion
 //#region components/ui-checkbox/ui-checkbox.js
+var ui_checkbox_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$3 });
 function connect$3(host) {
 	const input = host.refs.input;
 	describeInput(input, host.refs.description);
@@ -11342,10 +11876,6 @@ function connect$3(host) {
 		input.removeEventListener("change", onChange);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$3(host) {
-	host.on("connect", () => connect$3(host));
-}
 //#endregion
 //#region vanilla/UiCheckbox.js
 var T0$3 = [
@@ -11415,6 +11945,7 @@ var S$5 = {
 		false
 	] },
 	x: dispatchDeclared,
+	a: (host, I) => C$3(host, I),
 	b: generatedInputs,
 	i: [false]
 };
@@ -11500,7 +12031,7 @@ var D$5 = {
 		}
 	}
 };
-var C$3 = (host) => controller$3(host);
+var C$3 = (host) => activateModule(ui_checkbox_exports, host);
 function createUiCheckbox(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("label");
@@ -11645,7 +12176,7 @@ function createUiCheckbox(options = {}, html) {
 	attachGeneratedController(element, S$5, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$3, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	I.r["input"] = t0;
 	I.r["description"] = t4;
@@ -11664,6 +12195,7 @@ defineComponent$1("ui-checkbox", createUiCheckbox, [
 ]);
 //#endregion
 //#region components/ui-disclosure/ui-disclosure.js
+var ui_disclosure_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$2 });
 var disclosures = 0;
 var groups = /* @__PURE__ */ new WeakMap();
 var pendingGroups = /* @__PURE__ */ new WeakSet();
@@ -11799,10 +12331,6 @@ function connect$2(host) {
 		host.refs.panel.removeEventListener("beforematch", onBeforematch);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$2(host) {
-	host.on("connect", () => connect$2(host));
-}
 //#endregion
 //#region vanilla/UiDisclosure.js
 var T0$2 = [
@@ -11957,6 +12485,7 @@ var S$4 = {
 		]
 	},
 	x: dispatchDeclared,
+	a: (host, I) => C$2(host, I),
 	b: generatedInputs,
 	i: [
 		false,
@@ -12044,7 +12573,7 @@ var D$4 = {
 		}
 	}
 };
-var C$2 = (host) => controller$2(host);
+var C$2 = (host) => activateModule(ui_disclosure_exports, host);
 function createUiDisclosure(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("div");
@@ -12231,7 +12760,7 @@ function createUiDisclosure(options = {}, html) {
 	attachGeneratedController(element, S$4, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$2, void 0, I);
+	}, void 0, void 0, I);
 	manageProps(I);
 	I.r["heading"] = t0;
 	I.r["trigger"] = t1;
@@ -12251,6 +12780,7 @@ defineComponent$1("ui-disclosure", createUiDisclosure, [
 ]);
 //#endregion
 //#region components/ui-input/ui-input.js
+var ui_input_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$1 });
 function connect$1(host) {
 	return host.effect(() => {
 		const value = host.props.value.value;
@@ -12263,10 +12793,6 @@ function connect$1(host) {
 		input.value = text;
 	});
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$1(host) {
-	host.on("connect", () => connect$1(host));
-}
 //#endregion
 //#region vanilla/UiInput.js
 var S$3 = {
@@ -12274,6 +12800,7 @@ var S$3 = {
 	t: [],
 	f: import.meta.url,
 	g: "ui-input",
+	a: (host, I) => C$1(host, I),
 	b: generatedInputs
 };
 var D$3 = {
@@ -12464,7 +12991,7 @@ var D$3 = {
 		}
 	}
 };
-var C$1 = (host) => controller$1(host);
+var C$1 = (host) => activateModule(ui_input_exports, host);
 function createUiInput(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("input");
@@ -12613,7 +13140,7 @@ function createUiInput(options = {}, html) {
 		v6: void 0
 	};
 	const I = { B };
-	attachGeneratedController(element, S$3, v, ((c, d) => p0(R, c, d)), C$1, void 0, I);
+	attachGeneratedController(element, S$3, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -13434,6 +13961,7 @@ var calloutNodeView = ({ node }) => {
 };
 //#endregion
 //#region components/ui-image/ui-image.js
+var ui_image_exports = /* @__PURE__ */ __exportAll({ connect: () => connect });
 /** Owns transient resize geometry; consumers own persistence and selection.
 * @lifecycle Pointer capture ends on release, Escape, cancellation, or teardown.
 * Only release commits a drag, so consumers can make it one undo operation.
@@ -13575,10 +14103,6 @@ function connect(host) {
 		document.removeEventListener("keydown", onEscape, true);
 	};
 }
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller(host) {
-	host.on("connect", () => connect(host));
-}
 //#endregion
 //#region vanilla/UiImage.js
 var T0 = [
@@ -13692,6 +14216,7 @@ var S = {
 		false
 	] },
 	x: dispatchDeclared,
+	a: (host, I) => C(host, I),
 	b: generatedInputs
 };
 var D = {
@@ -13759,7 +14284,7 @@ var D = {
 		}
 	}
 };
-var C = (host) => controller(host);
+var C = (host) => activateModule(ui_image_exports, host);
 function createUiImage(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("figure");
@@ -13872,7 +14397,7 @@ function createUiImage(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, void 0, I);
+	attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	I.r["frame"] = t0;
 	return element;
@@ -14222,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;
@@ -14308,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();
@@ -14537,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),
@@ -14563,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();
@@ -14685,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",
@@ -15035,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();
@@ -15053,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();
@@ -15588,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",
@@ -15751,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 };