mdsquare 0.1.0 → 0.3.0

package/dist/footnote.js

@@ -1,9 +1,9 @@
 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 { EditorSelection, EditorState, Facet, RangeSet, StateEffect, StateField, Prec, Transaction, } from "@codemirror/state";
+import { Decoration, EditorView, GutterMarker, gutterLineClass, hoverTooltip, keymap, } from "@codemirror/view";
+import { FOOTNOTE_INDENT } from "./footnoteSyntax.js";
 import { createRevealPlugin } from "./utils/reveal.js";
+import { displayWidth } from "./utils/textWidth.js";
 /** 라벨 비교는 대소문자를 구분하지 않습니다. */
 const normalize = (label) => label.toLowerCase();
 const TOOLTIP_MAX = 200;
@@ -52,9 +52,42 @@ export function footnoteDefinitions(state) {
 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" });
+/**
+ * 정의 줄 (클래스 조합별로 재사용). 정의의 모든 줄에 cm-footnote-def-line(왼쪽 레일)이 붙고,
+ * 첫 줄에는 cm-footnote-def-first(위 간격), 묶음 첫 줄에는 cm-footnote-defs-start(구분선),
+ * 배지를 따로 한 줄에 그리는 정의의 첫 줄에는 cm-footnote-def-head가 붙습니다.
+ */
+const defLineCache = new Map();
+function defLine(extra) {
+    let deco = defLineCache.get(extra);
+    if (!deco)
+        defLineCache.set(extra, (deco = Decoration.line({ class: `cm-footnote-def-line${extra}` })));
+    return deco;
+}
+/** 배지를 첫 줄 안에 둘 수 있는 라벨 폭 (배지 3칸 + 간격 1칸 = 이어지는 줄의 들여쓰기 4칸) */
+const INLINE_LABEL_WIDTH = 2;
+// 마우스를 올린 정의(레일을 진하게)와 참조에서 이동해 온 정의(잠깐 반짝임)
+const setHoveredFootnote = StateEffect.define();
+const setFlashedFootnote = StateEffect.define();
+const footnoteUi = StateField.define({
+    create: () => ({ hover: -1, flash: -1 }),
+    update(value, tr) {
+        let { hover, flash } = value;
+        if (tr.docChanged) {
+            if (hover >= 0)
+                hover = tr.changes.mapPos(hover);
+            if (flash >= 0)
+                flash = tr.changes.mapPos(flash);
+        }
+        for (const e of tr.effects) {
+            if (e.is(setHoveredFootnote))
+                hover = e.value;
+            else if (e.is(setFlashedFootnote))
+                flash = e.value;
+        }
+        return hover === value.hover && flash === value.flash ? value : { hover, flash };
+    },
+});
 const defLabel = Decoration.mark({ class: "cm-footnote-def-label" });
 /** 참조 라벨 (툴팁은 hoverTooltip이 담당하므로 title 속성을 쓰지 않습니다) */
 const refLabel = Decoration.mark({ class: "cm-footnote-ref" });
@@ -79,8 +112,12 @@ function partsOf(node) {
 export const footnotePlugin = createRevealPlugin({
     // 정의 줄 데코레이션과 기호/참조 데코레이션이 섞일 수 있으므로 정렬합니다.
     sort: true,
+    // 마우스를 올린 정의, 반짝이는 정의가 바뀌면 다시 그립니다.
+    rebuildOn: (update) => update.startState.field(footnoteUi, false) !== update.state.field(footnoteUi, false),
     visit({ state, decorations, isRevealed }) {
-        const defs = footnoteDefinitions(state);
+        const ui = state.field(footnoteUi, false);
+        // 미리보기 에디터 안의 참조는 원래 문서의 정의를 봅니다.
+        const defs = footnoteDefinitions(sourceOf(state));
         return {
             enter(node) {
                 if (node.name === "FootnoteReference") {
@@ -102,22 +139,31 @@ export const footnotePlugin = createRevealPlugin({
                     if (!parts)
                         return false;
                     const [open, label, close] = parts;
-                    // 정의의 모든 줄(이어지는 줄 포함)에 정의 스타일을 적용하고,
-                    // 연속된 정의 묶음의 첫 줄에는 본문과 구분하는 구분선을 그립니다.
                     const { doc } = state;
+                    // 내용을 입력하는 동안 기호가 펼쳐지지 않도록, 라벨 부분([^label]:)에 닿을 때만 원문을 보여줍니다.
+                    const revealed = isRevealed(open.from, close.to);
+                    // 정의의 모든 줄(이어지는 줄 포함)에 왼쪽 레일을 긋고, 정의마다 위에 간격을 둡니다.
+                    // 연속된 정의 묶음의 첫 줄에는 본문과 구분하는 구분선을 그립니다.
                     const groupStart = node.node.prevSibling?.name !== "FootnoteDefinition";
                     const firstLine = doc.lineAt(node.from).number;
                     const lastLine = doc.lineAt(node.to).number;
+                    // 라벨이 길어 배지가 들여쓰기(4칸)에 들어가지 않으면, 여러 줄 정의는 배지를 따로 한 줄에 그려
+                    // 내용이 모두 같은 열에서 시작하게 합니다. (한 줄 정의는 배지 옆에 이어 씀)
+                    const head = !revealed &&
+                        lastLine > firstLine &&
+                        displayWidth(doc.sliceString(label.from, label.to)) > INLINE_LABEL_WIDTH;
+                    const state_ = `${ui?.hover === node.from ? " cm-footnote-def-hover" : ""}${ui?.flash === node.from ? " cm-footnote-def-flash" : ""}`;
+                    const first = ` cm-footnote-def-first${groupStart ? " cm-footnote-defs-start" : ""}${head ? " cm-footnote-def-head" : ""}`;
                     for (let n = firstLine; n <= lastLine; n++) {
-                        const deco = n === firstLine && groupStart ? defLineGroupStart : defLine;
-                        decorations.push(deco.range(doc.line(n).from));
+                        decorations.push(defLine((n === firstLine ? first : "") + state_).range(doc.line(n).from));
                     }
-                    // 내용을 입력하는 동안 기호가 펼쳐지지 않도록, 라벨 부분([^label]:)에 닿을 때만 원문을 보여줍니다.
-                    if (isRevealed(open.from, close.to)) {
+                    if (revealed) {
                         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));
+                        // `]:` 뒤의 공백 하나도 숨깁니다. (배지와 내용 사이 간격은 CSS로 1칸)
+                        const next = doc.sliceString(close.to, close.to + 1);
+                        decorations.push(hidden.range(open.from, open.to), defLabel.range(label.from, label.to), hidden.range(close.from, next === " " || next === "\t" ? close.to + 1 : close.to));
                     }
                     return; // 정의 내용 안의 각주 참조도 처리합니다.
                 }
@@ -128,118 +174,51 @@ export const footnotePlugin = createRevealPlugin({
     },
 });
 // ---------------------------------------------------------------------------
-// 툴팁: 정의 내용을 서식과 함께 보여줍니다.
-// 별도 마크다운 라이브러리 대신 이미 파싱된 구문 트리로 DOM을 만듭니다.
-// (==하이라이트==, --밑줄--, 해시태그 등 이 프로젝트의 확장 문법도 그대로 반영)
+// 툴팁: 각주 내용을 읽기 전용 작은 에디터로 보여줍니다.
+// 본문 에디터의 상태(설정)를 그대로 이어받고 문서만 각주 내용으로 바꾸므로,
+// 켜져 있는 기능(표, 수식, TikZ, 코드 강조, 이미지 주소 변환, 테마 등)이 본문과 똑같이 그려집니다.
 // ---------------------------------------------------------------------------
-/** 툴팁에서 그리지 않는 기호 노드 */
-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));
+/** 미리보기 에디터가 각주 정의를 찾을 원래 문서 (미리보기 안의 각주 참조도 원래 문서의 정의를 씀) */
+const footnoteSource = Facet.define({ combine: (values) => values[0] ?? null });
+/** 각주 정의를 찾을 상태 (미리보기 에디터면 원래 문서) */
+const sourceOf = (state) => state.facet(footnoteSource) ?? state;
+/** 각주 미리보기 에디터인지 */
+export function isFootnotePreview(state) {
+    return state.facet(footnoteSource) !== null;
 }
-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) {
+/**
+ * 각주 정의 내용 (첫 줄은 `[^label]: ` 뒤부터, 이어지는 줄은 4칸 들여쓰기를 뺀 글).
+ * 정의가 없으면 null
+ */
+export function footnoteContent(state, label) {
     const def = footnoteDefinitions(state).get(normalize(label));
-    const node = def && definitionNode(state, def);
-    if (!def || !node)
+    if (!def)
         return null;
-    const dom = document.createElement("div");
-    dom.className = "cm-footnote-tooltip-content";
-    renderRange(state, node, def.contentFrom, def.to, dom);
-    return dom;
+    const lines = state.doc.sliceString(def.contentFrom, def.to).split("\n");
+    return lines.map((line, i) => (i === 0 ? line : line.replace(/^(?: {1,4}|\t)/, ""))).join("\n");
+}
+/** 미리보기의 마지막 빈 줄 (커서를 두는 곳, 화면에서는 숨김) */
+const previewTailLine = Decoration.line({ class: "cm-footnote-preview-tail" });
+const previewTail = EditorView.decorations.compute(["doc"], (state) => Decoration.set(previewTailLine.range(state.doc.line(state.doc.lines).from)));
+/**
+ * 각주 미리보기용 상태: state의 설정을 그대로 쓰고 문서만 content로 바꿉니다. (읽기 전용)
+ * 커서는 끝에 덧붙인 빈 줄에 둬서 어떤 블록도 원문으로 펼쳐지지 않게 합니다.
+ */
+export function footnotePreviewState(state, content) {
+    const doc = `${content}\n`;
+    return state.update({
+        changes: { from: 0, to: state.doc.length, insert: doc },
+        selection: EditorSelection.cursor(doc.length),
+        effects: StateEffect.appendConfig.of([
+            EditorState.readOnly.of(true),
+            EditorView.editable.of(false),
+            footnoteSource.of(sourceOf(state)),
+            previewTail,
+        ]),
+        // 본문용 입력 보정(표 가장자리 보호 등)이 문서 교체를 바꾸지 않도록 합니다.
+        filter: false,
+        annotations: Transaction.addToHistory.of(false),
+    }).state;
 }
 /** pos(마우스 위치)에 각주 참조가 있으면 그 정의를 보여주는 툴팁 */
 export function footnoteTooltipAt(state, pos, side = 1) {
@@ -260,15 +239,41 @@ export function footnoteTooltipAt(state, pos, side = 1) {
         create() {
             const dom = document.createElement("div");
             dom.className = "cm-footnote-tooltip";
-            const content = renderFootnoteDefinition(state, label);
-            if (content) {
-                dom.appendChild(content);
-            }
-            else {
+            // 머리: 각주 라벨 배지 + "각주"
+            const header = document.createElement("div");
+            header.className = "cm-footnote-tooltip-header";
+            const badge = document.createElement("span");
+            badge.className = "cm-footnote-tooltip-badge";
+            badge.textContent = label;
+            const title = document.createElement("span");
+            title.textContent = "각주";
+            header.append(badge, title);
+            dom.appendChild(header);
+            // 참조와 툴팁 사이 간격 (위로 뜨면 위로, 아래로 뜨면 아래로 밀림)
+            const offset = { x: 0, y: 6 };
+            const content = footnoteContent(sourceOf(state), label);
+            if (content === null) {
                 dom.classList.add("cm-footnote-tooltip-missing");
-                dom.textContent = "정의되지 않은 각주";
+                const message = document.createElement("div");
+                message.className = "cm-footnote-tooltip-message";
+                message.textContent = "정의되지 않은 각주입니다.";
+                dom.appendChild(message);
+                return { dom, offset };
             }
-            return { dom };
+            // 여러 줄(문단, 표, 수식 등 블록)이면 넓게, 한 줄이면 내용 너비만큼
+            if (content.includes("\n"))
+                dom.classList.add("cm-footnote-tooltip-wide");
+            const box = document.createElement("div");
+            box.className = "cm-footnote-preview";
+            dom.appendChild(box);
+            const preview = new EditorView({ state: footnotePreviewState(state, content), parent: box });
+            return {
+                dom,
+                offset,
+                // 화면에 붙은 뒤 크기를 다시 잽니다.
+                mount: () => preview.requestMeasure(),
+                destroy: () => preview.destroy(),
+            };
         },
     };
 }
@@ -308,15 +313,51 @@ function firstReference(state, label) {
     });
     return found;
 }
-function jump(view, pos) {
+/** 반짝임 시간 (테마의 애니메이션 길이와 같음) */
+const FLASH_MS = 1200;
+/** pos로 이동합니다. flash가 있으면 그 위치에서 시작하는 정의를 잠깐 반짝입니다. */
+function jump(view, pos, flash = -1) {
     view.dispatch({
         selection: EditorSelection.cursor(pos),
-        effects: EditorView.scrollIntoView(pos, { y: "center" }),
+        effects: [EditorView.scrollIntoView(pos, { y: "center" }), setFlashedFootnote.of(flash)],
         userEvent: "select.footnote",
     });
     view.focus();
+    if (flash < 0)
+        return;
+    const token = (flashTokens.get(view) ?? 0) + 1;
+    flashTokens.set(view, token);
+    setTimeout(() => {
+        // 그사이 다시 이동했거나(새 반짝임) 에디터가 닫혔으면 건드리지 않습니다.
+        if (flashTokens.get(view) === token && view.dom.isConnected) {
+            view.dispatch({ effects: setFlashedFootnote.of(-1) });
+        }
+    }, FLASH_MS);
+}
+/** 에디터별 마지막 반짝임 번호 */
+const flashTokens = new WeakMap();
+/** 마우스를 올린 정의를 기록합니다. (바뀔 때만) */
+function setHover(view, hover) {
+    if ((view.state.field(footnoteUi, false)?.hover ?? -1) !== hover) {
+        view.dispatch({ effects: setHoveredFootnote.of(hover) });
+    }
 }
 const footnoteEvents = EditorView.domEventHandlers({
+    mousemove(event, view) {
+        const line = event.target?.closest?.(".cm-line");
+        let hover = -1;
+        if (line?.classList.contains("cm-footnote-def-line") && view.contentDOM.contains(line)) {
+            const def = topLevelAt(view.state, view.posAtDOM(line));
+            if (def?.name === "FootnoteDefinition")
+                hover = def.from;
+        }
+        setHover(view, hover);
+        return false;
+    },
+    mouseleave(_event, view) {
+        setHover(view, -1);
+        return false;
+    },
     mousedown(event, view) {
         if (event.button !== 0)
             return false;
@@ -327,6 +368,7 @@ const footnoteEvents = EditorView.domEventHandlers({
         if (!el || !view.contentDOM.contains(el))
             return false;
         const { state } = view;
+        // (미리보기 에디터의 문서에는 정의가 없으므로 이동하지 않고 일반 클릭이 됩니다)
         const pos = view.posAtDOM(el);
         if (ref) {
             // 참조 → 정의 내용 시작으로 이동
@@ -336,7 +378,7 @@ const footnoteEvents = EditorView.domEventHandlers({
             if (!target)
                 return false; // 정의가 없으면 일반 클릭(커서 이동)
             event.preventDefault();
-            jump(view, target.contentFrom);
+            jump(view, target.contentFrom, target.from);
             return true;
         }
         // 정의 라벨 → 첫 참조 뒤로 이동
@@ -368,53 +410,188 @@ const footnoteTheme = EditorView.baseTheme({
         color: "#dc2626 !important",
         cursor: "text",
     },
+    // 정의 라벨: 둥근 배지 (툴팁 머리와 같은 모양). 최소 3칸 + 간격 1칸 = 이어지는 줄의 들여쓰기 4칸이라
+    // 짧은 라벨이면 첫 줄 내용과 이어지는 줄 내용이 같은 열에서 시작합니다.
     ".cm-footnote-def-label": {
-        fontWeight: "bold",
+        display: "inline-block",
+        boxSizing: "border-box",
+        minWidth: "3ch",
+        padding: "0 0.5ch",
+        marginRight: "1ch",
+        borderRadius: "999px",
+        textAlign: "center",
+        fontWeight: "600",
+        lineHeight: "1.45",
+        // 첫 줄에 큰 이미지·수식이 있어도 배지는 줄 위쪽에 (기준선 정렬이면 아래로 내려감)
+        verticalAlign: "top",
         cursor: "pointer",
-        marginRight: "0.5em",
     },
-    ".cm-footnote-def-label::after": {
-        content: '"."',
+    "&light .cm-footnote-def-label": { backgroundColor: "rgba(37, 99, 235, 0.1)", color: "#2563eb" },
+    "&dark .cm-footnote-def-label": { backgroundColor: "rgba(96, 165, 250, 0.16)", color: "#60a5fa" },
+    // 라벨이 긴 여러 줄 정의: 배지를 따로 한 줄에 두고 내용은 4칸 열에서 시작
+    ".cm-footnote-def-head": { paddingLeft: "calc(6px + 4ch)" },
+    ".cm-footnote-def-head .cm-footnote-def-label": {
+        display: "block",
+        width: "fit-content",
+        marginLeft: "-4ch",
+        marginRight: "0",
     },
+    // 왼쪽 레일: 정의의 모든 줄 왼쪽 끝에 옅은 세로선 (배경 그림이라 줄 높이에 영향 없음)
+    // 인용 줄은 인용 세로줄(같은 자리)을 배경으로 그리므로 레일을 그리지 않습니다.
+    "&light .cm-footnote-def-line.cm-footnote-def-hover": { "--cm-footnote-rail": "rgba(37, 99, 235, 0.6)" },
+    "&dark .cm-footnote-def-line.cm-footnote-def-hover": { "--cm-footnote-rail": "rgba(96, 165, 250, 0.7)" },
+    // 인용 줄은 배경 그림을 인용이 그리므로, 레일을 변수로 넘겨 인용이 함께 그리게 합니다. (quote.ts)
+    ".cm-footnote-def-line": {
+        "--cm-line-rail": "linear-gradient(var(--cm-footnote-rail), var(--cm-footnote-rail))",
+        "--cm-line-rail-size": "2px 100%",
+        "--cm-line-rail-pos": "0 0",
+    },
+    ".cm-footnote-def-line:not(.cm-quote-line)": {
+        backgroundImage: "linear-gradient(var(--cm-footnote-rail), var(--cm-footnote-rail))",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "2px 100%",
+        backgroundPosition: "0 0",
+    },
+    // 정의마다 위 간격 (레일은 간격 아래부터 그려 이웃 정의의 레일과 떨어지게)
+    ".cm-footnote-def-first:not(.cm-quote-line)": {
+        paddingTop: "0.6em",
+        backgroundSize: "2px calc(100% - 0.6em)",
+        backgroundPosition: "0 0.6em",
+    },
+    // 참조를 눌러 이동해 온 정의를 잠깐 반짝입니다. (안쪽 그림자라 콜아웃 배경 등 위에도 보임)
+    "@keyframes cm-footnote-flash": {
+        from: { boxShadow: "inset 0 0 0 9999px var(--cm-footnote-flash)" },
+        to: { boxShadow: "inset 0 0 0 9999px transparent" },
+    },
+    ".cm-footnote-def-flash": { animation: `cm-footnote-flash ${FLASH_MS}ms ease-out` },
     // 정의: 본문보다 살짝 작은 글자, 묶음 첫 줄 위에 구분선.
     // CodeMirror는 줄 높이를 직접 재므로 줄에 margin을 쓸 수 없습니다. 그래서 위쪽 padding으로 자리를 만들고,
     // 구분선은 배경으로 그 가운데쯤(위 본문과 간격을 두고)에 그립니다.
-    ".cm-footnote-def-line": {
+    // 코드 블록 줄은 제외: 코드 블록은 줄 글자 크기를 기준으로 들여쓰기(ch)와 숨긴 울타리 줄(0.5em)을 계산하므로
+    // 크기를 바꾸면 상자와 글이 어긋납니다.
+    ".cm-footnote-def-line:not(.cm-codeblock-line)": {
         fontSize: "0.875em",
     },
-    "&light .cm-footnote-def-line": { color: "#4b5563" },
-    "&dark .cm-footnote-def-line": { color: "#9ca3af" },
-    ".cm-footnote-defs-start": {
+    // 글자색과 레일·구분선·반짝임 색
+    "&light .cm-footnote-def-line": {
+        color: "#4b5563",
+        "--cm-footnote-rail": "rgba(37, 99, 235, 0.22)",
+        "--cm-footnote-sep": "#e5e7eb",
+        "--cm-footnote-flash": "rgba(37, 99, 235, 0.14)",
+    },
+    "&dark .cm-footnote-def-line": {
+        color: "#9ca3af",
+        "--cm-footnote-rail": "rgba(96, 165, 250, 0.28)",
+        "--cm-footnote-sep": "#374151",
+        "--cm-footnote-flash": "rgba(96, 165, 250, 0.2)",
+    },
+    // 묶음 첫 줄: 위 구분선 + 레일 (배경 그림 두 개)
+    ".cm-footnote-def-first.cm-footnote-defs-start": {
         paddingTop: "1.25em",
+        backgroundImage: "linear-gradient(var(--cm-footnote-sep), var(--cm-footnote-sep)), linear-gradient(var(--cm-footnote-rail), var(--cm-footnote-rail))",
         backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 1px",
-        backgroundPosition: "0 0.75em",
+        backgroundSize: "100% 1px, 2px calc(100% - 1.25em)",
+        backgroundPosition: "0 0.75em, 0 1.25em",
     },
     // 거터의 글자 크기는 본문 기준이므로 정의 글자 크기(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",
+    ".cm-gutterElement.cm-footnote-def-first-gutter": { paddingTop: "calc(0.6em * 0.875)" },
+    // 툴팁: 둥근 카드 + 옅은 테두리 + 부드러운 그림자, 나타날 때 살짝 떠오름.
+    // hoverTooltip은 바깥 상자(.cm-tooltip-hover) 안에 각주 툴팁(.cm-tooltip-section)을 넣으므로
+    // 카드 모양은 바깥 상자에 줍니다. (CodeMirror 기본 테두리·배경을 덮어씀)
+    "@keyframes cm-footnote-tooltip-in": {
+        from: { opacity: "0", transform: "translateY(3px) scale(0.98)" },
+        to: { opacity: "1", transform: "none" },
+    },
+    ".cm-tooltip.cm-tooltip-hover:has(> .cm-footnote-tooltip)": {
+        borderRadius: "10px",
+        overflow: "hidden",
+        animation: "cm-footnote-tooltip-in 120ms ease-out",
+    },
+    "&light .cm-tooltip.cm-tooltip-hover:has(> .cm-footnote-tooltip)": {
+        backgroundColor: "#ffffff",
+        color: "#1f2328",
+        border: "1px solid rgba(31, 35, 40, 0.1)",
+        boxShadow: "0 1px 2px rgba(31, 35, 40, 0.04), 0 4px 10px rgba(31, 35, 40, 0.06)",
+    },
+    "&dark .cm-tooltip.cm-tooltip-hover:has(> .cm-footnote-tooltip)": {
+        backgroundColor: "#25262b",
+        color: "#e6e7ea",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.25)",
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+        ".cm-tooltip.cm-tooltip-hover:has(> .cm-footnote-tooltip)": { animation: "none" },
+    },
+    // 왼쪽 여백은 미리보기 줄의 기본 왼쪽 여백(6px)만큼 줄이고, 머리를 그만큼 들여 내용과 맞춥니다.
+    ".cm-footnote-tooltip": {
+        boxSizing: "border-box",
+        padding: "10px 12px 10px 8px",
+        maxWidth: "min(480px, calc(100vw - 32px))",
+        fontSize: "0.9em",
+        lineHeight: "1.6",
         whiteSpace: "normal",
+        // 한글은 낱말(띄어쓰기) 단위로 줄바꿈하고, 긴 주소처럼 한 낱말이 넘치면 그때만 끊습니다.
+        wordBreak: "keep-all",
+        overflowWrap: "anywhere",
     },
-    ".cm-footnote-tooltip code": {
-        fontFamily: "monospace",
-        backgroundColor: "rgba(135, 131, 120, 0.15)",
-        borderRadius: "3px",
-        padding: "0 3px",
+    // 다른 확장의 hover 툴팁과 함께 뜨면 구분선
+    ".cm-tooltip-section.cm-footnote-tooltip:not(:first-child)": {
+        borderTop: "1px solid rgba(127, 127, 127, 0.2)",
     },
-    ".cm-footnote-tooltip mark": {
-        backgroundColor: "rgba(255, 177, 80, 0.3)",
-        color: "inherit",
+    ".cm-footnote-tooltip-wide": { width: "min(480px, calc(100vw - 32px))" },
+    ".cm-footnote-tooltip-message": { paddingLeft: "6px" },
+    // 미리보기 에디터: 테두리·배경·줄 번호·현재 줄 강조 없이 내용만. 길면 툴팁 안에서 스크롤.
+    ".cm-footnote-preview > .cm-editor": {
+        maxHeight: "360px",
+        minHeight: "0",
+        height: "auto",
+        border: "none",
+        backgroundColor: "transparent",
     },
-    ".cm-footnote-tooltip-missing": {
+    ".cm-footnote-preview > .cm-editor.cm-focused": { outline: "none" },
+    ".cm-footnote-preview .cm-scroller": { overflow: "auto" },
+    ".cm-footnote-preview .cm-content": { padding: "0", minHeight: "0" },
+    ".cm-footnote-preview .cm-gutters": { display: "none" },
+    ".cm-footnote-preview .cm-line.cm-activeLine": { backgroundColor: "transparent" },
+    // 커서를 두는 마지막 빈 줄은 숨깁니다.
+    ".cm-footnote-preview .cm-line.cm-footnote-preview-tail": {
+        height: "0",
+        padding: "0",
+        overflow: "hidden",
+    },
+    // 미리보기에서는 표를 고칠 수 없으므로 행/열 손잡이를 숨깁니다.
+    ".cm-footnote-preview .cm-table-handles": { display: "none" },
+    ".cm-footnote-tooltip-header": {
+        display: "flex",
+        paddingLeft: "6px",
+        alignItems: "center",
+        gap: "6px",
+        marginBottom: "6px",
+        fontSize: "0.8em",
+        fontWeight: "600",
+        letterSpacing: "0.02em",
+    },
+    "&light .cm-footnote-tooltip-header": { color: "#6b7280" },
+    "&dark .cm-footnote-tooltip-header": { color: "#9ca3af" },
+    ".cm-footnote-tooltip-badge": {
+        minWidth: "1.5em",
+        padding: "0 6px",
+        borderRadius: "999px",
+        textAlign: "center",
+        lineHeight: "1.6",
+    },
+    "&light .cm-footnote-tooltip-badge": { backgroundColor: "rgba(37, 99, 235, 0.1)", color: "#2563eb" },
+    "&dark .cm-footnote-tooltip-badge": { backgroundColor: "rgba(96, 165, 250, 0.16)", color: "#60a5fa" },
+    // 정의 없음: 배지와 안내를 빨강 계열로
+    "&light .cm-footnote-tooltip-missing .cm-footnote-tooltip-badge": {
+        backgroundColor: "rgba(220, 38, 38, 0.1)",
         color: "#dc2626",
     },
+    "&dark .cm-footnote-tooltip-missing .cm-footnote-tooltip-badge": {
+        backgroundColor: "rgba(248, 113, 113, 0.16)",
+        color: "#f87171",
+    },
 });
 /**
  * 각주(`[^label]` 참조, `[^label]: 내용` 정의)를 하이브리드 방식으로 보여주는 확장입니다.
@@ -431,6 +608,10 @@ const footnoteTheme = EditorView.baseTheme({
 const defsStartGutterMarker = new (class extends GutterMarker {
     elementClass = "cm-footnote-defs-start-gutter";
 })();
+/** 묶음 안의 다른 정의 첫 줄 (위 간격만큼 줄 번호를 내림) */
+const defFirstGutterMarker = new (class extends GutterMarker {
+    elementClass = "cm-footnote-def-first-gutter";
+})();
 /** 정의 묶음 첫 줄들 (정의는 문서 최상위에만 있으므로 최상위 블록만 훑습니다) */
 function defsStartLines(state) {
     const ranges = [];
@@ -439,8 +620,8 @@ function defsStartLines(state) {
     if (cursor.firstChild()) {
         do {
             const isDef = cursor.type.is("FootnoteDefinition");
-            if (isDef && !prevIsDef)
-                ranges.push(defsStartGutterMarker.range(state.doc.lineAt(cursor.from).from));
+            if (isDef)
+                ranges.push((prevIsDef ? defFirstGutterMarker : defsStartGutterMarker).range(state.doc.lineAt(cursor.from).from));
             prevIsDef = isDef;
         } while (cursor.nextSibling());
     }
@@ -451,6 +632,120 @@ const defsStartGutter = StateField.define({
     update: (value, tr) => tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState) ? defsStartLines(tr.state) : value,
     provide: (field) => gutterLineClass.from(field),
 });
+// ---------------------------------------------------------------------------
+// Enter: 각주 안에서 새 줄은 4칸 들여쓰기를 유지합니다.
+// ---------------------------------------------------------------------------
+/** 최상위 블록 (pos가 있는 곳) */
+function topLevelAt(state, pos) {
+    let node = syntaxTree(state).resolveInner(pos, 1);
+    while (node && node.parent && node.parent.name !== "Document")
+        node = node.parent;
+    return node && node.name !== "Document" ? node : null;
+}
+/**
+ * 줄이 각주 정의 내용 안이면 그 정의 노드.
+ * 정의 범위 안의 줄, 또는 정의 바로 뒤에 이어지는 들여쓴 빈 줄(공백만 있는 줄)이 해당합니다.
+ */
+export function footnoteAtLine(state, lineNumber) {
+    const { doc } = state;
+    const line = doc.line(lineNumber);
+    let n = lineNumber;
+    if (!line.text.trim()) {
+        while (n > 1 && !doc.line(n).text.trim())
+            n--;
+        if (!doc.line(n).text.trim())
+            return null;
+    }
+    const probe = doc.line(n);
+    const node = topLevelAt(state, probe.from + (probe.text.length - probe.text.trimStart().length));
+    if (!node || node.name !== "FootnoteDefinition")
+        return null;
+    if (line.from <= node.to)
+        return node;
+    // 정의 뒤의 빈 줄: 공백(들여쓰기)이 있을 때만 정의를 이어 쓰는 중으로 봅니다.
+    return line.text.length > 0 ? node : null;
+}
+const indentWidth = (text) => {
+    let width = 0;
+    for (const ch of text) {
+        if (ch === " ")
+            width++;
+        else if (ch === "\t")
+            width += 4 - (width % 4);
+        else
+            break;
+    }
+    return width;
+};
+/**
+ * 각주 안에서 Enter로 만든 새 줄의 들여쓰기가 4칸보다 적으면 4칸으로 채웁니다.
+ * (목록 이어쓰기, 목록 끝내기, 일반 줄바꿈 등 어떤 Enter 명령이든)
+ */
+const keepFootnoteIndent = EditorState.transactionFilter.of((tr) => {
+    if (!tr.docChanged || tr.annotation(Transaction.userEvent) !== "input")
+        return tr;
+    const start = tr.startState;
+    if (start.selection.ranges.length !== 1 || !start.selection.main.empty || tr.newSelection.ranges.length !== 1) {
+        return tr;
+    }
+    let lineBreak = false;
+    tr.changes.iterChanges((_fa, _ta, _fb, _tb, text) => {
+        if (text.lines > 1)
+            lineBreak = true;
+    });
+    if (!lineBreak)
+        return tr;
+    const pos = start.selection.main.head;
+    const oldLine = start.doc.lineAt(pos);
+    const def = footnoteAtLine(start, oldLine.number);
+    if (!def)
+        return tr;
+    // 정의 첫 줄의 `[^label]:` 앞이나 안에서 누른 Enter(정의를 쪼갬)는 그대로 둡니다.
+    const marks = def.getChildren("FootnoteMark");
+    if (pos < (marks[1]?.to ?? def.to))
+        return tr;
+    const head = tr.newSelection.main.head;
+    const line = tr.newDoc.lineAt(head);
+    if (line.from <= tr.changes.mapPos(oldLine.from))
+        return tr; // 새 줄로 가지 않음
+    const width = indentWidth(line.text);
+    if (width >= FOOTNOTE_INDENT)
+        return tr;
+    const add = " ".repeat(FOOTNOTE_INDENT - width);
+    return [tr, { changes: { from: line.from, insert: add }, selection: { anchor: head + add.length }, sequential: true }];
+});
+/**
+ * 각주 안의 들여쓴 빈 줄이 빈 줄 바로 다음이면, Enter로 들여쓰기를 지워 각주 밖으로 나갑니다.
+ * (인용에서 빈 줄 두 번으로 나가는 것과 같음)
+ */
+export const exitFootnote = ({ state, dispatch }) => {
+    const { selection, doc } = state;
+    if (selection.ranges.length !== 1 || !selection.main.empty)
+        return false;
+    const line = doc.lineAt(selection.main.head);
+    if (!line.text.length || line.text.trim() || line.number === 1)
+        return false;
+    if (doc.line(line.number - 1).text.trim())
+        return false;
+    if (!footnoteAtLine(state, line.number))
+        return false;
+    dispatch(state.update({
+        changes: { from: line.from, to: line.to },
+        selection: { anchor: line.from },
+        scrollIntoView: true,
+        userEvent: "delete",
+    }));
+    return true;
+};
 export function footnote() {
-    return [footnotePlugin, defsStartGutter, footnoteEvents, footnoteHover, footnoteTheme];
+    return [
+        footnoteUi,
+        footnotePlugin,
+        defsStartGutter,
+        footnoteEvents,
+        footnoteHover,
+        footnoteTheme,
+        keepFootnoteIndent,
+        Prec.high(keymap.of([{ key: "Enter", run: exitFootnote }])),
+    ];
 }