mdsquare 0.0.0-stage → 0.1.0

package/dist/footnote.js

@@ -0,0 +1,456 @@
+import { syntaxTree } from "@codemirror/language";
+import { EditorSelection, RangeSet, StateField } from "@codemirror/state";
+import { Decoration, EditorView, GutterMarker, gutterLineClass, hoverTooltip } from "@codemirror/view";
+import { readImage } from "./image.js";
+import { isSafeUrl, readInlineLink } from "./link.js";
+import { createRevealPlugin } from "./utils/reveal.js";
+/** 라벨 비교는 대소문자를 구분하지 않습니다. */
+const normalize = (label) => label.toLowerCase();
+const TOOLTIP_MAX = 200;
+const cache = new WeakMap();
+/**
+ * 문서의 각주 정의를 라벨별로 찾습니다. (같은 라벨이 여러 번 정의되면 첫 번째)
+ * 정의는 최상위 블록에만 오므로 최상위 블록만 확인하고, 결과는 구문 트리별로 캐시합니다.
+ * (커서만 움직이는 동안에는 다시 계산하지 않습니다)
+ */
+export function footnoteDefinitions(state) {
+    const tree = syntaxTree(state);
+    let defs = cache.get(tree);
+    if (defs)
+        return defs;
+    defs = new Map();
+    const cursor = tree.cursor();
+    if (cursor.firstChild()) {
+        do {
+            if (!cursor.type.is("FootnoteDefinition"))
+                continue;
+            const node = cursor.node;
+            const labelNode = node.getChild("FootnoteLabel");
+            const marks = node.getChildren("FootnoteMark");
+            if (!labelNode || marks.length < 2)
+                continue;
+            const label = normalize(state.doc.sliceString(labelNode.from, labelNode.to));
+            if (defs.has(label))
+                continue;
+            const raw = state.doc.sliceString(marks[1].to, node.to);
+            const text = raw.trim().replace(/\s+/g, " ");
+            defs.set(label, {
+                label,
+                from: node.from,
+                to: node.to,
+                contentFrom: marks[1].to + (raw.length - raw.trimStart().length),
+                text: text.length > TOOLTIP_MAX ? `${text.slice(0, TOOLTIP_MAX)}…` : text,
+            });
+        } while (cursor.nextSibling());
+    }
+    cache.set(tree, defs);
+    return defs;
+}
+// ---------------------------------------------------------------------------
+// 데코레이션
+// ---------------------------------------------------------------------------
+const hidden = Decoration.replace({});
+const formatting = Decoration.mark({ class: "cm-formatting cm-formatting-footnote" });
+const revealedRefLabel = Decoration.mark({ class: "cm-footnote-label" });
+const defLine = Decoration.line({ class: "cm-footnote-def-line" });
+/** 연속된 정의 묶음의 첫 줄: 본문과 구분하는 구분선을 위에 그립니다. */
+const defLineGroupStart = Decoration.line({ class: "cm-footnote-def-line cm-footnote-defs-start" });
+const defLabel = Decoration.mark({ class: "cm-footnote-def-label" });
+/** 참조 라벨 (툴팁은 hoverTooltip이 담당하므로 title 속성을 쓰지 않습니다) */
+const refLabel = Decoration.mark({ class: "cm-footnote-ref" });
+const refLabelMissing = Decoration.mark({ class: "cm-footnote-ref cm-footnote-ref-missing" });
+/** 각주가 올 수 없으므로 자식 순회를 생략하는 노드 */
+const SKIP_CHILDREN = new Set([
+    "FencedCode",
+    "CodeBlock",
+    "HTMLBlock",
+    "CommentBlock",
+    "InlineCode",
+    "URL",
+    "Autolink",
+    "LinkReference",
+]);
+/** FootnoteReference/FootnoteDefinition의 [여는 기호, 라벨, 닫는 기호] */
+function partsOf(node) {
+    const marks = node.getChildren("FootnoteMark");
+    const label = node.getChild("FootnoteLabel");
+    return label && marks.length >= 2 ? [marks[0], label, marks[1]] : null;
+}
+export const footnotePlugin = createRevealPlugin({
+    // 정의 줄 데코레이션과 기호/참조 데코레이션이 섞일 수 있으므로 정렬합니다.
+    sort: true,
+    visit({ state, decorations, isRevealed }) {
+        const defs = footnoteDefinitions(state);
+        return {
+            enter(node) {
+                if (node.name === "FootnoteReference") {
+                    const parts = partsOf(node.node);
+                    if (!parts)
+                        return false;
+                    const [open, label, close] = parts;
+                    if (isRevealed(node.from, node.to)) {
+                        decorations.push(formatting.range(open.from, open.to), revealedRefLabel.range(label.from, label.to), formatting.range(close.from, close.to));
+                    }
+                    else {
+                        const def = defs.get(normalize(state.doc.sliceString(label.from, label.to)));
+                        decorations.push(hidden.range(open.from, open.to), (def ? refLabel : refLabelMissing).range(label.from, label.to), hidden.range(close.from, close.to));
+                    }
+                    return false;
+                }
+                if (node.name === "FootnoteDefinition") {
+                    const parts = partsOf(node.node);
+                    if (!parts)
+                        return false;
+                    const [open, label, close] = parts;
+                    // 정의의 모든 줄(이어지는 줄 포함)에 정의 스타일을 적용하고,
+                    // 연속된 정의 묶음의 첫 줄에는 본문과 구분하는 구분선을 그립니다.
+                    const { doc } = state;
+                    const groupStart = node.node.prevSibling?.name !== "FootnoteDefinition";
+                    const firstLine = doc.lineAt(node.from).number;
+                    const lastLine = doc.lineAt(node.to).number;
+                    for (let n = firstLine; n <= lastLine; n++) {
+                        const deco = n === firstLine && groupStart ? defLineGroupStart : defLine;
+                        decorations.push(deco.range(doc.line(n).from));
+                    }
+                    // 내용을 입력하는 동안 기호가 펼쳐지지 않도록, 라벨 부분([^label]:)에 닿을 때만 원문을 보여줍니다.
+                    if (isRevealed(open.from, close.to)) {
+                        decorations.push(formatting.range(open.from, open.to), revealedRefLabel.range(label.from, label.to), formatting.range(close.from, close.to));
+                    }
+                    else {
+                        decorations.push(hidden.range(open.from, open.to), defLabel.range(label.from, label.to), hidden.range(close.from, close.to));
+                    }
+                    return; // 정의 내용 안의 각주 참조도 처리합니다.
+                }
+                if (SKIP_CHILDREN.has(node.name))
+                    return false;
+            },
+        };
+    },
+});
+// ---------------------------------------------------------------------------
+// 툴팁: 정의 내용을 서식과 함께 보여줍니다.
+// 별도 마크다운 라이브러리 대신 이미 파싱된 구문 트리로 DOM을 만듭니다.
+// (==하이라이트==, --밑줄--, 해시태그 등 이 프로젝트의 확장 문법도 그대로 반영)
+// ---------------------------------------------------------------------------
+/** 툴팁에서 그리지 않는 기호 노드 */
+const TOOLTIP_SKIP = new Set([
+    "EmphasisMark",
+    "CodeMark",
+    "LinkMark",
+    "HighlightMark",
+    "UnderlineMark",
+    "StrikethroughMark",
+    "SuperscriptMark",
+    "SubscriptMark",
+    "FootnoteMark",
+    "URL",
+    "LinkTitle",
+    "LinkLabel",
+]);
+/** 노드 → HTML 태그 */
+const TOOLTIP_TAGS = {
+    StrongEmphasis: "strong",
+    Emphasis: "em",
+    Strikethrough: "s",
+    Highlight: "mark",
+    Underline: "u",
+    InlineCode: "code",
+    Superscript: "sup",
+    Subscript: "sub",
+};
+/** 마크다운의 줄바꿈(소프트 줄바꿈)은 공백으로 보여줍니다. */
+const appendText = (parent, text) => {
+    if (text)
+        parent.appendChild(document.createTextNode(text.replace(/[ \t]*\n[ \t]*/g, " ")));
+};
+/** node의 [from, to] 범위를 자식 노드와 그 사이 글자로 나눠 그립니다. */
+function renderRange(state, node, from, to, parent) {
+    let pos = from;
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.to <= from || child.from >= to)
+            continue;
+        if (child.from > pos)
+            appendText(parent, state.doc.sliceString(pos, child.from));
+        renderNode(state, child, parent);
+        pos = Math.max(pos, child.to);
+    }
+    if (pos < to)
+        appendText(parent, state.doc.sliceString(pos, to));
+}
+function renderNode(state, node, parent) {
+    const { name } = node;
+    if (TOOLTIP_SKIP.has(name))
+        return;
+    if (name === "Escape")
+        return appendText(parent, state.doc.sliceString(node.from + 1, node.to));
+    if (name === "HardBreak")
+        return void parent.appendChild(document.createElement("br"));
+    if (name === "FootnoteReference") {
+        const label = node.getChild("FootnoteLabel");
+        const sup = document.createElement("sup");
+        sup.className = "cm-footnote-tooltip-ref";
+        if (label)
+            sup.textContent = state.doc.sliceString(label.from, label.to);
+        return void parent.appendChild(sup);
+    }
+    if (name === "Link") {
+        const link = readInlineLink(state, node);
+        const a = document.createElement("a");
+        a.className = "cm-footnote-tooltip-link";
+        // 안전한 주소만 링크로 만듭니다. (javascript: 등은 글자만 표시)
+        if (link && isSafeUrl(link.href)) {
+            a.href = link.href;
+            a.target = "_blank";
+            a.rel = "noopener noreferrer";
+        }
+        if (link)
+            renderRange(state, node, link.labelFrom, link.labelTo, a);
+        else
+            renderRange(state, node, node.from, node.to, a);
+        return void parent.appendChild(a);
+    }
+    if (name === "Image") {
+        // 툴팁에는 이미지 대신 캡션(대체 텍스트)을 보여줍니다.
+        const image = readImage(state, node);
+        const span = document.createElement("span");
+        span.className = "cm-footnote-tooltip-image";
+        span.textContent = image?.caption || "이미지";
+        return void parent.appendChild(span);
+    }
+    const el = document.createElement(TOOLTIP_TAGS[name] ?? "span");
+    if (!TOOLTIP_TAGS[name])
+        el.className = `cm-footnote-tooltip-${name.toLowerCase()}`;
+    renderRange(state, node, node.from, node.to, el);
+    parent.appendChild(el);
+}
+function definitionNode(state, def) {
+    for (let n = syntaxTree(state).resolveInner(def.from, 1); n; n = n.parent) {
+        if (n.name === "FootnoteDefinition")
+            return n;
+    }
+    return null;
+}
+/** 각주 정의 내용을 서식이 반영된 DOM으로 그립니다. 정의가 없으면 null */
+export function renderFootnoteDefinition(state, label) {
+    const def = footnoteDefinitions(state).get(normalize(label));
+    const node = def && definitionNode(state, def);
+    if (!def || !node)
+        return null;
+    const dom = document.createElement("div");
+    dom.className = "cm-footnote-tooltip-content";
+    renderRange(state, node, def.contentFrom, def.to, dom);
+    return dom;
+}
+/** pos(마우스 위치)에 각주 참조가 있으면 그 정의를 보여주는 툴팁 */
+export function footnoteTooltipAt(state, pos, side = 1) {
+    let ref = null;
+    for (let n = syntaxTree(state).resolveInner(pos, side); n; n = n.parent) {
+        if (n.name === "FootnoteReference") {
+            ref = n;
+            break;
+        }
+    }
+    if (!ref)
+        return null;
+    const label = labelOf(state, ref) ?? "";
+    return {
+        pos: ref.from,
+        end: ref.to,
+        above: true,
+        create() {
+            const dom = document.createElement("div");
+            dom.className = "cm-footnote-tooltip";
+            const content = renderFootnoteDefinition(state, label);
+            if (content) {
+                dom.appendChild(content);
+            }
+            else {
+                dom.classList.add("cm-footnote-tooltip-missing");
+                dom.textContent = "정의되지 않은 각주";
+            }
+            return { dom };
+        },
+    };
+}
+const footnoteHover = hoverTooltip((view, pos, side) => footnoteTooltipAt(view.state, pos, side), {
+    hideOnChange: true,
+});
+// ---------------------------------------------------------------------------
+// 클릭: 참조 → 정의, 정의 라벨 → 첫 참조
+// ---------------------------------------------------------------------------
+/** pos 위치의 노드에서 위로 올라가며 name인 노드를 찾습니다. */
+function ancestor(state, pos, name) {
+    for (let n = syntaxTree(state).resolveInner(pos, 1); n; n = n.parent) {
+        if (n.name === name)
+            return n;
+    }
+    return null;
+}
+function labelOf(state, node) {
+    const label = node.getChild("FootnoteLabel");
+    return label ? normalize(state.doc.sliceString(label.from, label.to)) : null;
+}
+/** 라벨의 첫 참조 위치 (클릭할 때만 문서 전체를 훑습니다) */
+function firstReference(state, label) {
+    let found = null;
+    syntaxTree(state).iterate({
+        enter(node) {
+            if (found)
+                return false;
+            if (SKIP_CHILDREN.has(node.name))
+                return false;
+            if (node.name === "FootnoteReference") {
+                if (labelOf(state, node.node) === label)
+                    found = node.node;
+                return false;
+            }
+        },
+    });
+    return found;
+}
+function jump(view, pos) {
+    view.dispatch({
+        selection: EditorSelection.cursor(pos),
+        effects: EditorView.scrollIntoView(pos, { y: "center" }),
+        userEvent: "select.footnote",
+    });
+    view.focus();
+}
+const footnoteEvents = EditorView.domEventHandlers({
+    mousedown(event, view) {
+        if (event.button !== 0)
+            return false;
+        const target = event.target;
+        const ref = target?.closest?.(".cm-footnote-ref");
+        const def = target?.closest?.(".cm-footnote-def-label");
+        const el = ref ?? def;
+        if (!el || !view.contentDOM.contains(el))
+            return false;
+        const { state } = view;
+        const pos = view.posAtDOM(el);
+        if (ref) {
+            // 참조 → 정의 내용 시작으로 이동
+            const node = ancestor(state, pos, "FootnoteReference");
+            const label = node && labelOf(state, node);
+            const target = label ? footnoteDefinitions(state).get(label) : undefined;
+            if (!target)
+                return false; // 정의가 없으면 일반 클릭(커서 이동)
+            event.preventDefault();
+            jump(view, target.contentFrom);
+            return true;
+        }
+        // 정의 라벨 → 첫 참조 뒤로 이동
+        const node = ancestor(state, pos, "FootnoteDefinition");
+        const label = node && labelOf(state, node);
+        const reference = label ? firstReference(state, label) : null;
+        if (!reference)
+            return false;
+        event.preventDefault();
+        jump(view, reference.to);
+        return true;
+    },
+});
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const footnoteTheme = EditorView.baseTheme({
+    ".cm-footnote-ref": {
+        verticalAlign: "super",
+        fontSize: "0.75em",
+        lineHeight: "0",
+        fontWeight: "bold",
+        margin: "0 2px",
+        cursor: "pointer",
+    },
+    "&light .cm-footnote-ref": { color: "#2563eb" },
+    "&dark .cm-footnote-ref": { color: "#60a5fa" },
+    ".cm-footnote-ref-missing": {
+        color: "#dc2626 !important",
+        cursor: "text",
+    },
+    ".cm-footnote-def-label": {
+        fontWeight: "bold",
+        cursor: "pointer",
+        marginRight: "0.5em",
+    },
+    ".cm-footnote-def-label::after": {
+        content: '"."',
+    },
+    // 정의: 본문보다 살짝 작은 글자, 묶음 첫 줄 위에 구분선.
+    // CodeMirror는 줄 높이를 직접 재므로 줄에 margin을 쓸 수 없습니다. 그래서 위쪽 padding으로 자리를 만들고,
+    // 구분선은 배경으로 그 가운데쯤(위 본문과 간격을 두고)에 그립니다.
+    ".cm-footnote-def-line": {
+        fontSize: "0.875em",
+    },
+    "&light .cm-footnote-def-line": { color: "#4b5563" },
+    "&dark .cm-footnote-def-line": { color: "#9ca3af" },
+    ".cm-footnote-defs-start": {
+        paddingTop: "1.25em",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 1px",
+        backgroundPosition: "0 0.75em",
+    },
+    // 거터의 글자 크기는 본문 기준이므로 정의 글자 크기(0.875em)를 곱한 값으로 맞춥니다.
+    ".cm-gutterElement.cm-footnote-defs-start-gutter": { paddingTop: "calc(1.25em * 0.875)" },
+    "&light .cm-footnote-defs-start": { backgroundImage: "linear-gradient(#e5e7eb, #e5e7eb)" },
+    "&dark .cm-footnote-defs-start": { backgroundImage: "linear-gradient(#374151, #374151)" },
+    // 툴팁
+    ".cm-tooltip.cm-footnote-tooltip": {
+        padding: "6px 10px",
+        maxWidth: "360px",
+        fontSize: "0.875em",
+        lineHeight: "1.5",
+        whiteSpace: "normal",
+    },
+    ".cm-footnote-tooltip code": {
+        fontFamily: "monospace",
+        backgroundColor: "rgba(135, 131, 120, 0.15)",
+        borderRadius: "3px",
+        padding: "0 3px",
+    },
+    ".cm-footnote-tooltip mark": {
+        backgroundColor: "rgba(255, 177, 80, 0.3)",
+        color: "inherit",
+    },
+    ".cm-footnote-tooltip-missing": {
+        color: "#dc2626",
+    },
+});
+/**
+ * 각주(`[^label]` 참조, `[^label]: 내용` 정의)를 하이브리드 방식으로 보여주는 확장입니다.
+ * - 참조는 라벨을 위첨자로 보여주고, 마우스를 올리면 정의 내용을 서식이 반영된 툴팁으로 보여줍니다.
+ * - 정의는 본문보다 작은 글자로 보여주고, 연속된 정의 묶음 위에 구분선을 그립니다.
+ *   정의가 없는 참조는 별도 스타일(cm-footnote-ref-missing)로 표시합니다.
+ * - 참조를 클릭하면 정의로, 정의 라벨을 클릭하면 첫 참조로 이동합니다.
+ * - 커서가 기호에 닿으면 원문을 보여줍니다. (정의는 라벨 부분 `[^label]:`에 닿을 때)
+ * - extendedMarkdown()에 포함된 Footnote 문법이 필요합니다.
+ */
+// ---------------------------------------------------------------------------
+// 거터: 정의 묶음 첫 줄은 위쪽 여백(구분선 자리)만큼 줄 번호도 내립니다.
+// ---------------------------------------------------------------------------
+const defsStartGutterMarker = new (class extends GutterMarker {
+    elementClass = "cm-footnote-defs-start-gutter";
+})();
+/** 정의 묶음 첫 줄들 (정의는 문서 최상위에만 있으므로 최상위 블록만 훑습니다) */
+function defsStartLines(state) {
+    const ranges = [];
+    const cursor = syntaxTree(state).cursor();
+    let prevIsDef = false;
+    if (cursor.firstChild()) {
+        do {
+            const isDef = cursor.type.is("FootnoteDefinition");
+            if (isDef && !prevIsDef)
+                ranges.push(defsStartGutterMarker.range(state.doc.lineAt(cursor.from).from));
+            prevIsDef = isDef;
+        } while (cursor.nextSibling());
+    }
+    return RangeSet.of(ranges);
+}
+const defsStartGutter = StateField.define({
+    create: defsStartLines,
+    update: (value, tr) => tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState) ? defsStartLines(tr.state) : value,
+    provide: (field) => gutterLineClass.from(field),
+});
+export function footnote() {
+    return [footnotePlugin, defsStartGutter, footnoteEvents, footnoteHover, footnoteTheme];
+}

