mdsquare 0.2.0 → 0.3.0

package/dist/link.js

@@ -1,7 +1,8 @@
 import { syntaxTree } from "@codemirror/language";
-import { Prec } from "@codemirror/state";
-import { Decoration, EditorView } from "@codemirror/view";
+import { Facet, Prec, StateEffect } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
 import { createRevealPlugin } from "./utils/reveal.js";
+import { charWidth } from "./utils/textWidth.js";
 const unescape = (text) => text.replace(/\\([!-/:-@[-`{-~])/g, "$1");
 /**
  * Link 노드에서 인라인 링크 `[label](url "title")` 정보를 읽습니다.
@@ -82,6 +83,245 @@ function renderedLabel(tooltip) {
     }
     return deco;
 }
+// ---------------------------------------------------------------------------
+// 사이트 아이콘(favicon)
+// ---------------------------------------------------------------------------
+/** 기본 아이콘 주소: 사이트의 /favicon.ico (다른 서비스에 주소를 보내지 않음) */
+export function defaultFavicon(url) {
+    return `${url.origin}/favicon.ico`;
+}
+/** 불러오지 못한 아이콘 주소 (다시 요청하지 않고 바로 기본 아이콘을 그림) */
+const failedIcons = new Set();
+/** http(s) 주소만 URL로 읽습니다. (상대 경로, mailto: 등은 null) */
+const urlCache = new Map();
+function webUrl(href) {
+    let url = urlCache.get(href);
+    if (url === undefined) {
+        if (urlCache.size >= 1000)
+            urlCache.clear();
+        try {
+            const parsed = new URL(href);
+            url = parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed : null;
+        }
+        catch {
+            url = null;
+        }
+        urlCache.set(href, url);
+    }
+    return url;
+}
+/** 아이콘 DOM: 겉 span은 그대로 두고 안쪽만 바꿉니다. (위젯의 겉 요소를 바꾸면 CodeMirror가 위치를 잃음) */
+function faviconDOM(src) {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-link-icon";
+    const fallback = () => {
+        const icon = document.createElement("span");
+        icon.className = "cm-link-icon-fallback";
+        return icon;
+    };
+    if (!src || failedIcons.has(src)) {
+        wrap.append(fallback());
+        return wrap;
+    }
+    const img = document.createElement("img");
+    img.className = "cm-link-favicon";
+    img.alt = "";
+    img.draggable = false;
+    img.decoding = "async";
+    img.referrerPolicy = "no-referrer";
+    img.addEventListener("error", () => {
+        failedIcons.add(src);
+        img.replaceWith(fallback());
+    }, { once: true });
+    img.src = src;
+    wrap.append(img);
+    return wrap;
+}
+class FaviconWidget extends WidgetType {
+    src;
+    constructor(src) {
+        super();
+        this.src = src;
+    }
+    eq(other) {
+        return other.src === this.src;
+    }
+    toDOM() {
+        return faviconDOM(this.src);
+    }
+    // 아이콘을 눌러도 링크가 열리도록 이벤트를 에디터에 넘깁니다.
+    ignoreEvent() {
+        return false;
+    }
+}
+/** 라벨이 빈 링크(`[](url)`)를 가져온 페이지 제목으로 보여주는 위젯 */
+class FetchedTitleWidget extends WidgetType {
+    text;
+    tooltip;
+    icon;
+    constructor(text, tooltip, icon) {
+        super();
+        this.text = text;
+        this.tooltip = tooltip;
+        this.icon = icon;
+    }
+    eq(other) {
+        return other.text === this.text && other.tooltip === this.tooltip && other.icon === this.icon;
+    }
+    toDOM() {
+        // 박스 하나에 아이콘과 제목을 함께 넣습니다.
+        const box = document.createElement("span");
+        box.className = "cm-link cm-link-rendered cm-link-fetched";
+        box.title = this.tooltip;
+        if (this.icon !== false)
+            box.append(faviconDOM(this.icon));
+        const label = document.createElement("span");
+        label.className = "cm-link-fetched-title";
+        label.textContent = this.text;
+        box.append(label);
+        return box;
+    }
+    ignoreEvent() {
+        return false;
+    }
+}
+const faviconCache = new Map();
+function faviconDeco(src) {
+    const key = src ?? "";
+    let deco = faviconCache.get(key);
+    if (!deco) {
+        if (faviconCache.size >= 1000)
+            faviconCache.clear();
+        deco = Decoration.replace({ widget: new FaviconWidget(src) });
+        faviconCache.set(key, deco);
+    }
+    return deco;
+}
+// ---------------------------------------------------------------------------
+// 페이지 제목 가져오기 (라벨이 빈 링크)
+// ---------------------------------------------------------------------------
+/**
+ * 글자 폭(넓은 글자는 2칸)이 max를 넘으면 잘라서 끝에 "…"를 붙입니다.
+ * 공백은 하나로 줄이고 앞뒤 공백은 없앱니다.
+ */
+export function truncateTitle(text, max) {
+    const clean = text.replace(/\s+/g, " ").trim();
+    const chars = Array.from(clean);
+    const widths = chars.map(charWidth);
+    if (widths.reduce((a, b) => a + b, 0) <= max)
+        return clean;
+    // "…" 한 칸을 남겨 두고 자릅니다.
+    let width = 0;
+    let end = 0;
+    while (end < chars.length && width + widths[end] <= max - 1)
+        width += widths[end++];
+    return `${chars.slice(0, end).join("").trimEnd()}…`;
+}
+/** HTML에서 페이지 제목을 읽습니다. (og:title → twitter:title → <title>) */
+export function parseHtmlTitle(html) {
+    // DOMParser 문서는 스크립트를 실행하거나 이미지를 불러오지 않습니다.
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const meta = (sel) => doc.querySelector(sel)?.content;
+    const title = meta('meta[property="og:title"]') ?? meta('meta[name="twitter:title"]') ?? doc.querySelector("title")?.textContent;
+    const clean = title?.replace(/\s+/g, " ").trim();
+    return clean ? clean : null;
+}
+/**
+ * HTML 바이트를 문자 집합에 맞게 글자로 바꿉니다. (response.text()는 항상 UTF-8로 읽어 EUC-KR 등이 깨짐)
+ * Content-Type의 charset → 문서 앞부분의 <meta charset> → UTF-8 순서로 정합니다.
+ */
+export function decodeHtml(bytes, contentType) {
+    const head = new TextDecoder("latin1").decode(bytes.slice(0, 2048));
+    const charset = /charset\s*=\s*["']?([\w-]+)/i.exec(contentType ?? "")?.[1] ??
+        /<meta[^>]+charset\s*=\s*["']?([\w-]+)/i.exec(head)?.[1] ??
+        "utf-8";
+    try {
+        return new TextDecoder(charset).decode(bytes);
+    }
+    catch {
+        return new TextDecoder().decode(bytes); // 모르는 문자 집합
+    }
+}
+/** 페이지 HTML을 받아 제목을 읽습니다. 실패하면 null. (`link({ fetchTitle })`에 넘기기 위한 도우미) */
+export async function fetchPageTitle(url, options = {}) {
+    try {
+        const response = await fetch(options.proxy ? options.proxy(url) : url, {
+            signal: AbortSignal.timeout(options.timeout ?? 8000),
+        });
+        if (!response.ok)
+            return null;
+        return parseHtmlTitle(decodeHtml(await response.arrayBuffer(), response.headers.get("content-type")));
+    }
+    catch {
+        return null;
+    }
+}
+/** 제목을 다 가져왔음을 알려 데코레이션을 다시 만들게 하는 효과 */
+const linkTitlesLoaded = StateEffect.define();
+/** 링크 제목을 가져오고 기억합니다. (link() 호출마다 하나, 그 확장을 쓰는 모든 에디터가 공유) */
+class TitleLoader {
+    fetchTitle;
+    /** 가져온 제목 (null: 실패/없음 → 다시 요청하지 않음) */
+    titles = new Map();
+    pending = new Set();
+    flushScheduled = false;
+    views = new Set();
+    constructor(fetchTitle) {
+        this.fetchTitle = fetchTitle;
+    }
+    /** 가져온 제목. 아직이면 요청하고 undefined */
+    get(url) {
+        const title = this.titles.get(url);
+        if (title !== undefined || this.titles.has(url))
+            return title;
+        if (!this.pending.has(url)) {
+            this.pending.add(url);
+            // 데코레이션을 만드는 중에 호출되므로 실제 요청은 그 뒤에 합니다.
+            void Promise.resolve()
+                .then(() => this.fetchTitle(url))
+                .then((title) => title?.replace(/\s+/g, " ").trim() || null, () => null)
+                .then((title) => {
+                this.pending.delete(url);
+                if (this.titles.size >= 1000)
+                    this.titles.clear();
+                this.titles.set(url, title);
+                this.scheduleFlush();
+            });
+        }
+        return undefined;
+    }
+    /** 거의 동시에 도착한 제목은 한 번에 반영합니다. */
+    scheduleFlush() {
+        if (this.flushScheduled)
+            return;
+        this.flushScheduled = true;
+        setTimeout(() => {
+            this.flushScheduled = false;
+            for (const view of this.views)
+                view.dispatch({ effects: linkTitlesLoaded.of(null) });
+        });
+    }
+}
+const DEFAULT_MAX_TITLE = 40;
+/** link()의 설정 (linkPlugin만 쓰면 기본값: 아이콘 표시, 제목 가져오기 없음) */
+const linkConfig = Facet.define({
+    combine: (values) => values[0] ?? { favicon: defaultFavicon, titles: null, maxTitleLength: DEFAULT_MAX_TITLE },
+});
+/** 제목을 가져오는 에디터를 등록합니다. (제목이 도착하면 그 에디터들을 다시 그림) */
+const titleViews = ViewPlugin.define((view) => {
+    let loader = view.state.facet(linkConfig).titles;
+    loader?.views.add(view);
+    return {
+        update(update) {
+            const next = update.state.facet(linkConfig).titles;
+            if (next === loader)
+                return;
+            loader?.views.delete(view);
+            (loader = next)?.views.add(view);
+        },
+        destroy: () => loader?.views.delete(view),
+    };
+});
 /** 링크가 올 수 없으므로 자식 순회를 생략하는 노드 */
 const SKIP_CHILDREN = new Set([
     "FencedCode",
@@ -95,7 +335,16 @@ const SKIP_CHILDREN = new Set([
 ]);
 export const linkPlugin = createRevealPlugin({
     // 링크 안에서 [ → 라벨 → ] → ( → URL → 제목 → ) 순서로 추가되므로 정렬이 필요 없습니다.
+    rebuildOn: (update) => update.transactions.some((tr) => tr.effects.some((e) => e.is(linkTitlesLoaded))),
     visit({ state, decorations, isRevealed }) {
+        const config = state.facet(linkConfig);
+        /** 링크 앞에 그릴 아이콘 주소 (false: 그리지 않음, null: 기본 아이콘) */
+        const iconFor = (href) => {
+            if (!config.favicon)
+                return false;
+            const url = webUrl(href);
+            return url ? config.favicon(url) : false;
+        };
         return {
             enter(node) {
                 if (node.name === "Link") {
@@ -121,16 +370,41 @@ export const linkPlugin = createRevealPlugin({
                         return false;
                     }
                     const tooltip = link.title ?? link.href;
+                    const icon = iconFor(link.href);
+                    /** 앞쪽 숨김 범위: 아이콘이 있으면 그 자리에 아이콘을 그립니다. */
+                    const lead = (to) => (icon === false ? hidden : faviconDeco(icon)).range(link.from, to);
                     if (hasLabel) {
-                        // [ 숨김 → 라벨(링크 스타일, 안쪽 인라인 문법 유지) → ](url "title") 숨김
-                        decorations.push(hidden.range(link.from, link.labelFrom));
-                        decorations.push(renderedLabel(tooltip).range(link.labelFrom, link.labelTo));
+                        // [ 숨김(또는 아이콘) → 라벨(링크 스타일, 안쪽 인라인 문법 유지) → ](url "title") 숨김
+                        // 라벨이 이미지인 링크(`[![](img)](url)`)에는 아이콘을 그리지 않습니다.
+                        // 박스(라벨 mark)는 아이콘 자리부터 시작해 아이콘과 라벨을 함께 감쌉니다.
+                        const image = node.node.getChild("Image");
+                        const boxFrom = image || icon === false ? link.labelFrom : link.from;
+                        if (boxFrom === link.from)
+                            decorations.push(renderedLabel(tooltip).range(boxFrom, link.labelTo));
+                        decorations.push(image ? hidden.range(link.from, link.labelFrom) : lead(link.labelFrom));
+                        if (boxFrom !== link.from)
+                            decorations.push(renderedLabel(tooltip).range(boxFrom, link.labelTo));
                         decorations.push(hidden.range(link.labelTo, link.to));
                     }
                     else if (link.urlFrom !== null && link.urlFrom < link.urlTo) {
+                        const title = config.titles && webUrl(link.href) ? config.titles.get(link.href) : null;
+                        if (title) {
+                            // 가져온 페이지 제목(너무 길면 잘라서)으로 링크 전체를 보여줍니다. 툴팁에는 전체 제목과 주소.
+                            decorations.push(Decoration.replace({
+                                widget: new FetchedTitleWidget(truncateTitle(title, config.maxTitleLength), `${title}\n${link.href}`, icon),
+                            }).range(link.from, link.to));
+                            return false;
+                        }
                         // 라벨이 비어 있으면(`[](url)`) 링크가 사라지지 않도록 URL을 라벨처럼 보여줍니다.
-                        decorations.push(hidden.range(link.from, link.urlFrom));
-                        decorations.push(renderedLabel(tooltip).range(link.urlFrom, link.urlTo));
+                        // (제목을 가져오는 중이거나 실패한 경우 포함)
+                        if (icon === false) {
+                            decorations.push(lead(link.urlFrom));
+                            decorations.push(renderedLabel(tooltip).range(link.urlFrom, link.urlTo));
+                        }
+                        else {
+                            decorations.push(renderedLabel(tooltip).range(link.from, link.urlTo));
+                            decorations.push(lead(link.urlFrom));
+                        }
                         decorations.push(hidden.range(link.urlTo, link.to));
                     }
                     // 라벨과 URL이 모두 비어 있으면(`[]()`) 원문 그대로 둡니다.
@@ -169,7 +443,8 @@ function linkClickHandler(openLink) {
         mousedown(event, view) {
             if (event.button !== 0)
                 return false;
-            const target = event.target?.closest?.(".cm-link-rendered");
+            // 라벨, 가져온 제목, 아이콘
+            const target = event.target?.closest?.(".cm-link-rendered, .cm-link-icon");
             if (!target || !view.contentDOM.contains(target))
                 return false;
             const link = linkAt(view.state, view.posAtDOM(target));
@@ -185,28 +460,86 @@ function linkClickHandler(openLink) {
 // ---------------------------------------------------------------------------
 // 테마
 // ---------------------------------------------------------------------------
+/** 기본 링크 아이콘 (사슬 모양, 아이콘을 불러오지 못했거나 주소가 아이콘을 주지 않을 때) */
+const LINK_ICON = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E\")";
+/** 링크 글자 선택자: 안쪽 span(구문 강조 색, 제목 색)까지 링크 색으로 */
+const textSelector = (mode) => `&${mode} .cm-link-rendered, &${mode} .cm-link-rendered *`;
 const linkTheme = EditorView.baseTheme({
+    // 박스 안에 아이콘과 라벨. 인라인 코드(회색 박스)와 구분되도록 옅은 파랑 배경 + 파란 글자.
     ".cm-link-rendered": {
         padding: "0.15rem 0.25rem",
         borderRadius: "0.25rem",
-        transition: "100ms",
+        transition: "background-color 100ms",
         cursor: "pointer",
     },
-    // 어두운 테마에서는 밝은 배경 위의 밝은 글자가 보이지 않으므로 배경을 어둡게 합니다.
-    "&light .cm-link-rendered": { backgroundColor: "oklch(92.2% 0 0)" },
-    "&light .cm-link-rendered:hover": { backgroundColor: "oklch(87% 0 0)" },
-    "&dark .cm-link-rendered": { backgroundColor: "oklch(34% 0 0)" },
-    "&dark .cm-link-rendered:hover": { backgroundColor: "oklch(40% 0 0)" },
+    // 박스가 있으므로 구문 강조가 안쪽에 그리는 밑줄(링크/주소 태그)은 없앱니다.
+    // 취소선 글자는 같은 span에 링크 밑줄과 취소선이 함께 있어 따로 끌 수 없으므로,
+    // 취소선은 바깥 요소(.cm-strikethrough)에 다시 그립니다. (바깥 요소의 선은 안쪽 글자 위에도 그려짐)
+    // 밑줄 문법(.cm-underline)은 바깥 요소에 그려지므로 그대로 보입니다.
+    ".cm-link-rendered *:not(.cm-strikethrough):not(.cm-underline)": {
+        textDecoration: "none",
+    },
+    ".cm-link-rendered .cm-strikethrough": {
+        textDecoration: "line-through",
+    },
+    "&light .cm-link-rendered": { backgroundColor: "rgba(9, 105, 218, 0.08)" },
+    "&light .cm-link-rendered:hover": { backgroundColor: "rgba(9, 105, 218, 0.15)" },
+    "&dark .cm-link-rendered": { backgroundColor: "rgba(88, 166, 255, 0.15)" },
+    "&dark .cm-link-rendered:hover": { backgroundColor: "rgba(88, 166, 255, 0.24)" },
+    [textSelector("light")]: { color: "#0969da" },
+    [textSelector("dark")]: { color: "#58a6ff" },
+    // 사이트 아이콘: 글자 높이에 맞춘 정사각형 (줄 높이를 바꾸지 않도록 세로 여백 없이 가로 간격만)
+    ".cm-link-icon": {
+        display: "inline-block",
+        width: "1em",
+        height: "1em",
+        marginRight: "0.3em",
+        verticalAlign: "-0.15em",
+        cursor: "pointer",
+    },
+    ".cm-link-favicon": {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "2px",
+    },
+    ".cm-link-icon-fallback": {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "currentColor",
+        mask: `${LINK_ICON} center / 85% no-repeat`,
+        WebkitMask: `${LINK_ICON} center / 85% no-repeat`,
+    },
+    "&light .cm-link-icon": { color: "#0969da" },
+    "&dark .cm-link-icon": { color: "#58a6ff" },
+    // 어두운 배경에서 검은 아이콘(GitHub 등)이 보이도록 밝은 바탕을 깝니다.
+    "&dark .cm-link-favicon": {
+        boxSizing: "border-box",
+        padding: "1px",
+        backgroundColor: "rgba(255, 255, 255, 0.9)",
+        borderRadius: "3px",
+    },
 });
 /**
  * 인라인 링크 `[label](url "title")`를 하이브리드 방식으로 보여주는 확장입니다.
  * - 커서가 링크에 닿지 않으면 기호와 URL을 숨기고 라벨만 링크 스타일로 보여줍니다.
  *   (라벨 안의 굵게/코드 등 인라인 문법은 그대로 유지)
  * - 렌더링된 라벨을 클릭하면 링크를 엽니다. (기본: http(s)/mailto/tel/ftp만 새 탭으로)
+ * - http(s) 링크 앞에 사이트 아이콘을 보여줍니다. (`favicon`)
+ * - 라벨이 빈 링크(`[](url)`)는 `fetchTitle`이 있으면 페이지 제목(길면 잘라서)을, 없으면 주소를 보여줍니다.
  * - 참조 링크(`[a][ref]`, `[a]`), 자동 링크, 이미지는 다루지 않습니다.
  */
 export function link(options = {}) {
+    const { favicon = true, fetchTitle, maxTitleLength = DEFAULT_MAX_TITLE } = options;
     return [
+        linkConfig.of({
+            favicon: favicon === true ? defaultFavicon : favicon || null,
+            titles: fetchTitle ? new TitleLoader(fetchTitle) : null,
+            maxTitleLength,
+        }),
+        titleViews,
         // 겹치는 mark 데코레이션은 우선순위가 낮은(뒤에 오는) 소스가 바깥쪽에 그려집니다.
         // 라벨이 굵게/코드 등 다른 플러그인의 span 바깥을 하나의 span으로 감싸도록 우선순위를 낮춥니다.
         // (그렇지 않으면 라벨이 여러 조각으로 나뉘어 배경/모서리 스타일이 끊어집니다)

package/dist/list.js

@@ -62,6 +62,7 @@ const CONTAINERS = new Set([
     "BulletList",
     "OrderedList",
     "ListItem",
+    "FootnoteDefinition",
 ]);
 // ---------------------------------------------------------------------------
 // 플러그인
@@ -113,6 +114,44 @@ export const listPlugin = createRevealPlugin({
 // 테마
 // ---------------------------------------------------------------------------
 const listTheme = EditorView.baseTheme({
+    // 불릿은 글자(•, ◦, ▪) 대신 CSS 도형으로 그립니다.
+    // - 글자는 너무 작고, ◦는 다른 글꼴로 대체되어 한 글자보다 넓어져 들여쓰기가 어긋났습니다.
+    // - 너비는 원래 기호(-)와 같은 한 글자(1ch)로 고정해 들여쓰기·줄바꿈 정렬을 유지합니다.
+    // - 글자는 DOM에 남겨(복사/접근성) 투명하게만 하고, 색(currentColor)은 도형에 씁니다.
+    ".cm-list-bullet": {
+        display: "inline-block",
+        position: "relative",
+        width: "1ch",
+        WebkitTextFillColor: "transparent",
+    },
+    ".cm-list-bullet::after": {
+        content: '""',
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        boxSizing: "border-box",
+        // 글자 크기의 0.35배 (본문 13px에서 약 4.6px)
+        width: "0.35em",
+        height: "0.35em",
+    },
+    // 깊이 1: 채운 원
+    ".cm-list-bullet-1::after": {
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+    },
+    // 깊이 2: 빈 원
+    ".cm-list-bullet-2::after": {
+        borderRadius: "50%",
+        border: "1.5px solid currentColor",
+    },
+    // 깊이 3: 채운 사각형 (같은 크기면 원보다 커 보이므로 원의 약 0.9배)
+    ".cm-list-bullet-3::after": {
+        width: "0.32em",
+        height: "0.32em",
+        borderRadius: "1px",
+        backgroundColor: "currentColor",
+    },
     "&light .cm-list-bullet, &light .cm-formatting-list": {
         color: "#6b7280",
     },

package/dist/listIndent.js

@@ -146,6 +146,7 @@ const CONTAINERS = new Set([
     "OrderedList",
     "ListItem",
     "Blockquote",
+    "FootnoteDefinition",
 ]);
 /** list와 그 조상/자손 OrderedList들의 첫 항목 기호 위치 (변경 전 트리 기준) */
 function firstItemMarks(lists) {

package/dist/mention.js

@@ -36,13 +36,25 @@ export const mentionPlugin = createRevealPlugin({
         };
     },
 });
+/** 멘션 색: 인라인 코드(회색 배경)·해시태그(진한 파랑)와 구분되는 옅은 보라 배경 + 보라 글자 */
+const MENTION_COLORS = {
+    light: { bg: "rgba(144, 101, 176, 0.14)", fg: "#7a4ea3" },
+    dark: { bg: "rgba(157, 104, 211, 0.24)", fg: "#cfa8f5" },
+};
+/** 멘션 글자색을 지정하는 선택자: 안쪽 span(구문 강조)까지, 제목 안 기호 규칙(제목 색)보다 우선하도록 구체적으로 */
+const textSelector = (mode) => [".cm-mention-begin", ".cm-mention-end"]
+    .flatMap((cls) => [`&${mode} .cm-content .cm-line .cm-mention${cls}`, `&${mode} .cm-content .cm-line .cm-mention${cls} *`])
+    .join(", ");
 const mentionTheme = EditorView.baseTheme({
     ".cm-mention": {
-        backgroundColor: "rgba(135, 131, 120, 0.15)",
-        // `.cm-mention *`로 지정하면 안쪽 span이 있을 때만 적용되어
-        // (구문 강조 span이 없으면 적용되지 않음) 글자 크기가 바뀌지 않으므로 직접 지정합니다.
-        fontSize: "0.75rem",
+        // 주변 글자의 0.9배 (제목 안에서는 제목 크기를 따라 커짐).
+        // `.cm-mention *`가 아니라 여기에 지정해야 안쪽 span 유무와 상관없이 같은 크기가 됩니다.
+        fontSize: "0.9em",
     },
+    "&light .cm-mention": { backgroundColor: MENTION_COLORS.light.bg },
+    "&dark .cm-mention": { backgroundColor: MENTION_COLORS.dark.bg },
+    [textSelector("light")]: { color: MENTION_COLORS.light.fg },
+    [textSelector("dark")]: { color: MENTION_COLORS.dark.fg },
     ".cm-mention.cm-mention-begin": {
         borderRadius: "2px 0 0 2px",
         padding: "1px 0 1px 4px",

package/dist/quote.js

@@ -6,22 +6,27 @@ import { createRevealPlugin } from "./utils/reveal.js";
 // ---------------------------------------------------------------------------
 const hiddenMark = Decoration.replace({});
 const revealedMark = Decoration.mark({ class: "cm-formatting cm-formatting-quote" });
-/** 깊이별 줄 데코레이션 (깊이 제한이 없으므로 처음 쓸 때 만들어 재사용) */
+/**
+ * 깊이별 줄 데코레이션 (깊이 제한이 없으므로 처음 쓸 때 만들어 재사용).
+ * top/bottom: 가장 바깥 인용의 첫 줄/마지막 줄 (세로줄 끝을 둥글게)
+ */
 const lineCache = new Map();
-function quoteLine(depth) {
-    let deco = lineCache.get(depth);
+function quoteLine(depth, top, bottom, indent) {
+    const key = `${depth}${top ? "t" : ""}${bottom ? "b" : ""}:${indent}`;
+    let deco = lineCache.get(key);
     if (!deco) {
         deco = Decoration.line({
-            class: `cm-quote-line cm-quote-line-${depth}`,
+            class: `cm-quote-line cm-quote-line-${depth}${top ? " cm-quote-top" : ""}${bottom ? " cm-quote-bottom" : ""}`,
             // 테마에서 깊이만큼 왼쪽 세로줄을 그리는 데 씁니다.
-            attributes: { style: `--cm-quote-depth: ${depth}` },
+            // indent: 목록·각주 안 인용처럼 ">" 앞에 들여쓰기가 있으면 세로줄을 그만큼 오른쪽(글 바로 앞)으로 옮깁니다.
+            attributes: { style: `--cm-quote-depth: ${depth}; --cm-quote-indent: ${indent}ch` },
         });
-        lineCache.set(depth, deco);
+        lineCache.set(key, deco);
     }
     return deco;
 }
 /** 인용 밖에서는 인용을 담을 수 있는 컨테이너만 내려갑니다. */
-const CONTAINERS = new Set(["Document", "BulletList", "OrderedList", "ListItem"]);
+const CONTAINERS = new Set(["Document", "BulletList", "OrderedList", "ListItem", "FootnoteDefinition"]);
 const Space = 32;
 // ---------------------------------------------------------------------------
 // 플러그인
@@ -42,6 +47,11 @@ export const quotePlugin = createRevealPlugin({
         const inSource = () => stack.length > 0 && stack[stack.length - 1].source;
         /** 줄 번호 → 그 줄을 덮는 인용의 최대 깊이 (가장 바깥 인용이 끝날 때 줄 데코레이션으로 변환) */
         const lineDepth = new Map();
+        /** 세로줄을 그리는 가장 바깥 인용의 첫 줄/마지막 줄 번호 */
+        let outerFirst = -1;
+        let outerLast = -1;
+        /** 가장 바깥 인용의 ">" 앞 들여쓰기 (칸) */
+        let outerIndent = 0;
         return {
             enter(node) {
                 if (node.name === "Blockquote") {
@@ -59,6 +69,11 @@ export const quotePlugin = createRevealPlugin({
                     const last = doc.lineAt(node.to).number;
                     for (let n = first; n <= last; n++)
                         lineDepth.set(n, depth);
+                    if (depth === 1) {
+                        outerFirst = first;
+                        outerLast = last;
+                        outerIndent = node.from - doc.lineAt(node.from).from;
+                    }
                     return;
                 }
                 if (node.name === "QuoteMark") {
@@ -87,29 +102,68 @@ export const quotePlugin = createRevealPlugin({
                 // 가장 바깥 인용이 끝나면 줄마다 하나의 줄 데코레이션을 추가합니다.
                 // (같은 줄에 style이 다른 줄 데코레이션이 여러 개면 하나만 남고 어느 쪽이 남을지는
                 //  데코레이션 순서에 달려 있어 깊이가 틀릴 수 있으므로, 최대 깊이 하나만 넣습니다.)
-                for (const [n, d] of lineDepth)
-                    decorations.push(quoteLine(d).range(doc.line(n).from));
+                for (const [n, d] of lineDepth) {
+                    const line = doc.line(n);
+                    // 줄마다 실제 들여쓰기(공백)만큼만 옮깁니다. (들여쓰지 않은 게으른 연속 줄은 옮기지 않음)
+                    const lead = line.text.length - line.text.trimStart().length;
+                    const indent = Math.min(outerIndent, lead);
+                    decorations.push(quoteLine(d, n === outerFirst, n === outerLast, indent).range(line.from));
+                }
                 lineDepth.clear();
+                outerFirst = outerLast = -1;
             },
         };
     },
 });
 // ---------------------------------------------------------------------------
-// 테마: 왼쪽 세로줄만 (깊이만큼 반복)
+// 테마: 배경 없이 왼쪽 세로줄 + 차분한 글자색 (콜아웃은 색 배경 상자라 구분됨, 그림자 없음)
 // ---------------------------------------------------------------------------
 const BAR = "3px"; // 세로줄 두께
-const STEP = "14px"; // 깊이 한 단계의 폭
+const STEP = "16px"; // 깊이 한 단계의 폭 (세로줄 + 간격)
+const CAP = "3px"; // 둥근 끝 (세로줄 두께와 같은 지름)
+/** 둥근 끝: 세로줄 두께만 한 원 (위/아래 끝 줄에서만 크기가 생김) */
+const capImage = `radial-gradient(circle at 50% 50%, var(--cm-quote-color) 70%, transparent 72%)`;
 const quoteTheme = EditorView.baseTheme({
     ".cm-quote-line": {
-        backgroundImage: `repeating-linear-gradient(to right, var(--cm-quote-color) 0 ${BAR}, transparent ${BAR} ${STEP})`,
-        backgroundSize: `calc(var(--cm-quote-depth) * ${STEP}) 100%`,
+        "--cm-quote-cap-top": "0px",
+        "--cm-quote-cap-bottom": "0px",
+        // 세로줄 시작 위치: 감싼 컨테이너의 내용 시작(콜아웃 안이면 상자 안 글자 위치) + ">" 앞 들여쓰기
+        "--cm-quote-x": "calc(var(--cm-quote-base, 0px) + var(--cm-quote-indent, 0px))",
+        // 배경 그림 5장: 위 끝 원, 아래 끝 원, 가장 바깥 세로줄, 안쪽 인용들의 세로줄(깊이만큼 반복),
+        // 이 줄을 감싼 컨테이너의 레일(각주 정의 안이면 각주 레일. 배경 그림은 한 규칙만 적용되므로 함께 그림)
+        // 가장 바깥 세로줄은 끝 원의 가운데에서 시작/끝나도록 반지름만큼 줄입니다.
+        backgroundImage: [
+            capImage,
+            capImage,
+            "linear-gradient(var(--cm-quote-color), var(--cm-quote-color))",
+            `repeating-linear-gradient(to right, var(--cm-quote-color) 0 ${BAR}, transparent ${BAR} ${STEP})`,
+            "var(--cm-line-rail, linear-gradient(transparent, transparent))",
+        ].join(", "),
+        backgroundSize: [
+            `${BAR} var(--cm-quote-cap-top)`,
+            `${BAR} var(--cm-quote-cap-bottom)`,
+            // 컨테이너 아래 여백(콜아웃 끝 줄의 상자 안쪽 여백)에는 그리지 않습니다.
+            `${BAR} calc(100% - var(--cm-quote-cap-top) / 2 - var(--cm-quote-cap-bottom) / 2 - var(--cm-container-bottom, 0px))`,
+            `calc((var(--cm-quote-depth) - 1) * ${STEP}) calc(100% - var(--cm-container-bottom, 0px))`,
+            "var(--cm-line-rail-size, 0px 0px)",
+        ].join(", "),
+        backgroundPosition: [
+            "var(--cm-quote-x) 0",
+            "var(--cm-quote-x) calc(100% - var(--cm-container-bottom, 0px))",
+            "var(--cm-quote-x) calc(var(--cm-quote-cap-top) / 2)",
+            `calc(var(--cm-quote-x) + ${STEP}) 0`,
+            "var(--cm-line-rail-pos, 0 0)",
+        ].join(", "),
         backgroundRepeat: "no-repeat",
         // 내용 시작 위치를 다른 블록(코드 블록 등)에도 알려줍니다. (utils/container.ts)
-        "--cm-container-indent": `calc(var(--cm-quote-depth) * ${STEP} + 2px)`,
+        "--cm-container-indent": `calc(var(--cm-quote-base, 0px) + var(--cm-quote-depth) * ${STEP} + 2px)`,
         paddingLeft: "var(--cm-container-indent)",
+        color: "var(--cm-quote-text)",
     },
-    "&light .cm-quote-line": { "--cm-quote-color": "#d1d5db" },
-    "&dark .cm-quote-line": { "--cm-quote-color": "#4b5563" },
+    ".cm-quote-top": { "--cm-quote-cap-top": CAP },
+    ".cm-quote-bottom": { "--cm-quote-cap-bottom": CAP },
+    "&light .cm-quote-line": { "--cm-quote-color": "#cbd5e1", "--cm-quote-text": "#475569" },
+    "&dark .cm-quote-line": { "--cm-quote-color": "#475569", "--cm-quote-text": "#a3adbb" },
 });
 /**
  * 인용(`> 내용`)을 하이브리드 방식으로 보여주는 확장입니다.

package/dist/tableModel.js

@@ -210,6 +210,7 @@ export const TABLE_CONTAINERS = new Set([
     "BulletList",
     "OrderedList",
     "ListItem",
+    "FootnoteDefinition",
 ]);
 /** 문서 전체의 표 (컨테이너만 훑음) */
 export function scanTables(state) {