mdsquare 0.0.0-stage → 0.2.0

package/dist/utils/reveal.js

@@ -0,0 +1,161 @@
+import { syntaxTree } from "@codemirror/language";
+import { EditorState, StateField, } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, } from "@codemirror/view";
+import { isSelectionOverlapNode } from "./selection.js";
+import { iterateVisibleSyntaxTree } from "./syntaxTree.js";
+/** 선택 범위(멀티 커서 포함) 중 하나라도 노드에 닿아 있으면 true */
+export function isRevealed(selection, node) {
+    return selection.ranges.some((range) => isSelectionOverlapNode(range, node));
+}
+/**
+ * 데코레이션을 처음부터 다시 만들어야 하는지 여부
+ * - 백그라운드 파싱이 끝나면 문서/뷰포트/선택 변화 없이 트리만 바뀌므로 트리도 비교합니다.
+ * - 설정이 바뀌면(확장 추가/제거, Facet 값 변경) 다른 플러그인과의 역할 분담이 달라질 수 있습니다.
+ */
+export function needsRebuild(update) {
+    return (update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) !== syntaxTree(update.state) ||
+        update.transactions.some((tr) => tr.reconfigured));
+}
+/**
+ * 빌드 시 각 노드의 "기호 표시 여부"를 기록해 두었다가,
+ * 선택만 바뀌었을 때 표시 여부가 달라진 노드가 있는지 빠르게 확인합니다.
+ */
+export class RevealTracker {
+    ranges = [];
+    flags = [];
+    /** 새 빌드를 시작할 때 호출합니다. */
+    reset() {
+        this.ranges = [];
+        this.flags = [];
+    }
+    /** 노드의 표시 여부를 계산하고 기록합니다. */
+    track(selection, from, to) {
+        const revealed = isRevealed(selection, { from, to });
+        this.ranges.push(from, to);
+        this.flags.push(revealed);
+        return revealed;
+    }
+    /** 주어진 선택에서 표시 여부가 달라지는 노드가 하나라도 있으면 true */
+    changed(selection) {
+        const { ranges, flags } = this;
+        for (let i = 0; i < flags.length; i++) {
+            const node = { from: ranges[i * 2], to: ranges[i * 2 + 1] };
+            if (isRevealed(selection, node) !== flags[i])
+                return true;
+        }
+        return false;
+    }
+}
+/** createRevealPlugin()이 만드는 플러그인 인스턴스 */
+export class RevealPluginValue {
+    decorations = Decoration.none;
+    tracker = new RevealTracker();
+    spec;
+    constructor(view, spec) {
+        this.spec = spec;
+        this.build(view);
+    }
+    update(update) {
+        if (needsRebuild(update) ||
+            this.spec.rebuildOn?.(update) ||
+            // 선택만 바뀐 경우: 표시 여부가 달라진 노드가 있을 때만 다시 빌드합니다.
+            (update.selectionSet && this.tracker.changed(update.state.selection))) {
+            this.build(update.view);
+        }
+    }
+    build(view) {
+        const { state } = view;
+        const { selection } = state;
+        const tracker = this.tracker;
+        const decorations = [];
+        tracker.reset();
+        iterateVisibleSyntaxTree(view, this.spec.visit({
+            state,
+            view,
+            decorations,
+            isRevealed: (from, to) => tracker.track(selection, from, to),
+        }));
+        this.decorations = Decoration.set(decorations, this.spec.sort ?? false);
+    }
+}
+/**
+ * "커서가 닿은 노드만 기호를 보여주는" 플러그인의 공용 골격을 만듭니다.
+ *
+ * 공통으로 처리하는 것:
+ * - 보이는 범위의 구문 트리만 순회 (접힌 영역 중복 방문 없음)
+ * - 문서/뷰포트/구문 트리 변경 시 재빌드
+ * - 선택만 바뀐 경우 표시 여부가 달라진 노드가 있을 때만 재빌드
+ * - 멀티 커서 지원
+ */
+export function createRevealPlugin(spec) {
+    return ViewPlugin.define((view) => new RevealPluginValue(view, spec), {
+        decorations: (plugin) => plugin.decorations,
+    });
+}
+/**
+ * "커서가 닿은 블록만 원문을 보여주는" StateField를 만듭니다.
+ * - 문서/구문 트리/설정이 바뀐 경우에만 scan으로 대상을 다시 찾습니다.
+ * - 선택만 바뀐 경우 표시 여부가 달라진 대상이 있을 때만 build를 다시 호출합니다.
+ * - 멀티 커서 지원
+ */
+/**
+ * 위/아래 화살표가 숨겨진 블록 위젯을 통째로 건너뛰었으면(바로 윗줄 → 바로 아랫줄) 커서를 그 블록으로 옮깁니다.
+ * 아래로 가면 블록 시작, 위로 가면 블록 끝. 키보드 이동(select)의 빈 커서 하나일 때만 고칩니다.
+ */
+function enterSkippedBlock(tr, value, isBlock) {
+    if (!value || !tr.selection || tr.docChanged || !tr.isUserEvent("select") || tr.isUserEvent("select.pointer")) {
+        return tr;
+    }
+    const before = tr.startState.selection;
+    const after = tr.selection;
+    if (before.ranges.length !== 1 || after.ranges.length !== 1 || !before.main.empty || !after.main.empty)
+        return tr;
+    const { doc } = tr.startState;
+    const fromLine = doc.lineAt(before.main.head).number;
+    const toLine = doc.lineAt(after.main.head).number;
+    if (Math.abs(toLine - fromLine) < 2)
+        return tr;
+    const down = toLine > fromLine;
+    for (let i = 0; i < value.items.length; i++) {
+        const item = value.items[i];
+        if (value.revealed[i] || !isBlock(item))
+            continue;
+        const first = doc.lineAt(item.from).number;
+        const last = doc.lineAt(item.to).number;
+        if (down ? fromLine === first - 1 && toLine === last + 1 : fromLine === last + 1 && toLine === first - 1) {
+            return [tr, { selection: { anchor: down ? item.from : item.to }, scrollIntoView: true, sequential: true }];
+        }
+    }
+    return tr;
+}
+export function createRevealField(spec) {
+    const flags = (items, selection) => items.map((item) => isRevealed(selection, item));
+    const create = (state) => {
+        const items = spec.scan(state);
+        const revealed = flags(items, state.selection);
+        return { items, revealed, decorations: spec.build(items, revealed, state) };
+    };
+    return StateField.define({
+        create,
+        update(value, tr) {
+            if (tr.docChanged || tr.reconfigured || syntaxTree(tr.startState) !== syntaxTree(tr.state)) {
+                return create(tr.state);
+            }
+            if (tr.selection) {
+                const revealed = flags(value.items, tr.state.selection);
+                if (revealed.every((flag, i) => flag === value.revealed[i]))
+                    return value;
+                return { ...value, revealed, decorations: spec.build(value.items, revealed, tr.state) };
+            }
+            return value;
+        },
+        provide: (field) => [
+            EditorView.decorations.from(field, (value) => value.decorations),
+            spec.block
+                ? EditorState.transactionFilter.of((tr) => enterSkippedBlock(tr, tr.startState.field(field, false), spec.block))
+                : [],
+        ],
+    });
+}

