mdsquare 0.0.0-stage → 0.1.0

package/dist/image.js

@@ -0,0 +1,344 @@
+import { syntaxTree } from "@codemirror/language";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { createRevealField, createRevealPlugin } from "./utils/reveal.js";
+const SIZE_RE = /^(?:(\d{1,4})(%)?)?(?:x(\d{1,4}))?$/i;
+const ALIGN_RE = /^(left|center|right)$/i;
+/**
+ * 옵션 구분자 위치들: [구분자 시작, 구분자 뒤]. 이스케이프되지 않은 "|".
+ * escapedPipes가 true면 `\|`도 구분자입니다. (표 칸 안에서는 "|"가 칸을 나누므로 `\|`로 써야 함. Obsidian과 같음)
+ */
+function pipePositions(raw, escapedPipes) {
+    const out = [];
+    for (let i = 0; i < raw.length; i++) {
+        if (raw[i] === "\\") {
+            if (escapedPipes && raw[i + 1] === "|")
+                out.push([i, i + 2]);
+            i++;
+        }
+        else if (raw[i] === "|")
+            out.push([i, i + 1]);
+    }
+    return out;
+}
+const unescape = (text) => text.replace(/\\([!-/:-@[-`{-~])/g, "$1");
+/**
+ * 이미지 대체 텍스트 `caption|size|align`을 해석합니다.
+ * - 뒤에서부터 크기(`300`, `300x200`, `x200`, `50%`)나 정렬(`left|center|right`) 형식인 조각만
+ *   옵션으로 인식하고, 나머지는 모두 캡션입니다. (캡션에 "|"가 있어도 깨지지 않음, `\|`로 이스케이프 가능)
+ * - inTable: 표 칸 안의 이미지. `\|`도 구분자로 봅니다. (`![아이콘\|16x16](url)`)
+ * - 크기와 정렬의 순서는 바뀌어도 되고 각각 생략할 수 있습니다.
+ */
+export function parseImageAlt(raw, inTable = false) {
+    const pipes = pipePositions(raw, inTable);
+    let width = null;
+    let height = null;
+    let align = null;
+    let end = raw.length;
+    for (let i = pipes.length - 1; i >= 0; i--) {
+        const part = raw.slice(pipes[i][1], end).trim();
+        const alignMatch = align === null ? ALIGN_RE.exec(part) : null;
+        const sizeMatch = width === null && height === null && part ? SIZE_RE.exec(part) : null;
+        if (alignMatch) {
+            align = alignMatch[1].toLowerCase();
+        }
+        else if (sizeMatch && (sizeMatch[1] || sizeMatch[3])) {
+            if (sizeMatch[1])
+                width = `${Number(sizeMatch[1])}${sizeMatch[2] ? "%" : "px"}`;
+            if (sizeMatch[3])
+                height = `${Number(sizeMatch[3])}px`;
+        }
+        else {
+            break;
+        }
+        end = pipes[i][0];
+    }
+    return { caption: unescape(raw.slice(0, end).trim()), width, height, align, captionLength: end };
+}
+function inTableCell(node) {
+    for (let parent = node.parent; parent; parent = parent.parent) {
+        if (parent.name === "TableCell")
+            return true;
+        if (parent.name === "Table" || parent.name === "Paragraph")
+            return false;
+    }
+    return false;
+}
+/** Image 노드에서 `![alt](url "title")` 정보를 읽습니다. 참조 이미지(`![a][ref]`)는 null */
+export function readImage(state, node) {
+    if (node.name !== "Image")
+        return null;
+    const marks = [];
+    let url = null;
+    let titleNode = null;
+    for (let child = node.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;
+    }
+    if (marks.length !== 4)
+        return null;
+    const [open, close, paren, end] = marks;
+    const { doc } = state;
+    if (doc.sliceString(open.from, open.to) !== "![" || doc.sliceString(paren.from, paren.to) !== "(") {
+        return null;
+    }
+    let src = url ? doc.sliceString(url.from, url.to) : "";
+    if (src.startsWith("<") && src.endsWith(">"))
+        src = src.slice(1, -1);
+    const rawTitle = titleNode ? doc.sliceString(titleNode.from, titleNode.to) : null;
+    // 최상위 문단의 직접 자식이고 줄에 이미지만 있으면(앞뒤 공백 제외) 블록 이미지
+    // (목록/인용 안이나 다른 서식 안의 이미지는 인라인 이미지)
+    const line = doc.lineAt(node.from);
+    const standalone = node.parent?.name === "Paragraph" &&
+        node.parent.parent?.name === "Document" &&
+        node.to <= line.to &&
+        !line.text.slice(0, node.from - line.from).trim() &&
+        !line.text.slice(node.to - line.from).trim();
+    return {
+        ...parseImageAlt(doc.sliceString(open.to, close.from), inTableCell(node)),
+        from: node.from,
+        to: node.to,
+        altFrom: open.to,
+        altTo: close.from,
+        src: unescape(src),
+        title: rawTitle === null ? null : unescape(rawTitle.slice(1, -1)),
+        line: standalone ? { from: line.from, to: line.to } : null,
+        parts: { open, close, paren, end, url, title: titleNode },
+    };
+}
+class ImageWidget extends WidgetType {
+    spec;
+    constructor(spec) {
+        super();
+        this.spec = spec;
+    }
+    eq(other) {
+        const a = this.spec;
+        const b = other.spec;
+        return (a.src === b.src &&
+            a.caption === b.caption &&
+            a.title === b.title &&
+            a.width === b.width &&
+            a.height === b.height &&
+            a.align === b.align &&
+            a.block === b.block);
+    }
+    toDOM(view) {
+        const { src, caption, title, width, height, align, block } = this.spec;
+        const img = document.createElement("img");
+        img.className = block ? "cm-image" : "cm-image cm-image-inline";
+        img.src = src;
+        img.alt = caption;
+        if (title)
+            img.title = title;
+        if (width)
+            img.style.width = width;
+        if (height)
+            img.style.height = height;
+        // 이미지가 로드되면 높이가 바뀌므로 에디터가 레이아웃(높이 맵)을 다시 측정하게 합니다.
+        img.addEventListener("load", () => view.requestMeasure());
+        img.addEventListener("error", () => {
+            img.classList.add("cm-image-error");
+            view.requestMeasure();
+        });
+        if (!block)
+            return img;
+        const figure = document.createElement("figure");
+        figure.className = `cm-image-block cm-image-align-${align ?? "left"}`;
+        figure.appendChild(img);
+        if (caption) {
+            const figcaption = figure.appendChild(document.createElement("figcaption"));
+            figcaption.textContent = caption;
+        }
+        return figure;
+    }
+    /** 높이를 알면 로드 전에도 레이아웃이 크게 흔들리지 않도록 알려 줍니다. */
+    get estimatedHeight() {
+        return this.spec.block && this.spec.height ? parseInt(this.spec.height) : -1;
+    }
+    // 클릭을 에디터가 처리해 커서가 이미지로 이동하고 원문이 펼쳐지도록 합니다.
+    ignoreEvent() {
+        return false;
+    }
+}
+// ---------------------------------------------------------------------------
+// 데코레이션
+// ---------------------------------------------------------------------------
+const imageMark = Decoration.mark({ class: "cm-formatting cm-formatting-image" });
+const captionDeco = Decoration.mark({ class: "cm-image-caption" });
+const optionDeco = Decoration.mark({ class: "cm-formatting cm-image-option" });
+const urlMark = Decoration.mark({ class: "cm-formatting cm-formatting-url cm-url" });
+const urlDeco = Decoration.mark({ class: "cm-url" });
+const titleDeco = Decoration.mark({ class: "cm-url cm-link-title" });
+function widgetFor(image, resolveUrl) {
+    const block = image.line !== null;
+    return new ImageWidget({
+        src: resolveUrl(image.src),
+        caption: image.caption,
+        title: image.title,
+        width: image.width,
+        height: image.height,
+        align: block ? image.align : null,
+        block,
+    });
+}
+/** 커서가 닿은 이미지의 원문을 부분별로 스타일링 (문서 순서대로 추가) */
+function pushSourceMarks(out, image) {
+    const { open, close, paren, end, url, title } = image.parts;
+    out.push(imageMark.range(open.from, open.to));
+    const optionsFrom = image.altFrom + image.captionLength;
+    if (image.altFrom < optionsFrom)
+        out.push(captionDeco.range(image.altFrom, optionsFrom));
+    if (optionsFrom < image.altTo)
+        out.push(optionDeco.range(optionsFrom, image.altTo));
+    out.push(imageMark.range(close.from, close.to));
+    out.push(urlMark.range(paren.from, paren.to));
+    if (url && url.from < url.to)
+        out.push(urlDeco.range(url.from, url.to));
+    if (title)
+        out.push(titleDeco.range(title.from, title.to));
+    out.push(urlMark.range(end.from, end.to));
+}
+// ---------------------------------------------------------------------------
+// 인라인 이미지 (글 사이, 목록/인용/제목 안): 보이는 범위만 처리하는 ViewPlugin
+// ---------------------------------------------------------------------------
+/** 이미지가 올 수 없으므로 자식 순회를 생략하는 노드 */
+const SKIP_CHILDREN = new Set([
+    "FencedCode",
+    "CodeBlock",
+    "HTMLBlock",
+    "CommentBlock",
+    "InlineCode",
+    "URL",
+    "Autolink",
+    "LinkLabel",
+    "LinkTitle",
+]);
+function inlineImagePlugin(resolveUrl) {
+    return createRevealPlugin({
+        // 이미지마다 문서 순서대로(대체 또는 기호 → 캡션 → 옵션 → URL) 추가되므로 정렬이 필요 없습니다.
+        visit({ state, decorations, isRevealed }) {
+            return {
+                enter(node) {
+                    if (node.name === "Image") {
+                        const image = readImage(state, node.node);
+                        // 블록 이미지는 blockImageField가 담당합니다.
+                        if (!image || image.line)
+                            return false;
+                        if (isRevealed(image.from, image.to)) {
+                            pushSourceMarks(decorations, image);
+                        }
+                        else {
+                            decorations.push(Decoration.replace({ widget: widgetFor(image, resolveUrl) }).range(image.from, image.to));
+                        }
+                        return false;
+                    }
+                    if (SKIP_CHILDREN.has(node.name))
+                        return false;
+                },
+            };
+        },
+    });
+}
+// ---------------------------------------------------------------------------
+// 블록 이미지 (최상위 문단에서 이미지만 있는 줄): StateField
+// 블록 위젯은 ViewPlugin으로 제공할 수 없으므로 StateField에서 문서 전체를 다룹니다.
+// ---------------------------------------------------------------------------
+/**
+ * 블록 이미지 후보만 찾습니다. 문서 전체 트리를 훑지 않고,
+ * 최상위 블록 중 문단의 직접 자식만 확인합니다. (블록 이미지는 그 위치에만 올 수 있음)
+ */
+function scanBlockImages(state) {
+    const images = [];
+    const cursor = syntaxTree(state).cursor();
+    if (!cursor.firstChild())
+        return images; // Document의 자식(최상위 블록)
+    do {
+        if (!cursor.type.is("Paragraph") || !cursor.firstChild())
+            continue;
+        do {
+            if (cursor.type.is("Image")) {
+                const image = readImage(state, cursor.node);
+                if (image?.line)
+                    images.push(image);
+            }
+        } while (cursor.nextSibling());
+        cursor.parent();
+    } while (cursor.nextSibling());
+    return images;
+}
+function buildBlockDecorations(images, revealed, resolveUrl) {
+    const out = [];
+    images.forEach((image, i) => {
+        const widget = widgetFor(image, resolveUrl);
+        const line = image.line;
+        if (revealed[i]) {
+            // 원문을 보여주고, 원문 아래에 미리보기를 유지합니다. (줄 끝의 블록 위젯)
+            pushSourceMarks(out, image);
+            out.push(Decoration.widget({ widget, block: true, side: 1 }).range(line.to));
+        }
+        else {
+            // 줄 전체를 블록 이미지로 대체 (줄 중간의 블록 위젯은 줄을 둘로 쪼개므로 줄 단위로만 사용)
+            out.push(Decoration.replace({ widget, block: true }).range(line.from, line.to));
+        }
+    });
+    // 이미지가 문서 순서이고, 이미지마다 기호 → 줄 끝 위젯 순서로 추가되므로 정렬이 필요 없습니다.
+    return Decoration.set(out);
+}
+function blockImageField(resolveUrl) {
+    return createRevealField({
+        scan: scanBlockImages,
+        build: (images, revealed) => buildBlockDecorations(images, revealed, resolveUrl),
+        block: () => true,
+    });
+}
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const imageTheme = EditorView.baseTheme({
+    ".cm-image": {
+        maxWidth: "100%",
+    },
+    ".cm-image-inline": {
+        verticalAlign: "text-bottom",
+    },
+    // 블록 위젯에는 세로 margin을 쓰면 높이 계산이 어긋나므로 padding을 씁니다.
+    ".cm-image-block": {
+        display: "block",
+        margin: "0",
+        padding: "4px 0",
+    },
+    ".cm-image-block img": {
+        display: "block",
+    },
+    ".cm-image-align-center img": { marginLeft: "auto", marginRight: "auto" },
+    ".cm-image-align-right img": { marginLeft: "auto" },
+    ".cm-image-block figcaption": {
+        fontSize: "0.85em",
+        color: "#6b7280",
+        paddingTop: "2px",
+    },
+    ".cm-image-align-center figcaption": { textAlign: "center" },
+    ".cm-image-align-right figcaption": { textAlign: "right" },
+    ".cm-image-error": {
+        minWidth: "1em",
+        minHeight: "1em",
+        outline: "1px dashed #d1d5db",
+    },
+    ".cm-image-option": {
+        opacity: "0.6",
+    },
+});
+/**
+ * 이미지 `![caption|size|align](url "title")`를 하이브리드 방식으로 보여주는 확장입니다.
+ * - 이미지만 있는 줄은 블록 이미지(캡션/정렬 포함)로, 글 사이의 이미지는 인라인 이미지로 보여줍니다.
+ * - 커서가 이미지에 닿으면 원문을 보여주고, 이미지만 있는 줄은 원문 아래에 미리보기를 유지합니다.
+ * - 대체 텍스트의 `|size|align` 옵션: 크기 `300`, `300x200`, `x200`, `50%` / 정렬 `left|center|right`
+ */
+export function image(options = {}) {
+    const resolveUrl = options.resolveUrl ?? ((src) => src);
+    return [blockImageField(resolveUrl), inlineImagePlugin(resolveUrl), imageTheme];
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * mdsquare: 하이브리드 마크다운 에디터 (CodeMirror 6 기반)
+ *
+ * ```ts
+ * import MDSquareEditor from "mdsquare";
+ * import "mdsquare/style.css";
+ *
+ * const editor = new MDSquareEditor({ parent: document.getElementById("editor")!, value: "# 안녕하세요" });
+ * ```
+ *
+ * CodeMirror를 직접 구성하려면 확장들을 쓰세요: `import { table, math } from "mdsquare/extensions"` (이 진입점에서도 가져올 수 있음)
+ */
+import { MDSquareEditor } from "./editor.js";
+export default MDSquareEditor;
+export { MDSquareEditor, markdownExtensions, type MDSquareEditorOptions, type MDSquareFeatures, type MDSquareTheme, } from "./editor.js";
+export * from "./extensions.js";

package/dist/index.js

@@ -0,0 +1,16 @@
+/**
+ * mdsquare: 하이브리드 마크다운 에디터 (CodeMirror 6 기반)
+ *
+ * ```ts
+ * import MDSquareEditor from "mdsquare";
+ * import "mdsquare/style.css";
+ *
+ * const editor = new MDSquareEditor({ parent: document.getElementById("editor")!, value: "# 안녕하세요" });
+ * ```
+ *
+ * CodeMirror를 직접 구성하려면 확장들을 쓰세요: `import { table, math } from "mdsquare/extensions"` (이 진입점에서도 가져올 수 있음)
+ */
+import { MDSquareEditor } from "./editor.js";
+export default MDSquareEditor;
+export { MDSquareEditor, markdownExtensions, } from "./editor.js";
+export * from "./extensions.js";

package/dist/inlineCode.d.ts

@@ -0,0 +1,4 @@
+import type { Extension } from "@codemirror/state";
+export declare const inlineCodePlugin: import("@codemirror/view").ViewPlugin<import("./extensions.js").RevealPluginValue, undefined>;
+/** 인라인 코드(`` `code` ``)의 백틱을 커서가 닿아 있을 때만 보여주는 확장입니다. */
+export declare function inlineCode(): Extension;

package/dist/inlineCode.js

@@ -0,0 +1,68 @@
+import { Decoration, EditorView } from "@codemirror/view";
+import { createRevealPlugin } from "./utils/reveal.js";
+// 데코레이션 객체는 모듈 로드 시 한 번만 만들고 재사용합니다.
+const content = Decoration.mark({ class: "cm-inline-code" });
+const revealedMark = Decoration.mark({
+    class: "cm-formatting cm-formatting-inline-code cm-inline-code",
+});
+const hiddenMark = Decoration.replace({});
+/** 인라인 코드가 올 수 없으므로 자식 순회를 생략하는 노드 */
+const SKIP_CHILDREN = new Set([
+    "FencedCode",
+    "CodeBlock",
+    "HTMLBlock",
+    "CommentBlock",
+    "URL",
+    "Autolink",
+]);
+export const inlineCodePlugin = createRevealPlugin({
+    // 여는 기호 → 내용 → 닫는 기호 순서로 추가되므로 정렬이 필요 없습니다.
+    visit({ decorations, isRevealed }) {
+        return {
+            enter(node) {
+                if (node.name === "InlineCode") {
+                    // 백틱은 여러 개(``a`b``)일 수 있으므로 트리의 CodeMark 위치를 그대로 사용합니다.
+                    const open = node.node.firstChild;
+                    const close = node.node.lastChild;
+                    if (!open || !close || open.name !== "CodeMark" || close.name !== "CodeMark") {
+                        return false;
+                    }
+                    const mark = isRevealed(node.from, node.to) ? revealedMark : hiddenMark;
+                    decorations.push(mark.range(open.from, open.to));
+                    if (open.to < close.from)
+                        decorations.push(content.range(open.to, close.from));
+                    decorations.push(mark.range(close.from, close.to));
+                    return false;
+                }
+                if (SKIP_CHILDREN.has(node.name))
+                    return false;
+            },
+        };
+    },
+});
+const inlineCodeTheme = EditorView.baseTheme({
+    ".cm-inline-code": {
+        backgroundColor: "rgba(135, 131, 120, 0.15)",
+    },
+    ".cm-inline-code:has(+ .cm-formatting-inline-code)": {
+        padding: "1px 0",
+    },
+    ".cm-inline-code:not(.cm-formatting-inline-code):not(:has(+ .cm-formatting-inline-code))": {
+        borderRadius: "2px",
+        padding: "1px 4px",
+    },
+    ".cm-formatting-inline-code:has(+ .cm-inline-code)": {
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        padding: "1px 0 1px 4px",
+    },
+    ".cm-inline-code + .cm-formatting-inline-code": {
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        padding: "1px 4px 1px 0",
+    },
+});
+/** 인라인 코드(`` `code` ``)의 백틱을 커서가 닿아 있을 때만 보여주는 확장입니다. */
+export function inlineCode() {
+    return [inlineCodePlugin, inlineCodeTheme];
+}

