mdsquare 0.0.0-stage → 0.2.0

package/dist/callout.js

@@ -0,0 +1,541 @@
+import { codeFolding, ensureSyntaxTree, foldEffect, foldedRanges, foldService, syntaxTree, unfoldEffect, } from "@codemirror/language";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { calloutsHandled, defaultCalloutTitle, readCalloutHeader, } from "./calloutHeader.js";
+import { quote } from "./quote.js";
+import { createRevealPlugin } from "./utils/reveal.js";
+import { BLOCK_MARGIN_X } from "./utils/blockMargin.js";
+// ---------------------------------------------------------------------------
+// 아이콘 (Lucide 아이콘과 같은 모양의 선 아이콘, 24x24, stroke=currentColor)
+// ---------------------------------------------------------------------------
+const ICONS = {
+    note: '<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>',
+    abstract: '<rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>',
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    todo: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+    tip: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
+    success: '<path d="M20 6 9 17l-5-5"/>',
+    question: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+    warning: '<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    failure: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+    danger: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>',
+    bug: '<rect x="8" y="6" width="8" height="14" rx="4"/><path d="m19 7-3 2"/><path d="m5 7 3 2"/><path d="m19 19-3-2"/><path d="m5 19 3-2"/><path d="M20 13h-4"/><path d="M4 13h4"/><path d="m10 4 1 2"/><path d="m14 4-1 2"/>',
+    example: '<path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/>',
+    quote: '<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2H4c-1.25 0-2 .75-2 1.97V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .01-1 1.03V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2h-4c-1.25 0-2 .75-2 1.97V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/>',
+};
+const CHEVRON = '<path d="m6 9 6 6 6-6"/>';
+function svg(paths) {
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    for (const [k, v] of [
+        ["viewBox", "0 0 24 24"],
+        ["fill", "none"],
+        ["stroke", "currentColor"],
+        ["stroke-width", "2"],
+        ["stroke-linecap", "round"],
+        ["stroke-linejoin", "round"],
+        ["aria-hidden", "true"],
+    ]) {
+        el.setAttribute(k, v);
+    }
+    el.innerHTML = paths;
+    return el;
+}
+// ---------------------------------------------------------------------------
+// 위젯
+// ---------------------------------------------------------------------------
+/** 머리줄의 `[!type]` 자리에 그리는 아이콘 (+ 제목이 없으면 기본 제목, + 접기 버튼) */
+class CalloutHeaderWidget extends WidgetType {
+    type;
+    defaultTitle;
+    foldable;
+    folded;
+    constructor(type, defaultTitle, foldable, folded) {
+        super();
+        this.type = type;
+        this.defaultTitle = defaultTitle;
+        this.foldable = foldable;
+        this.folded = folded;
+    }
+    eq(other) {
+        return (other.type === this.type &&
+            other.defaultTitle === this.defaultTitle &&
+            other.foldable === this.foldable &&
+            other.folded === this.folded);
+    }
+    toDOM() {
+        const wrap = document.createElement("span");
+        wrap.className = "cm-callout-header";
+        const icon = wrap.appendChild(document.createElement("span"));
+        icon.className = "cm-callout-icon";
+        icon.appendChild(svg(ICONS[this.type]));
+        if (this.defaultTitle !== null) {
+            const title = wrap.appendChild(document.createElement("span"));
+            title.className = "cm-callout-title-text";
+            title.textContent = this.defaultTitle;
+        }
+        if (this.foldable)
+            wrap.appendChild(foldButton(this.folded));
+        return wrap;
+    }
+    /**
+     * 접기 상태만 바뀐 경우 DOM을 새로 만들지 않고 버튼 상태만 바꿉니다.
+     * (새로 만들면 처음부터 회전된 상태로 그려져 회전 애니메이션이 보이지 않습니다)
+     */
+    updateDOM(dom, _view, from) {
+        if (from.type !== this.type || from.defaultTitle !== this.defaultTitle || from.foldable !== this.foldable) {
+            return false;
+        }
+        const button = dom.querySelector(".cm-callout-fold");
+        if (button)
+            setFoldState(button, this.folded);
+        return true;
+    }
+    // 클릭을 에디터가 받도록 합니다. (접기 버튼은 mousedown 핸들러가 처리)
+    ignoreEvent() {
+        return false;
+    }
+}
+/** 제목이 있는 콜아웃의 접기 버튼 (제목 뒤) */
+class FoldButtonWidget extends WidgetType {
+    folded;
+    constructor(folded) {
+        super();
+        this.folded = folded;
+    }
+    eq(other) {
+        return other.folded === this.folded;
+    }
+    toDOM() {
+        return foldButton(this.folded);
+    }
+    /** 기존 버튼의 상태만 바꿔 회전 애니메이션이 보이도록 합니다. */
+    updateDOM(dom) {
+        setFoldState(dom, this.folded);
+        return true;
+    }
+    ignoreEvent() {
+        return false;
+    }
+}
+function foldButton(folded) {
+    const button = document.createElement("span");
+    button.className = "cm-callout-fold";
+    button.setAttribute("role", "button");
+    button.appendChild(svg(CHEVRON));
+    setFoldState(button, folded);
+    return button;
+}
+function setFoldState(button, folded) {
+    button.classList.toggle("cm-callout-fold-collapsed", folded);
+    button.setAttribute("aria-label", folded ? "펼치기" : "접기");
+    button.setAttribute("aria-expanded", String(!folded));
+}
+// ---------------------------------------------------------------------------
+// 접기
+// ---------------------------------------------------------------------------
+/** 줄 [lineFrom, lineTo]에 머리줄이 있는 콜아웃 (가장 안쪽) */
+function calloutAtLine(state, lineFrom, lineTo) {
+    let found = null;
+    syntaxTree(state).iterate({
+        from: lineFrom,
+        to: lineTo,
+        enter(node) {
+            if (node.name === "Blockquote" && node.from >= lineFrom && node.from <= lineTo) {
+                const header = readCalloutHeader(state, node.node);
+                if (header && header.lineFrom === lineFrom)
+                    found = header;
+            }
+        },
+    });
+    return found;
+}
+/** 접을 수 있는 콜아웃의 접기 범위: 머리줄 끝 ~ 콜아웃 끝 (내용이 없으면 null) */
+function foldRangeOf(header) {
+    return header.fold && header.to > header.lineTo ? { from: header.lineTo, to: header.to } : null;
+}
+function isFolded(state, range) {
+    let folded = false;
+    foldedRanges(state).between(range.from, range.from, (from, to) => {
+        if (from === range.from && to === range.to)
+            folded = true;
+    });
+    return folded;
+}
+/** 접을 수 있는 콜아웃은 CodeMirror 접기 기능(접기 단축키, 접기 여백)으로도 접을 수 있습니다. */
+const calloutFoldService = foldService.of((state, lineStart, lineEnd) => {
+    const header = calloutAtLine(state, lineStart, lineEnd);
+    return header ? foldRangeOf(header) : null;
+});
+/** 문서를 열 때 `[!type]-` 콜아웃을 접어 둡니다. (Obsidian과 같이 기본 접힘) */
+const initialFold = ViewPlugin.define((view) => {
+    let destroyed = false;
+    queueMicrotask(() => {
+        if (destroyed)
+            return;
+        const { state } = view;
+        const tree = ensureSyntaxTree(state, state.doc.length, 200) ?? syntaxTree(state);
+        const effects = [];
+        tree.iterate({
+            enter(node) {
+                if (node.name === "Blockquote") {
+                    const header = readCalloutHeader(state, node.node);
+                    const range = header?.fold === "-" ? foldRangeOf(header) : null;
+                    if (range && !isFolded(state, range))
+                        effects.push(foldEffect.of(range));
+                    return;
+                }
+                if (!CONTAINERS.has(node.name))
+                    return false;
+            },
+        });
+        if (effects.length)
+            view.dispatch({ effects });
+    });
+    return { destroy: () => void (destroyed = true) };
+});
+/** 접기 버튼 클릭 → 접기/펼치기 */
+const calloutEvents = EditorView.domEventHandlers({
+    mousedown(event, view) {
+        if (event.button !== 0)
+            return false;
+        const button = event.target?.closest?.(".cm-callout-fold");
+        if (!button || !view.contentDOM.contains(button))
+            return false;
+        const line = view.state.doc.lineAt(view.posAtDOM(button));
+        const header = calloutAtLine(view.state, line.from, line.to);
+        const range = header && foldRangeOf(header);
+        if (!range)
+            return false;
+        event.preventDefault();
+        view.dispatch({
+            effects: (isFolded(view.state, range) ? unfoldEffect : foldEffect).of(range),
+        });
+        return true;
+    },
+});
+// ---------------------------------------------------------------------------
+// 데코레이션
+// ---------------------------------------------------------------------------
+/** 콜아웃을 담을 수 있는 컨테이너 블록 */
+const CONTAINERS = new Set([
+    "Document",
+    "Blockquote",
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+]);
+const markerSource = Decoration.mark({ class: "cm-formatting cm-formatting-callout" });
+const titleText = Decoration.mark({ class: "cm-callout-title-text" });
+/**
+ * 줄 데코레이션 (클래스 조합별로 재사용).
+ * style 속성은 quote()의 줄 데코레이션과 충돌하므로(같은 줄에 하나만 남음) 클래스만 씁니다.
+ */
+const lineCache = new Map();
+function calloutLine(className) {
+    let deco = lineCache.get(className);
+    if (!deco)
+        lineCache.set(className, (deco = Decoration.line({ class: className })));
+    return deco;
+}
+/** 정확한 상자로 그리는 최대 중첩 단계 (줄 배경 + ::before + ::after) */
+const MAX_LEVELS = 3;
+/**
+ * 줄의 클래스 목록.
+ * - 1단계 상자는 줄 배경, 2·3단계 상자는 ::before/::after로 그립니다.
+ * - 한 줄에서 끝나는 상자들은 항상 안쪽부터 이어진 단계들(m..d)이므로, 그 개수로 위아래 여백과
+ *   안쪽 상자의 아래쪽 위치를 정합니다. (시작은 한 줄에 한 단계뿐: 안쪽 콜아웃은 다음 줄부터 시작)
+ */
+function lineClasses(allLevels, titleType, blank) {
+    const levels = allLevels.slice(0, MAX_LEVELS);
+    const depth = levels.length;
+    const cls = ["cm-callout", `cm-callout-depth-${depth}`];
+    levels.forEach((level, i) => cls.push(`cm-callout-l${i + 1}`, `cm-callout-l${i + 1}-${level.type}`));
+    const startAt = levels.findIndex((level) => level.start);
+    if (startAt >= 0)
+        cls.push(`cm-callout-l${startAt + 1}-start`);
+    const endAt = levels.findIndex((level) => level.end);
+    if (endAt >= 0) {
+        // 바깥 상자가 이어지면(endAt > 0) 안쪽 상자 아래에 간격을 둡니다.
+        const gap = endAt > 0 ? 1 : 0;
+        cls.push(`cm-callout-pb-${depth - endAt}-${gap}`);
+        for (let i = endAt; i < depth; i++) {
+            cls.push(`cm-callout-l${i + 1}-end`);
+            // 1단계 상자는 줄 배경이므로 위치 조정이 필요 없습니다.
+            if (i > 0)
+                cls.push(`cm-callout-l${i + 1}-bottom-${i - endAt}-${gap}`);
+        }
+    }
+    if (titleType) {
+        cls.push("cm-callout-title-line", `cm-callout-title-${titleType}`);
+        if (endAt < 0)
+            cls.push("cm-callout-title-gap"); // 제목과 내용 사이 간격
+    }
+    // 빈 인용 줄(">"만 있는 줄): 문단 구분에 필요하지만 한 줄 높이를 다 쓰면 간격이 너무 넓어 낮게 그립니다.
+    if (blank)
+        cls.push("cm-callout-blank");
+    return cls.join(" ");
+}
+export const calloutPlugin = createRevealPlugin({
+    // 줄 데코레이션을 바깥 콜아웃이 끝날 때 한꺼번에 추가하므로 정렬합니다.
+    sort: true,
+    // 접기/펼치기로 접기 버튼 모양과 모서리가 바뀝니다.
+    rebuildOn: (update) => update.transactions.some((tr) => tr.effects.some((e) => e.is(foldEffect) || e.is(unfoldEffect))),
+    visit({ state, decorations, isRevealed }) {
+        const { doc } = state;
+        const stack = [];
+        let calloutDepth = 0;
+        /** 가장 바깥 콜아웃을 원문으로 보여주는지 (커서가 콜아웃 안에 있음) */
+        let source = false;
+        /** 줄 번호 → 그 줄을 덮는 콜아웃 단계들 (바깥부터) */
+        const lineLevels = new Map();
+        /** 머리줄 번호 → 그 콜아웃 유형 */
+        const titleLines = new Map();
+        const decorateHeader = (header, folded) => {
+            const foldable = header.fold !== null && header.to > header.lineTo;
+            if (header.titleFrom === null) {
+                // 제목 없음: 기호 자리에 아이콘 + 기본 제목(+ 접기 버튼)
+                const widget = new CalloutHeaderWidget(header.type, defaultCalloutTitle(header.rawType), foldable, folded);
+                decorations.push(Decoration.replace({ widget }).range(header.markerFrom, header.lineTo));
+            }
+            else {
+                // 제목 있음: 기호 자리에 아이콘, 제목 스타일, 제목 뒤 접기 버튼
+                const widget = new CalloutHeaderWidget(header.type, null, false, folded);
+                decorations.push(Decoration.replace({ widget }).range(header.markerFrom, header.titleFrom));
+                decorations.push(titleText.range(header.titleFrom, header.titleTo));
+                if (foldable) {
+                    decorations.push(Decoration.widget({ widget: new FoldButtonWidget(folded), side: 1 }).range(header.titleTo));
+                }
+            }
+        };
+        const flush = () => {
+            for (const [n, levels] of lineLevels) {
+                const line = doc.line(n);
+                const blank = !titleLines.has(n) && !/[^\s>]/.test(line.text);
+                decorations.push(calloutLine(lineClasses(levels, titleLines.get(n) ?? null, blank)).range(line.from));
+            }
+            lineLevels.clear();
+            titleLines.clear();
+        };
+        return {
+            enter(node) {
+                if (node.name === "Blockquote") {
+                    const header = readCalloutHeader(state, node.node);
+                    stack.push(header);
+                    if (!header)
+                        return; // 일반 인용 안의 콜아웃을 찾기 위해 내려갑니다.
+                    calloutDepth++;
+                    // 커서가 가장 바깥 콜아웃 안에 있으면, 안쪽 콜아웃까지 전체를 원문으로 보여줍니다.
+                    if (calloutDepth === 1)
+                        source = isRevealed(header.from, header.to);
+                    if (source) {
+                        decorations.push(markerSource.range(header.markerFrom, header.markerTo));
+                        return;
+                    }
+                    const range = foldRangeOf(header);
+                    const folded = range !== null && isFolded(state, range);
+                    decorateHeader(header, folded);
+                    const first = doc.lineAt(header.from).number;
+                    const last = folded ? first : doc.lineAt(header.to).number; // 접히면 머리줄이 마지막 줄
+                    const level = calloutDepth - 1;
+                    for (let n = first; n <= doc.lineAt(header.to).number; n++) {
+                        const levels = lineLevels.get(n) ?? [];
+                        levels.length = level; // 이 콜아웃보다 깊은 단계(이전 형제 콜아웃의 것)는 버림
+                        levels[level] = { type: header.type, start: n === first, end: n === last };
+                        lineLevels.set(n, levels);
+                    }
+                    titleLines.set(first, header.type);
+                    return;
+                }
+                if (!CONTAINERS.has(node.name))
+                    return false;
+            },
+            leave(node) {
+                if (node.name !== "Blockquote")
+                    return;
+                if (!stack.pop())
+                    return;
+                calloutDepth--;
+                if (calloutDepth === 0) {
+                    if (!source)
+                        flush();
+                    source = false;
+                }
+            },
+        };
+    },
+});
+// ---------------------------------------------------------------------------
+// 테마 (Obsidian 기본 콜아웃 디자인 참고)
+// ---------------------------------------------------------------------------
+/** 유형별 색 (r, g, b) */
+const COLORS = {
+    note: "8, 109, 221",
+    abstract: "0, 191, 188",
+    info: "8, 109, 221",
+    todo: "8, 109, 221",
+    tip: "0, 191, 188",
+    success: "8, 185, 78",
+    question: "236, 117, 0",
+    warning: "236, 117, 0",
+    failure: "233, 49, 71",
+    danger: "233, 49, 71",
+    bug: "233, 49, 71",
+    example: "120, 82, 238",
+    quote: "158, 158, 158",
+};
+const TYPES = Object.keys(COLORS);
+const PAD = 12; // 상자 안쪽 위아래 여백
+const GAP = 8; // 안쪽 상자와 바깥 내용 사이 간격
+const TITLE_GAP = 8; // 제목과 내용 사이 간격
+const INSET = 14; // 중첩 한 단계마다 안쪽 상자를 들이는 폭
+const TEXT = 24; // 상자 왼쪽에서 글자까지
+const RADIUS = "4px";
+const px = (n) => `${n}px`;
+/** 2·3단계 상자를 그리는 가상 요소 */
+const PSEUDO = { 2: "::before", 3: "::after" };
+function themeSpec() {
+    const spec = {
+        ".cm-callout": {
+            // 가상 요소(안쪽 상자)를 글자 뒤, 줄 배경 위에 그리기 위한 쌓임 맥락
+            position: "relative",
+            zIndex: "0",
+            // 양옆을 살짝 띄웁니다. (코드 블록과 같은 변수)
+            marginLeft: BLOCK_MARGIN_X,
+            marginRight: BLOCK_MARGIN_X,
+        },
+        ".cm-callout-l1": {
+            backgroundColor: "rgba(var(--cm-callout-c1), 0.1)",
+        },
+        ".cm-callout-l1-start": {
+            borderTopLeftRadius: RADIUS,
+            borderTopRightRadius: RADIUS,
+            paddingTop: px(PAD),
+        },
+        ".cm-callout-l1-end": {
+            borderBottomLeftRadius: RADIUS,
+            borderBottomRightRadius: RADIUS,
+        },
+        ".cm-callout-title-line": { fontWeight: "600" },
+        ".cm-callout-title-gap": { paddingBottom: px(TITLE_GAP) },
+        // 머리줄의 제목에는 구문 강조 색이 끼어들지 않도록 콜아웃 색을 상속합니다.
+        ".cm-line.cm-callout-title-line .cm-callout-title-text, .cm-line.cm-callout-title-line .cm-callout-title-text *": {
+            color: "inherit",
+        },
+    };
+    for (const type of TYPES) {
+        spec[`.cm-callout-title-${type}`] = { color: `rgb(${COLORS[type]})` };
+        for (let k = 1; k <= MAX_LEVELS; k++)
+            spec[`.cm-callout-l${k}-${type}`] = { [`--cm-callout-c${k}`]: COLORS[type] };
+    }
+    for (let depth = 1; depth <= MAX_LEVELS; depth++) {
+        const inset = (depth - 1) * INSET;
+        spec[`.cm-callout-depth-${depth}`] = {
+            paddingLeft: px(inset + TEXT),
+            paddingRight: px(inset + PAD),
+            // 내용 영역을 다른 블록(코드 블록 등)에도 알려줍니다. (utils/container.ts)
+            "--cm-container-indent": px(inset + TEXT),
+            "--cm-container-right": px(inset + PAD),
+        };
+    }
+    // 2·3단계 상자: 바깥 상자 안쪽으로 들인 가상 요소
+    for (let k = 2; k <= MAX_LEVELS; k++) {
+        const pseudo = PSEUDO[k];
+        const inset = px((k - 1) * INSET);
+        spec[`.cm-callout-l${k}${pseudo}`] = {
+            content: '""',
+            position: "absolute",
+            left: inset,
+            right: inset,
+            top: "0",
+            bottom: "0",
+            zIndex: "-1",
+            backgroundColor: `rgba(var(--cm-callout-c${k}), 0.1)`,
+        };
+        // 시작: 바깥 상자 안에서 위쪽 간격을 두고 둥근 모서리
+        spec[`.cm-callout-l${k}-start`] = { paddingTop: px(PAD + GAP) };
+        spec[`.cm-callout-l${k}-start${pseudo}`] = {
+            top: px(GAP),
+            borderTopLeftRadius: RADIUS,
+            borderTopRightRadius: RADIUS,
+        };
+        spec[`.cm-callout-l${k}-end${pseudo}`] = {
+            borderBottomLeftRadius: RADIUS,
+            borderBottomRightRadius: RADIUS,
+        };
+    }
+    // 끝: 이 줄에서 끝나는 상자 수(count)만큼 아래 여백, 바깥 상자가 이어지면(gap) 간격 추가
+    for (let count = 1; count <= MAX_LEVELS; count++) {
+        for (const gap of [0, 1]) {
+            const bottom = px(count * PAD + gap * GAP);
+            spec[`.cm-callout-pb-${count}-${gap}`] = { paddingBottom: bottom, "--cm-container-bottom": bottom };
+        }
+    }
+    // 안쪽 상자의 아래쪽 위치: 그 바깥에서 함께 끝나는 상자 수(n)만큼 위로
+    for (let k = 2; k <= MAX_LEVELS; k++) {
+        for (let n = 0; n < k; n++) {
+            for (const gap of [0, 1]) {
+                spec[`.cm-callout-l${k}-bottom-${n}-${gap}${PSEUDO[k]}`] = { bottom: px(n * PAD + gap * GAP) };
+            }
+        }
+    }
+    Object.assign(spec, {
+        ".cm-callout-header": {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "6px",
+            // 제목이 문서 글자(위젯 밖)일 때도 아이콘과 제목 사이가 벌어지도록 뒤에 여백을 줍니다.
+            marginRight: "6px",
+        },
+        ".cm-callout-icon, .cm-callout-fold": {
+            display: "inline-flex",
+            width: "1em",
+            height: "1em",
+            verticalAlign: "-0.125em",
+        },
+        ".cm-callout-icon svg, .cm-callout-fold svg": { width: "100%", height: "100%" },
+        ".cm-callout-fold": {
+            marginLeft: "6px",
+            cursor: "pointer",
+            opacity: "0.7",
+            transition: "transform 150ms ease, opacity 150ms ease",
+        },
+        ".cm-callout-fold:hover": { opacity: "1" },
+        ".cm-callout-fold-collapsed": { transform: "rotate(-90deg)" },
+        // 동작 줄이기 설정을 켠 사용자에게는 애니메이션 없이 바로 바꿉니다.
+        "@media (prefers-reduced-motion: reduce)": {
+            ".cm-callout-fold": { transition: "none" },
+        },
+        // 접기 버튼이 상태를 보여주므로 CodeMirror 기본 접기 표시(…)는 숨깁니다.
+        ".cm-callout-title-line .cm-foldPlaceholder": { display: "none" },
+        ".cm-callout-blank": { fontSize: "0.5em" },
+        // 원문 보기: 기호를 흐리게. ([!type]은 링크로 파싱되어 밑줄이 생기므로 없앱니다)
+        ".cm-formatting-callout": { opacity: "0.6" },
+        ".cm-formatting-callout, .cm-formatting-callout *": { textDecoration: "none" },
+    });
+    return spec;
+}
+const calloutTheme = EditorView.baseTheme(themeSpec());
+/**
+ * Obsidian 콜아웃 / GFM 알림을 보여주는 확장입니다.
+ *
+ * ```
+ * > [!note] 제목          유형: note, abstract, info, todo, tip, success, question,
+ * > 내용                   warning, failure, danger, bug, example, quote (+ 별칭)
+ * > [!faq]- 접힌 콜아웃   +: 접을 수 있음(펼침), -: 접을 수 있음(기본 접힘)
+ * ```
+ * - 유형별 색 배경 + 아이콘 + 제목. 제목이 없으면 유형 이름을 제목으로 보여줍니다.
+ * - 커서가 콜아웃 안에 들어오면 콜아웃 전체(안쪽 콜아웃 포함)를 원문으로 보여줍니다. (Obsidian과 같은 편집 방식)
+ * - 중첩 콜아웃은 바깥 상자 안의 상자로 그립니다. (3단계까지 정확히, 더 깊으면 3단계로)
+ * - quote()를 포함합니다. (`>` 숨김, 콜아웃이 아닌 인용의 세로줄)
+ */
+export function callout() {
+    return [
+        quote(),
+        calloutsHandled.of(true),
+        calloutPlugin,
+        codeFolding(),
+        calloutFoldService,
+        initialFold,
+        calloutEvents,
+        calloutTheme,
+    ];
+}

