mdsquare 0.0.0-stage → 0.2.0

package/dist/codeTheme.d.ts

@@ -0,0 +1,47 @@
+import type { Extension } from "@codemirror/state";
+import { type Highlighter, type Tag } from "@lezer/highlight";
+import { type TokenColorRule } from "./textMate.js";
+/**
+ * 코드 블록 토큰 색 테마.
+ * - `highlighter(lang)`: 정보 문자열의 언어(소문자)별 Lezer 하이라이터. 토큰에 붙일 클래스를 정합니다.
+ * - `extension`: 그 클래스들의 CSS, 코드 블록 배경 등
+ */
+export interface CodeTheme {
+    /** 토큰 캐시를 나누는 고유 이름 */
+    readonly id: string;
+    highlighter(lang: string): Highlighter;
+    /**
+     * 문자열 따옴표에 따로 붙일 클래스 (VS Code처럼 따옴표와 내용을 다른 색으로 칠할 때).
+     * 없으면 따옴표도 문자열과 같은 클래스를 씁니다.
+     */
+    quoteClass?(lang: string): string | null;
+    readonly extension: Extension;
+}
+/** 기본 토큰 색 (GitHub 계열) */
+export declare const defaultCodeTheme: CodeTheme;
+/** 언어의 TextMate 접미사와 최상위 스코프 */
+export declare function textMateLanguage(lang: string): {
+    suffix: string;
+    root: string;
+};
+/** 태그의 스코프 경로 (가장 구체적인 태그부터 찾음). 없으면 null */
+export declare function scopesForTag(tag: Tag, lang: string): readonly string[] | null;
+/** VS Code 색 테마 JSON */
+export interface VSCodeThemeJson {
+    readonly name?: string;
+    readonly type?: string;
+    readonly colors?: Readonly<Record<string, string>>;
+    readonly tokenColors?: readonly TokenColorRule[] | string;
+    /** 예전 .tmTheme 형식 */
+    readonly settings?: readonly TokenColorRule[];
+}
+export interface VSCodeThemeOptions {
+    /** 테마의 배경색(editor.background)을 코드 블록에 칠할지 (기본 true) */
+    background?: boolean;
+}
+/**
+ * VS Code 색 테마(JSON/JSONC 문자열 또는 객체)를 코드 블록 테마로 바꿉니다.
+ * 토큰 색은 VS Code와 같은 방식(TextMate 스코프 매칭)으로 정합니다. 다만 Lezer 문법이 구분하지 않는
+ * 차이(예: 매개변수와 지역 변수)는 재현되지 않습니다.
+ */
+export declare function vscodeTheme(source: string | VSCodeThemeJson, options?: VSCodeThemeOptions): CodeTheme;

package/dist/codeTheme.js