package/dist/link.d.ts

@@ -0,0 +1,47 @@
+import { type EditorState, type Extension } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+export interface InlineLink {
+    /** 링크 전체 범위 */
+    readonly from: number;
+    readonly to: number;
+    /** 라벨 범위 ([ 와 ] 사이) */
+    readonly labelFrom: number;
+    readonly labelTo: number;
+    /** URL 노드 범위 (없으면 null: `[a]()`) */
+    readonly urlFrom: number | null;
+    readonly urlTo: number | null;
+    /** LinkTitle 노드 범위 (없으면 null) */
+    readonly titleFrom: number | null;
+    readonly titleTo: number | null;
+    /** 실제 주소 (꺾쇠 제거, 백슬래시 이스케이프 해제) */
+    readonly href: string;
+    /** 링크 제목 (따옴표/괄호 제거). 없으면 null */
+    readonly title: string | null;
+    /** 기호 노드들: [ ] ( ) */
+    readonly marks: readonly SyntaxNode[];
+}
+/**
+ * Link 노드에서 인라인 링크 `[label](url "title")` 정보를 읽습니다.
+ * 참조 링크(`[a][ref]`, `[a]`)처럼 인라인 링크가 아니면 null을 반환합니다.
+ */
+export declare function readInlineLink(state: EditorState, link: SyntaxNode): InlineLink | null;
+export declare const linkPlugin: import("@codemirror/view").ViewPlugin<import("./extensions.js").RevealPluginValue, undefined>;
+/** 기본으로 열어도 안전한 주소인지 (http(s), mailto, tel, ftp) */
+export declare function isSafeUrl(href: string): boolean;
+/** 기본 열기 동작: 안전한 절대 주소만 새 탭으로 엽니다. */
+export declare function openLinkSafely(href: string): void;
+export interface LinkOptions {
+    /**
+     * 렌더링된 링크를 클릭했을 때 호출됩니다. 기본값: openLinkSafely
+     * 상대 경로(`./doc.md`)나 앱 내부 이동을 처리하려면 직접 지정하세요.
+     */
+    openLink?: (href: string, event: MouseEvent) => void;
+}
+/**
+ * 인라인 링크 `[label](url "title")`를 하이브리드 방식으로 보여주는 확장입니다.
+ * - 커서가 링크에 닿지 않으면 기호와 URL을 숨기고 라벨만 링크 스타일로 보여줍니다.
+ *   (라벨 안의 굵게/코드 등 인라인 문법은 그대로 유지)
+ * - 렌더링된 라벨을 클릭하면 링크를 엽니다. (기본: http(s)/mailto/tel/ftp만 새 탭으로)
+ * - 참조 링크(`[a][ref]`, `[a]`), 자동 링크, 이미지는 다루지 않습니다.
+ */
+export declare function link(options?: LinkOptions): Extension;