package/dist/calloutHeader.d.ts

@@ -0,0 +1,47 @@
+import { Facet, type EditorState } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+/**
+ * 콜아웃(Obsidian callout / GFM alert) 머리줄 해석.
+ *
+ * 콜아웃은 첫 줄이 `[!type]`으로 시작하는 인용(Blockquote)입니다.
+ * 파서를 바꾸지 않고 기존 Blockquote 구조 위에서 판별하므로, 내용 안의 목록/서식/게으른 연속 줄이
+ * 그대로 동작하고 다른 마크다운 뷰어에서도 인용으로 해석됩니다.
+ *
+ * ```
+ * > [!type]+/- 제목(선택)
+ * > 내용
+ * ```
+ */
+/** 표준 유형 */
+export type CalloutType = "note" | "abstract" | "info" | "todo" | "tip" | "success" | "question" | "warning" | "failure" | "danger" | "bug" | "example" | "quote";
+export interface CalloutHeader {
+    /** 표준 유형 (알 수 없는 유형은 "note") */
+    readonly type: CalloutType;
+    /** 원문에 쓰인 유형 이름 */
+    readonly rawType: string;
+    /** 접기 표시: "+" 펼친 상태, "-" 접힌 상태(기본), null 접을 수 없음 */
+    readonly fold: "+" | "-" | null;
+    /** 제목. 없으면 null (화면에는 유형 이름을 보여줍니다) */
+    readonly title: string | null;
+    /** 인용 전체 범위 */
+    readonly from: number;
+    readonly to: number;
+    /** 머리줄 범위 */
+    readonly lineFrom: number;
+    readonly lineTo: number;
+    /** `[!type]+` 기호 범위 */
+    readonly markerFrom: number;
+    readonly markerTo: number;
+    /** 제목 범위 (없으면 null) */
+    readonly titleFrom: number | null;
+    readonly titleTo: number | null;
+}
+/** 화면에 보여줄 기본 제목: 유형 이름의 첫 글자만 대문자 ("faq" → "Faq", "NOTE" → "Note") */
+export declare const defaultCalloutTitle: (rawType: string) => string;
+/** Blockquote 노드가 콜아웃이면 머리줄 정보를, 아니면 null을 반환합니다. */
+export declare function readCalloutHeader(state: EditorState, quote: SyntaxNode): CalloutHeader | null;
+/**
+ * 콜아웃을 callout()이 그리는지 여부.
+ * true이면 quote()는 콜아웃 줄에 왼쪽 세로줄을 그리지 않습니다. (`>` 숨김은 계속 담당)
+ */
+export declare const calloutsHandled: Facet<boolean, boolean>;