@@ -0,0 +1,394 @@
+import { EditorView } from "@codemirror/view";
+import { tags as t, tagHighlighter } from "@lezer/highlight";
+import { FontStyle, parseJsonc, textMateTheme } from "./textMate.js";
+// ---------------------------------------------------------------------------
+// 기본 테마 (GitHub 계열, 밝은/어두운 에디터 모두)
+// ---------------------------------------------------------------------------
+const defaultHighlighter = tagHighlighter([
+    { tag: [t.comment, t.meta], class: "cm-code-comment" },
+    { tag: [t.keyword, t.operator, t.processingInstruction], class: "cm-code-keyword" },
+    {
+        tag: [t.string, t.special(t.string), t.regexp, t.character, t.attributeValue, t.url, t.escape],
+        class: "cm-code-string",
+    },
+    {
+        tag: [t.number, t.bool, t.null, t.atom, t.self, t.unit, t.color, t.constant(t.variableName), t.propertyName],
+        class: "cm-code-constant",
+    },
+    {
+        tag: [
+            t.function(t.variableName),
+            t.function(t.propertyName),
+            t.function(t.definition(t.variableName)),
+            t.className,
+            t.definition(t.className),
+            t.typeName,
+            t.attributeName,
+        ],
+        class: "cm-code-function",
+    },
+    { tag: [t.tagName, t.inserted], class: "cm-code-tag" },
+    { tag: [t.standard(t.variableName), t.standard(t.typeName), t.namespace, t.labelName], class: "cm-code-builtin" },
+    { tag: [t.deleted, t.invalid], class: "cm-code-deleted" },
+    { tag: t.punctuation, class: "cm-code-punctuation" },
+    { tag: t.heading, class: "cm-code-bold cm-code-keyword" },
+    { tag: t.strong, class: "cm-code-bold" },
+    { tag: t.emphasis, class: "cm-code-italic" },
+]);
+/** 기본 토큰 색 (GitHub 계열) */
+export const defaultCodeTheme = {
+    id: "default",
+    highlighter: () => defaultHighlighter,
+    extension: EditorView.baseTheme({
+        // 코드 블록 상자 색 (상자는 codeBlock이 그립니다)
+        "&light .cm-codeblock-line": { "--cm-codeblock-bg": "rgba(135, 131, 120, 0.1)" },
+        "&dark .cm-codeblock-line": { "--cm-codeblock-bg": "rgba(255, 255, 255, 0.06)" },
+        ".cm-code-comment": { fontStyle: "italic" },
+        ".cm-code-bold": { fontWeight: "bold" },
+        ".cm-code-italic": { fontStyle: "italic" },
+        "&light .cm-code-comment": { color: "#6a737d" },
+        "&light .cm-code-keyword": { color: "#d73a49" },
+        "&light .cm-code-string": { color: "#032f62" },
+        "&light .cm-code-constant": { color: "#005cc5" },
+        "&light .cm-code-function": { color: "#6f42c1" },
+        "&light .cm-code-tag": { color: "#22863a" },
+        "&light .cm-code-builtin": { color: "#e36209" },
+        "&light .cm-code-deleted": { color: "#b31d28" },
+        "&light .cm-code-punctuation": { color: "#24292e" },
+        "&dark .cm-code-comment": { color: "#8b949e" },
+        "&dark .cm-code-keyword": { color: "#ff7b72" },
+        "&dark .cm-code-string": { color: "#a5d6ff" },
+        "&dark .cm-code-constant": { color: "#79c0ff" },
+        "&dark .cm-code-function": { color: "#d2a8ff" },
+        "&dark .cm-code-tag": { color: "#7ee787" },
+        "&dark .cm-code-builtin": { color: "#ffa657" },
+        "&dark .cm-code-deleted": { color: "#ffa198" },
+        "&dark .cm-code-punctuation": { color: "#c9d1d9" },
+    }),
+};
+const scopeTable = (entries) => {
+    const map = new Map();
+    for (const [tags, scopes] of entries)
+        for (const tag of Array.isArray(tags) ? tags : [tags])
+            map.set(tag, scopes);
+    return map;
+};
+const GENERIC_SCOPES = scopeTable([
+    // 주석
+    [t.comment, ["comment.line"]],
+    [t.lineComment, ["comment.line.double-slash"]],
+    [t.blockComment, ["comment.block"]],
+    [t.docComment, ["comment.block.documentation"]],
+    // 문자열/리터럴
+    [t.string, ["string.quoted.double"]],
+    [t.docString, ["string.quoted.docstring"]],
+    [t.character, ["string.quoted.single"]],
+    [t.special(t.string), ["string.template"]],
+    [t.regexp, ["string.regexp"]],
+    [t.escape, ["constant.character.escape"]],
+    [t.attributeValue, ["string.quoted.double"]],
+    [t.url, ["markup.underline.link"]],
+    [[t.number, t.integer, t.float], ["constant.numeric"]],
+    [t.bool, ["constant.language.boolean"]],
+    [t.null, ["constant.language.null"]],
+    [t.atom, ["constant.language"]],
+    [t.unit, ["keyword.other.unit"]],
+    [t.color, ["constant.other.color"]],
+    // 키워드
+    [t.keyword, ["keyword"]],
+    [t.controlKeyword, ["keyword.control"]],
+    [t.moduleKeyword, ["keyword.control.import"]],
+    [t.operatorKeyword, ["keyword.operator.expression"]],
+    [t.definitionKeyword, ["storage.type"]],
+    [t.modifier, ["storage.modifier"]],
+    [t.self, ["variable.language.this"]],
+    // 연산자/구두점
+    [t.operator, ["keyword.operator"]],
+    [t.arithmeticOperator, ["keyword.operator.arithmetic"]],
+    [t.logicOperator, ["keyword.operator.logical"]],
+    [t.bitwiseOperator, ["keyword.operator.bitwise"]],
+    [t.compareOperator, ["keyword.operator.comparison"]],
+    [[t.updateOperator, t.definitionOperator], ["keyword.operator.assignment"]],
+    [t.typeOperator, ["keyword.operator.type"]],
+    [t.controlOperator, ["keyword.operator.logical"]],
+    [t.derefOperator, ["punctuation.accessor"]],
+    [t.punctuation, ["punctuation"]],
+    [t.separator, ["punctuation.separator"]],
+    [t.bracket, ["punctuation.bracket"]],
+    [t.paren, ["punctuation.parenthesis"]],
+    [t.squareBracket, ["punctuation.section.brackets"]],
+    [t.function(t.punctuation), ["storage.type.function.arrow"]],
+    [t.brace, ["punctuation.definition.block"]],
+    [t.angleBracket, ["punctuation.definition.typeparameters"]],
+    // 이름
+    [t.name, ["variable"]],
+    [t.variableName, ["variable.other.readwrite"]],
+    [t.definition(t.variableName), ["meta.definition.variable", "variable.other.readwrite"]],
+    [t.local(t.variableName), ["variable.other.readwrite"]],
+    [t.constant(t.variableName), ["variable.other.constant"]],
+    [t.special(t.variableName), ["variable.language"]],
+    [t.standard(t.variableName), ["support.variable"]],
+    [t.function(t.variableName), ["meta.function-call", "entity.name.function"]],
+    [t.function(t.definition(t.variableName)), ["meta.definition.function", "entity.name.function"]],
+    [t.function(t.standard(t.variableName)), ["meta.function-call", "support.function"]],
+    [t.propertyName, ["variable.other.property"]],
+    [t.definition(t.propertyName), ["meta.definition.property", "variable.object.property"]],
+    [t.function(t.propertyName), ["meta.function-call", "entity.name.function"]],
+    [t.function(t.definition(t.propertyName)), ["meta.definition.method", "entity.name.function"]],
+    [t.special(t.propertyName), ["variable.other.property"]],
+    [[t.className, t.definition(t.className)], ["meta.class", "entity.name.type.class"]],
+    [[t.typeName, t.definition(t.typeName)], ["entity.name.type"]],
+    [t.standard(t.typeName), ["support.type.primitive"]],
+    [t.namespace, ["entity.name.type.module"]],
+    [t.labelName, ["entity.name.label"]],
+    [t.macroName, ["entity.name.function.preprocessor"]],
+    [t.tagName, ["meta.tag", "entity.name.tag"]],
+    [t.attributeName, ["meta.tag", "entity.other.attribute-name"]],
+    // 메타
+    [t.meta, ["meta"]],
+    [t.annotation, ["meta.decorator"]],
+    [t.processingInstruction, ["meta.preprocessor"]],
+    [t.documentMeta, ["comment.block.documentation"]],
+    [t.invalid, ["invalid.illegal"]],
+    // 문서 (마크다운 등)
+    [t.heading, ["markup.heading"]],
+    [t.emphasis, ["markup.italic"]],
+    [t.strong, ["markup.bold"]],
+    [t.strikethrough, ["markup.strikethrough"]],
+    [t.link, ["markup.underline.link"]],
+    [t.quote, ["markup.quote"]],
+    [t.list, ["punctuation.definition.list"]],
+    [t.monospace, ["markup.inline.raw"]],
+    [t.inserted, ["markup.inserted"]],
+    [t.deleted, ["markup.deleted"]],
+    [t.changed, ["markup.changed"]],
+    [t.contentSeparator, ["meta.separator"]],
+]);
+/** 언어별로 스코프가 다른 태그 */
+const LANGUAGE_SCOPES = {
+    ts: scopeTable([
+        // TypeScript/JavaScript 문법은 식의 괄호를 punctuation이 아닌 meta.brace로 둡니다.
+        [t.paren, ["meta.brace.round"]],
+        [t.squareBracket, ["meta.brace.square"]],
+    ]),
+    css: scopeTable([
+        [t.constant(t.className), ["meta.selector", "entity.other.attribute-name.pseudo-class"]],
+        [t.modifier, ["keyword.other.important"]],
+        [t.definitionKeyword, ["keyword.control.at-rule"]],
+        [[t.propertyName, t.definition(t.propertyName)], ["meta.property-name", "support.type.property-name"]],
+        [t.tagName, ["meta.selector", "entity.name.tag"]],
+        [t.className, ["meta.selector", "entity.other.attribute-name.class"]],
+        [t.labelName, ["meta.selector", "entity.other.attribute-name.id"]],
+        [t.keyword, ["keyword.control.at-rule"]],
+        [t.atom, ["meta.property-value", "support.constant.property-value"]],
+        [t.variableName, ["variable.argument"]],
+        [t.function(t.variableName), ["meta.function", "support.function"]],
+    ]),
+    json: scopeTable([
+        [[t.propertyName, t.definition(t.propertyName)], ["meta.structure.dictionary", "support.type.property-name"]],
+        [t.string, ["meta.structure.dictionary.value", "string.quoted.double"]],
+        [[t.bool, t.null], ["constant.language"]],
+    ]),
+    yaml: scopeTable([
+        [[t.propertyName, t.definition(t.propertyName)], ["entity.name.tag"]],
+        [t.content, ["string.unquoted.plain.out"]],
+    ]),
+    html: scopeTable([[t.angleBracket, ["meta.tag", "punctuation.definition.tag"]]]),
+    python: scopeTable([
+        [t.bool, ["constant.language"]],
+        [t.self, ["variable.parameter.function.language.special.self"]],
+        [t.function(t.propertyName), ["meta.function-call", "meta.member.access", "entity.name.function"]],
+        [t.propertyName, ["meta.member.access"]],
+    ]),
+};
+LANGUAGE_SCOPES["xml"] = LANGUAGE_SCOPES["html"];
+for (const key of ["js", "js.jsx", "tsx"])
+    LANGUAGE_SCOPES[key] = LANGUAGE_SCOPES["ts"];
+LANGUAGE_SCOPES["css.scss"] = LANGUAGE_SCOPES["css"];
+LANGUAGE_SCOPES["css.less"] = LANGUAGE_SCOPES["css"];
+/** 정보 문자열 언어 → TextMate 접미사 */
+const TEXTMATE_SUFFIX = {
+    js: "js",
+    javascript: "js",
+    mjs: "js",
+    cjs: "js",
+    jsx: "js.jsx",
+    ts: "ts",
+    typescript: "ts",
+    mts: "ts",
+    tsx: "tsx",
+    py: "python",
+    python: "python",
+    css: "css",
+    scss: "css.scss",
+    less: "css.less",
+    json: "json",
+    jsonc: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    html: "html",
+    htm: "html",
+    xml: "xml",
+    svg: "xml",
+    md: "markdown",
+    markdown: "markdown",
+    rs: "rust",
+    rust: "rust",
+    go: "go",
+    java: "java",
+    c: "c",
+    h: "c",
+    cpp: "cpp",
+    "c++": "cpp",
+    cc: "cpp",
+    cs: "cs",
+    csharp: "cs",
+    php: "php",
+    sql: "sql",
+    sh: "shell",
+    bash: "shell",
+    zsh: "shell",
+    shell: "shell",
+    rb: "ruby",
+    ruby: "ruby",
+    kt: "kotlin",
+    kotlin: "kotlin",
+    swift: "swift",
+    ini: "ini",
+    toml: "toml",
+};
+const ROOT_SCOPE = {
+    html: "text.html.basic",
+    xml: "text.xml",
+    markdown: "text.html.markdown",
+};
+/** 언어의 TextMate 접미사와 최상위 스코프 */
+export function textMateLanguage(lang) {
+    const suffix = TEXTMATE_SUFFIX[lang] ?? (/^[a-z][a-z0-9+#-]*$/.test(lang) ? lang : "");
+    return { suffix, root: ROOT_SCOPE[suffix] ?? (suffix ? `source.${suffix}` : "source") };
+}
+/** 태그의 스코프 경로 (가장 구체적인 태그부터 찾음). 없으면 null */
+export function scopesForTag(tag, lang) {
+    const { suffix, root } = textMateLanguage(lang);
+    const own = LANGUAGE_SCOPES[suffix];
+    for (const candidate of tag.set) {
+        const scopes = own?.get(candidate) ?? GENERIC_SCOPES.get(candidate);
+        if (scopes)
+            return [root, ...scopes.map((s) => (suffix ? `${s}.${suffix}` : s))];
+    }
+    return null;
+}
+let themeCount = 0;
+/**
+ * VS Code 색 테마(JSON/JSONC 문자열 또는 객체)를 코드 블록 테마로 바꿉니다.
+ * 토큰 색은 VS Code와 같은 방식(TextMate 스코프 매칭)으로 정합니다. 다만 Lezer 문법이 구분하지 않는
+ * 차이(예: 매개변수와 지역 변수)는 재현되지 않습니다.
+ */
+export function vscodeTheme(source, options = {}) {
+    const json = (typeof source === "string" ? parseJsonc(source) : source);
+    if (!json || typeof json !== "object")
+        throw new TypeError("vscodeTheme: 테마 JSON 객체가 아닙니다.");
+    const colors = json.colors ?? {};
+    const rules = Array.isArray(json.tokenColors) ? json.tokenColors : Array.isArray(json.settings) ? json.settings : [];
+    const tm = textMateTheme(rules, colors["editor.foreground"]);
+    const id = `vsc${++themeCount}`;
+    // 글자 색과 글꼴 모양은 따로 클래스를 만들어 조합합니다. (규칙에 쓰인 색 × 모양 조합을 미리 만들 필요가 없음)
+    const colorClass = new Map(tm.colors.map((color, i) => [color, `cm-${id}-c${i}`]));
+    const classFor = (style) => {
+        const cls = [];
+        if (style.foreground && style.foreground !== tm.foreground)
+            cls.push(colorClass.get(style.foreground));
+        if (style.fontStyle > 0)
+            cls.push(`cm-${id}-f${style.fontStyle}`);
+        return cls.length ? cls.join(" ") : null;
+    };
+    const highlighters = new Map();
+    const highlighter = (lang) => {
+        const key = textMateLanguage(lang).suffix;
+        let hl = highlighters.get(key);
+        if (!hl) {
+            const memo = new Map();
+            hl = {
+                style(tags) {
+                    let cls = memo.get(tags);
+                    if (cls === undefined) {
+                        const parts = [];
+                        for (const tag of tags) {
+                            const scopes = scopesForTag(tag, lang);
+                            const c = scopes && classFor(tm.resolve(scopes));
+                            if (c)
+                                parts.push(c);
+                        }
+                        cls = parts.length ? parts.join(" ") : null;
+                        memo.set(tags, cls);
+                    }
+                    return cls;
+                },
+            };
+            highlighters.set(key, hl);
+        }
+        return hl;
+    };
+    // 따옴표: VS Code 문법은 따옴표를 punctuation.definition.string으로 따로 둡니다.
+    const quoteClasses = new Map();
+    const quoteClass = (lang) => {
+        const { suffix, root } = textMateLanguage(lang);
+        let cls = quoteClasses.get(suffix);
+        if (cls === undefined) {
+            const sfx = suffix ? `.${suffix}` : "";
+            const quote = classFor(tm.resolve([root, `string.quoted.double${sfx}`, `punctuation.definition.string.begin${sfx}`]));
+            const body = classFor(tm.resolve([root, `string.quoted.double${sfx}`]));
+            // 내용과 색이 같으면 나눌 필요가 없습니다.
+            cls = quote !== body ? (quote ?? `cm-${id}-plain`) : null;
+            quoteClasses.set(suffix, cls);
+        }
+        return cls;
+    };
+    const spec = {};
+    for (const [color, cls] of colorClass)
+        spec[`.${cls}`] = { color };
+    for (let f = 1; f < 16; f++) {
+        spec[`.cm-${id}-f${f}`] = {
+            fontStyle: f & FontStyle.Italic ? "italic" : "normal",
+            fontWeight: f & FontStyle.Bold ? "bold" : "normal",
+            textDecoration: [f & FontStyle.Underline ? "underline" : "", f & FontStyle.Strikethrough ? "line-through" : ""]
+                .filter(Boolean)
+                .join(" ") || "none",
+        };
+    }
+    // 코드 블록 바탕. 기본 테마(baseTheme의 &light/&dark 규칙)보다 구체적인 선택자를 씁니다.
+    const block = "&.cm-editor .cm-content .cm-codeblock-line";
+    const background = options.background !== false ? colors["editor.background"] : undefined;
+    const lineStyle = {};
+    if (tm.foreground)
+        lineStyle["color"] = tm.foreground;
+    if (background)
+        lineStyle["--cm-codeblock-bg"] = background;
+    if (colors["editorCursor.foreground"])
+        lineStyle["caretColor"] = colors["editorCursor.foreground"];
+    spec[block] = lineStyle;
+    const selection = colors["editor.selectionBackground"];
+    if (selection)
+        spec[`${block} .cm-codeblock-selected`] = { backgroundColor: selection };
+    if (colors["editorCursor.foreground"]) {
+        spec["&.cm-codeblock-cursor .cm-cursor"] = { borderLeftColor: colors["editorCursor.foreground"] };
+    }
+    // 도구 모음도 테마 색으로
+    const widgetBg = colors["editorHoverWidget.background"] ?? colors["editorWidget.background"] ?? background;
+    if (widgetBg) {
+        spec[`${block} .cm-codeblock-toolbar`] = {
+            backgroundColor: widgetBg,
+            borderColor: colors["editorHoverWidget.border"] ?? colors["editorWidget.border"] ?? "transparent",
+            color: colors["descriptionForeground"] ?? colors["editorLineNumber.activeForeground"] ?? tm.foreground ?? "inherit",
+        };
+        if (tm.foreground)
+            spec[`${block} .cm-codeblock-copy:hover`] = { color: tm.foreground };
+    }
+    return {
+        id,
+        highlighter,
+        quoteClass,
+        // dark 옵션은 주지 않습니다: 에디터 전체가 아니라 코드 블록에만 적용되는 테마입니다.
+        extension: EditorView.theme(spec),
+    };
+}

package/dist/delimiter.d.ts

@@ -0,0 +1,20 @@
+import type { MarkdownConfig } from "@lezer/markdown";
+import { type Tag } from "@lezer/highlight";
+export interface DoubleDelimiterSpec {
+    /** 노드 이름 (예: "Highlight"). 기호 노드 이름은 `${name}Mark`가 됩니다. */
+    readonly name: string;
+    /** 구분자 문자 한 글자 (예: "=" → `==text==`) */
+    readonly char: string;
+    /** 노드와 그 자식 전체에 적용할 하이라이트 태그 */
+    readonly tag: Tag;
+}
+/**
+ * `XXtextXX` 형태(같은 문자 2개로 감싸는) 인라인 문법을 만드는 Lezer Markdown 확장 팩토리입니다.
+ *
+ * 열고 닫는 규칙은 GFM 취소선(`~~`)과 같은 CommonMark flanking 규칙을 따르며,
+ * 같은 문자가 3개 이상 연속되면 시작 위치에서는 구분자로 보지 않습니다. (`~~`와 동일)
+ *
+ * 참고: GFM `~~`와 마찬가지로 단어 중간의 구분자도 열고 닫을 수 있습니다.
+ * 예: `1--2, 3--4` → `--2, 3--`가 Underline. (`_`처럼 제한하지 않기로 결정한 동작)
+ */
+export declare function doubleDelimiterSyntax({ name, char, tag }: DoubleDelimiterSpec): MarkdownConfig;

package/dist/delimiter.js

@@ -0,0 +1,73 @@
+import { tags } from "@lezer/highlight";
+// ---------------------------------------------------------------------------
+// 문자 분류 (CommonMark flanking 규칙용)
+//
+// @lezer/markdown 내장 Emphasis/Strikethrough와 동일한 판정을 하되,
+// 문자열 slice + 정규식 대신 문자 코드로 판정합니다.
+// - ASCII는 모듈 로드 시 1회 만든 테이블로 O(1) 조회
+// - 비ASCII만 정규식으로 판정 (Lezer와 같은 Unicode \p{P}/\p{S} 기준)
+// ---------------------------------------------------------------------------
+const OTHER = 0;
+const SPACE = 1; // 공백 또는 구간 경계(줄 시작/끝)
+const PUNCT = 2;
+const SpaceRe = /\s/;
+const PunctuationRe = /[\p{S}\p{P}]/u;
+function classifySlow(code) {
+    const ch = String.fromCharCode(code);
+    return SpaceRe.test(ch) ? SPACE : PunctuationRe.test(ch) ? PUNCT : OTHER;
+}
+const asciiKind = new Uint8Array(128);
+for (let code = 0; code < 128; code++)
+    asciiKind[code] = classifySlow(code);
+/** code가 -1(구간 끝)이면 공백으로 취급합니다. (Lezer의 /\s|^$/ 와 동일) */
+function charKind(code) {
+    if (code < 0)
+        return SPACE;
+    return code < 128 ? asciiKind[code] : classifySlow(code);
+}
+/**
+ * `XXtextXX` 형태(같은 문자 2개로 감싸는) 인라인 문법을 만드는 Lezer Markdown 확장 팩토리입니다.
+ *
+ * 열고 닫는 규칙은 GFM 취소선(`~~`)과 같은 CommonMark flanking 규칙을 따르며,
+ * 같은 문자가 3개 이상 연속되면 시작 위치에서는 구분자로 보지 않습니다. (`~~`와 동일)
+ *
+ * 참고: GFM `~~`와 마찬가지로 단어 중간의 구분자도 열고 닫을 수 있습니다.
+ * 예: `1--2, 3--4` → `--2, 3--`가 Underline. (`_`처럼 제한하지 않기로 결정한 동작)
+ */
+export function doubleDelimiterSyntax({ name, char, tag }) {
+    if (char.length !== 1)
+        throw new RangeError(`char must be a single character: ${char}`);
+    const code = char.charCodeAt(0);
+    const mark = `${name}Mark`;
+    const delimiter = { resolve: name, mark };
+    return {
+        defineNodes: [
+            // "/..." : 내부의 강조/코드 등 자식 노드에도 스타일이 상속되도록 합니다.
+            { name, style: { [`${name}/...`]: tag } },
+            { name: mark, style: tags.processingInstruction },
+        ],
+        parseInline: [
+            {
+                name,
+                parse(cx, next, pos) {
+                    // 핫 패스: 모든 문자 위치마다 호출되므로 첫 비교로 즉시 빠져나갑니다.
+                    if (next !== code || cx.char(pos + 1) !== code || cx.char(pos + 2) === code) {
+                        return -1;
+                    }
+                    // cx.char()는 구간 시작 이전 위치에서 NaN을 반환하므로 직접 경계를 처리합니다.
+                    const before = pos > cx.offset ? charKind(cx.char(pos - 1)) : SPACE;
+                    const after = charKind(cx.char(pos + 2));
+                    const canOpen = after !== SPACE && (after !== PUNCT || before !== OTHER);
+                    const canClose = before !== SPACE && (before !== PUNCT || after !== OTHER);
+                    // 열지도 닫지도 못하는 구분자는 매칭될 일이 없습니다.
+                    // Lezer는 이런 구분자도 parts 배열에 쌓고, 닫는 구분자마다 문단 시작까지
+                    // 역방향으로 훑으므로(O(n²)), 아예 추가하지 않고 일반 텍스트로 둡니다.
+                    if (!canOpen && !canClose)
+                        return -1;
+                    return cx.addDelimiter(delimiter, pos, pos + 2, canOpen, canClose);
+                },
+                after: "Emphasis",
+            },
+        ],
+    };
+}

package/dist/editor.d.ts

@@ -0,0 +1,132 @@
+import { type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { type CodeBlockOptions } from "./codeBlock.js";
+import { type ExtendedMarkdownOptions } from "./extensions.js";
+import { type ImageOptions } from "./image.js";
+import { type LinkOptions } from "./link.js";
+import { type MathOptions } from "./math.js";
+import { type TikzJaxOptions, type TikzOptions } from "./tikz.js";
+/** 켜고 끌 수 있는 기능. 모두 기본으로 켜져 있습니다. (TikZ는 tikz 옵션을 줄 때만) */
+export interface MDSquareFeatures {
+    /** 굵게, 기울임, 취소선, 밑줄(`--`), 하이라이트(`==`) */
+    emphasis?: boolean;
+    heading?: boolean;
+    hashtag?: boolean;
+    mention?: boolean;
+    /** `\*` 같은 이스케이프 */
+    escape?: boolean;
+    inlineCode?: boolean;
+    /** 불릿/번호 목록 (+ Tab/Shift-Tab 들여쓰기) */
+    list?: boolean;
+    /** 작업 목록 `- [ ]` */
+    task?: boolean;
+    link?: boolean;
+    image?: boolean;
+    horizontalRule?: boolean;
+    footnote?: boolean;
+    quote?: boolean;
+    /** Obsidian 콜아웃 / GFM 알림 `> [!note]` (quote 포함) */
+    callout?: boolean;
+    /** 코드 블록 (구문 강조, 복사 버튼) */
+    codeBlock?: boolean;
+    /** LaTeX 수식 `$…$`, `$$…$$` (KaTeX) */
+    math?: boolean;
+    /** GFM 표 */
+    table?: boolean;
+}
+export type MDSquareTheme = "light" | "dark" | "auto";
+export interface MDSquareEditorOptions {
+    /** 에디터를 넣을 요소. 없으면 나중에 `editor.dom`을 직접 붙입니다. */
+    parent?: Element | DocumentFragment;
+    /** 처음 문서 (마크다운) */
+    value?: string;
+    /** 문서가 바뀔 때마다 호출됩니다. (setValue로 바꿀 때도) */
+    onChange?: (value: string, editor: MDSquareEditor) => void;
+    /** 밝은/어두운 테마. "auto"는 시스템 설정을 따릅니다. (기본 "auto") */
+    theme?: MDSquareTheme;
+    /** 읽기 전용 (기본 false) */
+    readOnly?: boolean;
+    /** 문서가 비었을 때 보여줄 글 */
+    placeholder?: string;
+    /** 줄 번호 (기본 false) */
+    lineNumbers?: boolean;
+    /** 기능 켜고 끄기 (기본 모두 켬) */
+    features?: MDSquareFeatures;
+    /**
+     * 코드 블록 옵션. languages를 주지 않으면 `@codemirror/language-data`의 언어를 씁니다(쓸 때 불러옴).
+     * `tikz` 블록은 LaTeX로 강조합니다.
+     */
+    codeBlock?: CodeBlockOptions;
+    image?: ImageOptions;
+    link?: LinkOptions;
+    math?: MathOptions;
+    /**
+     * TikZ 그림(```` ```tikz ````). 주면 켜집니다.
+     * - `{ tikzjax: { src } }`: TikZJax(`@drgrice1/tikzjax`, GPL-3.0)의 dist 폴더를 앱이 제공하는 주소
+     * - `{ render }`: 직접 만든 렌더러 (서버 렌더링 등)
+     */
+    tikz?: (TikzOptions & {
+        tikzjax?: TikzJaxOptions;
+    }) | false;
+    /** 마크다운 문법 옵션 (목록 Enter 동작 등) */
+    markdown?: ExtendedMarkdownOptions;
+    /** 덧붙일 CodeMirror 확장 */
+    extensions?: Extension;
+}
+/**
+ * 하이브리드 마크다운 에디터 (CodeMirror 6 기반).
+ *
+ * ```ts
+ * import MDSquareEditor from "mdsquare";
+ * import "mdsquare/style.css";
+ *
+ * const editor = new MDSquareEditor({ parent: document.getElementById("editor")!, value: "# 안녕하세요" });
+ * editor.getValue();
+ * ```
+ */
+export declare class MDSquareEditor {
+    /** CodeMirror 뷰 (확장을 직접 다룰 때) */
+    readonly view: EditorView;
+    private readonly themeSlot;
+    private readonly readOnlySlot;
+    private theme;
+    private media;
+    private readonly onMediaChange;
+    /** 옵션으로 정해지는 확장들. 파일을 새로 열 때도 같은 것을 써서 렌더링 캐시(수식, TikZ 등)를 이어 씁니다. */
+    private readonly extensions;
+    private readOnly;
+    constructor(options?: MDSquareEditorOptions);
+    /** 지금 설정(테마, 읽기 전용)으로 새 상태를 만듭니다. */
+    private createState;
+    /** 에디터 바깥 요소 (`.cm-editor`) */
+    get dom(): HTMLElement;
+    /** 지금 문서 (마크다운) */
+    getValue(): string;
+    /**
+     * 다른 파일(문서)을 엽니다. 처음 연 것처럼 새로 시작합니다.
+     * - 실행 취소 기록을 새로 시작합니다. (Ctrl+Z로 이전 파일 내용으로 돌아가지 않음)
+     * - onChange를 부르지 않습니다. (방금 연 파일을 바로 저장하지 않음)
+     * - 커서는 문서 처음, 스크롤은 맨 위. 접기·열린 메뉴 등 화면 상태도 초기화합니다.
+     * - 테마, 읽기 전용 등 설정은 그대로입니다.
+     *
+     * 같은 문서 안에서 내용을 바꾸는 것(실행 취소할 수 있어야 하는 편집)은 setValue를 쓰세요.
+     */
+    open(value: string): void;
+    /**
+     * 지금 문서의 내용을 바꿉니다. 편집처럼 다뤄 실행 취소할 수 있고 onChange도 호출됩니다. 커서는 문서 처음으로.
+     * 다른 파일을 여는 것이라면 open을 쓰세요.
+     */
+    setValue(value: string): void;
+    focus(): void;
+    /** 테마 바꾸기 ("auto": 시스템 설정을 따르고, 설정이 바뀌면 함께 바뀜) */
+    setTheme(theme: MDSquareTheme): void;
+    setReadOnly(readOnly: boolean): void;
+    /** 에디터를 없애고 이벤트를 정리합니다. */
+    destroy(): void;
+    private themeExtension;
+    private applyTheme;
+    private watchSystemTheme;
+}
+/** 옵션에 따라 마크다운 확장들을 고릅니다. */
+export declare function markdownExtensions(options?: MDSquareEditorOptions): Extension;
+export default MDSquareEditor;