package/dist/footnoteSyntax.d.ts

@@ -0,0 +1,23 @@
+import type { MarkdownConfig } from "@lezer/markdown";
+/**
+ * 각주 문법입니다.
+ *
+ * 참조 `[^label]`:
+ * ```
+ * FootnoteReference
+ *   FootnoteMark   "[^"
+ *   FootnoteLabel  "label"
+ *   FootnoteMark   "]"
+ * ```
+ * 정의 `[^label]: 내용` (최상위 문단, 내용은 인라인 문법으로 파싱):
+ * ```
+ * FootnoteDefinition
+ *   FootnoteMark   "[^"
+ *   FootnoteLabel  "label"
+ *   FootnoteMark   "]:"
+ *   ...내용
+ * ```
+ * - 라벨: 공백, `[`, `]`, `^`를 제외한 문자 (`1`, `note-1`, `각주` 등)
+ * - 정의는 하나의 문단입니다. (빈 줄 뒤 들여쓴 여러 문단 각주는 지원하지 않습니다)
+ */
+export declare const Footnote: MarkdownConfig;

package/dist/footnoteSyntax.js

@@ -0,0 +1,107 @@
+const OpenBracket = 91; // "["
+const CloseBracket = 93; // "]"
+const Caret = 94; // "^"
+/** 라벨에 올 수 없는 문자: 공백, [, ], ^ */
+function isLabelBreak(code) {
+    if (code === OpenBracket || code === CloseBracket || code === Caret)
+        return true;
+    if (code <= 32)
+        return true;
+    return code >= 128 && /\s/.test(String.fromCharCode(code));
+}
+/** 정의: 문단이 `[^label]:`로 시작 */
+const DEFINITION_RE = /^\[\^([^\s[\]^]+)\]:/;
+class FootnoteDefinitionParser {
+    nextLine(_cx, _line, leaf) {
+        // 각주 정의 문단은 이 파서가 맡습니다. 뒤에 등록된 파서(링크 참조 정의 등)가
+        // 다음 줄에서 블록을 먼저 끝내지 않도록 제거합니다. (이 파서가 먼저 호출되므로 제거된 파서는 호출되지 않음)
+        if (leaf.parsers.length > 1)
+            leaf.parsers.splice(0, leaf.parsers.length, this);
+        // 이어지는 줄(빈 줄 전까지)은 모두 정의 내용입니다.
+        return false;
+    }
+    finish(cx, leaf) {
+        const match = DEFINITION_RE.exec(leaf.content);
+        if (!match)
+            return false;
+        const start = leaf.start;
+        const labelTo = start + 2 + match[1].length;
+        const markTo = labelTo + 2; // "]:"
+        cx.addLeafElement(leaf, cx.elt("FootnoteDefinition", start, start + leaf.content.length, [
+            cx.elt("FootnoteMark", start, start + 2),
+            cx.elt("FootnoteLabel", start + 2, labelTo),
+            cx.elt("FootnoteMark", labelTo, markTo),
+            ...cx.parser.parseInline(leaf.content.slice(markTo - start), markTo),
+        ]));
+        return true;
+    }
+}
+/**
+ * 각주 문법입니다.
+ *
+ * 참조 `[^label]`:
+ * ```
+ * FootnoteReference
+ *   FootnoteMark   "[^"
+ *   FootnoteLabel  "label"
+ *   FootnoteMark   "]"
+ * ```
+ * 정의 `[^label]: 내용` (최상위 문단, 내용은 인라인 문법으로 파싱):
+ * ```
+ * FootnoteDefinition
+ *   FootnoteMark   "[^"
+ *   FootnoteLabel  "label"
+ *   FootnoteMark   "]:"
+ *   ...내용
+ * ```
+ * - 라벨: 공백, `[`, `]`, `^`를 제외한 문자 (`1`, `note-1`, `각주` 등)
+ * - 정의는 하나의 문단입니다. (빈 줄 뒤 들여쓴 여러 문단 각주는 지원하지 않습니다)
+ */
+export const Footnote = {
+    defineNodes: [
+        { name: "FootnoteReference" },
+        { name: "FootnoteDefinition", block: true },
+        { name: "FootnoteMark" },
+        { name: "FootnoteLabel" },
+    ],
+    parseInline: [
+        {
+            name: "FootnoteReference",
+            parse(cx, next, pos) {
+                // 핫 패스: 모든 문자 위치마다 호출되므로 첫 비교로 즉시 빠져나갑니다.
+                if (next !== OpenBracket || cx.char(pos + 1) !== Caret)
+                    return -1;
+                let end = pos + 2;
+                while (end < cx.end && !isLabelBreak(cx.char(end)))
+                    end++;
+                if (end === pos + 2 || cx.char(end) !== CloseBracket)
+                    return -1;
+                return cx.addElement(cx.elt("FootnoteReference", pos, end + 1, [
+                    cx.elt("FootnoteMark", pos, pos + 2),
+                    cx.elt("FootnoteLabel", pos + 2, end),
+                    cx.elt("FootnoteMark", end, end + 1),
+                ]));
+            },
+            // 링크(`[`)보다 먼저 처리해야 `[^1]`이 링크로 해석되지 않습니다.
+            before: "Link",
+        },
+    ],
+    parseBlock: [
+        {
+            name: "FootnoteDefinition",
+            leaf(cx, leaf) {
+                // 정의는 최상위 문단에서만 인식합니다.
+                return cx.parentType().name === "Document" && DEFINITION_RE.test(leaf.content)
+                    ? new FootnoteDefinitionParser()
+                    : null;
+            },
+            // 빈 줄 없이 연속한 정의(`[^1]: …` 다음 줄에 `[^2]: …`)를 따로 인식하도록,
+            // `[^label]:`로 시작하는 줄이 앞 문단(또는 앞 정의)을 끝내게 합니다.
+            endLeaf(cx, line) {
+                return cx.parentType().name === "Document" && DEFINITION_RE.test(line.text.slice(line.pos));
+            },
+            // 링크 참조 정의(`[label]: url`)보다 먼저 처리합니다.
+            before: "LinkReference",
+        },
+    ],
+};

