@teriusu/rich-editor 0.10.8 → 0.11.1

package/dist/components/FixedToolbar.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Editor } from "@tiptap/core";
 import type { Snippet } from "svelte";
 import type { ToolbarFeature, PromptHandler } from "../types";
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     editor: Editor;
     features: Set<ToolbarFeature>;
@@ -25,6 +26,8 @@ type $$ComponentProps = {
      * 여기에 넣으면 툴바의 flex 행에 그대로 얹혀 정렬이 저절로 맞는다.
      */
     toolbarEnd?: Snippet;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const FixedToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type FixedToolbar = ReturnType<typeof FixedToolbar>;

package/dist/components/FixedToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAwCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;OAKG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuiBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAwCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAElE,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;OAKG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAyiBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/FloatingHelper.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { Sigma, Code2 } from "lucide-svelte";
+  import type { ToolbarFeature } from "../types";
+  import {
+    floatingHelperVisible,
+    helperInsertMath,
+    helperInsertCodeBlock,
+    FLOATING_HELPER_ON_CLASS,
+  } from "../utils/floating-helper";
+  import { defaultTranslator, type EditorTranslator } from "../i18n";
+
+  /*
+   * 빈 줄 플로팅 헬퍼의 **화면 절반** — 판정·커맨드는 `utils/floating-helper.ts`.
+   *
+   * 포커스된 최상위 빈 문단 옆에 "/로 명령어 입력" 안내와 수식·코드 즉시 삽입 버튼을
+   * 띄운다(main 정올 `Floating.svelte` 의 직접 구현 이식). 에디터 컨테이너
+   * (`.hce-editor-wrapper`, `position:relative`) 안에 `position:absolute` 로 그린다 —
+   * 포털이 없고 문서 흐름의 자리도 차지하지 않는다.
+   *
+   * ⚠️ 위치 계산 셋이 main 사고 이력의 재발 방지다:
+   * - `.hce-floating-helper` 는 CSS 에서 **처음부터** `position:absolute; width:max-content`
+   *   다. 블록 폭으로 측정된 뒤에 좁히면 넘침 보정이 화면 밖(left:-437px)으로 민 전력이
+   *   있다(main floating-ui 시절).
+   * - 등장 애니메이션은 **안쪽 요소에만** 건다. 바깥(위치 담당)에 transform 을 걸면
+   *   위치가 애니메이션 프레임에 덮인다(main `79f64c18`→`c9840fdb`).
+   * - 슬래시·이모지 메뉴가 열리면 `suppressed` 로 끈다 — 그 둘은 `position:fixed`
+   *   뷰포트 좌표라 좌표계가 달라 서로 피해 갈 수 없다.
+   */
+  let {
+    editor,
+    features,
+    suppressed = false,
+    t = defaultTranslator,
+  }: {
+    editor: Editor;
+    features: Set<ToolbarFeature>;
+    suppressed?: boolean;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
+  } = $props();
+
+  let visible = $state(false);
+  let pos = $state({ top: 0, left: 0 });
+  let helperEl = $state<HTMLDivElement>();
+  let focused = $state(false);
+
+  const showMath = $derived(features.has("math"));
+  const showCode = $derived(features.has("code-block"));
+  const hasButtons = $derived(showMath || showCode);
+
+  function updatePosition() {
+    const wrapper = editor.view.dom.closest(".hce-editor-wrapper") as HTMLElement | null;
+    if (!wrapper) return;
+    const { from } = editor.state.selection;
+    const caret = editor.view.coordsAtPos(from);
+    const box = wrapper.getBoundingClientRect();
+    let left = caret.right - box.left + 8;
+    let top = caret.top - box.top;
+    /*
+     * 요소가 이미 서 있으면 실측으로 보정한다 — 세로는 커서 줄에 가운데 맞춤,
+     * 가로는 래퍼 오른쪽을 넘으면 안으로 죈다(첫 프레임은 아래 `$effect` 가 재계산).
+     */
+    if (helperEl) {
+      const h = helperEl.offsetHeight;
+      if (h) top = caret.top - box.top + (caret.bottom - caret.top - h) / 2;
+      const w = helperEl.offsetWidth;
+      const maxLeft = wrapper.clientWidth - w - 4;
+      if (w && left > maxLeft) left = Math.max(4, maxLeft);
+    }
+    pos = { top, left };
+  }
+
+  function evaluate() {
+    const show = floatingHelperVisible(editor, { focused, suppressed });
+    if (show) updatePosition();
+    visible = show;
+    /* placeholder 겹침 방지 — 근거는 `FLOATING_HELPER_ON_CLASS` 주석. */
+    editor.view.dom.classList.toggle(FLOATING_HELPER_ON_CLASS, show);
+  }
+
+  $effect(() => {
+    focused = editor.view.hasFocus();
+    const onFocus = () => {
+      focused = true;
+    };
+    const onBlur = () => {
+      focused = false;
+    };
+    editor.on("transaction", evaluate);
+    editor.on("focus", onFocus);
+    editor.on("blur", onBlur);
+    return () => {
+      editor.off("transaction", evaluate);
+      editor.off("focus", onFocus);
+      editor.off("blur", onBlur);
+      editor.view.dom.classList.remove(FLOATING_HELPER_ON_CLASS);
+    };
+  });
+
+  /* 포커스·suppressed 가 바뀌면 재판정 (트랜잭션 없이 바뀌는 두 축). */
+  $effect(() => {
+    focused;
+    suppressed;
+    evaluate();
+  });
+
+  /* 마운트 직후 실측(폭·높이)으로 한 번 더 자리를 잡는다. */
+  $effect(() => {
+    if (visible && helperEl) updatePosition();
+  });
+
+  /* 래퍼 안쪽이 스크롤되는 호스트 대비 — 슬래시·이모지 메뉴와 같은 캡처 구독. */
+  $effect(() => {
+    if (!visible) return;
+    const onMove = () => updatePosition();
+    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onMove);
+    return () => {
+      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onMove);
+    };
+  });
+</script>
+
+{#if visible}
+  <!--
+    mousedown preventDefault: 버튼을 누르는 순간 에디터가 blur 되면 클릭이 닿기 전에
+    헬퍼가 사라진다(버튼과 함께). 포커스를 아예 뺏기지 않는 쪽이 main 의
+    `setTimeout(focus)` 복원보다 깔끔하다 — 툴바들이 쓰는 표준 수법.
+  -->
+  <div
+    bind:this={helperEl}
+    class="hce-floating-helper"
+    style="top: {pos.top}px; left: {pos.left}px"
+    role="toolbar"
+    tabindex="-1"
+    aria-label={t('emptyLineTools')}
+    onmousedown={(e) => e.preventDefault()}
+  >
+    <div class="hce-floating-helper-inner">
+      <span class="hce-floating-helper-hint">{t('floatingHint')}{hasButtons ? t('floatingHintOr') : ""}</span>
+      {#if showMath}
+        <button
+          type="button"
+          class="hce-floating-plus"
+          title={t('math')}
+          aria-label={t('insertMath')}
+          onclick={() => helperInsertMath(editor)}
+        >
+          <Sigma size={14} />
+        </button>
+      {/if}
+      {#if showCode}
+        <button
+          type="button"
+          class="hce-floating-plus"
+          title={t('codeBlock')}
+          aria-label={t('insertCodeBlock')}
+          onclick={() => helperInsertCodeBlock(editor)}
+        >
+          <Code2 size={14} />
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  /*
+   * ⚠️ `position:absolute` + `width:max-content` 는 **여기 고정**이다 — 위치·크기가
+   * 런타임 계산보다 먼저 서 있어야 실측 보정(`updatePosition`)이 옳은 폭을 잰다.
+   * z-index 100: 정올 sticky 브레드크럼(z:93)보다 위, 모달(z-50=50 계열 Tailwind 층과는
+   * 별개 스택) 아래를 노린 값.
+   */
+  .hce-floating-helper {
+    position: absolute;
+    width: -moz-max-content;
+    width: max-content;
+    z-index: 100;
+    pointer-events: auto;
+  }
+
+  /* 등장 애니메이션은 안쪽에만 — 바깥 transform 은 위치 계산과 충돌한다. */
+  .hce-floating-helper-inner {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    animation: hce-floating-helper-in 0.18s ease-out;
+  }
+
+  @keyframes hce-floating-helper-in {
+    from {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hce-floating-helper-inner {
+      animation: none;
+    }
+  }
+
+  .hce-floating-helper-hint {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    opacity: 0.6;
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    white-space: nowrap;
+  }
+</style>

package/dist/components/FloatingHelper.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Editor } from "@tiptap/core";
+import type { ToolbarFeature } from "../types";
+import { type EditorTranslator } from "../i18n";
+type $$ComponentProps = {
+    editor: Editor;
+    features: Set<ToolbarFeature>;
+    suppressed?: boolean;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
+};
+declare const FloatingHelper: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingHelper = ReturnType<typeof FloatingHelper>;
+export default FloatingHelper;
+//# sourceMappingURL=FloatingHelper.svelte.d.ts.map

package/dist/components/FloatingHelper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingHelper.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FloatingHelper.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAO/C,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAElE,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AA0IJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/InputModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { X } from "lucide-svelte";
+  import { defaultTranslator, type EditorTranslator } from "../i18n";
 
   let {
     title,
@@ -7,12 +8,15 @@
     defaultValue = "",
     onConfirm,
     onCancel,
+    t = defaultTranslator,
   }: {
     title: string;
     placeholder?: string;
     defaultValue?: string;
     onConfirm: (value: string) => void;
     onCancel: () => void;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
   } = $props();
 
   let value = $state(defaultValue);
@@ -71,7 +75,7 @@
           type="button"
           class="p-1 rounded-md hover:bg-muted text-muted-foreground"
           onclick={onCancel}
-          aria-label="닫기"
+          aria-label={t('close')}
         >
           <X size={14} />
         </button>
@@ -91,14 +95,14 @@
         class="px-3.5 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
         onclick={onCancel}
       >
-        취소
+        {t('cancel')}
       </button>
       <button
         type="button"
         class="px-3.5 py-1.5 text-sm rounded-md hce-btn-primary hover:opacity-90 transition-opacity"
         onclick={handleSubmit}
       >
-        확인
+        {t('confirm')}
       </button>
     </div>
   </div>

package/dist/components/InputModal.svelte.d.ts

@@ -1,9 +1,12 @@
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     title: string;
     placeholder?: string;
     defaultValue?: string;
     onConfirm: (value: string) => void;
     onCancel: () => void;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const InputModal: import("svelte").Component<$$ComponentProps, {}, "">;
 type InputModal = ReturnType<typeof InputModal>;

package/dist/components/InputModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA+EJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAElE,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAiFJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/MathModal.svelte

@@ -11,18 +11,22 @@
    */
   import { X } from "lucide-svelte";
   import katex from "katex";
+  import { defaultTranslator, type EditorMessageKey, type EditorTranslator } from "../i18n";
 
   let {
     latex = "",
     displayMode = false,
     onConfirm,
     onCancel,
+    t = defaultTranslator,
   }: {
     latex?: string;
     displayMode?: boolean;
     /** 빈 문자열로 확인하면 호출부가 노드를 지운다(편집 중일 때). */
     onConfirm: (value: string) => void;
     onCancel: () => void;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
   } = $props();
 
   let value = $state(latex);
@@ -87,27 +91,27 @@
    *
    * `$` 는 커서를 놓을 자리다(아래 `insert` 가 그 자리에 커서를 둔다). 없으면 끝에 놓인다.
    */
-  const SYMBOLS: { label: string; snippet: string; title: string }[] = [
-    { label: "x²", snippet: "^{$}", title: "위첨자" },
-    { label: "xᵢ", snippet: "_{$}", title: "아래첨자" },
-    { label: "a/b", snippet: "\\frac{$}{}", title: "분수" },
-    { label: "√", snippet: "\\sqrt{$}", title: "제곱근" },
-    { label: "∑", snippet: "\\sum_{i=1}^{n} $", title: "합" },
-    { label: "∏", snippet: "\\prod_{i=1}^{n} $", title: "곱" },
-    { label: "log", snippet: "\\log $", title: "로그" },
-    { label: "O(n)", snippet: "O($)", title: "빅오 표기" },
-    { label: "≤", snippet: "\\le $", title: "작거나 같다" },
-    { label: "≥", snippet: "\\ge $", title: "크거나 같다" },
-    { label: "≠", snippet: "\\ne $", title: "같지 않다" },
-    { label: "×", snippet: "\\times $", title: "곱하기" },
-    { label: "÷", snippet: "\\div $", title: "나누기" },
-    { label: "∈", snippet: "\\in $", title: "원소" },
-    { label: "∞", snippet: "\\infty $", title: "무한대" },
-    { label: "α", snippet: "\\alpha $", title: "알파" },
-    { label: "θ", snippet: "\\theta $", title: "세타" },
-    { label: "π", snippet: "\\pi $", title: "파이" },
-    { label: "→", snippet: "\\to $", title: "화살표" },
-    { label: "⋯", snippet: "\\cdots $", title: "가운데 말줄임" },
+  const SYMBOLS: { label: string; snippet: string; titleKey: EditorMessageKey }[] = [
+    { label: "x²", snippet: "^{$}", titleKey: "mathSuperscript" },
+    { label: "xᵢ", snippet: "_{$}", titleKey: "mathSubscript" },
+    { label: "a/b", snippet: "\\frac{$}{}", titleKey: "mathFraction" },
+    { label: "√", snippet: "\\sqrt{$}", titleKey: "mathSqrt" },
+    { label: "∑", snippet: "\\sum_{i=1}^{n} $", titleKey: "mathSum" },
+    { label: "∏", snippet: "\\prod_{i=1}^{n} $", titleKey: "mathProduct" },
+    { label: "log", snippet: "\\log $", titleKey: "mathLog" },
+    { label: "O(n)", snippet: "O($)", titleKey: "mathBigO" },
+    { label: "≤", snippet: "\\le $", titleKey: "mathLe" },
+    { label: "≥", snippet: "\\ge $", titleKey: "mathGe" },
+    { label: "≠", snippet: "\\ne $", titleKey: "mathNe" },
+    { label: "×", snippet: "\\times $", titleKey: "mathTimes" },
+    { label: "÷", snippet: "\\div $", titleKey: "mathDivide" },
+    { label: "∈", snippet: "\\in $", titleKey: "mathIn" },
+    { label: "∞", snippet: "\\infty $", titleKey: "mathInfinity" },
+    { label: "α", snippet: "\\alpha $", titleKey: "mathAlpha" },
+    { label: "θ", snippet: "\\theta $", titleKey: "mathTheta" },
+    { label: "π", snippet: "\\pi $", titleKey: "mathPi" },
+    { label: "→", snippet: "\\to $", titleKey: "mathArrow" },
+    { label: "⋯", snippet: "\\cdots $", titleKey: "mathCdots" },
   ];
 
   /**
@@ -158,13 +162,13 @@
   >
     <div class="flex items-center justify-between mb-3">
       <span class="text-sm font-semibold">
-        {displayMode ? "수식 블록" : "인라인 수식"}
+        {displayMode ? t('mathBlock') : t('mathInline')}
       </span>
       <button
         type="button"
         class="p-1 rounded-md hover:bg-muted text-muted-foreground"
         onclick={onCancel}
-        aria-label="닫기"
+        aria-label={t('close')}
       >
         <X size={14} />
       </button>
@@ -189,8 +193,8 @@
         <button
           type="button"
           class="hce-math-sym"
-          title={sym.title}
-          aria-label={sym.title}
+          title={t(sym.titleKey)}
+          aria-label={t(sym.titleKey)}
           onclick={() => insert(sym.snippet)}
         >
           {sym.label}
@@ -215,26 +219,26 @@
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html preview.html}
       {:else}
-        <span class="text-xs text-muted-foreground">미리보기</span>
+        <span class="text-xs text-muted-foreground">{t('preview')}</span>
       {/if}
     </div>
 
     <div class="hce-math-actions flex items-center justify-between gap-2 mt-4">
-      <span class="text-[11px] text-muted-foreground">⌘/Ctrl + Enter 로 확인</span>
+      <span class="text-[11px] text-muted-foreground">{t('mathConfirmHint')}</span>
       <div class="flex gap-2">
         <button
           type="button"
           class="px-3.5 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
           onclick={onCancel}
         >
-          취소
+          {t('cancel')}
         </button>
         <button
           type="button"
           class="px-3.5 py-1.5 text-sm rounded-md hce-btn-primary hover:opacity-90 transition-opacity"
           onclick={handleSubmit}
         >
-          확인
+          {t('confirm')}
         </button>
       </div>
     </div>

package/dist/components/MathModal.svelte.d.ts

@@ -1,9 +1,12 @@
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     latex?: string;
     displayMode?: boolean;
     /** 빈 문자열로 확인하면 호출부가 노드를 지운다(편집 중일 때). */
     onConfirm: (value: string) => void;
     onCancel: () => void;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const MathModal: import("svelte").Component<$$ComponentProps, {}, "">;
 type MathModal = ReturnType<typeof MathModal>;

package/dist/components/MathModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MathModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MathModal.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAuLJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MathModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MathModal.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAyLJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/MediaPickerModal.svelte

@@ -11,6 +11,7 @@
    * 업로드 함수도, 노드를 만드는 방법도 거기 있기 때문이다.
    */
   import { X } from "lucide-svelte";
+  import { defaultTranslator, type EditorTranslator } from "../i18n";
 
   let {
     title,
@@ -22,6 +23,7 @@
     onUpload,
     onLink,
     onCancel,
+    t = defaultTranslator,
   }: {
     title: string;
     /** 파일 선택창에서 거를 확장자. 파일 첨부처럼 아무거나 받는 곳은 비운다. */
@@ -35,6 +37,8 @@
     onUpload: (file: File) => void;
     onLink: (url: string) => void;
     onCancel: () => void;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
   } = $props();
 
   let tab: "upload" | "link" = $state("upload");
@@ -82,7 +86,7 @@
         type="button"
         class="p-1 rounded-md hover:bg-muted text-muted-foreground"
         onclick={onCancel}
-        aria-label="닫기"
+        aria-label={t('close')}
       >
         <X size={14} />
       </button>
@@ -101,7 +105,7 @@
         class:hce-picker-tab-on={tab === "upload"}
         onclick={() => (tab = "upload")}
       >
-        업로드
+        {t('upload')}
       </button>
       <button
         type="button"
@@ -111,7 +115,7 @@
         class:hce-picker-tab-on={tab === "link"}
         onclick={() => (tab = "link")}
       >
-        링크
+        {t('link')}
       </button>
     </div>
 

package/dist/components/MediaPickerModal.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     title: string;
     /** 파일 선택창에서 거를 확장자. 파일 첨부처럼 아무거나 받는 곳은 비운다. */
@@ -11,6 +12,8 @@ type $$ComponentProps = {
     onUpload: (file: File) => void;
     onLink: (url: string) => void;
     onCancel: () => void;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const MediaPickerModal: import("svelte").Component<$$ComponentProps, {}, "">;
 type MediaPickerModal = ReturnType<typeof MediaPickerModal>;

package/dist/components/MediaPickerModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPickerModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MediaPickerModal.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAkGJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MediaPickerModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MediaPickerModal.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAElE,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAoGJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}