mdsquare 0.0.0-stage → 0.1.0

package/dist/codeBlock.js

@@ -0,0 +1,686 @@
+import { Language, LanguageDescription, syntaxTree } from "@codemirror/language";
+import { Facet, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { TreeFragment } from "@lezer/common";
+import { highlightTree, tagHighlighter, tags } from "@lezer/highlight";
+import { defaultCodeTheme } from "./codeTheme.js";
+import { BLOCK_MARGIN_X } from "./utils/blockMargin.js";
+import { CONTAINER_BOTTOM, CONTAINER_INDENT, CONTAINER_RIGHT } from "./utils/container.js";
+import { createRevealPlugin } from "./utils/reveal.js";
+/** FencedCode 노드에서 언어, 코드 본문, 기호 위치를 읽습니다. */
+export function readFencedCode(state, node) {
+    if (node.name !== "FencedCode")
+        return null;
+    const { doc } = state;
+    const marks = [];
+    let info = null;
+    const pieces = [];
+    let code = "";
+    let prevEnd = -1;
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.name === "CodeMark")
+            marks.push(child);
+        else if (child.name === "CodeInfo")
+            info = child;
+        else if (child.name === "CodeText") {
+            // 앞 조각과 다른 줄에서 시작하는데 줄바꿈이 없으면(목록 들여쓰기로 나뉜 경우) 줄바꿈을 넣습니다.
+            if (prevEnd >= 0 && !code.endsWith("\n") && doc.lineAt(child.from).number > doc.lineAt(prevEnd).number) {
+                code += "\n";
+            }
+            const text = doc.sliceString(child.from, child.to);
+            pieces.push({ codeFrom: code.length, docFrom: child.from, length: text.length });
+            code += text;
+            prevEnd = child.to;
+        }
+    }
+    const open = marks[0];
+    if (!open)
+        return null;
+    const close = marks.length > 1 ? marks[marks.length - 1] : null;
+    const infoText = info ? doc.sliceString(info.from, info.to).trim() : "";
+    return {
+        from: node.from,
+        to: node.to,
+        lang: (infoText.split(/\s+/)[0] ?? "").toLowerCase(),
+        code,
+        pieces,
+        open: { from: open.from, to: open.to },
+        close: close && { from: close.from, to: close.to },
+        info: info && { from: info.from, to: info.to },
+    };
+}
+const CACHE_LIMIT = 100;
+const tokenCache = new Map();
+/** 문자열(과 따옴표로 감싼 속성 이름, 예: JSON 키) 표시: 따옴표를 따로 칠할 때 씁니다. */
+const QUOTED = "cm-codeblock-quoted";
+const quotedMarker = tagHighlighter([{ tag: [tags.string, tags.propertyName], class: QUOTED }]);
+const isQuote = (ch) => ch === 34 || ch === 39 || ch === 96; /* " ' ` */
+/**
+ * 문자열 구간 앞뒤의 따옴표(`"`, `'`, `` ` ``, 세 겹 따옴표 포함)를 떼어 quote 클래스로 나눕니다.
+ * 보간이 있는 문자열은 조각마다 앞이나 뒤에만 따옴표가 있을 수 있습니다.
+ */
+function splitQuotes(code, from, to, cls, quote, out) {
+    let start = from;
+    let end = to;
+    const open = code.charCodeAt(from);
+    if (isQuote(open)) {
+        while (start < to && start - from < 3 && code.charCodeAt(start) === open)
+            start++;
+        // 빈 문자열("")처럼 전부 따옴표면 한 번에
+        if (start === to) {
+            out.push({ from, to, className: quote });
+            return;
+        }
+    }
+    const close = code.charCodeAt(to - 1);
+    if (isQuote(close)) {
+        while (end > start && to - end < 3 && code.charCodeAt(end - 1) === close)
+            end--;
+    }
+    if (start > from)
+        out.push({ from, to: start, className: quote });
+    if (end > start && cls)
+        out.push({ from: start, to: end, className: cls });
+    if (to > end)
+        out.push({ from: end, to, className: quote });
+}
+/** 언어별 마지막 파싱 결과: 같은 블록을 고치는 동안 바뀐 부분만 다시 파싱하는 데 씁니다. */
+const lastParse = new WeakMap();
+/**
+ * 코드를 파싱합니다. 같은 언어로 마지막에 파싱한 코드와 앞뒤 공통 부분을 비교해 바뀐 구간을 구하고,
+ * 이전 트리를 조각(TreeFragment)으로 넘겨 바뀐 부분만 다시 파싱합니다.
+ * (2000줄 블록 기준 한 글자 입력: 전체 파싱 약 40ms → 약 1ms)
+ */
+function parseCode(language, code) {
+    const prev = lastParse.get(language);
+    let fragments;
+    if (prev) {
+        const a = prev.code;
+        const max = Math.min(a.length, code.length);
+        let start = 0;
+        while (start < max && a.charCodeAt(start) === code.charCodeAt(start))
+            start++;
+        let endA = a.length;
+        let endB = code.length;
+        while (endA > start && endB > start && a.charCodeAt(endA - 1) === code.charCodeAt(endB - 1)) {
+            endA--;
+            endB--;
+        }
+        fragments = TreeFragment.applyChanges(TreeFragment.addTree(prev.tree), [
+            { fromA: start, toA: endA, fromB: start, toB: endB },
+        ]);
+    }
+    const tree = language.parser.parse(code, fragments);
+    lastParse.set(language, { code, tree });
+    return tree;
+}
+/** Lezer 파서로 코드 전체를 파싱해 테마 클래스를 붙입니다. (최근 결과를 캐시) */
+export function tokenize(language, theme, lang, code) {
+    if (!code)
+        return [];
+    const key = `${theme.id}\u0000${language.name}\u0000${lang}\u0000${code}`;
+    const cached = tokenCache.get(key);
+    if (cached) {
+        // 최근 사용으로 갱신 (Map은 삽입 순서를 유지하므로 다시 넣으면 맨 뒤로)
+        tokenCache.delete(key);
+        tokenCache.set(key, cached);
+        return cached;
+    }
+    const spans = [];
+    const tree = parseCode(language, code);
+    const quote = theme.quoteClass?.(lang) ?? null;
+    if (quote) {
+        highlightTree(tree, [theme.highlighter(lang), quotedMarker], (from, to, classes) => {
+            if (!classes.includes(QUOTED))
+                return void spans.push({ from, to, className: classes });
+            const className = classes.split(" ").filter((c) => c !== QUOTED).join(" ");
+            splitQuotes(code, from, to, className, quote, spans);
+        });
+    }
+    else {
+        highlightTree(tree, theme.highlighter(lang), (from, to, className) => void spans.push({ from, to, className }));
+    }
+    tokenCache.set(key, spans);
+    if (tokenCache.size > CACHE_LIMIT)
+        tokenCache.delete(tokenCache.keys().next().value);
+    return spans;
+}
+/** 언어를 불러온 뒤 다시 그리게 하는 효과 */
+const codeLanguageLoaded = StateEffect.define();
+/** 에디터별로 불러오는 중인 언어 (같은 언어로 여러 번 다시 그리지 않도록) */
+const pendingLoads = new WeakMap();
+/** 언어를 찾습니다. 아직 불러오지 않은 언어면 불러오기를 시작하고 null */
+function resolveLanguage(languages, lang, view) {
+    if (!lang)
+        return null;
+    const found = typeof languages === "function" ? languages(lang) : LanguageDescription.matchLanguageName(languages, lang, true);
+    if (!found)
+        return null;
+    if (found instanceof Language)
+        return found;
+    if (found.support)
+        return found.support.language;
+    let pending = pendingLoads.get(view);
+    if (!pending)
+        pendingLoads.set(view, (pending = new Set()));
+    if (!pending.has(found)) {
+        pending.add(found);
+        found.load().then(() => {
+            pending.delete(found);
+            view.dispatch({ effects: codeLanguageLoaded.of(null) });
+        }, () => pending.delete(found));
+    }
+    return null;
+}
+/**
+ * 다른 확장이 그림 등으로 대신 그리는 코드 블록 언어 (예: tikz()의 "tikz").
+ * 이 언어의 블록은 커서가 밖에 있을 때 codeBlock()이 그리지 않고, 커서가 들어오면(원문) 코드 블록으로 그립니다.
+ */
+export const renderedCodeLanguages = Facet.define({
+    combine: (values) => new Set(values.flat()),
+});
+// ---------------------------------------------------------------------------
+// 도구 모음: 언어 + 복사 버튼 (마우스를 올렸을 때 블록 오른쪽 위에 표시)
+// ---------------------------------------------------------------------------
+/** 언어 표시 이름 (없는 언어는 원문 그대로) */
+const LANGUAGE_NAMES = {
+    js: "JavaScript",
+    javascript: "JavaScript",
+    jsx: "JSX",
+    ts: "TypeScript",
+    typescript: "TypeScript",
+    tsx: "TSX",
+    py: "Python",
+    python: "Python",
+    sh: "Shell",
+    shell: "Shell",
+    bash: "Bash",
+    zsh: "Zsh",
+    json: "JSON",
+    yaml: "YAML",
+    yml: "YAML",
+    html: "HTML",
+    xml: "XML",
+    css: "CSS",
+    scss: "SCSS",
+    md: "Markdown",
+    markdown: "Markdown",
+    rust: "Rust",
+    rs: "Rust",
+    go: "Go",
+    java: "Java",
+    kotlin: "Kotlin",
+    c: "C",
+    cpp: "C++",
+    "c++": "C++",
+    cs: "C#",
+    csharp: "C#",
+    rb: "Ruby",
+    ruby: "Ruby",
+    php: "PHP",
+    sql: "SQL",
+    swift: "Swift",
+    diff: "Diff",
+    tex: "LaTeX",
+    latex: "LaTeX",
+    tikz: "TikZ",
+};
+/** 도구 모음에 보여줄 언어 이름 */
+export const languageLabel = (lang) => (lang ? LANGUAGE_NAMES[lang] ?? lang : "일반 텍스트");
+const COPY_ICON = '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>';
+const CHECK_ICON = '<path d="M20 6 9 17l-5-5"/>';
+function setIcon(el, paths) {
+    el.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}
+class CodeToolbarWidget extends WidgetType {
+    lang;
+    copyButton;
+    constructor(lang, copyButton) {
+        super();
+        this.lang = lang;
+        this.copyButton = copyButton;
+    }
+    eq(other) {
+        return other.lang === this.lang && other.copyButton === this.copyButton;
+    }
+    toDOM() {
+        const toolbar = document.createElement("span");
+        toolbar.className = "cm-codeblock-toolbar";
+        const lang = toolbar.appendChild(document.createElement("span"));
+        lang.className = "cm-codeblock-lang";
+        lang.textContent = languageLabel(this.lang);
+        if (this.copyButton) {
+            toolbar.appendChild(document.createElement("span")).className = "cm-codeblock-sep";
+            const copy = toolbar.appendChild(document.createElement("span"));
+            copy.className = "cm-codeblock-copy";
+            copy.setAttribute("role", "button");
+            copy.setAttribute("aria-label", "코드 복사");
+            setIcon(copy, COPY_ICON);
+        }
+        return toolbar;
+    }
+    ignoreEvent() {
+        return false;
+    }
+}
+/** pos가 속한 펜스 코드 블록 노드 */
+function fencedCodeAt(state, pos) {
+    for (const side of [1, -1]) {
+        for (let node = syntaxTree(state).resolveInner(pos, side); node; node = node.parent) {
+            if (node.name === "FencedCode")
+                return node;
+        }
+    }
+    return null;
+}
+/** 복사 버튼 클릭 → 그 코드 블록의 본문을 클립보드에 복사 */
+const copyHandler = EditorView.domEventHandlers({
+    mousedown(event, view) {
+        if (event.button !== 0)
+            return false;
+        const button = event.target?.closest?.(".cm-codeblock-copy");
+        if (!button || !view.contentDOM.contains(button))
+            return false;
+        const node = fencedCodeAt(view.state, view.posAtDOM(button));
+        const block = node && readFencedCode(view.state, node);
+        if (!block)
+            return false;
+        event.preventDefault(); // 커서를 옮기지 않고(원문이 펼쳐지지 않고) 복사만 합니다.
+        void navigator.clipboard?.writeText(block.code).then(() => {
+            setIcon(button, CHECK_ICON);
+            button.classList.add("cm-codeblock-copied");
+            button.setAttribute("aria-label", "복사됨");
+            setTimeout(() => {
+                setIcon(button, COPY_ICON);
+                button.classList.remove("cm-codeblock-copied");
+                button.setAttribute("aria-label", "코드 복사");
+            }, 1500);
+        }, () => undefined);
+        return true;
+    },
+});
+// --- 마우스를 올린 코드 블록 ---
+// 코드 블록은 여러 줄 요소로 이루어져 있어 CSS :hover로는 "블록 위"를 알 수 없으므로,
+// 마우스 위치의 블록을 상태로 기록하고 그 블록의 여는 줄에 클래스를 붙입니다.
+const setHoveredCodeBlock = StateEffect.define();
+/** 마우스가 올라가 있는 코드 블록의 시작 위치 (없으면 null) */
+const hoveredCodeBlock = StateField.define({
+    create: () => null,
+    update(value, tr) {
+        for (const effect of tr.effects)
+            if (effect.is(setHoveredCodeBlock))
+                return effect.value;
+        return value !== null && tr.docChanged ? tr.changes.mapPos(value) : value;
+    },
+});
+const hoverHandler = EditorView.domEventHandlers({
+    mousemove(event, view) {
+        if (event.buttons !== 0)
+            return false; // 드래그로 선택하는 중에는 건드리지 않습니다.
+        const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+        const hovered = pos === null ? null : fencedCodeAt(view.state, pos)?.from ?? null;
+        // 블록이 바뀔 때만 트랜잭션을 보냅니다.
+        if (hovered !== view.state.field(hoveredCodeBlock))
+            view.dispatch({ effects: setHoveredCodeBlock.of(hovered) });
+        return false;
+    },
+    mouseleave(_event, view) {
+        if (view.state.field(hoveredCodeBlock) !== null)
+            view.dispatch({ effects: setHoveredCodeBlock.of(null) });
+        return false;
+    },
+});
+// ---------------------------------------------------------------------------
+// 플러그인
+// ---------------------------------------------------------------------------
+const hidden = Decoration.replace({});
+/**
+ * 코드 블록 상자(배경). 줄 자체의 배경은 인용 세로줄/콜아웃 상자가 쓰므로, 줄 안에 절대 위치 요소로 그립니다.
+ * 위치는 컨테이너(인용, 콜아웃, 목록)의 내용 시작을 기준으로 CSS에서 계산합니다.
+ * 위젯 자신은 크기가 0인 인라인 요소라 커서 위치 계산에 영향을 주지 않습니다.
+ */
+class CodeBackgroundWidget extends WidgetType {
+    eq() {
+        return true;
+    }
+    toDOM() {
+        const anchor = document.createElement("span");
+        anchor.className = "cm-codeblock-bg-anchor";
+        anchor.setAttribute("aria-hidden", "true");
+        anchor.appendChild(document.createElement("span")).className = "cm-codeblock-bg";
+        return anchor;
+    }
+    ignoreEvent() {
+        return false;
+    }
+}
+const background = Decoration.widget({ widget: new CodeBackgroundWidget(), side: -1 });
+/** 목록 들여쓰기 칸 수별 클래스 (줄 데코레이션의 style은 인용의 style과 겹치면 하나만 남으므로 클래스로) */
+const MAX_INDENT = 40;
+/** 인용 안 코드 블록의 위아래 여백. 에디터에서 `--cm-codeblock-quote-gap`으로 바꿀 수 있습니다. */
+const QUOTE_GAP = "var(--cm-codeblock-quote-gap, 6px)";
+/** pos 앞의 공백을 거슬러 올라간 위치. 인용 기호(`>`) 바로 뒤의 공백 한 칸은 인용이 숨기므로 건너뜁니다. */
+function indentStart(doc, lineFrom, pos) {
+    let start = pos;
+    while (start > lineFrom && /[ \t]/.test(doc.sliceString(start - 1, start)))
+        start--;
+    if (start > lineFrom && doc.sliceString(start - 1, start) === ">" && start < pos)
+        start++;
+    return start;
+}
+const fenceMark = Decoration.mark({ class: "cm-formatting cm-formatting-code-block" });
+const infoMark = Decoration.mark({ class: "cm-codeblock-info" });
+const lineCache = new Map();
+const line = (className) => {
+    let deco = lineCache.get(className);
+    if (!deco)
+        lineCache.set(className, (deco = Decoration.line({ class: className })));
+    return deco;
+};
+const tokenCacheDeco = new Map();
+const tokenMark = (className) => {
+    let deco = tokenCacheDeco.get(className);
+    if (!deco)
+        tokenCacheDeco.set(className, (deco = Decoration.mark({ class: className })));
+    return deco;
+};
+/** 코드 블록을 담을 수 있는 컨테이너 블록 */
+const CONTAINERS = new Set([
+    "Document",
+    "Blockquote",
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+]);
+function codeBlockPlugin(languages, theme, copyButton) {
+    return createRevealPlugin({
+        // 줄/기호/토큰 데코레이션이 섞이므로 정렬합니다.
+        sort: true,
+        // 마우스를 올린 블록이 바뀌거나 언어를 불러오면 다시 그립니다.
+        rebuildOn: (update) => update.transactions.some((tr) => tr.effects.some((e) => e.is(setHoveredCodeBlock) || e.is(codeLanguageLoaded))),
+        visit({ state, view, decorations, isRevealed }) {
+            const { doc } = state;
+            const hovered = state.field(hoveredCodeBlock, false) ?? null;
+            const rendered = state.facet(renderedCodeLanguages);
+            const visible = view.visibleRanges;
+            const isVisible = (from, to) => visible.some((r) => from < r.to && to > r.from);
+            return {
+                enter(node) {
+                    if (node.name === "FencedCode") {
+                        const block = readFencedCode(state, node.node);
+                        if (!block)
+                            return false;
+                        const revealed = isRevealed(block.from, block.to);
+                        // 그림으로 그려지는 블록(예: tikz)은 원문을 볼 때만 코드 블록으로 그립니다.
+                        if (!revealed && rendered.has(block.lang))
+                            return false;
+                        // 줄: 배경, 둥근 모서리, 기호 줄 표시
+                        const first = doc.lineAt(block.from).number;
+                        const last = doc.lineAt(block.to).number;
+                        const closeLine = block.close ? doc.lineAt(block.close.from).number : -1;
+                        // 목록 안: 줄 앞의 목록 들여쓰기(컨테이너 들여쓰기)를 숨기고, 같은 폭을 여백으로 줍니다.
+                        // (공백 글자로 두면 줄바꿈된 다음 줄이 상자 왼쪽 밖에서 시작합니다)
+                        let inList = false;
+                        let inQuote = false; // 인용(콜아웃 포함) 안이면 위아래 여백
+                        for (let p = node.node.parent; p; p = p.parent) {
+                            if (p.name === "ListItem")
+                                inList = true;
+                            else if (p.name === "Blockquote")
+                                inQuote = true;
+                        }
+                        let indent = 0;
+                        const contentStart = new Map();
+                        if (inList) {
+                            for (let c = node.node.firstChild; c; c = c.nextSibling) {
+                                if (c.name !== "CodeText" && c.name !== "CodeMark")
+                                    continue;
+                                const n = doc.lineAt(c.from).number;
+                                if (!contentStart.has(n))
+                                    contentStart.set(n, c.from);
+                            }
+                            const openLine = doc.lineAt(block.open.from);
+                            indent = Math.min(MAX_INDENT, block.open.from - indentStart(doc, openLine.from, block.open.from));
+                        }
+                        for (let n = first; n <= last; n++) {
+                            const lineObj = doc.line(n);
+                            decorations.push(background.range(lineObj.from));
+                            if (indent > 0) {
+                                const content = contentStart.get(n) ?? lineObj.to;
+                                const from = indentStart(doc, lineObj.from, content);
+                                const to = Math.min(content, from + indent);
+                                if (from < to)
+                                    decorations.push(hidden.range(from, to));
+                            }
+                            const cls = ["cm-codeblock-line"];
+                            if (indent > 0)
+                                cls.push(`cm-codeblock-indent-${indent}`);
+                            if (inQuote)
+                                cls.push("cm-codeblock-in-quote");
+                            if (n === first)
+                                cls.push("cm-codeblock-first", "cm-codeblock-open");
+                            if (n === first && hovered === block.from)
+                                cls.push("cm-codeblock-hovered");
+                            if (n === last)
+                                cls.push("cm-codeblock-last");
+                            if (n === closeLine)
+                                cls.push("cm-codeblock-close");
+                            if (!revealed && (n === first || n === closeLine))
+                                cls.push("cm-codeblock-fence-hidden");
+                            decorations.push(line(cls.join(" ")).range(doc.line(n).from));
+                        }
+                        // 기호: 커서가 블록 안이면 원문(흐리게), 밖이면 숨김.
+                        // 도구 모음(언어/복사)은 두 경우 모두 여는 줄에 두고, 블록 오른쪽 위에 겹쳐 그립니다.
+                        const openLine = doc.lineAt(block.open.from);
+                        const toolbar = new CodeToolbarWidget(block.lang, copyButton);
+                        if (revealed) {
+                            decorations.push(fenceMark.range(block.open.from, block.open.to));
+                            if (block.info)
+                                decorations.push(infoMark.range(block.info.from, block.info.to));
+                            if (block.close)
+                                decorations.push(fenceMark.range(block.close.from, block.close.to));
+                            decorations.push(Decoration.widget({ widget: toolbar, side: 1 }).range(openLine.to));
+                        }
+                        else {
+                            decorations.push(Decoration.replace({ widget: toolbar }).range(block.open.from, openLine.to));
+                            if (block.close) {
+                                decorations.push(hidden.range(block.close.from, doc.lineAt(block.close.from).to));
+                            }
+                        }
+                        // 토큰: 코드 문자열 위치 → 문서 위치로 바꿔, 보이는 범위에만 추가
+                        const language = resolveLanguage(languages, block.lang, view);
+                        const spans = language ? tokenize(language, theme, block.lang, block.code) : [];
+                        for (const span of spans) {
+                            for (const piece of block.pieces) {
+                                const from = Math.max(span.from, piece.codeFrom);
+                                const to = Math.min(span.to, piece.codeFrom + piece.length);
+                                if (from >= to)
+                                    continue;
+                                const docFrom = piece.docFrom + (from - piece.codeFrom);
+                                const docTo = piece.docFrom + (to - piece.codeFrom);
+                                if (isVisible(docFrom, docTo))
+                                    decorations.push(tokenMark(span.className).range(docFrom, docTo));
+                            }
+                        }
+                        return false;
+                    }
+                    if (!CONTAINERS.has(node.name))
+                        return false;
+                },
+            };
+        },
+    });
+}
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const baseTheme = EditorView.baseTheme({
+    // 줄: 컨테이너 들여쓰기 + 목록 들여쓰기 + 상자 바깥 여백 + 상자 안쪽 여백(12px).
+    // 인용/콜아웃의 padding보다 우선하도록 선택자를 구체적으로 씁니다.
+    ".cm-line.cm-codeblock-line": {
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+        position: "relative",
+        zIndex: "0", // 상자(z-index: -1)를 줄 배경(인용 세로줄, 콜아웃 상자) 위, 글자 뒤에 그리기 위한 쌓임 맥락
+        paddingLeft: `calc(${CONTAINER_INDENT} + var(--cm-codeblock-indent, 0) * 1ch + ${BLOCK_MARGIN_X} + 6px)`,
+        paddingRight: `calc(${CONTAINER_RIGHT} + ${BLOCK_MARGIN_X} + 10px)`,
+    },
+    // 줄마다 쌓임 맥락이 생기므로, 여는 줄의 도구 모음이 아래 줄들에 가려지지 않도록 여는 줄을 한 단계 위에 둡니다.
+    ".cm-line.cm-codeblock-open": { zIndex: "1" },
+    ".cm-codeblock-bg-anchor": { display: "inline" },
+    ".cm-codeblock-bg": {
+        position: "absolute",
+        top: "0",
+        bottom: CONTAINER_BOTTOM, // 콜아웃의 끝 줄이면 상자 아래 여백은 덮지 않음
+        // 컨테이너 내용 시작 기준. (최상위: 6px + 8px - 6px = 내용 영역에서 8px)
+        left: `calc(${CONTAINER_INDENT} + var(--cm-codeblock-indent, 0) * 1ch + ${BLOCK_MARGIN_X} - 6px)`,
+        right: `calc(${CONTAINER_RIGHT} + ${BLOCK_MARGIN_X} - 2px)`,
+        zIndex: "-1",
+        pointerEvents: "none",
+        backgroundColor: "var(--cm-codeblock-bg, transparent)",
+    },
+    ".cm-codeblock-first .cm-codeblock-bg": { borderTopLeftRadius: "4px", borderTopRightRadius: "4px" },
+    // 인용(콜아웃 포함) 안: 위아래 글과 떨어지도록 첫/끝 줄에 padding을 주고 상자를 그만큼 안으로 들입니다.
+    // (세로 margin은 줄 높이 계산을 깨뜨리므로 쓰지 않습니다. 인용 세로줄은 여백에도 이어집니다)
+    ".cm-line.cm-codeblock-in-quote.cm-codeblock-first": { paddingTop: QUOTE_GAP },
+    ".cm-codeblock-in-quote.cm-codeblock-first .cm-codeblock-bg": { top: QUOTE_GAP },
+    ".cm-codeblock-in-quote.cm-codeblock-open .cm-codeblock-toolbar": { top: `calc(${QUOTE_GAP} + 6px)` },
+    ".cm-line.cm-codeblock-in-quote.cm-codeblock-last": { paddingBottom: `calc(${CONTAINER_BOTTOM} + ${QUOTE_GAP})` },
+    ".cm-codeblock-in-quote.cm-codeblock-last .cm-codeblock-bg": { bottom: `calc(${CONTAINER_BOTTOM} + ${QUOTE_GAP})` },
+    ".cm-codeblock-last .cm-codeblock-bg": { borderBottomLeftRadius: "4px", borderBottomRightRadius: "4px" },
+    ...Object.fromEntries(Array.from({ length: MAX_INDENT }, (_, i) => [`.cm-codeblock-indent-${i + 1}`, { "--cm-codeblock-indent": String(i + 1) }])),
+    // 커서가 밖에 있을 때 펜스 줄은 낮게 (도구 모음은 여는 줄 기준으로 겹쳐 그립니다)
+    ".cm-codeblock-fence-hidden": { fontSize: "0.5em" },
+    // 펜스 줄은 글자 크기가 절반이라 1ch(목록 들여쓰기 폭)도 달라지므로, 상자만 원래 크기로 되돌려 다른 줄과 맞춥니다.
+    // (글자 크기를 절반으로 줄인 글꼴의 폭은 정확히 절반이 아니어서 칸 수를 두 배로 세는 방식은 어긋납니다)
+    ".cm-codeblock-fence-hidden .cm-codeblock-bg": { fontSize: "200%" },
+    ".cm-formatting-code-block, .cm-codeblock-info": { opacity: "0.5" },
+    // 펜스 원문은 코드 블록 글자색으로 (마크다운 기본 강조가 안쪽 span에 붙이는 색은 무시. 어두운 배경에서 안 보임)
+    ".cm-codeblock-line .cm-formatting-code-block, .cm-codeblock-line .cm-formatting-code-block *, .cm-codeblock-info, .cm-codeblock-info *": { color: "inherit" },
+    // 도구 모음: 블록 오른쪽 위, 마우스를 올렸을 때만
+    ".cm-codeblock-toolbar": {
+        position: "absolute",
+        top: "6px",
+        // 상자 오른쪽 끝에서 8px 안쪽
+        right: `calc(${CONTAINER_RIGHT} + ${BLOCK_MARGIN_X} + 6px)`,
+        zIndex: "2",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "3px 8px",
+        borderRadius: "6px",
+        border: "1px solid",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: "12px",
+        lineHeight: "18px",
+        opacity: "0",
+        pointerEvents: "none",
+        transition: "opacity 120ms ease",
+        userSelect: "none",
+    },
+    "&light .cm-codeblock-toolbar": {
+        backgroundColor: "#ffffff",
+        borderColor: "rgba(0, 0, 0, 0.08)",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
+        color: "#6b7280",
+    },
+    "&dark .cm-codeblock-toolbar": {
+        backgroundColor: "#1f2937",
+        borderColor: "rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.4)",
+        color: "#9ca3af",
+    },
+    ".cm-codeblock-hovered .cm-codeblock-toolbar": { opacity: "1", pointerEvents: "auto" },
+    ".cm-codeblock-sep": { width: "1px", alignSelf: "stretch", backgroundColor: "currentColor", opacity: "0.3" },
+    ".cm-codeblock-copy": {
+        display: "inline-flex",
+        width: "14px",
+        height: "14px",
+        cursor: "pointer",
+    },
+    ".cm-codeblock-copy svg": { width: "100%", height: "100%" },
+    ".cm-codeblock-copy:hover": { color: "#374151" },
+    "&dark .cm-codeblock-copy:hover": { color: "#e5e7eb" },
+    ".cm-codeblock-copied": { color: "#16a34a !important" },
+    "@media (prefers-reduced-motion: reduce)": {
+        ".cm-codeblock-toolbar": { transition: "none" },
+    },
+});
+// ---------------------------------------------------------------------------
+// 선택 영역과 커서
+// ---------------------------------------------------------------------------
+// drawSelection의 선택 영역은 줄 뒤에 그려지므로, 테마가 코드 블록에 불투명한 배경을 칠하면 가려집니다.
+// 코드 블록 안의 선택 부분에 클래스를 붙여 테마가 그 위에 선택 색을 칠할 수 있게 합니다.
+const selectedMark = Decoration.mark({ class: "cm-codeblock-selected" });
+function buildSelection(view) {
+    const { state } = view;
+    const ranges = [];
+    for (const range of state.selection.ranges) {
+        if (range.empty)
+            continue;
+        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;
+            syntaxTree(state).iterate({
+                from,
+                to,
+                enter(node) {
+                    if (node.name === "FencedCode") {
+                        const start = Math.max(from, node.from);
+                        const end = Math.min(to, node.to);
+                        if (start < end)
+                            ranges.push(selectedMark.range(start, end));
+                        return false;
+                    }
+                    if (!CONTAINERS.has(node.name))
+                        return false;
+                },
+            });
+        }
+    }
+    return ranges.length ? Decoration.set(ranges, true) : Decoration.none;
+}
+const codeSelection = ViewPlugin.fromClass(class {
+    decorations;
+    constructor(view) {
+        this.decorations = buildSelection(view);
+    }
+    update(update) {
+        if (update.selectionSet ||
+            update.docChanged ||
+            update.viewportChanged ||
+            syntaxTree(update.startState) !== syntaxTree(update.state)) {
+            // 선택이 없으면(가장 흔한 경우) 트리를 훑지 않습니다.
+            this.decorations = update.state.selection.ranges.some((r) => !r.empty)
+                ? buildSelection(update.view)
+                : Decoration.none;
+        }
+    }
+}, { decorations: (plugin) => plugin.decorations });
+/** 커서가 코드 블록 안이면 에디터에 클래스를 붙입니다. (테마가 커서 색을 바꿀 수 있도록) */
+const cursorInCode = EditorView.editorAttributes.of((view) => fencedCodeAt(view.state, view.state.selection.main.head) ? { class: "cm-codeblock-cursor" } : null);
+/**
+ * 펜스 코드 블록(```` ```lang ````)을 CodeMirror(Lezer) 언어 파서로 강조해 보여주는 확장입니다.
+ * - 언어: 정보 문자열의 첫 단어(별칭 포함, 예: ts, js, py). `languages`에서 찾고, 처음 쓰일 때 불러옵니다.
+ *   ```ts
+ *   import { languages } from "@codemirror/language-data";
+ *   codeBlock({ languages, theme: vscodeTheme(themeJsonText) });
+ *   ```
+ * - 코드 블록마다 따로 파싱하므로 문서 전체 구문 트리에 다른 언어가 섞이지 않습니다.
+ *   lang-markdown의 `codeLanguages`와 함께 쓰면 두 강조가 겹치므로 함께 쓰지 마세요.
+ * - 커서가 블록 밖이면 펜스 줄을 숨기고, 안이면 펜스 원문을 보여줍니다.
+ * - 블록에 마우스를 올리면 오른쪽 위에 도구 모음(언어, 복사 버튼)을 보여줍니다.
+ */
+export function codeBlock(options = {}) {
+    const { languages = [], theme = defaultCodeTheme, copyButton = true } = options;
+    return [
+        hoveredCodeBlock,
+        codeBlockPlugin(languages, theme, copyButton),
+        codeSelection,
+        cursorInCode,
+        hoverHandler,
+        copyHandler,
+        baseTheme,
+        theme.extension,
+    ];
+}