@moda-editor/core 0.1.2 → 0.1.5

package/dist/features/code-block.js

@@ -1,10 +1,20 @@
-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 { nodeAt } from "../model/traverse.js";
+import { normalizedRange, pointEq, textSelection } from "../state/selection.js";
+import { codeLangOptions, highlightCode } from "../presets/highlight.js";
 import { PATH_ATTR } from "../view/dom.js";
 import { defineFeature } from "./feature.js";
+import { codeBracketAt, codeContext, codeStringMask, codeTextAt, isCodeBlock, } from "./code-context.js";
+import { dedentCode, duplicateCodeLines, exitCodeArrow, formatCode, formatCodeAt, indentCode, moveCodeLines, toggleCodeComment, } from "./code-edit.js";
 import { blockRule, blockText, blockTextPoint, caretBlockPath, } from "../commands.js";
+/**
+ * 코드블록 — ` ``` ` 입력 규칙, 구문 하이라이트, Ace/VS Code 관례의
+ * 코드 편집 명령(들여쓰기·주석 토글·줄 이동/복제·괄호 매칭·화살표
+ * 탈출). 코드 텍스트는 마크 없는 순수 텍스트다.
+ *
+ * 모듈 구성 — 이 파일은 스키마·블록 변환·크롬 UI·feature 정의만 갖고,
+ * 컨텍스트 해석은 code-context.ts, 편집 커맨드는 code-edit.ts,
+ * 서식 엔진은 code-format.ts에 있다.
+ */
 /**
  * 코드블록 — ` ``` ` 입력 규칙, 구문 하이라이트, Ace/VS Code 관례의
  * 코드 편집 명령(들여쓰기·주석 토글·줄 이동/복제·괄호 매칭·화살표
@@ -43,16 +53,17 @@ export const toggleCodeBlock = ({ state, tr, dispatch }) => {
             return false;
         const merged = {
             type: "codeBlock",
-            content: [
-                { type: "text", text: blocks.map(blockText).join("\n") },
-            ],
+            content: [{ type: "text", text: blocks.map(blockText).join("\n") }],
         };
         tr.delete({
             anchor: { path: [], offset: a },
             focus: { path: [], offset: b + 1 },
         });
         tr.insertNode({ path: [], offset: a }, merged);
-        tr.setSelection(textSelection({ path: [a, 0], offset: merged.content?.[0]?.text?.length ?? 0 }));
+        tr.setSelection(textSelection({
+            path: [a, 0],
+            offset: merged.content?.[0]?.text?.length ?? 0,
+        }));
         dispatch();
         return true;
     }
@@ -68,627 +79,29 @@ 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;
-        tr.setNodeAttr(blockPath, "language", language);
-        dispatch();
-        return true;
-    };
-}
-/**
- * 선택과 겹치는 최상위 `code: true` 블록별 문자 좌표를 돌려준다.
- * 컨테이너 경계 포인트(전체 선택의 {path:[],offset:k} 등)는 텍스트
- * 리프로 내려 해석하고, 블록 밖으로 나간 엔드포인트는 그 블록의
- * 경계로 클램프한다 — Mod-A 처럼 여러 블록을 걸친 선택에서도
- * 코드 블록 구간만 정확히 잘라낸다.
- */
-function codeSelectionContexts(state) {
-    const sel = state.selection;
-    if (sel.type !== "text")
-        return [];
-    const r = normalizedRange(sel);
-    const aLeaf = leafPoint(state.doc, r.anchor);
-    const fLeaf = leafPoint(state.doc, r.focus);
-    const loI = aLeaf.path[0];
-    const hiI = fLeaf.path[0];
-    if (loI == null || hiI == null)
-        return [];
-    const out = [];
-    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,
+        return setCodeLanguageAt(blockPath, language)({
+            state,
+            tr,
+            dispatch,
         });
-    }
-    return out;
-}
-/**
- * 캐럿(포커스)이 속한 코드 컨텍스트 — 포커스 리프가 그 블록 안에
- * 있어야 한다 (화살표 탈출·들여쓰기 등 캐럿 명령용). 선택만 걸치고
- * 포커스는 비코드 블록에 있으면 null.
- */
-function codeContext(state) {
-    const sel = state.selection;
-    if (sel.type !== "text")
-        return null;
-    const r = normalizedRange(sel);
-    const fLeaf = leafPoint(state.doc, r.focus);
-    // 리프가 텍스트면 부모가 블록, 컨테이너(빈 코드블록 등)면 자기 자신
-    const fBlock = nodeAt(state.doc, fLeaf.path)?.type === "text"
-        ? fLeaf.path.slice(0, -1)
-        : fLeaf.path;
-    for (const ctx of codeSelectionContexts(state)) {
-        if (ctx.blockPath.length === fBlock.length &&
-            ctx.blockPath.every((v, i) => v === fBlock[i])) {
-            return ctx;
-        }
-    }
-    return null;
-}
-/** 블록 포인트 → 병합 문자 오프셋. 블록 밖 포인트면 null */
-function charOffset(block, blockPath, p) {
-    const kids = block.content ?? [];
-    const rel = p.path.slice(blockPath.length);
-    if (!p.path.slice(0, blockPath.length).every((v, i) => v === blockPath[i])) {
-        return null;
-    }
-    if (rel.length === 0) {
-        // 컨테이너 포인트 — 앞쪽 자식들의 텍스트 합
-        let sum = 0;
-        for (let i = 0; i < Math.min(p.offset, kids.length); i++) {
-            sum += kids[i].text?.length ?? 0;
-        }
-        return sum;
-    }
-    if (rel.length !== 1)
-        return null;
-    let sum = p.offset;
-    for (let i = 0; i < rel[0] && i < kids.length; i++) {
-        sum += kids[i].text?.length ?? 0;
-    }
-    return sum;
-}
-/** 병합 문자 오프셋 → 텍스트 포인트 (기존 자식 경계로 해석) */
-function charPoint(block, blockPath, off, lens) {
-    const kids = block.content ?? [];
-    let rest = off;
-    for (let i = 0; i < kids.length; i++) {
-        const t = lens?.[i] ?? kids[i].text?.length ?? 0;
-        if (rest <= t || i === kids.length - 1) {
-            return { path: [...blockPath, i], offset: Math.min(rest, t) };
-        }
-        rest -= t;
-    }
-    return { path: [...blockPath, 0], offset: 0 };
-}
-/**
- * 문자열/주석 토큰 안의 문자 오프셋 판정 — spec.codeHighlighter로
- * 토큰화해 그 구간에 있으면 true를 돌린다 (Ace가 페어링·매칭을
- * 끌 때 쓰는 isCodeLike 관례). 하이라이터가 없으면 null.
- */
-export function codeStringMask(state, block) {
-    const hl = state.schema.nodeSpec(block.type)?.codeHighlighter;
-    if (!hl)
-        return null;
-    const text = (block.content ?? []).map((c) => c.text ?? "").join("");
-    const lang = block.attrs?.["language"] ?? null;
-    const spans = [];
-    let i = 0;
-    for (const t of hl(text, lang)) {
-        const end = i + t.text.length;
-        if (t.kind === "string" || t.kind === "comment") {
-            const first = t.text[0] ?? "";
-            // 열린 토큰(//·# 라인 주석, 닫히지 않은 문자열/블록 주석)은
-            // 끝 경계도 안쪽으로 본다 — 그 자리의 입력이 토큰을 이어받는다
-            const open = first === "#" ||
-                (first === "/" && !t.text.endsWith("*/")) ||
-                (first !== "/" &&
-                    first !== "#" &&
-                    !(t.text.length > 1 && t.text.endsWith(first)));
-            spans.push([i, open ? end + 1 : end]);
-        }
-        i = end;
-    }
-    return (off) => spans.some(([a, b]) => off >= a && off < b);
-}
-/** 문자열의 줄 시작 오프셋 목록 (0과 각 '\n' 직후) */
-function lineStarts(text) {
-    const out = [0];
-    for (let i = 0; i < text.length; i++) {
-        if (text[i] === "\n")
-            out.push(i + 1);
-    }
-    return out;
-}
-const CODE_TAB = "\t";
-const CODE_TAB_SIZE = 4;
-// ── 들여쓰기 (VS Code 관례) ───────────────────────────────
-/**
- * Tab — 코드블록 들여쓰기. collapsed면 캐럿에 \t 삽입,
- * 범위 선택이면 걸친 줄 전부의 앞에 \t를 단다 (VS Code 관례).
- * 코드블록 밖이면 false — 리스트/표 키바인딩으로 폴스루.
- */
-export const indentCode = ({ state, tr, dispatch }) => {
-    const ctx = codeContext(state);
-    if (!ctx)
-        return false;
-    const { blockPath, block, text, from, to } = ctx;
-    if (from === to) {
-        const at = charPoint(block, blockPath, from);
-        tr.insertText(CODE_TAB, at);
-        // 삽입 후 길이로 해석해야 from+1이 삽입 전 길이에 클램프되지 않는다
-        const kidIdx = at.path[at.path.length - 1];
-        const lens = (block.content ?? []).map((k, i) => (k.text?.length ?? 0) + (i === kidIdx ? 1 : 0));
-        tr.setSelection(textSelection(charPoint(block, blockPath, from + 1, lens)));
-        dispatch();
-        return true;
-    }
-    // 걸친 줄들의 시작 — 'to'가 정확히 줄 시작이면 그 줄은 제외
-    const starts = lineStarts(text);
-    const start0 = Math.max(...starts.filter((s) => s <= from));
-    const covered = starts.filter((s) => s >= start0 && s < to);
-    if (!covered.length)
-        return false;
-    // 뒤쪽 줄부터 삽입해야 앞쪽 좌표가 안 밀린다
-    const kids = block.content ?? [];
-    const extra = kids.map(() => 0);
-    for (const s of [...covered].sort((a, b) => b - a)) {
-        const p = charPoint(block, blockPath, s);
-        tr.insertText(CODE_TAB, p);
-        extra[p.path[p.path.length - 1]] += 1;
-    }
-    const lens = kids.map((k, i) => (k.text?.length ?? 0) + extra[i]);
-    const shift = (off) => off + covered.filter((s) => s <= off).length;
-    tr.setSelection(textSelection(charPoint(block, blockPath, shift(from), lens), charPoint(block, blockPath, shift(to), lens)));
-    dispatch();
-    return true;
-};
-/**
- * Shift-Tab — 코드블록 내어쓰기. 걸친 각 줄의 앞에서 \t 하나 또는
- * 스페이스 최대 tabSize개를 지운다. 코드블록 밖이면 false로 폴스루.
- */
-export const dedentCode = ({ state, tr, dispatch }) => {
-    const ctx = codeContext(state);
-    if (!ctx)
-        return false;
-    const { blockPath, block, text, from, to } = ctx;
-    const starts = lineStarts(text);
-    const start0 = Math.max(...starts.filter((s) => s <= from));
-    // 각 줄에서 지울 들여쓰기 — \t 하나 또는 앞쪽 연속 스페이스 최대 tabSize개
-    const edits = starts
-        .filter((s) => s >= start0 && (from === to ? s <= from : s < to))
-        .map((s) => {
-        let n = 0;
-        if (text[s] === CODE_TAB)
-            n = 1;
-        else
-            while (n < CODE_TAB_SIZE && text[s + n] === " ")
-                n++;
-        return { s, n };
-    })
-        .filter((e) => e.n > 0);
-    // 코드블록 안인데 지울 들여쓰기가 없으면 그냥 삼킨다 — false로
-    // 폴스루하면 브라우저가 포커스를 에디터 밖으로 옮긴다 (Ace/VS Code는 no-op)
-    if (!edits.length)
-        return true;
-    const kids = block.content ?? [];
-    const extra = kids.map(() => 0);
-    for (const { s, n } of [...edits].sort((a, b) => b.s - a.s)) {
-        const a = charPoint(block, blockPath, s);
-        tr.delete({
-            anchor: a,
-            focus: { path: a.path, offset: a.offset + n },
-        });
-        extra[a.path[a.path.length - 1]] -= n;
-    }
-    const lens = kids.map((k, i) => (k.text?.length ?? 0) + extra[i]);
-    // 지워진 들여쓰기만큼 좌표를 당긴다 — 줄 시작(s === off) 위치의
-    // 캐럿은 들여쓰기 앞에 머문다 (s < off 기준)
-    const shift = (off) => Math.max(0, off - edits.reduce((d, e) => d + (e.s < off ? e.n : 0), 0));
-    tr.setSelection(textSelection(charPoint(block, blockPath, shift(from), lens), charPoint(block, blockPath, shift(to), lens)));
-    dispatch();
-    return true;
-};
-/**
- * ArrowDown/ArrowUp — 코드블록 가장자리 줄 탈출 (Tiptap
- * exitOnArrowDown/Up 관례). 마지막 줄에서 ArrowDown을 누르면 블록
- * 뒤로, 첫 줄에서 ArrowUp이면 블록 앞으로 나간다 — 이웃 블록이
- * 없으면 빈 문단을 만든다. Notion의 코드블록 화살표 탈출과 같다.
- */
-export function exitCodeArrow(direction) {
-    return ({ state, tr, dispatch }) => {
-        const ctx = codeContext(state);
-        if (!ctx || ctx.from !== ctx.to)
-            return false;
-        const { blockPath, text, from } = ctx;
-        const onEdge = direction === "down"
-            ? !text.slice(from).includes("\n")
-            : !text.slice(0, from).includes("\n");
-        if (!onEdge)
-            return false;
-        const parentPath = blockPath.slice(0, -1);
-        const bi = blockPath[blockPath.length - 1];
-        const si = direction === "down" ? bi + 1 : bi - 1;
-        const sib = si >= 0 ? nodeAt(state.doc, [...parentPath, si]) : undefined;
-        if (sib) {
-            const tp = direction === "down" ? firstTextPath(sib) : null;
-            const sp = tp
-                ? [...parentPath, si, ...tp]
-                : [...parentPath, si];
-            tr.setSelection(textSelection({ path: sp, offset: 0 }));
-            dispatch();
-            return true;
-        }
-        // 이웃이 없으면 빈 문단을 만들어 탈출 — bi=0에서 ArrowUp이면
-        // 코드블록 앞에, 끝에서 ArrowDown이면 뒤에 놓인다
-        const at = { path: parentPath, offset: direction === "down" ? bi + 1 : bi };
-        tr.insertNode(at, { type: "paragraph", content: [] });
-        tr.setSelection(textSelection({ path: [...at.path, at.offset], offset: 0 }));
-        dispatch();
-        return true;
     };
 }