package/dist/hashtag.d.ts

@@ -0,0 +1,4 @@
+import type { Extension } from "@codemirror/state";
+export declare const hashtagPlugin: import("@codemirror/view").ViewPlugin<import("./extensions.js").RevealPluginValue, undefined>;
+/** `#tag` 해시태그에 스타일을 적용하는 확장입니다. */
+export declare function hashtag(): Extension;

package/dist/hashtag.js

@@ -0,0 +1,64 @@
+import { Decoration, EditorView } from "@codemirror/view";
+import { createRevealPlugin } from "./utils/reveal.js";
+// 데코레이션 객체는 모듈 로드 시 한 번만 만들고 재사용합니다.
+const begin = Decoration.mark({ class: "cm-hashtag cm-hashtag-begin" });
+const end = Decoration.mark({ class: "cm-hashtag cm-hashtag-end" });
+const beginRevealed = Decoration.mark({
+    class: "cm-formatting cm-formatting-hashtag cm-hashtag cm-hashtag-begin",
+});
+const endRevealed = Decoration.mark({
+    class: "cm-formatting cm-formatting-hashtag cm-hashtag cm-hashtag-end",
+});
+/** 계층 구분자 '/' (테마에서 따로 꾸미기 위한 훅) */
+const separator = Decoration.mark({ class: "cm-hashtag-separator" });
+/** 해시태그가 올 수 없으므로 자식 순회를 생략하는 노드 */
+const SKIP_CHILDREN = new Set([
+    "FencedCode",
+    "CodeBlock",
+    "InlineCode",
+    "HTMLBlock",
+    "CommentBlock",
+    "URL",
+    "Autolink",
+]);
+export const hashtagPlugin = createRevealPlugin({
+    // 문서 순서대로(태그 시작 → 본문 → 본문 안의 구분자) 추가되므로 정렬이 필요 없습니다.
+    visit({ decorations, isRevealed }) {
+        return {
+            enter(node) {
+                if (node.name === "Hashtag") {
+                    const revealed = isRevealed(node.from, node.to);
+                    // 파서가 HashtagMark를 항상 '#' 한 글자로 만듭니다.
+                    decorations.push((revealed ? beginRevealed : begin).range(node.from, node.from + 1), (revealed ? endRevealed : end).range(node.from + 1, node.to));
+                    return; // 계층 구분자를 찾기 위해 자식을 순회합니다.
+                }
+                if (node.name === "HashtagSeparator") {
+                    decorations.push(separator.range(node.from, node.to));
+                    return false;
+                }
+                if (SKIP_CHILDREN.has(node.name))
+                    return false;
+            },
+        };
+    },
+});
+const hashtagTheme = EditorView.baseTheme({
+    ".cm-hashtag": {
+        backgroundColor: "#008CFF",
+        // `.cm-hashtag *`로 지정하면 안쪽 span이 있을 때만 적용되어
+        // (구문 강조 span이 없으면 적용되지 않음) 글자 크기가 들쭉날쭉해지므로 직접 지정합니다.
+        fontSize: "0.75rem",
+    },
+    ".cm-hashtag.cm-hashtag-begin": {
+        borderRadius: "2px 0 0 2px",
+        padding: "1px 0 1px 4px",
+    },
+    ".cm-hashtag.cm-hashtag-end": {
+        borderRadius: "0 2px 2px 0",
+        padding: "1px 4px 1px 0",
+    },
+});
+/** `#tag` 해시태그에 스타일을 적용하는 확장입니다. */
+export function hashtag() {
+    return [hashtagPlugin, hashtagTheme];
+}