package/dist/calloutHeader.js

@@ -0,0 +1,75 @@
+import { Facet } from "@codemirror/state";
+/** 유형 이름(별칭 포함, 소문자) → 표준 유형. (Obsidian 기준. GFM의 IMPORTANT/CAUTION도 별칭) */
+const ALIASES = {
+    note: "note",
+    abstract: "abstract",
+    summary: "abstract",
+    tldr: "abstract",
+    info: "info",
+    todo: "todo",
+    tip: "tip",
+    hint: "tip",
+    important: "tip",
+    success: "success",
+    check: "success",
+    done: "success",
+    question: "question",
+    help: "question",
+    faq: "question",
+    warning: "warning",
+    caution: "warning",
+    attention: "warning",
+    failure: "failure",
+    fail: "failure",
+    missing: "failure",
+    danger: "danger",
+    error: "danger",
+    bug: "bug",
+    example: "example",
+    quote: "quote",
+    cite: "quote",
+};
+const HEADER_RE = /^\[!([\w-]+)\]([+-]?)/;
+/** 화면에 보여줄 기본 제목: 유형 이름의 첫 글자만 대문자 ("faq" → "Faq", "NOTE" → "Note") */
+export const defaultCalloutTitle = (rawType) => rawType.charAt(0).toUpperCase() + rawType.slice(1).toLowerCase();
+/** Blockquote 노드가 콜아웃이면 머리줄 정보를, 아니면 null을 반환합니다. */
+export function readCalloutHeader(state, quote) {
+    if (quote.name !== "Blockquote")
+        return null;
+    const mark = quote.firstChild;
+    if (!mark || mark.name !== "QuoteMark")
+        return null;
+    const line = state.doc.lineAt(mark.from);
+    const afterMark = mark.to - line.from;
+    const rest = line.text.slice(afterMark);
+    const indent = rest.length - rest.trimStart().length;
+    const match = HEADER_RE.exec(rest.slice(indent));
+    if (!match)
+        return null;
+    const markerFrom = line.from + afterMark + indent;
+    const markerTo = markerFrom + match[0].length;
+    const titleRaw = line.text.slice(markerTo - line.from);
+    const title = titleRaw.trim();
+    const titleFrom = title ? markerTo + (titleRaw.length - titleRaw.trimStart().length) : null;
+    return {
+        type: ALIASES[match[1].toLowerCase()] ?? "note",
+        rawType: match[1],
+        fold: match[2] === "+" || match[2] === "-" ? match[2] : null,
+        title: title || null,
+        from: quote.from,
+        to: quote.to,
+        lineFrom: line.from,
+        lineTo: line.to,
+        markerFrom,
+        markerTo,
+        titleFrom,
+        titleTo: titleFrom === null ? null : titleFrom + title.length,
+    };
+}
+/**
+ * 콜아웃을 callout()이 그리는지 여부.
+ * true이면 quote()는 콜아웃 줄에 왼쪽 세로줄을 그리지 않습니다. (`>` 숨김은 계속 담당)
+ */
+export const calloutsHandled = Facet.define({
+    combine: (values) => values.some(Boolean),
+});