@moda-editor/core 0.1.5 → 0.2.0

package/dist/theme.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 테마 — 에디터 크롬/본문의 --me-* 변수를 한 묶음으로 바꾼다.
+ * 테마는 플랫한 변수 맵이라 소비자가 객체 리터럴 하나로 직접
+ * 디자인할 수 있다 — CSS 파일을 고치지 않고 런타임에 적용된다.
+ *
+ * 적용 지점은 허브 3곳 — .me-frame(크롬: 툴바/상태바/팝오버),
+ * .me-root, .me-editor(본문/토큰 팔레트). 리프 요소들은 변수를
+ * 자체 정의하지 않고 var()로만 소비하므로 허브에만 박으면
+ * 나머지는 상속으로 따라온다 (styles.css 주석 참고).
+ */
+/** 테마 — vars는 { "--me-변수명": 값 } 맵. scheme은 다크 테마의
+ *  스크롤바/폼 컨트롤을 어둡게 만드는 color-scheme 힌트 */
+export interface MeTheme {
+    id: string;
+    label: string;
+    scheme?: "light" | "dark";
+    vars: Record<string, string>;
+}
+/** 내장 테마 — vars에 없는 변수는 기본(라이트) 값이 그대로 적용된다 */
+export declare const ME_THEMES: readonly MeTheme[];
+/** id로 내장 테마를 찾는다 — 없거나 빈 값이면 null(기본 테마) */
+export declare function themeById(id: string | null | undefined): MeTheme | null;
+/**
+ * 테마 적용 — el(프레임이나 그 안의 아무 요소)이 속한 허브에 변수를
+ * 박는다. theme이 null이면 이전 테마를 지워 기본 팔레트로 돌아간다.
+ * 스코프 안에 .me-frame이 없으면 el 자체가 스코프다(단독 .me-root 사용).
+ */
+export declare function applyTheme(el: Element, theme: MeTheme | null): void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;0CAC0C;AAC1C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,+CAA+C;AAC/C,eAAO,MAAM,SAAS,EAAE,SAAS,OAAO,EAqSvC,CAAC;AAEF,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAEvE;AAMD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAsBnE"}

package/dist/theme.js

