main.ts

import { Decoration, WidgetType } from "@codemirror/view";
import { Plugin } from "obsidian";
import { around } from "monkey-around";

type CalloutWidgetType = WidgetType & {
	clazz: string;
	text: string;
};

function isCallout(
	widget: (WidgetType & { clazz?: unknown; text?: unknown }) | undefined
): widget is CalloutWidgetType {
	return (
		widget !== undefined &&
		widget.clazz === "cm-callout" &&
		typeof widget.text === "string"
	);
}

function makeFootrefHTML(tag: string) {
	const span1 = document.createElement("span");
	span1.className =
		"cm-footref  cm-formatting cm-formatting-link cm-formatting-link-start cm-barelink";
	span1.innerText = "[^";

	const span2 = document.createElement("span");
	span2.className = "cm-footref cm-hmd-barelink";
	span2.innerText = tag;

	const span3 = document.createElement("span");
	span3.className =
		"cm-footref  cm-formatting cm-formatting-link cm-formatting-link-end cm-barelink";
	span3.innerText = "]";

	return span1.outerHTML + span2.outerHTML + span3.outerHTML;
}

// If `spec.widget` is a callout widget, replace its inner "[^tag]"s with HTML generated by `makeFootrefHTML`.
function modifyCallout(spec: Parameters<typeof Decoration.replace>[0]) {
	const widget = spec.widget;
	if (isCallout(widget)) {
		const footrefRegex = /\[\^([^\]]+)\]/g;
		widget.text = widget.text.replace(footrefRegex, (_, tag) =>
			makeFootrefHTML(tag)
		);

		// Modifying `widget.text` causes an inconsistency between `widget.text` and the document,
		// leading Obsidian to recreate the widget. The eq method tells that the recreated widget
		// is equivallent to the original one, preventeing unnecessary re-rendering.
		widget.eq = function (other) {
			return isCallout(other) && this.text === other.text;
		};
	}
}

export default class FootrefPlugin extends Plugin {
	uninstaller: ReturnType<typeof around> | undefined;

	async onload() {
		this.uninstaller = around(Decoration, {
			replace(old) {
				return (spec) => {
					modifyCallout(spec);
					return old.call(this, spec);
				};
			},
		});
	}

	onunload() {
		if (this.uninstaller) {
			this.uninstaller();
		}
	}
}