mdsquare 0.0.0-stage → 0.2.0

package/dist/listIndent.js

@@ -0,0 +1,335 @@
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import { Prec, } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+// ---------------------------------------------------------------------------
+// 구문 트리 도우미
+// ---------------------------------------------------------------------------
+/**
+ * 문서 끝까지 파싱된 트리 (시간 내에 끝나지 않으면 현재까지의 트리).
+ * 커서 위치까지만 파싱하면, 초기 파싱이 시간 예산(20ms) 안에 끝나지 않았을 때 같은 목록의
+ * 뒤따르는 항목(번호 다시 매기기·형제 정렬에 필요)이 트리에 없을 수 있어 문서 끝까지 확보합니다.
+ * (Tab은 한 번씩 실행되고, 보통은 백그라운드 파싱이 이미 끝나 있어 비용이 거의 없습니다)
+ */
+function fullTree(state) {
+    return ensureSyntaxTree(state, state.doc.length, 200) ?? syntaxTree(state);
+}
+const markOf = (item) => item.getChild("ListMark");
+/** 같은 목록 안에서 바로 앞의 ListItem */
+function prevItem(item) {
+    for (let n = item.prevSibling; n; n = n.prevSibling)
+        if (n.name === "ListItem")
+            return n;
+    return null;
+}
+/** 같은 목록 안에서 바로 다음 ListItem */
+function nextItem(item) {
+    for (let n = item.nextSibling; n; n = n.nextSibling)
+        if (n.name === "ListItem")
+            return n;
+    return null;
+}
+/** 목록의 ListItem 자식들 */
+function itemsOf(list) {
+    return list.getChildren("ListItem");
+}
+/** 기호(ListMark)가 해당 줄에 있는 가장 안쪽 ListItem. 없으면 null */
+function itemOnLine(tree, from, to) {
+    let mark = null;
+    tree.iterate({
+        from,
+        to,
+        enter(node) {
+            if (node.name === "ListMark" && node.from >= from && node.from <= to)
+                mark = node.node;
+        },
+    });
+    const item = mark?.parent;
+    return item && item.name === "ListItem" ? item : null;
+}
+/** pos에서 시작하는 ListMark의 ListItem */
+function itemAtMark(tree, pos) {
+    const mark = tree.resolveInner(pos, 1);
+    return mark.name === "ListMark" && mark.parent?.name === "ListItem" ? mark.parent : null;
+}
+// ---------------------------------------------------------------------------
+// 열(column) 계산 — 들여쓰기는 공백 기준입니다. (탭 문자는 한 글자로 취급)
+// ---------------------------------------------------------------------------
+/** 항목 기호의 열 */
+function markColumn(doc, item) {
+    const mark = markOf(item);
+    return mark.from - doc.lineAt(mark.from).from;
+}
+/** 항목 내용이 시작하는 열 = 하위 항목이 들여써야 하는 열 (CommonMark 규칙) */
+function contentColumn(doc, item) {
+    const mark = markOf(item);
+    const line = doc.lineAt(mark.from);
+    const text = line.text;
+    const markEnd = mark.to - line.from;
+    let pos = markEnd;
+    while (text.charCodeAt(pos) === 32)
+        pos++;
+    const spaces = pos - markEnd;
+    // 빈 항목이거나 공백이 5개 이상이면 기호 뒤 한 칸이 내용 시작 열입니다.
+    if (pos >= text.length || spaces > 4)
+        return markEnd + 1;
+    return pos;
+}
+/**
+ * 줄들을 delta 열만큼 들여쓰거나(+) 내어씁니다(-).
+ * - firstLineAt: 첫 줄은 이 위치(항목 기호 앞)에서 변경합니다. ("- - a"처럼 한 줄에 기호가 여러 개인 경우)
+ * - 나머지 줄은 앞쪽 접두어(공백, 탭, 인용 '>')와 atColumn 중 작은 위치에서 변경합니다.
+ * - 빈 줄은 건드리지 않습니다.
+ */
+function shiftLines(doc, firstLine, lastLine, atColumn, delta, out, firstLineAt) {
+    for (let n = firstLine; n <= lastLine; n++) {
+        const line = doc.line(n);
+        const text = line.text;
+        if (!text.trim())
+            continue;
+        const at = n === firstLine && firstLineAt !== undefined
+            ? firstLineAt - line.from
+            : Math.min(atColumn, /^[ \t>]*/.exec(text)[0].length);
+        if (delta > 0) {
+            out.push({ from: line.from + at, insert: " ".repeat(delta) });
+        }
+        else {
+            let k = 0;
+            while (k < -delta && at - k - 1 >= 0 && text.charCodeAt(at - k - 1) === 32)
+                k++;
+            if (k)
+                out.push({ from: line.from + at - k, to: line.from + at });
+        }
+    }
+}
+/** 항목(하위 항목 포함) 전체를 delta 열만큼 이동 */
+function shiftItem(doc, item, delta, out) {
+    const mark = markOf(item);
+    shiftLines(doc, doc.lineAt(item.from).number, doc.lineAt(item.to).number, markColumn(doc, item), delta, out, mark.from);
+}
+// ---------------------------------------------------------------------------
+// 선택된 항목
+// ---------------------------------------------------------------------------
+/** 선택 범위의 줄 중 기호가 있는 항목들. 다른 선택 항목의 하위 항목은 제외 (문서 순) */
+function selectedItems(state, tree) {
+    const { doc } = state;
+    const found = new Map();
+    for (const range of state.selection.ranges) {
+        const first = doc.lineAt(range.from).number;
+        let last = doc.lineAt(range.to).number;
+        // 다음 줄 맨 앞에서 끝나는 선택은 그 줄을 포함하지 않습니다.
+        if (!range.empty && range.to === doc.line(last).from && last > first)
+            last--;
+        for (let n = first; n <= last; n++) {
+            const line = doc.line(n);
+            const item = itemOnLine(tree, line.from, line.to);
+            if (item)
+                found.set(item.from * 1e6 + item.to, item);
+        }
+    }
+    const items = [...found.values()];
+    const isAncestorSelected = (item) => {
+        for (let p = item.parent; p; p = p.parent) {
+            if (p.name === "ListItem" && items.some((o) => o.from === p.from && o.to === p.to))
+                return true;
+        }
+        return false;
+    };
+    return items.filter((item) => !isAncestorSelected(item)).sort((a, b) => a.from - b.from);
+}
+// ---------------------------------------------------------------------------
+// 번호 다시 매기기
+// ---------------------------------------------------------------------------
+const OrderedMarkRe = /^(\d+)([.)])$/;
+/** 목록을 담을 수 있는 컨테이너 노드 */
+const CONTAINERS = new Set([
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+    "Blockquote",
+]);
+/** list와 그 조상/자손 OrderedList들의 첫 항목 기호 위치 (변경 전 트리 기준) */
+function firstItemMarks(lists) {
+    const out = [];
+    const add = (list) => {
+        if (list.name !== "OrderedList")
+            return;
+        const first = itemsOf(list)[0];
+        if (first)
+            out.push(markOf(first).from);
+    };
+    const addDescendants = (node) => {
+        for (let child = node.firstChild; child; child = child.nextSibling) {
+            if (!CONTAINERS.has(child.name))
+                continue;
+            add(child);
+            addDescendants(child);
+        }
+    };
+    for (const list of lists) {
+        for (let p = list; p; p = p.parent)
+            add(p);
+        addDescendants(list);
+    }
+    return out;
+}
+/**
+ * 목록 번호를 순서대로 다시 매깁니다.
+ * - 첫 항목이 원래 어떤 번호 목록의 첫 항목이었다면(기존 목록) 시작 번호를 유지합니다.
+ * - 그렇지 않으면(새로 생긴 목록) 1부터 시작합니다.
+ * - 번호 폭이 바뀌면(9. → 10.) 항목의 이어지는 줄도 같은 만큼 이동합니다.
+ */
+function renumber(doc, list, keepStart, out) {
+    const items = itemsOf(list);
+    const first = items[0];
+    if (!first)
+        return;
+    const firstMark = markOf(first);
+    const firstMatch = OrderedMarkRe.exec(doc.sliceString(firstMark.from, firstMark.to));
+    if (!firstMatch)
+        return;
+    const start = keepStart.has(firstMark.from) ? Number(firstMatch[1]) : 1;
+    items.forEach((item, i) => {
+        const mark = markOf(item);
+        const text = doc.sliceString(mark.from, mark.to);
+        const m = OrderedMarkRe.exec(text);
+        if (!m)
+            return;
+        const next = `${start + i}${m[2]}`;
+        if (next === text)
+            return;
+        out.push({ from: mark.from, to: mark.to, insert: next });
+        const widthDelta = next.length - text.length;
+        const firstLine = doc.lineAt(mark.from).number;
+        const lastLine = doc.lineAt(item.to).number;
+        if (widthDelta && lastLine > firstLine) {
+            shiftLines(doc, firstLine + 1, lastLine, contentColumn(doc, item), widthDelta, out);
+        }
+    });
+}
+/**
+ * 들여쓰기/내어쓰기 변경을 적용하고, 영향을 받은 번호 목록의 번호를 다시 매겨
+ * 하나의 트랜잭션으로 내보냅니다. (실행 취소 한 번에 되돌아갑니다)
+ */
+function commit(state, dispatch, changes, oldLists, userEvent) {
+    let all = state.changes(changes);
+    let current = state.update({ changes: all }).state;
+    // 변경 전 "첫 항목"이었던 기호 위치(변경 후 좌표). 이 항목으로 시작하는 목록은 시작 번호 유지.
+    let keepStart = firstItemMarks(oldLists).map((p) => all.mapPos(p, 1));
+    // 옮겨진 항목과 형제 항목들의 기호 위치(변경 후 좌표)
+    let marks = [];
+    for (const list of oldLists) {
+        for (const item of itemsOf(list))
+            marks.push(all.mapPos(markOf(item).from, 1));
+    }
+    // 번호 폭이 바뀌면(9. ↔ 10.) 구조가 다시 바뀔 수 있으므로 안정될 때까지 반복합니다.
+    for (let pass = 0; pass < 3; pass++) {
+        const tree = fullTree(current);
+        const lists = new Map();
+        for (const pos of marks) {
+            const list = itemAtMark(tree, pos)?.parent;
+            if (list?.name === "OrderedList")
+                lists.set(list.from, list);
+            // 부모 목록 쪽 번호도 바뀔 수 있으므로(내어쓰기) 조상 번호 목록도 포함합니다.
+            for (let p = list?.parent; p; p = p.parent) {
+                if (p.name === "OrderedList")
+                    lists.set(p.from, p);
+            }
+        }
+        const renumbering = [];
+        const keep = new Set(keepStart);
+        for (const list of lists.values())
+            renumber(current.doc, list, keep, renumbering);
+        if (!renumbering.length)
+            break;
+        const step = current.changes(renumbering);
+        all = all.compose(step);
+        keepStart = keepStart.map((p) => step.mapPos(p, 1));
+        marks = marks.map((p) => step.mapPos(p, 1));
+        current = current.update({ changes: step }).state;
+    }
+    dispatch(state.update({ changes: all, scrollIntoView: true, userEvent }));
+}
+// ---------------------------------------------------------------------------
+// 명령
+// ---------------------------------------------------------------------------
+/**
+ * 선택한 목록 항목을 바로 앞 항목의 하위 항목으로 들여씁니다. (하위 항목도 함께 이동)
+ * - 들여쓰는 폭은 앞 항목의 내용 시작 열에 맞춥니다. (`- ` 2칸, `1. ` 3칸, `10. ` 4칸)
+ * - 앞 항목이 없는 첫 항목은 들여쓸 수 없으므로 아무것도 하지 않습니다.
+ * - 목록 항목이 아닌 줄이면 false를 반환해 다른 Tab 동작에 넘깁니다.
+ */
+export const indentListItem = ({ state, dispatch }) => {
+    const tree = fullTree(state);
+    const items = selectedItems(state, tree);
+    if (!items.length)
+        return false;
+    const selected = new Set(items.map((item) => item.from));
+    const changes = [];
+    const oldLists = new Set();
+    for (const item of items) {
+        // 연속으로 선택된 형제 항목들은 모두 "선택되지 않은 앞 항목"의 하위 항목이 됩니다.
+        let parent = prevItem(item);
+        while (parent && selected.has(parent.from))
+            parent = prevItem(parent);
+        if (!parent)
+            continue;
+        const delta = contentColumn(state.doc, parent) - markColumn(state.doc, item);
+        if (delta <= 0)
+            continue;
+        shiftItem(state.doc, item, delta, changes);
+        oldLists.add(item.parent);
+    }
+    if (changes.length)
+        commit(state, dispatch, changes, oldLists, "input.indent");
+    return true;
+};
+/**
+ * 선택한 목록 항목을 한 단계 내어씁니다. (부모 항목과 같은 열로, 하위 항목도 함께 이동)
+ * - 뒤따르던 형제 항목들은 내어쓴 항목의 하위 항목이 됩니다.
+ * - 최상위 항목은 아무것도 하지 않습니다.
+ * - 목록 항목이 아닌 줄이면 false를 반환해 다른 Shift-Tab 동작에 넘깁니다.
+ */
+export const outdentListItem = ({ state, dispatch }) => {
+    const tree = fullTree(state);
+    const items = selectedItems(state, tree);
+    if (!items.length)
+        return false;
+    const { doc } = state;
+    const selected = new Set(items.map((item) => item.from));
+    const changes = [];
+    const oldLists = new Set();
+    for (const item of items) {
+        const list = item.parent;
+        const parent = list.parent;
+        if (!parent || parent.name !== "ListItem")
+            continue;
+        const parentColumn = markColumn(doc, parent);
+        const delta = parentColumn - markColumn(doc, item);
+        if (delta >= 0)
+            continue;
+        shiftItem(doc, item, delta, changes);
+        oldLists.add(list);
+        // 뒤따르던 (선택되지 않은) 형제 항목들을 내어쓴 항목의 새 내용 열에 맞춰 하위 항목이 되게 합니다.
+        // (기호 폭이 다르면 열이 어긋나 형제/하위 관계가 뒤바뀔 수 있으므로 명시적으로 정렬)
+        const newContent = parentColumn + (contentColumn(doc, item) - markColumn(doc, item));
+        for (let sibling = nextItem(item); sibling && !selected.has(sibling.from); sibling = nextItem(sibling)) {
+            const align = newContent - markColumn(doc, sibling);
+            if (align)
+                shiftItem(doc, sibling, align, changes);
+        }
+    }
+    if (changes.length)
+        commit(state, dispatch, changes, oldLists, "delete.dedent");
+    return true;
+};
+/** Tab: 목록 항목 들여쓰기, Shift-Tab: 내어쓰기 */
+export const listKeymap = [
+    { key: "Tab", run: indentListItem, shift: outdentListItem },
+];
+/**
+ * 목록 항목에서 Tab/Shift-Tab으로 단계를 조절하는 확장입니다. (무한 깊이, 번호 자동 갱신)
+ * 목록이 아닌 줄에서는 다른 Tab 바인딩(예: indentWithTab)으로 넘어가도록 우선순위를 높여 둡니다.
+ */
+export function listIndent() {
+    return Prec.high(keymap.of(listKeymap));
+}