package/dist/utils/selection.d.ts

@@ -0,0 +1,33 @@
+import type { SelectionRange } from "@codemirror/state";
+import type { SyntaxNodeRef } from "@lezer/common";
+/** from/to만 필요하므로 SyntaxNodeRef, SyntaxNode 등 어떤 노드든 받을 수 있게 합니다. */
+type NodeRange = Pick<SyntaxNodeRef, "from" | "to">;
+/**
+ * Selection이 특정 범위 [from, to] 안에 완전히 포함되는지 여부
+ * @param selection SelectionRange
+ * @param from 시작 위치
+ * @param to 끝 위치
+ */
+export declare function isSelectionBetween(selection: SelectionRange, from: number, to: number): boolean;
+/**
+ * Node가 Selection 안에 완전히 포함되는지 여부
+ * @param selection SelectionRange
+ * @param node SyntaxNodeRef
+ */
+export declare function isNodeWithinSelection(selection: SelectionRange, node: NodeRange): boolean;
+/**
+ * Selection이 Node의 경계 중 정확히 하나를 가로지르는지(일부만 걸치는지) 여부
+ * - Selection이 Node를 완전히 포함하거나, Node 안에 완전히 포함되면 false입니다.
+ * - 빈 Selection(커서)은 경계를 가로지를 수 없으므로 항상 false입니다.
+ * @param selection SelectionRange
+ * @param node SyntaxNodeRef
+ */
+export declare function isSelectionPartiallyOverlapNode(selection: SelectionRange, node: NodeRange): boolean;
+/**
+ * Selection과 Node가 겹치거나 맞닿아 있는지 여부
+ * (포함, 피포함, 일부 걸침, 경계에서 맞닿음을 모두 포함)
+ * @param selection SelectionRange
+ * @param node SyntaxNodeRef
+ */
+export declare function isSelectionOverlapNode(selection: SelectionRange, node: NodeRange): boolean;
+export {};

package/dist/utils/selection.js