-/** 캐럿 코드블록의 텍스트 — 복사 버튼 등 UI용. 밖이면 null */
-export function codeTextAt(state) {
-    const ctx = codeContext(state);
-    return ctx ? ctx.text : null;
-}
-/** 코드블록 안 캐럿의 줄/열 (Ace 상태바 Ln:Col 관례). 밖이면 null */
-export function codeCaret(state) {
-    const ctx = codeContext(state);
-    if (!ctx)
-        return null;
-    const before = ctx.text.slice(0, ctx.to);
-    const nl = before.lastIndexOf("\n");
-    return { line: before.split("\n").length, col: before.length - nl };
-}
-// ── 코드 편집 명령 — 주석 토글·줄 이동/복제·괄호 매칭 (Ace 관례) ──
-/** 선택이 걸친 줄 범위 [lo, hi] — to가 정확히 줄 시작이면 그 줄은 제외 */
-function codeLineRange(text, from, to) {
-    const starts = lineStarts(text);
-    const lo = starts.filter((s) => s <= from).length - 1;
-    let hi = starts.filter((s) => s <= to).length - 1;
-    if (to > from && starts[hi] === to)
-        hi--;
-    return [Math.max(0, lo), Math.max(0, hi)];
-}
 /**
- * 문자 오프셋 편집 목록(삽입/삭제)을 블록에 적용하고 새 doc 기준
- * 텍스트 자식별 길이 배열을 돌려준다. ops는 겹치지 않는 원본 좌표 —
- * 뒤쪽(큰 pos)부터 적용해야 앞쪽 좌표가 안 밀린다.
+ * 경로로 지정한 코드블록의 언어 — 노드 뷰 크롬 바처럼 캐럿과
+ * 무관하게 특정 블록을 바꿀 때 쓴다.
  */