package/dist/markVision.d.ts

@@ -0,0 +1,17 @@
+import { EditorView, ViewPlugin, type DecorationSet, type PluginValue, type ViewUpdate } from "@codemirror/view";
+import type { Extension } from "@codemirror/state";
+/** 선택 영역(커서 포함)이 걸쳐 있는 줄에 붙는 클래스 */
+export declare const activeLineClass = "cm-active";
+export declare class MarkVisionPlugin implements PluginValue {
+    decorations: DecorationSet;
+    constructor(view: EditorView);
+    update(update: ViewUpdate): void;
+    process(view: EditorView): DecorationSet;
+}
+/** MarkVisionPlugin을 에디터에 등록하는 ViewPlugin */
+export declare const markVisionPlugin: ViewPlugin<MarkVisionPlugin, undefined>;
+/**
+ * MarkVisionPlugin을 활성화하는 확장입니다.
+ * 활성 줄에는 `cm-active` 클래스만 붙으며, 별도의 시각 스타일은 적용하지 않습니다.
+ */
+export declare function markVision(): Extension;

package/dist/markVision.js

@@ -0,0 +1,56 @@
+import { Decoration, EditorView, ViewPlugin, } from "@codemirror/view";
+/** 선택 영역(커서 포함)이 걸쳐 있는 줄에 붙는 클래스 */
+export const activeLineClass = "cm-active";
+const activeLineDecoration = Decoration.line({ class: activeLineClass });
+/**
+ * 모든 선택 범위가 걸친 줄 중 화면에 보이는 줄에 라인 데코레이션을 만듭니다.
+ * - 멀티 커서/멀티 선택을 모두 처리합니다.
+ * - 같은 줄은 한 번만 데코레이션합니다.
+ * - 큰 선택 영역에서도 비용이 커지지 않도록 visibleRanges로 범위를 제한합니다.
+ */
+function activeLines(view) {
+    const { doc, selection } = view.state;
+    const lineStarts = new Set();
+    for (const range of selection.ranges) {
+        for (const visible of view.visibleRanges) {
+            const from = Math.max(range.from, visible.from);
+            const to = Math.min(range.to, visible.to);
+            if (from > to)
+                continue;
+            for (let pos = from; pos <= to;) {
+                const line = doc.lineAt(pos);
+                lineStarts.add(line.from);
+                pos = line.to + 1;
+            }
+        }
+    }
+    return [...lineStarts]
+        .sort((a, b) => a - b)
+        .map((from) => activeLineDecoration.range(from));
+}
+export class MarkVisionPlugin {
+    decorations;
+    constructor(view) {
+        this.decorations = this.process(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged || update.selectionSet) {
+            this.decorations = this.process(update.view);
+        }
+    }
+    process(view) {
+        // activeLines()가 이미 정렬된 결과를 반환하므로 sort 플래그는 필요 없습니다.
+        return Decoration.set(activeLines(view));
+    }
+}
+/** MarkVisionPlugin을 에디터에 등록하는 ViewPlugin */
+export const markVisionPlugin = ViewPlugin.fromClass(MarkVisionPlugin, {
+    decorations: (plugin) => plugin.decorations,
+});
+/**
+ * MarkVisionPlugin을 활성화하는 확장입니다.
+ * 활성 줄에는 `cm-active` 클래스만 붙으며, 별도의 시각 스타일은 적용하지 않습니다.
+ */
+export function markVision() {
+    return markVisionPlugin;
+}