@@ -0,0 +1,347 @@
+/**
+ * 테마 — 에디터 크롬/본문의 --me-* 변수를 한 묶음으로 바꾼다.
+ * 테마는 플랫한 변수 맵이라 소비자가 객체 리터럴 하나로 직접
+ * 디자인할 수 있다 — CSS 파일을 고치지 않고 런타임에 적용된다.
+ *
+ * 적용 지점은 허브 3곳 — .me-frame(크롬: 툴바/상태바/팝오버),
+ * .me-root, .me-editor(본문/토큰 팔레트). 리프 요소들은 변수를
+ * 자체 정의하지 않고 var()로만 소비하므로 허브에만 박으면
+ * 나머지는 상속으로 따라온다 (styles.css 주석 참고).
+ */
+/** 내장 테마 — vars에 없는 변수는 기본(라이트) 값이 그대로 적용된다 */
+export const ME_THEMES = [
+    {
+        // 심플 — 무채색 미니멀. 액센트까지 회색으로 눌러 본문만 남긴다
+        id: "simple",
+        label: "심플",
+        vars: {
+            "--me-frame-bg": "#ffffff",
+            "--me-border-color": "#e4e4e7",
+            "--me-text-color": "#18181b",
+            "--me-editor-bg": "#ffffff",
+            "--me-editor-focus": "#52525b",
+            "--me-sel-bg": "rgba(24, 24, 27, 0.08)",
+            "--me-gutter-bg": "rgba(24, 24, 27, 0.03)",
+            "--me-gutter-color": "#a1a1aa",
+            "--me-gutter-border": "#e4e4e7",
+            "--me-line-active-num": "#52525b",
+            "--me-node-sel-color": "#52525b",
+            "--me-print-margin": "rgba(161, 161, 170, 0.4)",
+            "--me-toolbar-bg": "#fafafa",
+            "--me-tool-hover-bg": "#e4e4e7",
+            "--me-tool-active-bg": "#e4e4e7",
+            "--me-tool-active-color": "#18181b",
+            "--me-status-color": "#a1a1aa",
+            "--me-btn-bg": "#f4f4f5",
+            "--me-btn-hover-bg": "#e4e4e7",
+            "--me-accent": "#52525b",
+            "--me-text-muted": "#71717a",
+            "--me-link-color": "#18181b",
+            "--me-quote-color": "#71717a",
+            "--me-placeholder-color": "#a1a1aa",
+            "--me-code-bg": "#f4f4f5",
+            "--me-code-border": "#e4e4e7",
+            "--me-callout-bg": "#fafafa",
+            "--me-callout-border": "#e4e4e7",
+            "--me-callout-accent": "#71717a",
+            "--me-checkbox-border": "#a1a1aa",
+            "--me-checkbox-checked": "#18181b",
+            // 심플의 코드 팔레트도 톤 다운 — 색 대신 명암으로 구분
+            "--me-tok-keyword": "#18181b",
+            "--me-tok-string": "#3f3f46",
+            "--me-tok-comment": "#a1a1aa",
+            "--me-tok-number": "#3f3f46",
+            "--me-tok-literal": "#3f3f46",
+            "--me-tok-function": "#18181b",
+            "--me-tok-tag": "#3f3f46",
+            "--me-tok-attr": "#71717a",
+        },
+    },
+    {
+        // 모던 — 인디고 액센트 + 부드러운 그림자 (Linear/현대 SaaS 관례)
+        id: "modern",
+        label: "모던",
+        vars: {
+            "--me-frame-bg": "#ffffff",
+            "--me-frame-shadow": "0 8px 30px rgba(79, 70, 229, 0.08)",
+            "--me-border-color": "#dfe5f5",
+            "--me-text-color": "#0f172a",
+            "--me-editor-bg": "#ffffff",
+            "--me-editor-focus": "#6366f1",
+            "--me-sel-bg": "rgba(99, 102, 241, 0.16)",
+            "--me-gutter-bg": "rgba(99, 102, 241, 0.04)",
+            "--me-gutter-color": "#94a3b8",
+            "--me-gutter-border": "#dfe5f5",
+            "--me-line-active-num": "#4f46e5",
+            "--me-node-sel-color": "#6366f1",
+            "--me-print-margin": "rgba(99, 102, 241, 0.3)",
+            "--me-toolbar-bg": "#f8f9ff",
+            "--me-tool-hover-bg": "#e8ecff",
+            "--me-tool-active-bg": "#e0e7ff",
+            "--me-tool-active-color": "#4f46e5",
+            "--me-status-color": "#64748b",
+            "--me-btn-bg": "#eef2ff",
+            "--me-btn-hover-bg": "#e0e7ff",
+            "--me-accent": "#6366f1",
+            "--me-text-muted": "#64748b",
+            "--me-link-color": "#4f46e5",
+            "--me-quote-color": "#64748b",
+            "--me-placeholder-color": "#a5b4fc",
+            "--me-code-bg": "#f1f5ff",
+            "--me-code-border": "#dfe5f5",
+            "--me-code-active-bg": "rgba(99, 102, 241, 0.07)",
+            "--me-callout-bg": "#eef2ff",
+            "--me-callout-border": "#c7d2fe",
+            "--me-callout-accent": "#6366f1",
+            "--me-checkbox-border": "#a5b4fc",
+            "--me-checkbox-checked": "#4f46e5",
+            "--me-pop-shadow": "0 12px 32px rgba(79, 70, 229, 0.16)",
+            "--me-tok-keyword": "#7c3aed",
+            "--me-tok-string": "#0e7490",
+            "--me-tok-comment": "#94a3b8",
+            "--me-tok-number": "#db2777",
+            "--me-tok-literal": "#db2777",
+            "--me-tok-function": "#2563eb",
+            "--me-tok-tag": "#7c3aed",
+            "--me-tok-attr": "#0891b2",
+        },
+    },
+    {
+        // 다크 — Ace Monokai 계열 (기존 [data-me-theme="dark"]와 동일 팔레트)
+        id: "dark",
+        label: "다크",
+        scheme: "dark",
+        vars: {
+            "--me-frame-bg": "#1e1f1c",
+            "--me-border-color": "#3e3d32",
+            "--me-text-color": "#f8f8f2",
+            "--me-editor-bg": "#272822",
+            "--me-editor-focus": "#66d9ef",
+            "--me-sel-bg": "rgba(73, 72, 62, 0.95)",
+            "--me-gutter-bg": "rgba(0, 0, 0, 0.22)",
+            "--me-gutter-color": "#8f908a",
+            "--me-gutter-border": "#3e3d32",
+            "--me-line-active-num": "#c2c2bf",
+            "--me-node-sel-color": "#66d9ef",
+            "--me-print-margin": "rgba(73, 72, 62, 0.9)",
+            "--me-toolbar-bg": "#1e1f1c",
+            "--me-tool-hover-bg": "#3e3d32",
+            "--me-tool-active-bg": "rgba(102, 217, 239, 0.14)",
+            "--me-tool-active-color": "#66d9ef",
+            "--me-status-color": "#8f908a",
+            "--me-btn-bg": "#3e3d32",
+            "--me-btn-hover-bg": "#575643",
+            "--me-accent": "#66d9ef",
+            "--me-text-muted": "#8f908a",
+            "--me-link-color": "#66d9ef",
+            "--me-quote-color": "#a09f93",
+            "--me-placeholder-color": "#6a6b60",
+            "--me-code-bg": "#1e1f1c",
+            "--me-code-border": "#3e3d32",
+            "--me-code-active-bg": "rgba(255, 255, 255, 0.05)",
+            "--me-callout-bg": "#2d2e25",
+            "--me-callout-border": "#575643",
+            "--me-callout-accent": "#66d9ef",
+            "--me-checkbox-border": "#575643",
+            "--me-checkbox-checked": "#a6e22e",
+            "--me-pop-shadow": "0 8px 24px rgba(0, 0, 0, 0.5)",
+            "--me-tok-keyword": "#f92672",
+            "--me-tok-string": "#e6db74",
+            "--me-tok-comment": "#75715e",
+            "--me-tok-number": "#ae81ff",
+            "--me-tok-literal": "#ae81ff",
+            "--me-tok-function": "#a6e22e",
+            "--me-tok-tag": "#f92672",
+            "--me-tok-attr": "#a6e22e",
+        },
+    },
+    {
+        // 네온 다크 — 검정 바탕에 사이언/마젠타 발광 (Synthwave 관례)
+        id: "neon",
+        label: "네온 다크",
+        scheme: "dark",
+        vars: {
+            "--me-frame-bg": "#0b0b16",
+            "--me-frame-shadow": "0 0 30px rgba(0, 229, 255, 0.12)",
+            "--me-border-color": "#22223a",
+            "--me-text-color": "#d9faff",
+            "--me-editor-bg": "#07070f",
+            "--me-editor-focus": "#00e5ff",
+            "--me-sel-bg": "rgba(0, 229, 255, 0.18)",
+            "--me-gutter-bg": "rgba(0, 229, 255, 0.06)",
+            "--me-gutter-color": "#3f6b76",
+            "--me-gutter-border": "#22223a",
+            "--me-line-active-num": "#00e5ff",
+            "--me-node-sel-color": "#00e5ff",
+            "--me-print-margin": "rgba(0, 229, 255, 0.15)",
+            "--me-toolbar-bg": "#0b0b16",
+            "--me-tool-hover-bg": "#1a1a2e",
+            "--me-tool-active-bg": "rgba(0, 229, 255, 0.15)",
+            "--me-tool-active-color": "#00e5ff",
+            "--me-status-color": "#4a6b78",
+            "--me-btn-bg": "#1a1a2e",
+            "--me-btn-hover-bg": "#22223f",
+            "--me-accent": "#00e5ff",
+            "--me-text-muted": "#4a6b78",
+            "--me-link-color": "#00e5ff",
+            "--me-quote-color": "#6b8b96",
+            "--me-placeholder-color": "#3a4a55",
+            "--me-code-bg": "#07070f",
+            "--me-code-border": "#22223a",
+            "--me-code-active-bg": "rgba(0, 229, 255, 0.07)",
+            "--me-callout-bg": "#101022",
+            "--me-callout-border": "#2a2a55",
+            "--me-callout-accent": "#00e5ff",
+            "--me-checkbox-border": "#2a2a55",
+            "--me-checkbox-checked": "#ff2e97",
+            "--me-pop-shadow": "0 0 24px rgba(0, 229, 255, 0.22)",
+            "--me-tok-keyword": "#ff2e97",
+            "--me-tok-string": "#f0ff6b",
+            "--me-tok-comment": "#4a6b78",
+            "--me-tok-number": "#b76cff",
+            "--me-tok-literal": "#b76cff",
+            "--me-tok-function": "#00e5ff",
+            "--me-tok-tag": "#ff2e97",
+            "--me-tok-attr": "#c3ff6b",
+        },
+    },
+    {
+        // 퍼플 — 라이트 라벤더. 바이올렛 액센트의 부드러운 라이트 테마
+        id: "purple",
+        label: "퍼플",
+        vars: {
+            "--me-frame-bg": "#fbf9ff",
+            "--me-border-color": "#e4dbf7",
+            "--me-text-color": "#2e2145",
+            "--me-editor-bg": "#fdfcff",
+            "--me-editor-focus": "#7c3aed",
+            "--me-sel-bg": "rgba(124, 58, 237, 0.14)",
+            "--me-gutter-bg": "rgba(124, 58, 237, 0.05)",
+            "--me-gutter-color": "#a594c7",
+            "--me-gutter-border": "#e4dbf7",
+            "--me-line-active-num": "#7c3aed",
+            "--me-node-sel-color": "#7c3aed",
+            "--me-print-margin": "rgba(124, 58, 237, 0.25)",
+            "--me-toolbar-bg": "#f4efff",
+            "--me-tool-hover-bg": "#eae2fb",
+            "--me-tool-active-bg": "#e6ddfb",
+            "--me-tool-active-color": "#6d28d9",
+            "--me-status-color": "#8b7ab8",
+            "--me-btn-bg": "#ece5fb",
+            "--me-btn-hover-bg": "#ded1f8",
+            "--me-accent": "#7c3aed",
+            "--me-text-muted": "#8b7ab8",
+            "--me-link-color": "#7c3aed",
+            "--me-quote-color": "#8b7ab8",
+            "--me-placeholder-color": "#b3a1d6",
+            "--me-code-bg": "#f5f0ff",
+            "--me-code-border": "#e4dbf7",
+            "--me-code-active-bg": "rgba(124, 58, 237, 0.07)",
+            "--me-callout-bg": "#f3edff",
+            "--me-callout-border": "#d9cdf3",
+            "--me-callout-accent": "#7c3aed",
+            "--me-checkbox-border": "#c4b5fd",
+            "--me-checkbox-checked": "#7c3aed",
+            "--me-pop-shadow": "0 10px 30px rgba(124, 58, 237, 0.16)",
+            "--me-tok-keyword": "#7c3aed",
+            "--me-tok-string": "#0e7490",
+            "--me-tok-comment": "#a594c7",
+            "--me-tok-number": "#c026d3",
+            "--me-tok-literal": "#c026d3",
+            "--me-tok-function": "#4f46e5",
+            "--me-tok-tag": "#7c3aed",
+            "--me-tok-attr": "#0e7490",
+        },
+    },
+    {
+        // 퍼플 다크 — 딥 바이올렛 바탕 + 라벤더 액센트
+        id: "grape",
+        label: "퍼플 다크",
+        scheme: "dark",
+        vars: {
+            "--me-frame-bg": "#1b1230",
+            "--me-border-color": "#3b2d5e",
+            "--me-text-color": "#ece5fb",
+            "--me-editor-bg": "#150e24",
+            "--me-editor-focus": "#c084fc",
+            "--me-sel-bg": "rgba(192, 132, 252, 0.22)",
+            "--me-gutter-bg": "rgba(0, 0, 0, 0.3)",
+            "--me-gutter-color": "#6b5a95",
+            "--me-gutter-border": "#3b2d5e",
+            "--me-line-active-num": "#d8b4fe",
+            "--me-node-sel-color": "#c084fc",
+            "--me-print-margin": "rgba(192, 132, 252, 0.2)",
+            "--me-toolbar-bg": "#1b1230",
+            "--me-tool-hover-bg": "#2d2049",
+            "--me-tool-active-bg": "rgba(192, 132, 252, 0.16)",
+            "--me-tool-active-color": "#d8b4fe",
+            "--me-status-color": "#8b7ab8",
+            "--me-btn-bg": "#2d2049",
+            "--me-btn-hover-bg": "#3b2d5e",
+            "--me-accent": "#c084fc",
+            "--me-text-muted": "#8b7ab8",
+            "--me-link-color": "#d8b4fe",
+            "--me-quote-color": "#9d8cc4",
+            "--me-placeholder-color": "#6b5a95",
+            "--me-code-bg": "#170f2a",
+            "--me-code-border": "#3b2d5e",
+            "--me-code-active-bg": "rgba(192, 132, 252, 0.08)",
+            "--me-callout-bg": "#221740",
+            "--me-callout-border": "#4a3575",
+            "--me-callout-accent": "#c084fc",
+            "--me-checkbox-border": "#4a3575",
+            "--me-checkbox-checked": "#c084fc",
+            "--me-pop-shadow": "0 8px 28px rgba(0, 0, 0, 0.55)",
+            "--me-tok-keyword": "#e879f9",
+            "--me-tok-string": "#bef264",
+            "--me-tok-comment": "#6b5a95",
+            "--me-tok-number": "#f9a8d4",
+            "--me-tok-literal": "#f9a8d4",
+            "--me-tok-function": "#a78bfa",
+            "--me-tok-tag": "#e879f9",
+            "--me-tok-attr": "#67e8f9",
+        },
+    },
+];
+/** id로 내장 테마를 찾는다 — 없거나 빈 값이면 null(기본 테마) */
+export function themeById(id) {
+    return ME_THEMES.find((t) => t.id === id) ?? null;
+}
+/* applyTheme이 마지막으로 각 허브에 박은 변수명 — 테마 전환/해제 시
+ * 이전 흔적을 정확히 지운다 (지우지 않으면 이전 테마의 변수가 남는다) */
+const APPLIED = new WeakMap();
+/**
+ * 테마 적용 — el(프레임이나 그 안의 아무 요소)이 속한 허브에 변수를
+ * 박는다. theme이 null이면 이전 테마를 지워 기본 팔레트로 돌아간다.
+ * 스코프 안에 .me-frame이 없으면 el 자체가 스코프다(단독 .me-root 사용).
+ */
+export function applyTheme(el, theme) {
+    const scope = el.closest(".me-frame") ?? el;
+    // 허브 — 크롬(프레임/툴바/팝), 본문 래퍼, 에디터. 리프는 변수를
+    // 자체 정의하지 않으므로 여기에만 박으면 상속으로 전부 도달한다
+    const hubs = new Set([scope]);
+    if (scope.matches(".me-root, .me-editor"))
+        hubs.add(scope);
+    for (const q of [".me-root", ".me-editor"]) {
+        const hit = scope.querySelector(q);
+        if (hit)
+            hubs.add(hit);
+    }
+    const vars = theme?.vars ?? {};
+    for (const hub of hubs) {
+        const prev = APPLIED.get(hub) ?? [];
+        const style = hub.style;
+        for (const k of prev)
+            style.removeProperty(k);
+        const next = Object.keys(vars);
+        for (const k of next)
+            style.setProperty(k, vars[k]);
+        APPLIED.set(hub, next);
+    }
+    if (theme)
+        scope.setAttribute("data-me-theme", theme.id);
+    else
+        scope.removeAttribute("data-me-theme");
+    scope.style.colorScheme = theme?.scheme ?? "";
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/view/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/view/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAuBlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,kBAAkB;IACjC,MAAM,IAAI,IAAI,CAAC;IACf,yCAAyC;IACzC,gBAAgB,IAAI,IAAI,CAAC;IACzB,4BAA4B;IAC5B,gBAAgB,IAAI,IAAI,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAClC;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,WAAW,GACd,kBAAkB,CAylBpB;AAGD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/view/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,kBAAkB;IACjC,MAAM,IAAI,IAAI,CAAC;IACf,yCAAyC;IACzC,gBAAgB,IAAI,IAAI,CAAC;IACzB,4BAA4B;IAC5B,gBAAgB,IAAI,IAAI,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAClC;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,WAAW,GACd,kBAAkB,CAwqBpB;AAGD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/view/input.js

@@ -1,7 +1,7 @@
 import { nodeAt } from "../model/traverse.js";
 import { parseHTML } from "../parse/html.js";
 import { pointBefore, pointAfter } from "../state/navigate.js";
-import { normalizeRange, pointEq, textSelection } from "../state/selection.js";
+import { normalizeRange, point, pointEq, textSelection, } from "../state/selection.js";
 import { caretPointFromXY, isLeafPoint } from "./caret.js";
 import { applyDomSelection, domSelection, domToPoint, PATH_ATTR, } from "./dom.js";
 import { blockCtx, dispatchFiles, rangeCtx } from "./hook-ctx.js";
@@ -31,7 +31,10 @@ export function bindEditorInput(editor, el) {
         el.querySelectorAll(".is-selected").forEach((n) => n.classList.remove("is-selected"));
         const sel = editor.state.selection;
         if (sel.type === "node") {
-            el.querySelector(`[${PATH_ATTR}="${sel.path.join(",")}"]`)?.classList.add("is-selected");
+            // data-me-path가 안쪽 아울렛(.me-node-content)에 달린 노드 뷰는
+            // 래퍼(.me-node-view)까지 올라가 컴포넌트 전체에 링을 둘러야 한다
+            const hit = el.querySelector(`[${PATH_ATTR}="${sel.path.join(",")}"]`);
+            (hit?.closest(".me-node-view") ?? hit)?.classList.add("is-selected");
         }
     };
     /**
@@ -45,10 +48,42 @@ export function bindEditorInput(editor, el) {
         applyDomSelection(el, anchor, focus);
         lastApplied = { anchor, focus };
     };
+    // 포커스가 에디터 밖에 있는 동안 건너뛴 DOM 셀렉션 반영 —
+    // focusin에서 한 번에 동기화한다
+    let pendingSel = false;
     const restoreSelection = () => {
         const sel = editor.state.selection;
-        // 노드 셀렉션은 DOM 캐럿이 없다 — 오버레이만 갱신하고 끝낸다
+        // 포커스가 에디터 밖의 다른 요소(찾기 바·팝오버 입력)에 잡혀
+        // 있으면 DOM 셀렉션을 건드리지 않는다 — Blink는 contenteditable
+        // 안에 셀렉션을 쓰면 그 요소를 focus하므로, 매 커밋마다 입력
+        // 포커스를 빼앗긴다 (PM의 hasFocus 관례). 아무것도 포커스하지
+        // 않은 상태(body)는 기존처럼 반영한다 — 어차피 뺏을 포커스가
+        // 없고, DOM 셀렉션을 읽는 오버레이(ace 활성 라인)가 동작해야 한다
+        const ae = el.ownerDocument.activeElement;
+        if (ae && ae !== el.ownerDocument.body && !el.contains(ae)) {
+            pendingSel = true;
+            paintOverlays();
+            return;
+        }
+        pendingSel = false;
         if (sel.type !== "text") {
+            // 노드 셀렉션 — DOM 캐럿을 노드 요소의 경계로 고정한다 (PM 관례).
+            // 고정하지 않으면 팝 닫힘·포커스 복귀 등으로 브라우저가 캐럿을
+            // 옮길 때 selectionchange가 그 위치를 읽어 노드 셀렉션을
+            // 되감는다 — 경계에 고정하면 이후 이벤트는 같은 위치를 읽는다
+            const hit = el.querySelector(`[${PATH_ATTR}="${sel.path.join(",")}"]`);
+            const host = hit?.closest(".me-node-view") ?? hit;
+            const pi = sel.path[sel.path.length - 1];
+            if (host?.parentNode && pi != null) {
+                const idx = Array.prototype.indexOf.call(host.parentNode.childNodes, host);
+                const ds = el.ownerDocument.getSelection();
+                ds?.setBaseAndExtent(host.parentNode, idx, host.parentNode, idx);
+                // 실제로 읽히는 Point를 기록 — childNodes 인덱스와 domToPoint의
+                // 요소 인덱스가 어긋나도 이후 selectionchange는 같은 값을 읽는다
+                const back = readDomSel();
+                const bp = point(sel.path.slice(0, -1), pi);
+                lastApplied = back ?? { anchor: bp, focus: bp };
+            }
             paintOverlays();
             return;
         }
@@ -88,6 +123,10 @@ export function bindEditorInput(editor, el) {
         const s = readDomSel();
         if (!s)
             return;
+        // 흡수한 DOM 위치를 확인된 값으로 기록 — 이 위치에 대한 지연
+        // selectionchange(클릭 직후 키 입력 등)가 도착해도 "사용자가
+        // 새로 움직인 셀렉션"으로 오인하지 않게 한다 (노드 셀렉션 붕괴 방지)
+        lastApplied = s;
         const cur = editor.state.selection;
         if (cur.type === "text" &&
             pointEq(cur.anchor, s.anchor) &&
@@ -427,6 +466,12 @@ export function bindEditorInput(editor, el) {
                 .setSelection(textSelection({ path: [], offset: 0 }, { path: [], offset: editor.state.doc.content?.length ?? 0 })));
             return;
         }
+        // 클릭 직후 키 입력처럼 selectionchange가 아직 도착하지 않은 창에는
+        // doc 셀렉션이 stale하다 — PM domObserver.flush 관례로 키 처리 전에
+        // DOM 셀렉션을 먼저 흡수한다. 노드 셀렉션 중엔 DOM 캐럿이 무의미한
+        // stale 위치라 덮어쓰지 않는다
+        if (editor.state.selection.type !== "node")
+            syncDocSelection();
         // 노드 셀렉션(이미지 클릭 등) — DOM 캐럿이 없으므로 네이티브
         // 키 동작은 모두 무시하고 모델에서 처리한다. Backspace/Delete는
         // 노드 삭제, Enter는 노드 뒤에 새 블록, 화살표/Escape는 텍스트
@@ -536,6 +581,25 @@ export function bindEditorInput(editor, el) {
         const sel = readDomSel();
         if (!sel)
             return;
+        // 노드 셀렉션 중 도착한 selectionchange — DOM 캐럿은 우리가 노드
+        // 경계에 고정한 앵커이거나 선택 전 stale 위치다. 노드 자체의
+        // 경계 포인트(앞/뒤)나 마지막 확인 위치와 같으면 사용자가 실제로
+        // 움직인 게 아니므로 노드 셀렉션을 유지한다.
+        // (DOM 위치가 바뀌었다면 진짜 클릭/이동 — 텍스트 셀렉션으로 붕괴)
+        if (editor.state.selection.type === "node") {
+            const np = editor.state.selection.path;
+            const ni = np[np.length - 1] ?? 0;
+            const nparent = np.slice(0, -1);
+            const atNodeBoundary = pointEq(sel.anchor, point(nparent, ni)) ||
+                pointEq(sel.anchor, point(nparent, ni + 1));
+            const unchanged = lastApplied &&
+                pointEq(lastApplied.anchor, sel.anchor) &&
+                pointEq(lastApplied.focus, sel.focus);
+            if (atNodeBoundary || unchanged) {
+                paintOverlays();
+                return;
+            }
+        }
         // 확인한 DOM 위치를 기록 — 이후 변경분만 "사용자 이동"으로 본다
         lastApplied = sel;
         paintOverlays();
@@ -549,6 +613,12 @@ export function bindEditorInput(editor, el) {
         // 대기 서식(storedMarks)은 커서 이동에도 유지한다 — GDocs/Word 관례
         editor.dispatch(editor.state.tr().setSelection(next));
     };
+    // 포커스가 에디터로 돌아오면 건너뛴 DOM 셀렉션을 동기화한다 —
+    // 찾기 바에서 내비게이션한 뒤 닫히면 마지막 매치에 캐럿이 선다
+    const onFocusIn = () => {
+        if (pendingSel)
+            restoreSelection();
+    };
     el.addEventListener("beforeinput", onBeforeInput);
     el.addEventListener("keydown", onKeydown);
     el.addEventListener("mousedown", onMouseDown);
@@ -557,6 +627,7 @@ export function bindEditorInput(editor, el) {
     el.addEventListener("drop", onDrop);
     el.addEventListener("compositionstart", ime.start);
     el.addEventListener("compositionend", ime.end);
+    el.addEventListener("focusin", onFocusIn);
     el.ownerDocument.addEventListener("selectionchange", onSelectionChange);
     // 오버레이 초기 페인트 — React/Vue2처럼 마운트 layoutEffect가
     // 바인딩보다 먼저 도는 렌더러에서도 첫 커밋 전에 오버레이가
@@ -577,6 +648,7 @@ export function bindEditorInput(editor, el) {
             el.removeEventListener("drop", onDrop);
             el.removeEventListener("compositionstart", ime.start);
             el.removeEventListener("compositionend", ime.end);
+            el.removeEventListener("focusin", onFocusIn);
             el.ownerDocument.removeEventListener("selectionchange", onSelectionChange);
         },
         restoreSelection,