-function applyCharOps(tr, block, blockPath, ops) {
-    const kids = block.content ?? [];
-    const extra = kids.map(() => 0);
-    const ends = [];
-    let acc = 0;
-    for (const k of kids) {
-        acc += k.text?.length ?? 0;
-        ends.push(acc);
-    }
-    for (const op of [...ops].sort((a, b) => b.pos - a.pos)) {
-        if (op.del) {
-            tr.delete({
-                anchor: charPoint(block, blockPath, op.pos),
-                focus: charPoint(block, blockPath, op.pos + op.del),
-            });
-            for (let i = 0; i < kids.length; i++) {
-                const ks = i === 0 ? 0 : ends[i - 1];
-                const ov = Math.min(op.pos + op.del, ends[i]) - Math.max(op.pos, ks);
-                if (ov > 0)
-                    extra[i] -= ov;
-            }
-        }
-        if (op.ins) {
-            const at = charPoint(block, blockPath, op.pos);
-            tr.insertText(op.ins, at);
-            extra[at.path[at.path.length - 1]] += op.ins.length;
-        }
-    }
-    return kids.map((k, i) => (k.text?.length ?? 0) + extra[i]);
-}
-/** ops 기준으로 문자 오프셋을 새 좌표로 옮긴다 */
-function shiftCharOff(ops, off) {
-    let v = off;
-    for (const op of [...ops].sort((a, b) => a.pos - b.pos)) {
-        if (op.pos > off)
-            break;
-        const ins = op.ins?.length ?? 0;
-        const del = op.del ?? 0;
-        if (op.pos + del <= off)
-            v += ins - del;
-        else
-            v = op.pos + ins;
-    }
-    return Math.max(0, v);
-}
-/** 언어 → 주석 문법. 문자열=줄 주석, 쌍=블록 래핑 (Ace mode 주석 관례) */
-const CODE_COMMENT = {
-    py: "#", python: "#", rb: "#", ruby: "#", pl: "#", perl: "#",
-    sh: "#", bash: "#", zsh: "#", shell: "#", yaml: "#", yml: "#",
-    toml: "#", ini: "#", dockerfile: "#", makefile: "#", make: "#",
-    r: "#", coffee: "#", ps1: "#", powershell: "#", nim: "#",
-    sql: "--", lua: "--", haskell: "--", hs: "--", ada: "--",
-    css: ["/*", "*/"], scss: ["/*", "*/"], less: ["/*", "*/"],
-    html: ["<!--", "-->"], xml: ["<!--", "-->"], svg: ["<!--", "-->"],
-    md: ["<!--", "-->"], markdown: ["<!--", "-->"],
-};
-/**
- * Mod-/ — 코드블록 줄 주석 토글 (Ace toggleCommentLines 관례).
- * 걸친 줄이 전부 주석이면 해제, 아니면 주석을 단다 — 마커는
- * 선행 공백 뒤에 붙어 들여쓰기가 보존된다 (VS Code 관례).
- * 블록 주석 언어(css/html 등)는 줄마다 블록 마커로 감싼다.
- */
-export const toggleCodeComment = ({ state, tr, dispatch }) => {
-    // 선택과 겹치는 모든 코드 블록에 적용 — 전체 선택(Mod-A)이 여러
-    // 블록을 걸쳐도 코드 구간을 빠뜨리지 않는다 (VS Code 관례)
-    const ctxs = codeSelectionContexts(state);
-    if (!ctxs.length)
-        return false;
-    const parts = ctxs.map((ctx) => {
-        const lang = String(ctx.block.attrs?.["language"] ?? "").toLowerCase();
-        const lines = ctx.text.split("\n");
-        const [lo, hi] = codeLineRange(ctx.text, ctx.from, ctx.to);
-        return {
-            ctx,
-            syn: CODE_COMMENT[lang] ?? "//",
-            lines,
-            starts: lineStarts(ctx.text),
-            indent: (i) => lines[i].match(/^[ \t]*/)[0].length,
-            idx: Array.from({ length: hi - lo + 1 }, (_, k) => lo + k).filter((i) => lines[i].trim().length > 0),
-        };
-    });
-    if (!parts.some((p) => p.idx.length))
-        return false;
-    // 전부 주석이면 해제, 하나라도 아니면 주석 (블록을 넘나드는 선택도
-    // 같은 규칙 — VS Code는 선택 전체 기준으로 토글한다)
-    const commentedOf = (p, i) => {
-        const t = p.lines[i].slice(p.indent(i));
-        return typeof p.syn === "string"
-            ? t.startsWith(p.syn)
-            : t.trimEnd().startsWith(p.syn[0]) &&
-                t.trimEnd().endsWith(p.syn[1]) &&
-                t.trimEnd().length > p.syn[0].length + p.syn[1].length;
-    };
-    const allCommented = parts.every((p) => p.idx.every((i) => commentedOf(p, i)));
-    const edits = parts.map((p) => {
-        const { ctx, syn, lines, starts, idx, indent } = p;
-        const ops = [];
-        if (typeof syn === "string") {
-            if (allCommented) {
-                for (const i of idx) {
-                    if (!commentedOf(p, i))
-                        continue;
-                    let n = syn.length;
-                    if (lines[i][indent(i) + syn.length] === " ")
-                        n += 1;
-                    ops.push({ pos: starts[i] + indent(i), del: n });
-                }
-            }
-            else {
-                for (const i of idx) {
-                    ops.push({ pos: starts[i] + indent(i), ins: `${syn} ` });
-                }
-            }
-        }
-        else {
-            const [o, c] = syn;
-            if (allCommented) {
-                for (const i of idx) {
-                    if (!commentedOf(p, i))
-                        continue;
-                    const bp = starts[i] + indent(i);
-                    const t = lines[i].slice(indent(i));
-                    let open = o.length;
-                    if (t[o.length] === " ")
-                        open += 1;
-                    const te = t.trimEnd().length;
-                    let cs = te - c.length;
-                    if (t[cs - 1] === " ")
-                        cs -= 1;
-                    ops.push({ pos: bp, del: open });
-                    ops.push({ pos: bp + cs, del: te - cs });
-                }
-            }
-            else {
-                for (const i of idx) {
-                    const bp = starts[i] + indent(i);
-                    const te = lines[i].trimEnd().length;
-                    ops.push({ pos: bp, ins: `${o} ` });
-                    ops.push({ pos: bp + te, ins: ` ${c}` });
-                }
-            }
-        }
-        return ops;
-    });
-    const lens = parts.map((p, i) => applyCharOps(tr, p.ctx.block, p.ctx.blockPath, edits[i]));
-    // 셀렉션 복원 — 코드블록 안 엔드포인트는 삽입/삭제만큼 옮기고,
-    // 바깥(전체 선택의 비코드 쪽) 엔드포인트는 원래 위치를 유지한다
-    if (state.selection.type !== "text")
-        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);
-        if (pi < 0)
-            return leaf;
-        const p = parts[pi];
-        const off = charOffset(p.ctx.block, p.ctx.blockPath, leaf);
-        if (off == null)
-            return leaf;
-        return charPoint(p.ctx.block, p.ctx.blockPath, shiftCharOff(edits[pi], off), lens[pi]);
-    };
-    tr.setSelection(textSelection(remap(leafPoint(state.doc, selR.anchor)), remap(leafPoint(state.doc, selR.focus))));
-    dispatch();
-    return true;
-};
-/**
- * Alt-↑/↓ — 선택이 걸친 줄들을 위/아래 한 줄 이동 (Ace movelines·
- * VS Code 관례). 첫/마지막 줄 가장자리에선 false로 폴스루한다.
- */
-export function moveCodeLines(direction) {
+export function setCodeLanguageAt(blockPath, language) {
     return ({ state, tr, dispatch }) => {
-        const ctx = codeContext(state);
-        if (!ctx)
+        const block = nodeAt(state.doc, blockPath);
+        if (!block || !state.schema.nodeSpec(block.type)?.code)
             return false;
-        const { blockPath, block, text, from, to } = ctx;
-        const lines = text.split("\n");
-        const starts = lineStarts(text);
-        const [lo, hi] = codeLineRange(text, from, to);
-        const sA = starts[lo];
-        // sB는 다음 줄 시작 — 블록과 사이의 개행은 sB-1에 있다
-        const sB = hi + 1 < lines.length ? starts[hi + 1] : text.length;
-        let ops;
-        let delta;
-        if (direction === "up") {
-            if (lo === 0)
-                return false;
-            const prev = lines[lo - 1];
-            const pStart = starts[lo - 1];
-            ops =
-                sB === text.length
-                    ? // 블록이 마지막 줄 — "block\nprev"가 되도록 끝에 붙인다
-                        [
-                            { pos: sB, ins: `\n${prev}` },
-                            { pos: pStart, del: sA - pStart },
-                        ]
-                    : // 다음 줄 시작(sB)에 "prev\n"을 끼운다 — 블록 뒤 개행(sB-1)이
-                        // block과 prev를 자연스럽게 이어준다
-                        [
-                            { pos: sB, ins: `${prev}\n` },
-                            { pos: pStart, del: sA - pStart },
-                        ];
-            delta = -(prev.length + 1);
-        }
-        else {
-            if (hi === lines.length - 1)
-                return false;
-            const next = lines[hi + 1];
-            const nextLast = hi + 1 === lines.length - 1;
-            ops = nextLast
-                ? // 다음 줄이 끝줄 — 앞 개행 포함 "\nnext"를 통째로 지운다
-                    [
-                        { pos: sB - 1, del: next.length + 1 },
-                        { pos: sA, ins: `${next}\n` },
-                    ]
-                : [
-                    { pos: sB, del: next.length + 1 },
-                    { pos: sA, ins: `${next}\n` },
-                ];
-            delta = next.length + 1;
-        }
-        const lens = applyCharOps(tr, block, blockPath, ops);
-        tr.setSelection(textSelection(charPoint(block, blockPath, from + delta, lens), charPoint(block, blockPath, to + delta, lens)));
+        tr.setNodeAttr(blockPath, "language", language);
         dispatch();
         return true;
     };
 }
-/**
- * Mod-Shift-D — 선택이 걸친 줄들을 바로 아래에 복제
- * (Ace duplicateSelection 관례). 사본이 선택된다.
- */
-export const duplicateCodeLines = ({ state, tr, dispatch }) => {
-    const ctx = codeContext(state);
-    if (!ctx)
-        return false;
-    const { blockPath, block, text, from, to } = ctx;
-    const starts = lineStarts(text);
-    const [lo, hi] = codeLineRange(text, from, to);
-    const sA = starts[lo];
-    // sB는 다음 줄 시작 — 줄 텍스트는 [sA, sB-1) (sB-1이 개행)
-    const sB = hi + 1 < starts.length ? starts[hi + 1] : text.length;
-    const tail = sB === text.length;
-    const dup = text.slice(sA, tail ? sB : sB - 1);
-    const ops = [{ pos: sB, ins: tail ? `\n${dup}` : `${dup}\n` }];
-    const cs = tail ? sB + 1 : sB;
-    const lens = applyCharOps(tr, block, blockPath, ops);
-    tr.setSelection(textSelection(charPoint(block, blockPath, from - sA + cs, lens), charPoint(block, blockPath, to - sA + cs, lens)));
-    dispatch();
-    return true;
-};
-const BRACKET_OPEN = "([{";
-const BRACKET_CLOSE = ")]}";
-const BRACKET_PAIR = {
-    "(": ")", "[": "]", "{": "}",
-    ")": "(", "]": "[", "}": "{",
-};
-/**
- * 캐럿 인접 괄호와 짝의 문자 오프셋 (Ace bracket matching 관례).
- * 캐럿 앞/뒤의 ()[]{}를 보고 같은 종류만 세는 깊이 스캔으로 짝을
- * 찾는다 — 문자열/주석 토큰 안쪽의 괄호는 코드로 세지 않는다.
- * 없으면 null.
- */
-export function codeBracketAt(state) {
-    const ctx = codeContext(state);
-    if (!ctx || ctx.from !== ctx.to)
-        return null;
-    const { text, to: off } = ctx;
-    const inStr = codeStringMask(state, ctx.block) ?? (() => false);
-    let idx = -1;
-    let dir = 0;
-    if (off > 0 && BRACKET_CLOSE.includes(text[off - 1])) {
-        idx = off - 1;
-        dir = -1;
-    }
-    else if (off < text.length && BRACKET_OPEN.includes(text[off])) {
-        idx = off;
-        dir = 1;
-    }
-    else if (off > 0 && BRACKET_OPEN.includes(text[off - 1])) {
-        idx = off - 1;
-        dir = 1;
-    }
-    else if (off < text.length && BRACKET_CLOSE.includes(text[off])) {
-        idx = off;
-        dir = -1;
-    }
-    if (idx < 0 || inStr(idx))
-        return null;
-    const ch = text[idx];
-    const want = BRACKET_PAIR[ch];
-    let depth = 0;
-    if (dir > 0) {
-        for (let j = idx; j < text.length; j++) {
-            if (inStr(j))
-                continue;
-            const c = text[j];
-            if (c === ch)
-                depth++;
-            else if (c === want && --depth === 0)
-                return { a: idx, b: j };
-        }
-    }
-    else {
-        for (let j = idx; j >= 0; j--) {
-            if (inStr(j))
-                continue;
-            const c = text[j];
-            if (c === ch)
-                depth++;
-            else if (c === want && --depth === 0)
-                return { a: j, b: idx };
-        }
-    }
-    return null;
-}
 // ── 뷰 입력 훅 — Ace behaviours 관례의 타이핑 동작 ────────────
 /** 자동 쌍 테이블 — 열기 문자 → 닫기 문자 */
 const CODE_PAIRS = {
@@ -701,10 +114,108 @@ 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, observer: null };
+    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") {
+        ui.observer = new ResizeObserver(() => {
+            if (!ui.box.hidden)
+                paintCodeOverlay(el, editor);
+        });
+        ui.observer.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 +244,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 +260,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,
@@ -754,9 +270,12 @@ export const codeBlockFeature = defineFeature({
         // 코드블록 — ``` / ~~~ + 스페이스. ```js 처럼 언어 지정 가능
         // (Tiptap backtickInputRegex 관례 — 공백 트리거라 언어
         // 접미사를 칠 시간이 있다)
-        blockRule(/^(?:```|~~~)([\w+-]*) $/, (m) => ({
+        blockRule(/^(?:```|~~~)([\w+-]*) $/, (m, block) => ({
             type: "codeBlock",
             attrs: { language: m[1] ?? "" },
+            // 코드는 마크를 받지 않는다 — toggleCodeBlock과 같은 규칙으로
+            // 기존 인라인 마크(대기 서식이 입혀진 fence 텍스트 등)를 벗긴다
+            content: (block.content ?? []).map((c) => ({ ...c, marks: undefined })),
         })),
     ],
     input: {
@@ -773,9 +292,7 @@ export const codeBlockFeature = defineFeature({
                 if (!pointEq(ctx.anchor, ctx.focus)) {
                     ctx.tr.delete({ anchor: ctx.anchor, focus: ctx.focus });
                 }
-                ctx.tr
-                    .insertText(data.text, ctx.anchor)
-                    .setMeta("paste", true);
+                ctx.tr.insertText(data.text, ctx.anchor).setMeta("paste", true);
                 ctx.dispatch();
             }
             return true;
@@ -848,9 +365,7 @@ export const codeBlockFeature = defineFeature({
             const caretOff = ctx.offsetOf(ctx.anchor);
             const lineStart = caretOff === 0 ? 0 : text.lastIndexOf("\n", caretOff - 1) + 1;
             const curLine = text.slice(lineStart, caretOff);
-            const atEmptyTail = caretOff === text.length &&
-                lineStart > 0 &&
-                /^[ \t]*$/.test(curLine);
+            const atEmptyTail = caretOff === text.length && lineStart > 0 && /^[ \t]*$/.test(curLine);
             if (!text || atEmptyTail) {
                 // 꼬리 빈 줄(개행 + 공백)을 지우고 블록 뒤에 본문 삽입
                 if (atEmptyTail) {
@@ -918,11 +433,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;
@@ -981,6 +498,14 @@ export const codeBlockFeature = defineFeature({
             }
             reg.set("me-bracket", new H(...ranges));
         },
+        destroyOverlay(el) {
+            // 크롬 바 + 옵저버 + 괄호 하이라이트를 정리하고 맵 엔트리를 지운다
+            const ui = codeUIs.get(el);
+            ui?.observer?.disconnect();
+            ui?.box.remove();
+            codeUIs.delete(el);
+            el.ownerDocument.defaultView?.CSS?.highlights?.delete("me-bracket");
+        },
     },
 });
 //# sourceMappingURL=code-block.js.map