package/dist/math.d.ts

@@ -0,0 +1,45 @@
+import type { EditorState, Extension } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+import { type KatexOptions } from "katex";
+export interface MathInfo {
+    readonly from: number;
+    readonly to: number;
+    /** 블록 수식(`$$` 줄)인지. 아니면 문단 안의 인라인 수식 */
+    readonly block: boolean;
+    /** 디스플레이 모양으로 그릴지 (블록, 또는 문단 안의 `$$…$$`) */
+    readonly display: boolean;
+    /** TeX 원문 (인용 기호 등 컨테이너 기호 제외) */
+    readonly tex: string;
+    /** `$`/`$$` 기호 위치 */
+    readonly marks: readonly {
+        readonly from: number;
+        readonly to: number;
+    }[];
+    /** 원문 구간 (MathText) */
+    readonly texts: readonly {
+        readonly from: number;
+        readonly to: number;
+    }[];
+    /** 블록 수식이 줄 전체를 차지하는 최상위 블록인지 (그렇다면 블록 위젯으로 그립니다) */
+    readonly wholeLines: boolean;
+    /** 블록이 걸친 줄 (첫 줄 시작, 마지막 줄 끝) */
+    readonly lineFrom: number;
+    readonly lineTo: number;
+}
+/** InlineMath / BlockMath 노드에서 수식 정보를 읽습니다. */
+export declare function readMath(state: EditorState, node: SyntaxNode): MathInfo | null;
+export interface MathOptions {
+    /**
+     * KaTeX 옵션 (예: `{ macros: { "\\RR": "\\mathbb{R}" } }`). `displayMode`, `throwOnError`는 플러그인이 정합니다.
+     * `trust: true`는 `\href` 등을 허용하므로 신뢰할 수 있는 문서에서만 쓰세요.
+     */
+    katex?: KatexOptions;
+}
+/**
+ * LaTeX 수식(`$…$`, `$$…$$`)을 KaTeX로 그리는 확장입니다. 문법은 `MathSyntax`(extendedMarkdown에 포함).
+ * - KaTeX CSS를 불러와야 합니다: `import "katex/dist/katex.min.css"`
+ * - 커서가 수식에 닿으면 원문을 보여주고, 블록 수식은 원문 아래에 미리보기를 보여줍니다.
+ * - 최상위 블록 수식은 블록 위젯으로, 인용/목록 안의 블록 수식은 접두어 뒤의 인라인 위젯으로 그립니다.
+ * - 줄바꿈을 넘는 대체가 필요하므로 StateField로 제공합니다. 렌더링은 화면에 그려질 때만, 결과는 캐시합니다.
+ */
+export declare function math(options?: MathOptions): Extension;