@@ -0,0 +1,45 @@
+/*
+ * 모든 판정은 닫힌 구간 [from, to] 기준입니다.
+ * 즉 커서가 노드 바로 앞/뒤(node.from, node.to)에 있어도 "닿아 있음"으로 봅니다.
+ */
+/**
+ * Selection이 특정 범위 [from, to] 안에 완전히 포함되는지 여부
+ * @param selection SelectionRange
+ * @param from 시작 위치
+ * @param to 끝 위치
+ */
+export function isSelectionBetween(selection, from, to) {
+    return selection.from >= from && selection.to <= to;
+}
+/**
+ * Node가 Selection 안에 완전히 포함되는지 여부
+ * @param selection SelectionRange
+ * @param node SyntaxNodeRef
+ */
+export function isNodeWithinSelection(selection, node) {
+    return selection.from <= node.from && selection.to >= node.to;
+}
+/**
+ * Selection이 Node의 경계 중 정확히 하나를 가로지르는지(일부만 걸치는지) 여부
+ * - Selection이 Node를 완전히 포함하거나, Node 안에 완전히 포함되면 false입니다.
+ * - 빈 Selection(커서)은 경계를 가로지를 수 없으므로 항상 false입니다.
+ * @param selection SelectionRange
+ * @param node SyntaxNodeRef
+ */
+export function isSelectionPartiallyOverlapNode(selection, node) {
+    const { from, to } = selection;
+    return (
+    // 앞쪽 경계를 가로지름: [sel ... (node.from) ... sel] ... node.to
+    (from < node.from && to > node.from && to < node.to) ||
+        // 뒤쪽 경계를 가로지름: node.from ... [sel ... (node.to) ... sel]
+        (from > node.from && from < node.to && to > node.to));
+}
+/**
+ * Selection과 Node가 겹치거나 맞닿아 있는지 여부
+ * (포함, 피포함, 일부 걸침, 경계에서 맞닿음을 모두 포함)
+ * @param selection SelectionRange
+ * @param node SyntaxNodeRef
+ */
+export function isSelectionOverlapNode(selection, node) {
+    return selection.from <= node.to && selection.to >= node.from;
+}

package/dist/utils/syntaxTree.d.ts

@@ -0,0 +1,18 @@
+import type { EditorView } from "@codemirror/view";
+import type { SyntaxNodeRef } from "@lezer/common";
+export interface SyntaxTreeIterator {
+    /** false를 반환하면 해당 노드의 자식은 순회하지 않습니다(leave도 호출되지 않음). */
+    enter(node: SyntaxNodeRef): boolean | void;
+    leave?(node: SyntaxNodeRef): void;
+}
+/**
+ * 화면에 보이는 범위(view.visibleRanges)에 걸친 노드만 순회합니다.
+ *
+ * visibleRanges는 접힌 영역(20자 이상) 등을 기준으로 여러 구간으로 나뉠 수 있습니다.
+ * 구간마다 따로 iterate하면 여러 구간에 걸친 노드(Document, ListItem 등)가
+ * 중복 방문되고 leave가 중간에 호출되므로, 전체 구간을 한 번만 순회하면서
+ * 보이는 구간과 겹치지 않는 노드(와 그 자식)를 건너뜁니다.
+ *
+ * 범위 판정은 Lezer의 iterate와 동일하게 경계에 닿는 노드도 포함합니다.
+ */
+export declare function iterateVisibleSyntaxTree(view: EditorView, { enter, leave }: SyntaxTreeIterator): void;

package/dist/utils/syntaxTree.js

@@ -0,0 +1,23 @@
+import { syntaxTree } from "@codemirror/language";
+/**
+ * 화면에 보이는 범위(view.visibleRanges)에 걸친 노드만 순회합니다.
+ *
+ * visibleRanges는 접힌 영역(20자 이상) 등을 기준으로 여러 구간으로 나뉠 수 있습니다.
+ * 구간마다 따로 iterate하면 여러 구간에 걸친 노드(Document, ListItem 등)가
+ * 중복 방문되고 leave가 중간에 호출되므로, 전체 구간을 한 번만 순회하면서
+ * 보이는 구간과 겹치지 않는 노드(와 그 자식)를 건너뜁니다.
+ *
+ * 범위 판정은 Lezer의 iterate와 동일하게 경계에 닿는 노드도 포함합니다.
+ */
+export function iterateVisibleSyntaxTree(view, { enter, leave }) {
+    const ranges = view.visibleRanges;
+    if (ranges.length === 0)
+        return;
+    const isVisible = (node) => ranges.some((range) => node.from <= range.to && node.to >= range.from);
+    syntaxTree(view.state).iterate({
+        from: ranges[0].from,
+        to: ranges[ranges.length - 1].to,
+        enter: (node) => (isVisible(node) ? enter(node) : false),
+        leave,
+    });
+}

package/package.json

@@ -1,6 +1,81 @@
 {
   "name": "mdsquare",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Hybrid (live preview) Markdown editor built on CodeMirror 6: tables, callouts, math, code blocks, footnotes and more",
+  "keywords": [
+    "markdown",
+    "editor",
+    "markdown-editor",
+    "live-preview",
+    "wysiwyg",
+    "codemirror",
+    "codemirror6",
+    "lezer",
+    "gfm",
+    "table",
+    "katex"
+  ],
+  "license": "MIT",
+  "author": "ordidxzero <ordidxzero@gmail.com>",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./extensions": {
+      "types": "./dist/extensions.d.ts",
+      "import": "./dist/extensions.js"
+    },
+    "./style.css": {
+      "types": "./dist/style.css.d.ts",
+      "default": "./dist/style.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/finish-build.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "preview": "vite build && vite preview",
+    "bench": "node bench/highlight.ts",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.4",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@lezer/common": "^1.5.5",
+    "@lezer/highlight": "^1.2.5",
+    "@lezer/markdown": "^1.8.1",
+    "katex": "^0.19.1"
+  },
+  "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@drgrice1/tikzjax": "1.0.0-beta24",
+    "@types/node": "^26.6.6",
+    "jsdom": "^31.0.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0"
+  }
+}