mdsquare 0.0.0-stage → 0.1.0

package/dist/link.js

@@ -0,0 +1,217 @@
+import { syntaxTree } from "@codemirror/language";
+import { Prec } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+import { createRevealPlugin } from "./utils/reveal.js";
+const unescape = (text) => text.replace(/\\([!-/:-@[-`{-~])/g, "$1");
+/**
+ * Link 노드에서 인라인 링크 `[label](url "title")` 정보를 읽습니다.
+ * 참조 링크(`[a][ref]`, `[a]`)처럼 인라인 링크가 아니면 null을 반환합니다.
+ */
+export function readInlineLink(state, link) {
+    if (link.name !== "Link")
+        return null;
+    // 자식을 한 번만 훑어 기호/URL/제목을 찾습니다. (getChildren/getChild 반복 호출로 인한 배열 할당 방지)
+    const marks = [];
+    let url = null;
+    let titleNode = null;
+    for (let child = link.firstChild; child; child = child.nextSibling) {
+        if (child.name === "LinkMark")
+            marks.push(child);
+        else if (child.name === "URL")
+            url = child;
+        else if (child.name === "LinkTitle")
+            titleNode = child;
+    }
+    // 인라인 링크는 기호가 정확히 [ ] ( ) 4개입니다. (참조 링크 [a][ref], [a]는 2개)
+    if (marks.length !== 4)
+        return null;
+    const [open, close, paren, end] = marks;
+    const { doc } = state;
+    const charAt = (pos) => doc.sliceString(pos, pos + 1);
+    if (open.to - open.from !== 1 ||
+        charAt(open.from) !== "[" ||
+        charAt(close.from) !== "]" ||
+        charAt(paren.from) !== "(" ||
+        charAt(end.from) !== ")") {
+        return null;
+    }
+    let href = url ? doc.sliceString(url.from, url.to) : "";
+    if (href.startsWith("<") && href.endsWith(">"))
+        href = href.slice(1, -1);
+    const rawTitle = titleNode ? doc.sliceString(titleNode.from, titleNode.to) : null;
+    return {
+        from: link.from,
+        to: link.to,
+        labelFrom: open.to,
+        labelTo: close.from,
+        urlFrom: url?.from ?? null,
+        urlTo: url?.to ?? null,
+        titleFrom: titleNode?.from ?? null,
+        titleTo: titleNode?.to ?? null,
+        href: href.includes("\\") ? unescape(href) : href,
+        title: rawTitle === null ? null : unescape(rawTitle.slice(1, -1)),
+        marks,
+    };
+}
+// ---------------------------------------------------------------------------
+// 데코레이션
+// ---------------------------------------------------------------------------
+const hidden = Decoration.replace({});
+const linkMarkDeco = Decoration.mark({ class: "cm-formatting cm-formatting-link cm-link" });
+const urlMarkDeco = Decoration.mark({ class: "cm-formatting cm-formatting-url cm-url" });
+const labelDeco = Decoration.mark({ class: "cm-link" });
+const urlDeco = Decoration.mark({ class: "cm-url" });
+const titleDeco = Decoration.mark({ class: "cm-url cm-link-title" });
+/**
+ * 렌더링된 링크 라벨. 툴팁(title 속성)이 링크마다 달라서 툴팁별로 만들어 재사용합니다.
+ * (캐시가 무한히 커지지 않도록 일정 개수를 넘으면 비웁니다)
+ */
+const labelCache = new Map();
+function renderedLabel(tooltip) {
+    let deco = labelCache.get(tooltip);
+    if (!deco) {
+        if (labelCache.size >= 1000)
+            labelCache.clear();
+        // inclusive: 라벨 전체가 다른 데코레이션(예: 이미지 위젯)으로 대체되어도 그 위젯을 감싸도록 합니다.
+        deco = Decoration.mark({
+            class: "cm-link cm-link-rendered",
+            attributes: { title: tooltip },
+            inclusive: true,
+        });
+        labelCache.set(tooltip, deco);
+    }
+    return deco;
+}
+/** 링크가 올 수 없으므로 자식 순회를 생략하는 노드 */
+const SKIP_CHILDREN = new Set([
+    "FencedCode",
+    "CodeBlock",
+    "InlineCode",
+    "HTMLBlock",
+    "CommentBlock",
+    "Image",
+    "Autolink",
+    "URL",
+]);
+export const linkPlugin = createRevealPlugin({
+    // 링크 안에서 [ → 라벨 → ] → ( → URL → 제목 → ) 순서로 추가되므로 정렬이 필요 없습니다.
+    visit({ state, decorations, isRevealed }) {
+        return {
+            enter(node) {
+                if (node.name === "Link") {
+                    const link = readInlineLink(state, node.node);
+                    if (!link)
+                        return false; // 참조 링크 등은 원문 그대로
+                    const [open, close, paren, end] = link.marks;
+                    const hasLabel = link.labelFrom < link.labelTo;
+                    if (isRevealed(link.from, link.to)) {
+                        // 원문을 보여주되 부분별로 스타일을 적용합니다.
+                        decorations.push(linkMarkDeco.range(open.from, open.to));
+                        if (hasLabel)
+                            decorations.push(labelDeco.range(link.labelFrom, link.labelTo));
+                        decorations.push(linkMarkDeco.range(close.from, close.to));
+                        decorations.push(urlMarkDeco.range(paren.from, paren.to));
+                        if (link.urlFrom !== null && link.urlFrom < link.urlTo) {
+                            decorations.push(urlDeco.range(link.urlFrom, link.urlTo));
+                        }
+                        if (link.titleFrom !== null) {
+                            decorations.push(titleDeco.range(link.titleFrom, link.titleTo));
+                        }
+                        decorations.push(urlMarkDeco.range(end.from, end.to));
+                        return false;
+                    }
+                    const tooltip = link.title ?? link.href;
+                    if (hasLabel) {
+                        // [ 숨김 → 라벨(링크 스타일, 안쪽 인라인 문법 유지) → ](url "title") 숨김
+                        decorations.push(hidden.range(link.from, link.labelFrom));
+                        decorations.push(renderedLabel(tooltip).range(link.labelFrom, link.labelTo));
+                        decorations.push(hidden.range(link.labelTo, link.to));
+                    }
+                    else if (link.urlFrom !== null && link.urlFrom < link.urlTo) {
+                        // 라벨이 비어 있으면(`[](url)`) 링크가 사라지지 않도록 URL을 라벨처럼 보여줍니다.
+                        decorations.push(hidden.range(link.from, link.urlFrom));
+                        decorations.push(renderedLabel(tooltip).range(link.urlFrom, link.urlTo));
+                        decorations.push(hidden.range(link.urlTo, link.to));
+                    }
+                    // 라벨과 URL이 모두 비어 있으면(`[]()`) 원문 그대로 둡니다.
+                    return false;
+                }
+                if (SKIP_CHILDREN.has(node.name))
+                    return false;
+            },
+        };
+    },
+});
+// ---------------------------------------------------------------------------
+// 클릭으로 열기
+// ---------------------------------------------------------------------------
+/** 기본으로 열어 주는 주소 형식 (javascript:, data: 등은 열지 않습니다) */
+const SAFE_URL = /^(?:https?:|mailto:|tel:|ftp:)/i;
+/** 기본으로 열어도 안전한 주소인지 (http(s), mailto, tel, ftp) */
+export function isSafeUrl(href) {
+    return SAFE_URL.test(href);
+}
+/** 기본 열기 동작: 안전한 절대 주소만 새 탭으로 엽니다. */
+export function openLinkSafely(href) {
+    if (isSafeUrl(href))
+        window.open(href, "_blank", "noopener,noreferrer");
+}
+/** 위치에 있는 인라인 링크 */
+function linkAt(state, pos) {
+    for (let n = syntaxTree(state).resolveInner(pos, 1); n; n = n.parent) {
+        if (n.name === "Link")
+            return readInlineLink(state, n);
+    }
+    return null;
+}
+function linkClickHandler(openLink) {
+    return EditorView.domEventHandlers({
+        mousedown(event, view) {
+            if (event.button !== 0)
+                return false;
+            const target = event.target?.closest?.(".cm-link-rendered");
+            if (!target || !view.contentDOM.contains(target))
+                return false;
+            const link = linkAt(view.state, view.posAtDOM(target));
+            if (!link || !link.href)
+                return false;
+            // 커서를 옮기지 않고(원문이 펼쳐지지 않고) 링크만 엽니다.
+            event.preventDefault();
+            openLink(link.href, event);
+            return true;
+        },
+    });
+}
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const linkTheme = EditorView.baseTheme({
+    ".cm-link-rendered": {
+        padding: "0.15rem 0.25rem",
+        borderRadius: "0.25rem",
+        transition: "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)" },
+});
+/**
+ * 인라인 링크 `[label](url "title")`를 하이브리드 방식으로 보여주는 확장입니다.
+ * - 커서가 링크에 닿지 않으면 기호와 URL을 숨기고 라벨만 링크 스타일로 보여줍니다.
+ *   (라벨 안의 굵게/코드 등 인라인 문법은 그대로 유지)
+ * - 렌더링된 라벨을 클릭하면 링크를 엽니다. (기본: http(s)/mailto/tel/ftp만 새 탭으로)
+ * - 참조 링크(`[a][ref]`, `[a]`), 자동 링크, 이미지는 다루지 않습니다.
+ */
+export function link(options = {}) {
+    return [
+        // 겹치는 mark 데코레이션은 우선순위가 낮은(뒤에 오는) 소스가 바깥쪽에 그려집니다.
+        // 라벨이 굵게/코드 등 다른 플러그인의 span 바깥을 하나의 span으로 감싸도록 우선순위를 낮춥니다.
+        // (그렇지 않으면 라벨이 여러 조각으로 나뉘어 배경/모서리 스타일이 끊어집니다)
+        Prec.low(linkPlugin),
+        linkClickHandler(options.openLink ?? openLinkSafely),
+        linkTheme,
+    ];
+}

package/dist/list.d.ts

@@ -0,0 +1,14 @@
+import { Facet, type Extension } from "@codemirror/state";
+/**
+ * 불릿 작업 목록 항목(`- [ ] 할 일`)의 기호를 다른 확장(task())이 담당하는지 여부.
+ * true이면 list()는 해당 항목의 불릿을 그리지 않습니다. (같은 범위를 두 플러그인이 대체하지 않도록)
+ */
+export declare const taskMarkersHandled: Facet<boolean, boolean>;
+export declare const listPlugin: import("@codemirror/view").ViewPlugin<import("./extensions.js").RevealPluginValue, undefined>;
+/**
+ * 불릿/번호 목록을 하이브리드 방식으로 보여주는 확장입니다.
+ * - 불릿 기호(-, *, +)는 깊이별 불릿(•, ◦, ▪)으로 보여주고, 커서가 기호에 닿으면 원래 기호를 보여줍니다.
+ * - 번호 기호(1., 1))는 항상 보여주고 스타일만 적용합니다.
+ * - 줄과 기호에 깊이별 클래스(cm-list-line-N, cm-list-N)를 붙입니다. (깊이 제한 없음)
+ */
+export declare function list(): Extension;

package/dist/list.js

@@ -0,0 +1,136 @@
+import { Facet } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { createRevealPlugin } from "./utils/reveal.js";
+/**
+ * 불릿 작업 목록 항목(`- [ ] 할 일`)의 기호를 다른 확장(task())이 담당하는지 여부.
+ * true이면 list()는 해당 항목의 불릿을 그리지 않습니다. (같은 범위를 두 플러그인이 대체하지 않도록)
+ */
+export const taskMarkersHandled = Facet.define({
+    combine: (values) => values.some(Boolean),
+});
+// ---------------------------------------------------------------------------
+// 불릿 위젯
+// ---------------------------------------------------------------------------
+/** 깊이별 불릿 모양 (깊이 4부터 다시 반복) */
+const BULLETS = ["•", "◦", "▪"];
+/** 깊이(1부터) → 불릿 모양 단계(1~3) */
+const bulletLevel = (depth) => ((depth - 1) % BULLETS.length) + 1;
+class BulletWidget extends WidgetType {
+    level;
+    constructor(level) {
+        super();
+        this.level = level;
+    }
+    eq(other) {
+        return other.level === this.level;
+    }
+    toDOM() {
+        const span = document.createElement("span");
+        span.className = `cm-list-bullet cm-list-bullet-${this.level}`;
+        span.textContent = BULLETS[this.level - 1];
+        return span;
+    }
+    // 불릿을 클릭해도 에디터가 커서를 옮길 수 있도록 이벤트를 에디터에 넘깁니다.
+    ignoreEvent() {
+        return false;
+    }
+}
+// ---------------------------------------------------------------------------
+// 데코레이션 (깊이 제한이 없으므로 깊이별로 처음 쓸 때 만들어 재사용합니다)
+// ---------------------------------------------------------------------------
+function cached(create) {
+    const cache = new Map();
+    return (depth) => {
+        let value = cache.get(depth);
+        if (value === undefined)
+            cache.set(depth, (value = create(depth)));
+        return value;
+    };
+}
+const listLine = cached((depth) => Decoration.line({ class: `cm-list-line cm-list-line-${depth}` }));
+const bullet = [1, 2, 3].map((level) => Decoration.replace({ widget: new BulletWidget(level) }));
+const bulletMark = cached((depth) => Decoration.mark({
+    class: `cm-formatting cm-formatting-list cm-formatting-list-ul cm-list-${depth}`,
+}));
+const orderedMark = cached((depth) => Decoration.mark({
+    class: `cm-formatting cm-formatting-list cm-formatting-list-ol cm-list-${depth}`,
+}));
+/** 목록 항목을 담을 수 있는 컨테이너 블록 (그 외 노드는 자식 순회 생략) */
+const CONTAINERS = new Set([
+    "Document",
+    "Blockquote",
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+]);
+// ---------------------------------------------------------------------------
+// 플러그인
+// ---------------------------------------------------------------------------
+export const listPlugin = createRevealPlugin({
+    // 한 줄에 항목이 여러 개("- - a")면 줄 데코레이션이 기호 뒤에 추가되므로 정렬합니다.
+    sort: true,
+    visit({ state, decorations, isRevealed }) {
+        const { doc } = state;
+        const skipTaskBullets = state.facet(taskMarkersHandled);
+        let depth = 0;
+        return {
+            enter(node) {
+                if (node.name === "ListItem") {
+                    depth++;
+                    return;
+                }
+                if (node.name === "ListMark") {
+                    const item = node.node.parent;
+                    const ordered = item?.parent?.name === "OrderedList";
+                    decorations.push(listLine(depth).range(doc.lineAt(node.from).from));
+                    if (!ordered && skipTaskBullets && item?.getChild("Task")) {
+                        // 불릿 작업 목록의 기호는 task()가 체크박스로 그립니다.
+                    }
+                    else if (ordered) {
+                        // 번호는 내용이므로 항상 보여주고 스타일만 적용합니다.
+                        decorations.push(orderedMark(depth).range(node.from, node.to));
+                    }
+                    else if (isRevealed(node.from, node.to)) {
+                        // 커서가 기호에 닿으면 원래 기호(-, *, +)를 보여줍니다.
+                        decorations.push(bulletMark(depth).range(node.from, node.to));
+                    }
+                    else {
+                        decorations.push(bullet[bulletLevel(depth) - 1].range(node.from, node.to));
+                    }
+                    return false;
+                }
+                if (!CONTAINERS.has(node.name))
+                    return false;
+            },
+            leave(node) {
+                if (node.name === "ListItem")
+                    depth--;
+            },
+        };
+    },
+});
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const listTheme = EditorView.baseTheme({
+    "&light .cm-list-bullet, &light .cm-formatting-list": {
+        color: "#6b7280",
+    },
+    "&dark .cm-list-bullet, &dark .cm-formatting-list": {
+        color: "#9ca3af",
+    },
+    // 기호(ListMark)에는 구문 강조(processingInstruction)가 안쪽 span에 색을 직접 지정하므로,
+    // 안쪽 span이 목록 기호 색을 상속하도록 합니다. (제목의 '#'과 같은 처리)
+    ".cm-line .cm-formatting-list *": {
+        color: "inherit",
+    },
+});
+/**
+ * 불릿/번호 목록을 하이브리드 방식으로 보여주는 확장입니다.
+ * - 불릿 기호(-, *, +)는 깊이별 불릿(•, ◦, ▪)으로 보여주고, 커서가 기호에 닿으면 원래 기호를 보여줍니다.
+ * - 번호 기호(1., 1))는 항상 보여주고 스타일만 적용합니다.
+ * - 줄과 기호에 깊이별 클래스(cm-list-line-N, cm-list-N)를 붙입니다. (깊이 제한 없음)
+ */
+export function list() {
+    return [listPlugin, listTheme];
+}

package/dist/listEnter.d.ts

@@ -0,0 +1,20 @@
+import type { StateCommand } from "@codemirror/state";
+/**
+ * 가장 바깥 목록의 마지막 빈 항목에서 Enter를 누르면, 목록을 끝내고 빈 줄을 넣은 뒤
+ * 새 문단에서 이어 쓰도록 합니다.
+ *
+ * ```
+ * - a          - a
+ * - |    →
+ *              |
+ * ```
+ *
+ * 빈 줄이 없으면 마크다운 규칙(lazy continuation)상 다음에 쓰는 줄이 바로 위 항목의
+ * 이어지는 줄이 되어, 그 줄에서 Enter를 누를 때 항목 들여쓰기가 들어가는 등 목록에 섞입니다.
+ *
+ * 다음 경우에는 false를 반환해 기본 Enter 동작(lang-markdown)에 맡깁니다.
+ * - 중첩된 목록의 빈 항목 (한 단계 내어쓰기)
+ * - 목록 중간의 빈 항목 (빈 줄을 넣으면 뒤 항목들이 새 문단의 이어지는 줄이 됨)
+ * - 바로 위 줄이 이미 빈 줄인 경우, 여러 커서, 선택 영역이 있는 경우
+ */
+export declare const endListWithBlankLine: StateCommand;

package/dist/listEnter.js

@@ -0,0 +1,72 @@
+import { syntaxTree } from "@codemirror/language";
+/** 목록 기호 뒤에 내용이 없는지 (공백, 작업 목록 표시 `[ ]`만 있는 경우 포함) */
+const EMPTY_ITEM_REST = /^\s*(?:\[[ xX]\]\s*)?$/;
+/**
+ * 가장 바깥 목록의 마지막 빈 항목에서 Enter를 누르면, 목록을 끝내고 빈 줄을 넣은 뒤
+ * 새 문단에서 이어 쓰도록 합니다.
+ *
+ * ```
+ * - a          - a
+ * - |    →
+ *              |
+ * ```
+ *
+ * 빈 줄이 없으면 마크다운 규칙(lazy continuation)상 다음에 쓰는 줄이 바로 위 항목의
+ * 이어지는 줄이 되어, 그 줄에서 Enter를 누를 때 항목 들여쓰기가 들어가는 등 목록에 섞입니다.
+ *
+ * 다음 경우에는 false를 반환해 기본 Enter 동작(lang-markdown)에 맡깁니다.
+ * - 중첩된 목록의 빈 항목 (한 단계 내어쓰기)
+ * - 목록 중간의 빈 항목 (빈 줄을 넣으면 뒤 항목들이 새 문단의 이어지는 줄이 됨)
+ * - 바로 위 줄이 이미 빈 줄인 경우, 여러 커서, 선택 영역이 있는 경우
+ */
+export const endListWithBlankLine = ({ state, dispatch }) => {
+    const { selection, doc } = state;
+    if (selection.ranges.length !== 1 || !selection.main.empty)
+        return false;
+    const head = selection.main.head;
+    const line = doc.lineAt(head);
+    if (line.text.slice(head - line.from).trim())
+        return false; // 커서 뒤에 내용이 있음
+    // 이 줄에 기호가 있는 가장 안쪽 목록 항목
+    let mark = null;
+    syntaxTree(state).iterate({
+        from: line.from,
+        to: line.to,
+        enter(node) {
+            if (node.name === "ListMark" && node.from >= line.from)
+                mark = node.node;
+        },
+    });
+    const listMark = mark;
+    const item = listMark?.parent;
+    const list = item?.parent;
+    if (!listMark || !item || item.name !== "ListItem" || !list)
+        return false;
+    // 빈 항목이어야 합니다.
+    if (head < listMark.to || !EMPTY_ITEM_REST.test(line.text.slice(listMark.to - line.from)))
+        return false;
+    // 가장 바깥 목록이어야 합니다. (중첩 목록은 기본 동작으로 한 단계 내어쓰기)
+    if (list.parent?.name === "ListItem")
+        return false;
+    // 마지막 항목이어야 합니다.
+    for (let next = item.nextSibling; next; next = next.nextSibling) {
+        if (next.name === "ListItem")
+            return false;
+    }
+    // 바로 위 줄이 이미 빈 줄(인용 기호만 있는 줄 포함)이면 빈 줄을 더 넣지 않습니다.
+    if (line.number > 1 && !/[^\s>]/.test(doc.line(line.number - 1).text))
+        return false;
+    // 인용 기호(>)는 유지하고, 목록 들여쓰기는 버립니다. ("> 2. " → 빈 줄 ">" + 새 줄 "> ")
+    const before = line.text.slice(0, listMark.from - line.from);
+    const lastQuote = before.lastIndexOf(">");
+    const prefix = lastQuote < 0 ? "" : `${before.slice(0, lastQuote + 1)} `;
+    const blank = prefix.trimEnd();
+    const insert = `${blank}${state.lineBreak}${prefix}`;
+    dispatch(state.update({
+        changes: { from: line.from, to: line.to, insert },
+        selection: { anchor: line.from + insert.length },
+        scrollIntoView: true,
+        userEvent: "input",
+    }));
+    return true;
+};

package/dist/listIndent.d.ts

@@ -0,0 +1,23 @@
+import { type Extension, type StateCommand } from "@codemirror/state";
+import { type KeyBinding } from "@codemirror/view";
+/**
+ * 선택한 목록 항목을 바로 앞 항목의 하위 항목으로 들여씁니다. (하위 항목도 함께 이동)
+ * - 들여쓰는 폭은 앞 항목의 내용 시작 열에 맞춥니다. (`- ` 2칸, `1. ` 3칸, `10. ` 4칸)
+ * - 앞 항목이 없는 첫 항목은 들여쓸 수 없으므로 아무것도 하지 않습니다.
+ * - 목록 항목이 아닌 줄이면 false를 반환해 다른 Tab 동작에 넘깁니다.
+ */
+export declare const indentListItem: StateCommand;
+/**
+ * 선택한 목록 항목을 한 단계 내어씁니다. (부모 항목과 같은 열로, 하위 항목도 함께 이동)
+ * - 뒤따르던 형제 항목들은 내어쓴 항목의 하위 항목이 됩니다.
+ * - 최상위 항목은 아무것도 하지 않습니다.
+ * - 목록 항목이 아닌 줄이면 false를 반환해 다른 Shift-Tab 동작에 넘깁니다.
+ */
+export declare const outdentListItem: StateCommand;
+/** Tab: 목록 항목 들여쓰기, Shift-Tab: 내어쓰기 */
+export declare const listKeymap: readonly KeyBinding[];
+/**
+ * 목록 항목에서 Tab/Shift-Tab으로 단계를 조절하는 확장입니다. (무한 깊이, 번호 자동 갱신)
+ * 목록이 아닌 줄에서는 다른 Tab 바인딩(예: indentWithTab)으로 넘어가도록 우선순위를 높여 둡니다.
+ */
+export declare function listIndent(): Extension;