package/dist/math.js

@@ -0,0 +1,233 @@
+import { syntaxTree } from "@codemirror/language";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import katex, {} from "katex";
+import { createRevealField } from "./utils/reveal.js";
+/** MathText 하나의 글자 (안에 낀 인용 기호와 그 뒤 공백 한 칸은 뺍니다) */
+function textOf(state, node) {
+    const { doc } = state;
+    let out = "";
+    let pos = node.from;
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        out += doc.sliceString(pos, child.from);
+        pos = child.to;
+        if (child.name === "QuoteMark" && pos < node.to && /[ \t]/.test(doc.sliceString(pos, pos + 1)))
+            pos++;
+    }
+    return out + doc.sliceString(pos, node.to);
+}
+/** InlineMath / BlockMath 노드에서 수식 정보를 읽습니다. */
+export function readMath(state, node) {
+    const block = node.name === "BlockMath";
+    if (!block && node.name !== "InlineMath")
+        return null;
+    const marks = [];
+    const texts = [];
+    const parts = [];
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.name === "InlineMathMark" || child.name === "BlockMathMark")
+            marks.push({ from: child.from, to: child.to });
+        else if (child.name === "MathText") {
+            texts.push({ from: child.from, to: child.to });
+            parts.push(textOf(state, child));
+        }
+    }
+    const { doc } = state;
+    const first = doc.lineAt(node.from);
+    const last = doc.lineAt(node.to);
+    return {
+        from: node.from,
+        to: node.to,
+        block,
+        display: block || marks[0].to - marks[0].from === 2,
+        tex: parts.join("\n").trim(),
+        marks,
+        texts,
+        wholeLines: block &&
+            node.parent?.name === "Document" &&
+            !first.text.slice(0, node.from - first.from).trim() &&
+            !last.text.slice(node.to - last.from).trim(),
+        lineFrom: first.from,
+        lineTo: last.to,
+    };
+}
+/** 수식이 있을 수 없는 노드 (하위를 훑지 않음) */
+const SKIP = new Set([
+    "FencedCode",
+    "CodeBlock",
+    "HTMLBlock",
+    "InlineCode",
+    "HTMLTag",
+    "Comment",
+    "CommentBlock",
+    "ProcessingInstructionBlock",
+    "URL",
+    "LinkMark",
+    "HorizontalRule",
+]);
+function scanMath(state) {
+    const found = [];
+    syntaxTree(state).iterate({
+        enter(node) {
+            if (node.name === "InlineMath" || node.name === "BlockMath") {
+                const info = readMath(state, node.node);
+                if (info)
+                    found.push(info);
+                return false;
+            }
+            if (SKIP.has(node.name))
+                return false;
+        },
+    });
+    return found;
+}
+// ---------------------------------------------------------------------------
+// 그리기 (KaTeX, 결과 캐시)
+// ---------------------------------------------------------------------------
+const CACHE_LIMIT = 200;
+class MathRenderer {
+    cache = new Map();
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    /** KaTeX HTML (최근 결과를 캐시). 문법 오류는 KaTeX가 빨간 원문으로 그립니다. */
+    html(tex, display) {
+        const key = `${display ? "D" : "I"}${tex}`;
+        let html = this.cache.get(key);
+        if (html !== undefined) {
+            this.cache.delete(key);
+        }
+        else {
+            try {
+                html = katex.renderToString(tex, { ...this.options, displayMode: display, throwOnError: false });
+            }
+            catch (error) {
+                // throwOnError: false여도 잘못된 옵션 등으로 던질 수 있습니다.
+                const span = document.createElement("span");
+                span.className = "cm-math-error";
+                span.textContent = error instanceof Error ? error.message : String(error);
+                html = span.outerHTML;
+            }
+        }
+        this.cache.set(key, html);
+        if (this.cache.size > CACHE_LIMIT)
+            this.cache.delete(this.cache.keys().next().value);
+        return html;
+    }
+}
+class MathWidget extends WidgetType {
+    tex;
+    kind;
+    renderer;
+    constructor(tex, kind, renderer) {
+        super();
+        this.tex = tex;
+        this.kind = kind;
+        this.renderer = renderer;
+    }
+    eq(other) {
+        return other.tex === this.tex && other.kind === this.kind && other.renderer === this.renderer;
+    }
+    toDOM() {
+        const inline = this.kind === "inline";
+        const el = document.createElement(this.kind === "block" ? "div" : "span");
+        el.className = `cm-math cm-math-${this.kind}`;
+        el.innerHTML = this.renderer.html(this.tex, !inline);
+        return el;
+    }
+    get estimatedHeight() {
+        return this.kind === "block" ? 48 : -1;
+    }
+    // 클릭을 에디터가 처리해 커서가 수식으로 이동하고 원문이 펼쳐지도록 합니다. (미리보기는 제외)
+    ignoreEvent(event) {
+        return this.kind === "preview" && event.type !== "mousedown";
+    }
+}
+const markDeco = Decoration.mark({ class: "cm-formatting cm-formatting-math" });
+const sourceDeco = Decoration.mark({ class: "cm-math-source" });
+const blockLineDeco = Decoration.line({ class: "cm-math-block-line" });
+function buildDecorations(items, revealed, state, renderer) {
+    const out = [];
+    items.forEach((item, i) => {
+        const showSource = revealed[i] || !item.tex;
+        if (!showSource) {
+            if (!item.block) {
+                const widget = new MathWidget(item.tex, item.display ? "inline-display" : "inline", renderer);
+                out.push(Decoration.replace({ widget }).range(item.from, item.to));
+            }
+            else if (item.wholeLines) {
+                const widget = new MathWidget(item.tex, "block", renderer);
+                out.push(Decoration.replace({ widget, block: true }).range(item.lineFrom, item.lineTo));
+            }
+            else {
+                // 인용/목록 안: 줄 중간의 블록 위젯은 줄을 쪼개므로 접두어 뒤를 인라인 위젯으로 대체합니다.
+                const widget = new MathWidget(item.tex, "inline-display", renderer);
+                out.push(Decoration.replace({ widget }).range(item.from, item.to));
+            }
+            return;
+        }
+        // 원문: 기호는 흐리게, 블록은 줄마다 고정폭 글꼴
+        for (const mark of item.marks)
+            out.push(markDeco.range(mark.from, mark.to));
+        for (const text of item.texts)
+            out.push(sourceDeco.range(text.from, text.to));
+        if (item.block) {
+            for (let pos = item.lineFrom; pos <= item.lineTo;) {
+                const line = state.doc.lineAt(pos);
+                out.push(blockLineDeco.range(line.from));
+                pos = line.to + 1;
+            }
+            // 편집 중인 블록 아래에 미리보기
+            if (item.tex) {
+                const widget = new MathWidget(item.tex, "preview", renderer);
+                out.push(item.wholeLines
+                    ? Decoration.widget({ widget, block: true, side: 1 }).range(item.lineTo)
+                    : Decoration.widget({ widget, side: 1 }).range(item.to));
+            }
+        }
+    });
+    return Decoration.set(out, true);
+}
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const mathTheme = EditorView.baseTheme({
+    // KaTeX의 .katex-display는 세로 margin(1em)을 줍니다. 위젯 안의 세로 margin은 에디터의 높이 계산을
+    // 어긋나게 하므로 없애고, 감싸는 요소의 padding으로 여백을 줍니다.
+    ".cm-math .katex-display": { margin: "0" },
+    ".cm-math-block, .cm-math-preview, .cm-math-inline-display": {
+        display: "block",
+        overflowX: "auto",
+        overflowY: "hidden",
+        textAlign: "center",
+    },
+    ".cm-math-block": { padding: "0.5em 6px" },
+    ".cm-math-inline-display": { padding: "0.25em 0" },
+    ".cm-math-preview": {
+        padding: "0.5em 6px",
+        borderRadius: "4px",
+        cursor: "default",
+    },
+    "&light .cm-math-preview": { backgroundColor: "rgba(135, 131, 120, 0.08)" },
+    "&dark .cm-math-preview": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
+    ".cm-math-inline": { padding: "0 1px" },
+    ".cm-math-error": { color: "#cc0000", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+    ".cm-formatting-math": { opacity: "0.6" },
+    ".cm-math-block-line": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+});
+/**
+ * LaTeX 수식(`$…$`, `$$…$$`)을 KaTeX로 그리는 확장입니다. 문법은 `MathSyntax`(extendedMarkdown에 포함).
+ * - KaTeX CSS를 불러와야 합니다: `import "katex/dist/katex.min.css"`
+ * - 커서가 수식에 닿으면 원문을 보여주고, 블록 수식은 원문 아래에 미리보기를 보여줍니다.
+ * - 최상위 블록 수식은 블록 위젯으로, 인용/목록 안의 블록 수식은 접두어 뒤의 인라인 위젯으로 그립니다.
+ * - 줄바꿈을 넘는 대체가 필요하므로 StateField로 제공합니다. 렌더링은 화면에 그려질 때만, 결과는 캐시합니다.
+ */
+export function math(options = {}) {
+    const renderer = new MathRenderer(options.katex ?? {});
+    const field = createRevealField({
+        scan: scanMath,
+        build: (items, revealed, state) => buildDecorations(items, revealed, state, renderer),
+        block: (item) => item.block && item.wholeLines,
+    });
+    return [field, mathTheme];
+}