@moda-editor/core 0.1.1 → 0.1.3

package/dist/features/code-block.js

@@ -1,7 +1,7 @@
 import { firstTextPath, nodeAt } from "../model/traverse.js";
 import { leafPoint } from "../state/apply.js";
 import { normalizedRange, pointCmp, pointEq, textSelection, } from "../state/selection.js";
-import { highlightCode } from "../presets/highlight.js";
+import { codeLangOptions, highlightCode, } from "../presets/highlight.js";
 import { PATH_ATTR } from "../view/dom.js";
 import { defineFeature } from "./feature.js";
 import { blockRule, blockText, blockTextPoint, caretBlockPath, } from "../commands.js";
@@ -68,20 +68,403 @@ export const toggleCodeBlock = ({ state, tr, dispatch }) => {
 export function setCodeLanguage(language) {
     return ({ state, tr, dispatch }) => {
         const blockPath = caretBlockPath(state);
-        const block = blockPath ? nodeAt(state.doc, blockPath) : undefined;
-        if (!blockPath || block?.type !== "codeBlock")
+        if (!blockPath)
+            return false;
+        return setCodeLanguageAt(blockPath, language)({
+            state,
+            tr,
+            dispatch,
+        });
+    };
+}
+/**
+ * 경로로 지정한 코드블록의 언어 — 노드 뷰 크롬 바처럼 캐럿과
+ * 무관하게 특정 블록을 바꿀 때 쓴다.
+ */
+export function setCodeLanguageAt(blockPath, language) {
+    return ({ state, tr, dispatch }) => {
+        const block = nodeAt(state.doc, blockPath);
+        if (!block || !state.schema.nodeSpec(block.type)?.code)
             return false;
         tr.setNodeAttr(blockPath, "language", language);
         dispatch();
         return true;
     };
 }
+/** 문자열·주석·정규식을 공백으로 마스킹.
+ *  블록 주석·템플릿 리터럴은 줄을 넘나드는 상태 머신으로 처리하고,
+ *  템플릿의 `${`/`}`는 `{`/`}`로 남겨 안쪽 식의 들여쓰기도 잡는다. */
+function maskCode(src) {
+    const modes = ["code"];
+    const out = src.split("");
+    const interior = [];
+    let lineNo = 0;
+    let prevSig = ""; // 정규식 vs 나누기 판별용 — 마지막 유의미 문자
+    let rxClass = false;
+    for (let i = 0; i < src.length; i++) {
+        const c = src[i];
+        const n = src[i + 1] ?? "";
+        const top = modes[modes.length - 1];
+        const blank = () => {
+            out[i] = " ";
+        };
+        if (c === "\n") {
+            lineNo++;
+            // 다음 줄이 여러 줄 구문의 "본문"에서 시작하는지 기록 —
+            // 'line' 주석은 \n에서 끝나고 sq/dq/rx도 줄 끝에서 닫히므로
+            // 남는 다중줄 모드(block/tmpl 또는 tmpl 안 code)만 본다
+            const next = modes.filter((m) => m === "block" || m === "tmpl").length > 0
+                && !(modes.length > 1 && modes[modes.length - 1] === "code");
+            if (next)
+                interior[lineNo] = true;
+        }
+        switch (top) {
+            case "line":
+                if (c === "\n")
+                    modes.pop();
+                else
+                    blank();
+                break;
+            case "block":
+                if (c === "*" && n === "/") {
+                    blank();
+                    out[++i] = " ";
+                    modes.pop();
+                }
+                else if (c !== "\n")
+                    blank();
+                break;
+            case "sq":
+            case "dq": {
+                const q = top === "sq" ? "'" : '"';
+                if (c === "\n")
+                    modes.pop(); // 미닫힘 문자열 — 개행은 유지
+                else {
+                    blank();
+                    if (c === "\\")
+                        out[++i] = " ";
+                    else if (c === q)
+                        modes.pop();
+                }
+                break;
+            }
+            case "tmpl":
+                if (c === "\\") {
+                    blank();
+                    out[++i] = " ";
+                }
+                else if (c === "`") {
+                    blank();
+                    modes.pop();
+                }
+                else if (c === "$" && n === "{") {
+                    // ${ 식 — 코드 구간으로 돌아간다. 여는 기호는 { 로 남긴다
+                    blank();
+                    out[++i] = "{";
+                    modes.push("code");
+                }
+                else if (c !== "\n")
+                    blank();
+                break;
+            case "rx":
+                if (c === "\n")
+                    modes.pop(); // 미닫힘 정규식 — 개행은 유지
+                else {
+                    blank();
+                    if (c === "\\")
+                        out[++i] = " ";
+                    else if (c === "[")
+                        rxClass = true;
+                    else if (c === "]")
+                        rxClass = false;
+                    else if (c === "/" && !rxClass)
+                        modes.pop();
+                }
+                break;
+            default: {
+                // "code" — 템플릿 ${} 안이면 } 가 이 구간을 닫는다
+                if (c === "/" && n === "/") {
+                    blank();
+                    out[++i] = " ";
+                    modes.push("line");
+                }
+                else if (c === "/" && n === "*") {
+                    blank();
+                    out[++i] = " ";
+                    modes.push("block");
+                }
+                else if (c === "'")
+                    modes.push("sq");
+                else if (c === '"')
+                    modes.push("dq");
+                else if (c === "`")
+                    modes.push("tmpl");
+                else if (c === "/" &&
+                    "(,=:[!&|?{};+-*%<>\n~^".includes(prevSig || "\n")) {
+                    modes.push("rx");
+                    rxClass = false;
+                    blank();
+                }
+                else if (c === "}" && modes.length > 1) {
+                    // 템플릿 ${} 의 닫기 — 식 구간을 빠져나간다
+                    modes.pop();
+                }
+                if (!/\s/.test(c))
+                    prevSig = c;
+            }
+        }
+    }
+    return { text: out.join(""), interior };
+}
+const BRACE_LANGS = new Set([
+    "js", "jsx", "ts", "tsx", "javascript", "typescript",
+    "java", "c", "cpp", "cs", "go", "rust", "rs", "php",
+    "swift", "kotlin", "kt", "css", "scss", "less", "json",
+]);
+const MARKUP_LANGS = new Set(["html", "xml", "vue", "svelte"]);
+const SHELL_LANGS = new Set(["sh", "bash", "shell", "zsh"]);
+/** 들여쓰기 단위 추정 — 탭이 우세하면 탭, 아니면 가장 얕은 기존
+ *  들여쓰기 폭(2/4)을 따르고 둘 다 없으면 prettier 관례 2칸 */
+function indentUnit(lines) {
+    let tabs = 0;
+    let minSpace = 0;
+    for (const l of lines) {
+        const ws = l.match(/^[ \t]+/)?.[0];
+        if (!ws)
+            continue;
+        if (ws.includes("\t"))
+            tabs++;
+        else if (!minSpace || ws.length < minSpace)
+            minSpace = ws.length;
+    }
+    if (tabs > 0)
+        return "\t";
+    if (minSpace >= 3)
+        return "    ";
+    return "  ";
+}
+/** 중괄호 계열 재들여쓰기 — 줄 구조는 건드리지 않고 선행 공백만
+ *  깊이에 맞게 다시 쓴다. case/default 라벨도 깊이로 모델한다 */
+function reindentBraces(code, unit) {
+    const mask = maskCode(code);
+    const masked = mask.text.split("\n");
+    const lines = code.split("\n");
+    const stack = [];
+    return lines
+        .map((line, i) => {
+        const t = (masked[i] ?? "").trim();
+        // 여러 줄 문자열/블록 주석/템플릿 본문 — 값이 바뀌므로 원문 유지
+        if (mask.interior[i])
+            return line;
+        if (!t) {
+            // 주석 전용 줄은 깊이에 맞춰 재들여쓰기, 진짜 빈 줄은 빈 줄로
+            return line.trim() ? unit.repeat(stack.length) + line.trim() : "";
+        }
+        const leadClosers = t.match(/^[}\])]+/)?.[0].length ?? 0;
+        const isCase = /^(case\b[^:]*|default)\s*:/.test(t);
+        for (let k = 0; k < leadClosers; k++) {
+            // 한 개의 } 는 열린 case 몸통과 그 블록을 함께 닫는다
+            if (stack[stack.length - 1] === "case")
+                stack.pop();
+            if (stack[stack.length - 1] === "brace")
+                stack.pop();
+        }
+        if (isCase && stack[stack.length - 1] === "case")
+            stack.pop();
+        const indent = stack.length;
+        if (isCase)
+            stack.push("case");
+        for (const ch of t.slice(leadClosers)) {
+            if (ch === "{" || ch === "[" || ch === "(")
+                stack.push("brace");
+            else if (ch === "}" || ch === "]" || ch === ")") {
+                if (stack[stack.length - 1] === "case")
+                    stack.pop();
+                if (stack[stack.length - 1] === "brace")
+                    stack.pop();
+            }
+        }
+        return unit.repeat(indent) + line.trim();
+    })
+        .join("\n");
+}
+const VOID_TAGS = new Set([
+    "area", "base", "br", "col", "embed", "hr", "img", "input",
+    "link", "meta", "param", "source", "track", "wbr",
+]);
+/** HTML/XML 계열 재들여쓰기 — 태그 열기/닫기만 센다 */
+function reindentTags(code, unit) {
+    const masked = code
+        .replace(/<!--[\s\S]*?-->/g, (m) => m.replace(/[^\n]/g, " "))
+        .split("\n");
+    const lines = code.split("\n");
+    let depth = 0;
+    return lines
+        .map((line, i) => {
+        const t = (masked[i] ?? "").trim();
+        if (!t)
+            return "";
+        const leadClose = /^<\//.test(t);
+        if (leadClose)
+            depth = Math.max(0, depth - 1);
+        const indent = depth;
+        for (const m of t.matchAll(/<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>/g)) {
+            if (m[1] === "/")
+                depth = Math.max(0, depth - 1);
+            else if (!m[3].trimEnd().endsWith("/") && !VOID_TAGS.has(m[2].toLowerCase()))
+                depth++;
+        }
+        return unit.repeat(indent) + line.trim();
+    })
+        .join("\n");
+}
+/** POSIX 쉘 재들여쓰기 — if/fi, for|while/done, case/esac, {} 블록 */
+function reindentShell(code, unit) {
+    const lines = code.split("\n");
+    let depth = 0;
+    return lines
+        .map((line) => {
+        // 문자열과 # 주석을 지운 스캔용 사본
+        const t = line
+            .replace(/"(?:[^"\\]|\\.)*"?/g, "")
+            .replace(/'(?:[^'\\]|\\.)*'?/g, "")
+            .replace(/#[^\n]*/, "")
+            .trim();
+        if (!t)
+            return "";
+        // elif/else/then/do 는 이전 몸통을 닫고 다음 몸통을 연다
+        const transient = /^(elif|else|then|do|fi|done|esac|\}|\))/.test(t) ? 1 : 0;
+        const indent = Math.max(0, depth - transient);
+        if (/^(elif|else|then|do)\b/.test(t)) {
+            // 같은 깊이에서 계속 — 순수 클로저만 depth를 낮춘다
+        }
+        else if (/^(fi|done|esac|\}|\))/.test(t)) {
+            depth = Math.max(0, depth - 1);
+        }
+        if (/^(if|for|while|until|select|case)\b/.test(t) || /\b(then|do)\s*$/.test(t) || /\{\s*$/.test(t)) {
+            depth++;
+        }
+        return unit.repeat(indent) + line.trim();
+    })
+        .join("\n");
+}
+const SQL_KEYWORDS = new Set([
+    "select", "from", "where", "group", "by", "having", "order",
+    "limit", "offset", "insert", "into", "values", "update", "set",
+    "delete", "join", "inner", "left", "right", "full", "outer", "on",
+    "as", "and", "or", "not", "null", "is", "in", "exists", "union",
+    "all", "distinct", "case", "when", "then", "else", "end",
+    "between", "like", "asc", "desc", "create", "table", "drop",
+    "alter", "primary", "key", "foreign", "references", "index",
+]);
+/** SQL — 예약어를 대문자로 (문자열/주석 밖만) */
+function upperSqlKeywords(code) {
+    // -- 줄 주석도 마스킹에 포함 (maskCode는 C 계열 주석만 안다)
+    const masked = maskCode(code).text.replace(/--[^\n]*/g, (m) => " ".repeat(m.length));
+    return code.replace(/\b[a-z]+\b/gi, (w, off) => masked[off] !== " " && SQL_KEYWORDS.has(w.toLowerCase())
+        ? w.toUpperCase()
+        : w);
+}
 /**
- * 선택과 겹치는 최상위 `code: true` 블록별 문자 좌표를 돌려준다.
- * 컨테이너 경계 포인트(전체 선택의 {path:[],offset:k} 등)는 텍스트
- * 리프로 내려 해석하고, 블록 밖으로 나간 엔드포인트는 그 블록의
- * 경계로 클램프한다 — Mod-A 처럼 여러 블록을 걸친 선택에서도
- * 코드 블록 구간만 정확히 잘라낸다.
+ * 코드 서식 정리 — 언어 서버 없이 안전한 수준만 한다:
+ *  - 언어가 json이거나(미지정이고 {/[ 로 시작할 때) JSON으로 파싱되면
+ *    2칸 pretty-print
+ *  - 중괄호 계열(js/ts/java/c/go/rust/php/css…): 브래킷 깊이로
+ *    재들여쓰기 — 문자열·주석·템플릿·정규식 안의 기호는 세지 않는다
+ *  - 마크업(html/xml/vue/svelte): 태그 깊이로 재들여쓰기
+ *  - 쉘(sh/bash): if/fi·do/done·case/esac·{} 블록으로 재들여쓰기
+ *  - sql: 예약어 대문자화
+ *  - 모든 언어: 줄 끝 공백 제거 + 3개 이상 연속 빈 줄을 2개로 +
+ *    파일 끝 빈 줄 제거 (EditorConfig/prettier 공통 규칙)
+ * 들여쓰기 단위는 기존 코드에서 추정하고 없으면 2칸. 줄 구조는 바꾸지
+ * 않는다 — 선행 공백만 다시 쓰는 수준이라 깨진 코드에서도 안전하다.
+ * 바뀔 게 없으면 null.
+ */
+export function formatCodeText(code, language) {
+    let out = code;
+    const lang = language.toLowerCase();
+    const lead = code.trimStart()[0] ?? "";
+    let jsonOk = false;
+    if (lang === "json" || (!lang && (lead === "{" || lead === "["))) {
+        try {
+            out = JSON.stringify(JSON.parse(code), null, 2);
+            jsonOk = true;
+        }
+        catch {
+            // 깨진 JSON은 아래 재들여쓰기·공통 정리만 적용한다
+        }
+    }
+    if (!jsonOk) {
+        const unit = indentUnit(out.split("\n"));
+        if (BRACE_LANGS.has(lang) || (!lang && lead === "{")) {
+            out = reindentBraces(out, unit);
+        }
+        else if (MARKUP_LANGS.has(lang)) {
+            out = reindentTags(out, unit);
+        }
+        else if (SHELL_LANGS.has(lang)) {
+            out = reindentShell(out, unit);
+        }
+        else if (lang === "sql") {
+            out = upperSqlKeywords(out);
+        }
+    }
+    out = out
+        .split("\n")
+        .map((l) => l.replace(/[ \t]+$/, ""))
+        .join("\n")
+        .replace(/\n{3,}/g, "\n\n")
+        .replace(/\n+$/, "");
+    return out === code ? null : out;
+}
+/**
+ * 경로로 지정한 코드블록 서식 정리 — 노드 뷰 크롬 바처럼 캐럿과
+ * 무관하게 특정 블록을 정리할 때 쓴다. 이 블록 안의 셀렉션
+ * 엔드포인트는 새 텍스트 길이로 클램프해 보존한다.
+ */
+export function formatCodeAt(blockPath) {
+    return ({ state, tr, dispatch }) => {
+        const block = nodeAt(state.doc, blockPath);
+        if (!block || !state.schema.nodeSpec(block.type)?.code)
+            return false;
+        const text = (block.content ?? []).map((c) => c.text ?? "").join("");
+        const formatted = formatCodeText(text, String(block.attrs?.["language"] ?? ""));
+        if (formatted == null)
+            return false;
+        const next = {
+            ...block,
+            content: [{ type: "text", text: formatted }],
+        };
+        tr.replaceNode(blockPath, next);
+        const sel = state.selection;
+        if (sel.type === "text") {
+            const fix = (p) => {
+                const off = charOffset(block, blockPath, leafPoint(state.doc, p));
+                return off == null
+                    ? p
+                    : charPoint(next, blockPath, Math.min(off, formatted.length));
+            };
+            tr.setSelection(textSelection(fix(sel.anchor), fix(sel.focus)));
+        }
+        dispatch();
+        return true;
+    };
+}
+/** 캐럿 코드블록 서식 정리 — Shift-Alt-F/정리 버튼 (VS Code 관례) */
+export const formatCode = (ctx) => {
+    const c = codeContext(ctx.state);
+    if (!c)
+        return false;
+    return formatCodeAt(c.blockPath)(ctx);
+};
+/**
+ * 선택과 겹치는 `code: true` 블록별 문자 좌표를 돌려준다.
+ * 콜아웃·인용 같은 컨테이너 안의 중첩 코드블록도 찾는다 —
+ * 톱레벨 인덱스(loI..hiI)로 먼저 좁히고 그 아래를 임의 깊이로
+ * 순회한다. 컨테이너 경계 포인트(전체 선택의 {path:[],offset:k}
+ * 등)는 텍스트 리프로 내려 해석하고, 블록 밖으로 나간 엔드포인트는
+ * 그 블록의 경계로 클램프한다 — Mod-A 처럼 여러 블록을 걸친
+ * 선택에서도 코드 블록 구간만 정확히 잘라낸다.
  */
 function codeSelectionContexts(state) {
     const sel = state.selection;
@@ -95,28 +478,53 @@ function codeSelectionContexts(state) {
     if (loI == null || hiI == null)
         return [];
     const out = [];
+    const visit = (block, blockPath) => {
+        if (state.schema.nodeSpec(block.type)?.code) {
+            // 선택과 실제로 겹치는 블록만 낸다 — 리프를 부모 레벨의 자식
+            // 인덱스로 환산해 비교한다 (pointCmp는 리프와 부모 경계 포인트를
+            // 비교하지 못한다 — 경로 길이 차이로 항상 "뒤" 판정).
+            // -1: 리프가 블록보다 앞, 0: 블록 서브트리 안, +1: 뒤
+            const pl = blockPath.length - 1;
+            const last = blockPath[pl];
+            const rel = (leaf) => {
+                for (let i = 0; i < pl; i++) {
+                    const li = leaf.path[i];
+                    if (li !== blockPath[i])
+                        return (li ?? -1) < blockPath[i] ? -1 : 1;
+                }
+                const idx = leaf.path[pl];
+                if (idx == null)
+                    return 0;
+                return idx < last ? -1 : idx > last ? 1 : 0;
+            };
+            if (rel(aLeaf) > 0 || rel(fLeaf) < 0)
+                return;
+            const text = (block.content ?? []).map((c) => c.text ?? "").join("");
+            // 블록 밖 엔드포인트는 앞이면 0, 뒤면 끝으로 클램프
+            const clamp = (leaf) => {
+                const off = charOffset(block, blockPath, leaf);
+                if (off != null)
+                    return off;
+                return pointCmp(leaf, { path: blockPath, offset: 0 }) <= 0
+                    ? 0
+                    : text.length;
+            };
+            out.push({
+                blockPath,
+                block,
+                text,
+                from: clamp(aLeaf),
+                to: clamp(fLeaf),
+            });
+            return;
+        }
+        for (const [i, child] of (block.content ?? []).entries()) {
+            if (child.type !== "text")
+                visit(child, [...blockPath, i]);
+        }
+    };
     for (let i = loI; i <= hiI && i < (state.doc.content?.length ?? 0); i++) {
-        const block = state.doc.content[i];
-        if (!state.schema.nodeSpec(block.type)?.code)
-            continue;
-        const blockPath = [i];
-        const text = (block.content ?? []).map((c) => c.text ?? "").join("");
-        // 블록 밖 엔드포인트는 앞이면 0, 뒤면 끝으로 클램프
-        const clamp = (leaf) => {
-            const off = charOffset(block, blockPath, leaf);
-            if (off != null)
-                return off;
-            return pointCmp(leaf, { path: blockPath, offset: 0 }) <= 0
-                ? 0
-                : text.length;
-        };
-        out.push({
-            blockPath,
-            block,
-            text,
-            from: i === loI ? clamp(aLeaf) : 0,
-            to: i === hiI ? clamp(fLeaf) : text.length,
-        });
+        visit(state.doc.content[i], [i]);
     }
     return out;
 }
@@ -526,8 +934,10 @@ export const toggleCodeComment = ({ state, tr, dispatch }) => {
         return false;
     const selR = normalizedRange(state.selection);
     const remap = (leaf) => {
-        const bi = leaf.path[0];
-        const pi = parts.findIndex((p) => p.ctx.blockPath[0] === bi);
+        // 리프가 어느 코드블록 서브트리에 속하는지 — 중첩 블록은
+        // 톱레벨 인덱스가 같을 수 있으니 경로 접두어로 판정한다
+        const pi = parts.findIndex((p) => leaf.path.length >= p.ctx.blockPath.length &&
+            p.ctx.blockPath.every((v, i) => v === leaf.path[i]));
         if (pi < 0)
             return leaf;
         const p = parts[pi];
@@ -702,9 +1112,107 @@ const CODE_PAIRS = {
 /** 타입오버 대상 — 닫기/인용이 바로 뒤에 있으면 입력 대신 넘어간다 */
 const CODE_CLOSERS = ")]}'\"`";
 const isCodeBlock = (state, block) => state.schema.nodeSpec(block.type)?.code === true;
+const codeUIs = new WeakMap();
+/** 캐럿이 속한 코드블록의 pre — 코드 캐럿 아니면 null */
+function activePreEl(el, state) {
+    const ctx = codeContext(state);
+    if (!ctx)
+        return null;
+    const pre = el.querySelector(`pre[${PATH_ATTR}="${ctx.blockPath.join(",")}"]`);
+    // nodeView 안의 코드블록은 컴포넌트 크롬(.me-codehead)이 소유 —
+    // 오버레이와 이중으로 뜨지 않게 둔다
+    if (!pre || pre.closest(".me-node-view"))
+        return null;
+    return { pre, lang: String(ctx.block.attrs?.["language"] ?? "") };
+}
+function ensureCodeUI(el, editor) {
+    const hit = codeUIs.get(el);
+    if (hit)
+        return hit;
+    const doc = el.ownerDocument;
+    const box = doc.createElement("div");
+    box.className = "me-codeui";
+    box.hidden = true;
+    const sel = doc.createElement("select");
+    sel.className = "me-lang me-codelang";
+    sel.title = "코드 언어";
+    const mkBtn = (label, act, title) => {
+        const b = doc.createElement("button");
+        b.type = "button";
+        b.className = "me-codebtn";
+        b.setAttribute("data-code-act", act);
+        b.title = title;
+        b.textContent = label;
+        return b;
+    };
+    box.append(sel, mkBtn("정리", "format", "코드 서식 정리 (Alt+Shift+F) — JSON pretty-print·줄 끝 공백·빈 줄 정리"), mkBtn("⧉", "copy", "코드 복사"));
+    (el.parentElement ?? el).appendChild(box);
+    const ui = { box, sel };
+    codeUIs.set(el, ui);
+    // 버튼은 캐럿을 빼앗지 않는다 — select는 기본 동작(드롭다운)이
+    // 필요해 mousedown을 먹지 않는다
+    box.addEventListener("mousedown", (e) => {
+        if (!(e.target instanceof HTMLSelectElement))
+            e.preventDefault();
+    });
+    sel.addEventListener("change", () => {
+        editor.commands["setCodeLanguage"]?.(sel.value);
+    });
+    box.addEventListener("click", (e) => {
+        const t = e.target;
+        if (!(t instanceof Element))
+            return;
+        const act = t.closest("[data-code-act]")?.getAttribute("data-code-act");
+        if (act === "format") {
+            editor.commands["formatCode"]?.();
+        }
+        else if (act === "copy") {
+            const text = codeTextAt(editor.state);
+            if (text != null) {
+                void el.ownerDocument.defaultView?.navigator?.clipboard?.writeText(text);
+            }
+        }
+    });
+    // 레이아웃 변화로 위치가 어긋나면 다시 맞춘다
+    if (typeof ResizeObserver !== "undefined") {
+        new ResizeObserver(() => {
+            if (!ui.box.hidden)
+                paintCodeOverlay(el, editor);
+        }).observe(el);
+    }
+    return ui;
+}
+/** 캐럿이 코드블록 안이면 바를 pre 우측 상단에 맞춘다 — 아니면 숨긴다 */
+function paintCodeOverlay(el, editor) {
+    const ui = ensureCodeUI(el, editor);
+    const found = activePreEl(el, editor.state);
+    if (!found) {
+        ui.box.hidden = true;
+        return;
+    }
+    const { pre, lang } = found;
+    const host = ui.box.offsetParent ?? el.parentElement;
+    const hr = host?.getBoundingClientRect();
+    const r = pre.getBoundingClientRect();
+    ui.box.style.left = `${r.right - (hr?.left ?? 0)}px`;
+    ui.box.style.top = `${r.top - (hr?.top ?? 0)}px`;
+    // 셀렉트 옵션 동기화 — 목록에 없는 언어는 원값 옵션을 덧붙인다
+    const opts = codeLangOptions(lang);
+    const cur = [...ui.sel.options].map((o) => o.value);
+    if (cur.length !== opts.length || cur.some((v, i) => v !== opts[i].value)) {
+        ui.sel.replaceChildren(...opts.map((l) => {
+            const o = el.ownerDocument.createElement("option");
+            o.value = l.value;
+            o.textContent = l.label;
+            return o;
+        }));
+    }
+    ui.sel.value = lang;
+    ui.box.hidden = false;
+}
 export const codeBlockFeature = defineFeature({
     name: "codeBlock",
-    description: "코드블록 — ``` 입력 규칙, 구문 하이라이트, Tab 들여쓰기·Mod-/ 주석·Alt-↑↓ 줄 이동·화살표 탈출 (Ace 관례)",
+    description: "코드블록 — ``` 입력 규칙, 구문 하이라이트, 언어 셀렉트·서식 정리·복사 크롬(nodeViews 코드 카드 헤더, 미등록 시 .me-codeui 폴백), Tab 들여쓰기·Mod-/ 주석·Alt-↑↓ 줄 이동·화살표 탈출 (Ace 관례)",
     nodes: {
         codeBlock: {
             content: "inline*",
@@ -733,6 +1241,9 @@ export const codeBlockFeature = defineFeature({
     commands: {
         toggleCodeBlock,
         setCodeLanguage: (ctx, lang) => setCodeLanguage(String(lang ?? ""))(ctx),
+        setCodeLanguageAt: (ctx, path, lang) => setCodeLanguageAt(path, String(lang ?? ""))(ctx),
+        formatCode,
+        formatCodeAt: (ctx, path) => formatCodeAt(path)(ctx),
         toggleCodeComment,
         moveCodeLines: (ctx, dir) => moveCodeLines(dir === "up" ? "up" : "down")(ctx),
         duplicateCodeLines,
@@ -746,6 +1257,8 @@ export const codeBlockFeature = defineFeature({
         ArrowUp: exitCodeArrow("up"),
         // 코드블록 줄 편집 — Ace/VS Code 관례 (밖이면 폴스루)
         "Mod-/": toggleCodeComment,
+        // 서식 정리 — VS Code Format Document (Shift+Alt+F) 관례
+        "Alt-Shift-f": formatCode,
         "Alt-ArrowUp": moveCodeLines("up"),
         "Alt-ArrowDown": moveCodeLines("down"),
         "Mod-Shift-d": duplicateCodeLines,
@@ -918,11 +1431,13 @@ export const codeBlockFeature = defineFeature({
             return false;
         },
         /**
-         * DOM 오버레이 — 활성 줄 표시(Ace highlightActiveLine)와 캐럿
-         * 인접 괄호 쌍 하이라이트(Ace bracket matching). 둘 다 doc을
-         * 만지지 않는 DOM 마킹이다.
+         * DOM 오버레이 — 활성 줄 표시(Ace highlightActiveLine)·캐럿
+         * 인접 괄호 쌍 하이라이트(Ace bracket matching)·코드 크롬 바
+         * (.me-codeui — 언어 셀렉트/정리/복사). doc을 만지지 않는다.
          */
-        paintOverlay(el, state) {
+        paintOverlay(el, state, editor) {
+            // 캐럿이 코드블록 안이면 크롬 바를 pre 우측 상단에 맞춘다
+            paintCodeOverlay(el, editor);
             // 활성 줄 — DOM 셀렉션 앵커가 있는 .me-cl에만 is-active를 단다
             const s = el.ownerDocument.getSelection?.();
             const node = s?.anchorNode ?? null;