@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/components/SlashCommandMenu.svelte

@@ -31,40 +31,48 @@
   import { insertTableSized } from "../utils/table";
   import type { SlashMenuItem, ToolbarFeature, PromptHandler } from "../types";
   import type { Component } from "svelte";
+  import { defaultTranslator, type EditorMessageKey, type EditorTranslator } from "../i18n";
 
   const SI = 14;
 
-  /** 각 feature가 속하는 섹션 라벨 */
-  const SECTION_MAP: Record<string, string> = {
-    "code-block": "자주 쓰는",
-    math: "자주 쓰는",
-    file: "미디어",
-    pdf: "미디어",
-    paragraph: "기본",
-    h1: "기본",
-    h2: "기본",
-    h3: "기본",
-    mbus: "미디어",
-    video: "미디어",
-    card: "블록",
-    "bullet-list": "리스트",
-    "ordered-list": "리스트",
-    checklist: "리스트",
-    toggle: "리스트",
-    blockquote: "블록",
-    "horizontal-rule": "블록",
-    table: "레이아웃",
-    "columns-2": "레이아웃",
-    "columns-3": "레이아웃",
-    tabs: "레이아웃",
-    link: "미디어",
-    image: "미디어",
+  /** 각 feature가 속하는 섹션(메시지 키 — 라벨은 렌더 시 `t()` 로 푼다) */
+  const SECTION_MAP: Record<string, EditorMessageKey> = {
+    "code-block": "sectionFrequent",
+    math: "sectionFrequent",
+    file: "sectionMedia",
+    pdf: "sectionMedia",
+    paragraph: "sectionBasic",
+    h1: "sectionBasic",
+    h2: "sectionBasic",
+    h3: "sectionBasic",
+    mbus: "sectionMedia",
+    video: "sectionMedia",
+    card: "sectionBlock",
+    "bullet-list": "sectionList",
+    "ordered-list": "sectionList",
+    checklist: "sectionList",
+    toggle: "sectionList",
+    blockquote: "sectionBlock",
+    "horizontal-rule": "sectionBlock",
+    table: "sectionLayout",
+    "columns-2": "sectionLayout",
+    "columns-3": "sectionLayout",
+    tabs: "sectionLayout",
+    link: "sectionMedia",
+    image: "sectionMedia",
   };
-  const SECTION_ORDER = ["자주 쓰는", "기본", "리스트", "블록", "레이아웃", "미디어"];
+  const SECTION_ORDER: EditorMessageKey[] = [
+    "sectionFrequent",
+    "sectionBasic",
+    "sectionList",
+    "sectionBlock",
+    "sectionLayout",
+    "sectionMedia",
+  ];
 
   const SLASH_MENU_ITEMS_DATA: {
     feature: ToolbarFeature;
-    label: string;
+    labelKey: EditorMessageKey;
     keywords: string;
     icon: Component<{ size?: number }>;
     /** 항목 오른쪽에 작게 보여 줄 입력 규칙. 없으면 안 그린다. */
@@ -74,19 +82,21 @@
      * ⚠️ 토글 제목처럼 **같은 feature 인데 다른 자리**에 놓아야 하는 것 때문에 필요하다
      * (셋 다 `toggle` 이지만 토글은 리스트, 토글 제목은 제목 옆이 맞다).
      */
-    section?: string;
-    command: (editor: Editor) => void;
+    /** `labelKey` 의 `{…}` 자리 값 (토글 제목 1~3 처럼 같은 키를 나눠 쓸 때). */
+    labelParams?: Record<string, string | number>;
+    section?: EditorMessageKey;
+    command: (editor: Editor, t: EditorTranslator) => void;
   }[] = [
     {
       feature: "paragraph",
-      label: "본문",
+      labelKey: "paragraph",
       keywords: "paragraph text 본문 단락",
       icon: Type,
       command: (editor) => editor.chain().focus().setParagraph().run(),
     },
     {
       feature: "h1",
-      label: "제목 1",
+      labelKey: "heading1",
       keywords: "heading h1 제목",
       icon: Heading1,
       shortcut: "# ",
@@ -95,7 +105,7 @@
     },
     {
       feature: "h2",
-      label: "제목 2",
+      labelKey: "heading2",
       keywords: "heading h2 제목",
       icon: Heading2,
       shortcut: "## ",
@@ -104,7 +114,7 @@
     },
     {
       feature: "h3",
-      label: "제목 3",
+      labelKey: "heading3",
       keywords: "heading h3 제목",
       icon: Heading3,
       shortcut: "### ",
@@ -113,7 +123,7 @@
     },
     {
       feature: "bullet-list",
-      label: "글머리 목록",
+      labelKey: "bulletList",
       keywords: "bullet list 목록 리스트",
       icon: List,
       shortcut: "- ",
@@ -121,7 +131,7 @@
     },
     {
       feature: "ordered-list",
-      label: "번호 목록",
+      labelKey: "orderedList",
       keywords: "ordered number list 번호 리스트",
       icon: ListOrdered,
       shortcut: "1. ",
@@ -129,7 +139,7 @@
     },
     {
       feature: "checklist",
-      label: "체크리스트",
+      labelKey: "taskList",
       keywords: "checklist task todo 체크 할일",
       icon: CheckSquare,
       shortcut: "[] ",
@@ -137,7 +147,7 @@
     },
     {
       feature: "blockquote",
-      label: "인용문",
+      labelKey: "blockquote",
       keywords: "quote blockquote 인용",
       icon: Quote,
       shortcut: "\" ",
@@ -145,7 +155,7 @@
     },
     {
       feature: "horizontal-rule",
-      label: "구분선",
+      labelKey: "divider",
       keywords: "divider hr horizontal rule 구분",
       icon: Minus,
       shortcut: "---",
@@ -153,7 +163,7 @@
     },
     {
       feature: "code-block",
-      label: "코드",
+      labelKey: "code",
       keywords: "code 코드 블록 cpp c++ python 파이썬",
       icon: Code2,
       shortcut: "```",
@@ -162,7 +172,7 @@
     },
     {
       feature: "math",
-      label: "수식",
+      labelKey: "math",
       keywords: "math latex tex 수식 공식 수학 katex 시그마 분수",
       icon: Sigma,
       shortcut: "$$",
@@ -172,7 +182,7 @@
     },
     {
       feature: "toggle",
-      label: "토글",
+      labelKey: "toggle",
       keywords: "toggle details 접기 펼치기 토글",
       icon: ChevronRight,
       shortcut: "> ",
@@ -188,8 +198,9 @@
      */
     {
       feature: "toggle",
-      label: "토글 제목 1",
-      section: "기본",
+      labelKey: "toggleHeading",
+      labelParams: { level: 1 },
+      section: "sectionBasic",
       keywords: "toggle heading 접기 제목 토글제목 h1",
       icon: ToggleHeading1,
       shortcut: "# > ",
@@ -197,8 +208,9 @@
     },
     {
       feature: "toggle",
-      label: "토글 제목 2",
-      section: "기본",
+      labelKey: "toggleHeading",
+      labelParams: { level: 2 },
+      section: "sectionBasic",
       keywords: "toggle heading 접기 제목 토글제목 h2",
       icon: ToggleHeading2,
       shortcut: "## > ",
@@ -206,8 +218,9 @@
     },
     {
       feature: "toggle",
-      label: "토글 제목 3",
-      section: "기본",
+      labelKey: "toggleHeading",
+      labelParams: { level: 3 },
+      section: "sectionBasic",
       keywords: "toggle heading 접기 제목 토글제목 h3",
       icon: ToggleHeading3,
       shortcut: "### > ",
@@ -215,7 +228,7 @@
     },
     {
       feature: "table",
-      label: "표",
+      labelKey: "table",
       keywords: "table 표 테이블",
       icon: TableIcon,
       command: (editor) =>
@@ -223,59 +236,59 @@
     },
     {
       feature: "columns-2",
-      label: "2단 컬럼",
+      labelKey: "columns2",
       keywords: "column 컬럼 2단 분할",
       icon: Columns2,
       command: (editor) => editor.chain().focus().setColumns(2).run(),
     },
     {
       feature: "columns-3",
-      label: "3단 컬럼",
+      labelKey: "columns3",
       keywords: "column 컬럼 3단 분할",
       icon: Columns3,
       command: (editor) => editor.chain().focus().setColumns(3).run(),
     },
     {
       feature: "tabs",
-      label: "탭",
+      labelKey: "tabs",
       keywords: "tab tabs 탭 탭블록 전환 분할",
       icon: PanelTop,
       command: (editor) => editor.chain().focus().setTabs(3).run(),
     },
     {
       feature: "image",
-      label: "이미지",
+      labelKey: "image",
       keywords: "image 이미지 사진 img",
       icon: ImageIcon,
-      command: (editor) => {
-        const url = window.prompt("이미지 URL을 입력하세요");
+      command: (editor, t) => {
+        const url = window.prompt(t("promptImageUrl"));
         if (url) editor.chain().focus().setImage({ src: url }).run();
       },
     },
     {
       feature: "video",
-      label: "영상",
+      labelKey: "video",
       keywords: "video 영상 유튜브 youtube vimeo 동영상",
       icon: Youtube,
-      command: (editor) => {
+      command: (editor, t) => {
         // 붙여넣은 주소는 `setVideoEmbed` 가 임베드용으로 바꿔 준다.
-        const url = window.prompt("영상 URL을 입력하세요 (유튜브·Vimeo 등)");
+        const url = window.prompt(t("promptVideoUrl"));
         if (url) editor.chain().focus().setVideoEmbed({ src: url }).run();
       },
     },
     {
       feature: "mbus",
-      label: "미디버스 영상",
+      labelKey: "mbusVideo",
       keywords: "mbus video 미디버스 영상",
       icon: Tv,
-      command: (editor) => {
-        const url = window.prompt("미디버스 영상 URL을 입력하세요");
+      command: (editor, t) => {
+        const url = window.prompt(t("promptMbusUrl"));
         if (url) editor.chain().focus().setMbusVideo({ src: url }).run();
       },
     },
     {
       feature: "card",
-      label: "카드",
+      labelKey: "card",
       keywords: "card 카드 상자 박스 강조 배경",
       icon: SquareDashed,
       command: (editor) => {
@@ -284,11 +297,11 @@
     },
     {
       feature: "link",
-      label: "링크",
+      labelKey: "link",
       keywords: "link url 링크 하이퍼",
       icon: LinkIcon,
-      command: (editor) => {
-        const url = window.prompt("링크 URL을 입력하세요");
+      command: (editor, t) => {
+        const url = window.prompt(t("promptLinkUrl"));
         if (url)
           editor
             .chain()
@@ -311,6 +324,7 @@
     onPromptLink,
     onPromptMbus,
     onPromptVideo,
+    t = defaultTranslator,
   }: {
     editor: Editor;
     features: Set<ToolbarFeature>;
@@ -330,6 +344,8 @@
      * 기본 대화상자라 화면이 멈추고 앱과 모양이 따로 논다(사용자 지적).
      */
     onPromptVideo?: PromptHandler;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
   } = $props();
 
   async function runItem(item: (typeof SLASH_MENU_ITEMS_DATA)[number]) {
@@ -358,7 +374,7 @@
       if (url) editor.chain().focus().setMbusVideo({ src: url }).run();
       return;
     }
-    item.command(editor);
+    item.command(editor, t);
   }
 
   let selectedIndex = $state(0);
@@ -370,7 +386,7 @@
     if (onFileUpload) {
       items.push({
         feature: "file" as ToolbarFeature,
-        label: "파일 첨부",
+        labelKey: "fileAttach",
         keywords: "file attach 파일 첨부",
         icon: Paperclip,
         command: () => onFileUpload!(),
@@ -379,7 +395,7 @@
     if (onPdfUpload) {
       items.push({
         feature: "pdf" as ToolbarFeature,
-        label: "PDF 파일",
+        labelKey: "pdfFile",
         keywords: "pdf 파일 문서",
         icon: FileText,
         command: () => onPdfUpload!(),
@@ -393,7 +409,7 @@
     return q
       ? allItems.filter(
           (item) =>
-            item.label.toLowerCase().includes(q) ||
+            t(item.labelKey, item.labelParams).toLowerCase().includes(q) ||
             item.keywords.toLowerCase().includes(q),
         )
       : allItems;
@@ -458,7 +474,7 @@
     bind:this={menuEl}
     class="slash-menu z-50 bg-popover border border-border rounded-xl shadow-xl p-2"
   >
-    <p class="text-xs text-muted-foreground px-2 py-1">결과 없음</p>
+    <p class="text-xs text-muted-foreground px-2 py-1">{t('noResult')}</p>
   </div>
 {:else}
   <div
@@ -467,10 +483,10 @@
   >
     {#each SECTION_ORDER as section}
       {@const sectionItems = filtered.filter(
-        (it) => (it.section ?? SECTION_MAP[it.feature] ?? '기본') === section,
+        (it) => (it.section ?? SECTION_MAP[it.feature] ?? 'sectionBasic') === section,
       )}
       {#if sectionItems.length > 0}
-        <p class="slash-section">{section}</p>
+        <p class="slash-section">{t(section)}</p>
         {#each sectionItems as item}
           {@const i = filtered.indexOf(item)}
           <button
@@ -492,7 +508,7 @@
             <span class="slash-icon">
               <item.icon size={SI} />
             </span>
-            <span class="slash-label">{item.label}</span>
+            <span class="slash-label">{t(item.labelKey, item.labelParams)}</span>
             {#if item.shortcut}
               <!--
                 쳐서 만드는 법을 항목 옆에 적어 둔다(사용자 요청). 메뉴를 한 번 쓰고 나면

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

@@ -1,6 +1,7 @@
 import type { Editor } from "@tiptap/core";
 import type { ToolbarFeature, PromptHandler } from "../types";
 import type { Component } from "svelte";
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     editor: Editor;
     features: Set<ToolbarFeature>;
@@ -20,6 +21,8 @@ type $$ComponentProps = {
      * 기본 대화상자라 화면이 멈추고 앱과 모양이 따로 논다(사용자 지적).
      */
     onPromptVideo?: PromptHandler;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const SlashCommandMenu: Component<$$ComponentProps, {}, "">;
 type SlashCommandMenu = ReturnType<typeof SlashCommandMenu>;

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

@@ -1 +1 @@
-{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA8B3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAwcJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA8B3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAsdJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/TableBubbleMenu.svelte

@@ -19,26 +19,34 @@
   import { onMount } from "svelte";
   import { cn } from "../utils/cn";
   import { splitCellPreservingHeaders } from "../utils/splitCell";
+  import { defaultTranslator, type EditorMessageKey, type EditorTranslator } from "../i18n";
 
-  const PRESET_COLORS = [
-    { label: "없음", value: "" },
-    { label: "밝은 회색", value: "#f1f5f9" },
-    { label: "밝은 파랑", value: "#dbeafe" },
-    { label: "밝은 초록", value: "#dcfce7" },
-    { label: "밝은 노랑", value: "#fef9c3" },
-    { label: "밝은 주황", value: "#ffedd5" },
-    { label: "밝은 빨강", value: "#fee2e2" },
-    { label: "밝은 보라", value: "#ede9fe" },
-    { label: "밝은 분홍", value: "#fce7f3" },
+  const PRESET_COLORS: { labelKey: EditorMessageKey; value: string }[] = [
+    { labelKey: "bgNone", value: "" },
+    { labelKey: "bgGray", value: "#f1f5f9" },
+    { labelKey: "bgBlue", value: "#dbeafe" },
+    { labelKey: "bgGreen", value: "#dcfce7" },
+    { labelKey: "bgYellow", value: "#fef9c3" },
+    { labelKey: "bgOrange", value: "#ffedd5" },
+    { labelKey: "bgRed", value: "#fee2e2" },
+    { labelKey: "bgPurple", value: "#ede9fe" },
+    { labelKey: "bgPink", value: "#fce7f3" },
   ];
 
-  const LINE_HEIGHTS = [
-    { label: "좁게", value: "0.8" },
-    { label: "보통", value: "1.0" },
-    { label: "넓게", value: "1.4" },
+  const LINE_HEIGHTS: { labelKey: EditorMessageKey; value: string }[] = [
+    { labelKey: "spacingNarrow", value: "0.8" },
+    { labelKey: "spacingNormal", value: "1.0" },
+    { labelKey: "spacingWide", value: "1.4" },
   ];
 
-  let { editor }: { editor: Editor } = $props();
+  let {
+    editor,
+    t = defaultTranslator,
+  }: {
+    editor: Editor;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
+  } = $props();
 
   let visible = $state(false);
   let pos = $state({ top: 0, left: 0, width: 0 });
@@ -143,7 +151,7 @@
     onmousedown={(e) => e.preventDefault()}
     role="toolbar"
     tabindex="-1"
-    aria-label="표 편집"
+    aria-label={t('tableEdit')}
     style="top: {pos.top}px; left: {pos.left}px; width: {pos.width}px"
   >
     <div
@@ -163,7 +171,7 @@
         >
           <ArrowUpToLine size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">행 위에 추가</span>
+        <span class="hce-table-btn-tooltip">{t('rowAddAbove')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -179,7 +187,7 @@
         >
           <ArrowDownToLine size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">행 아래에 추가</span>
+        <span class="hce-table-btn-tooltip">{t('rowAddBelow')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -196,7 +204,7 @@
         >
           <ArrowLeftToLine size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">열 왼쪽에 추가</span>
+        <span class="hce-table-btn-tooltip">{t('colAddLeft')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -213,7 +221,7 @@
         >
           <ArrowRightToLine size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">열 오른쪽에 추가</span>
+        <span class="hce-table-btn-tooltip">{t('colAddRight')}</span>
       </div>
 
       <div class="w-px h-5 bg-border mx-0.5"></div>
@@ -232,7 +240,7 @@
         >
           <PanelTop size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">헤더 행 토글</span>
+        <span class="hce-table-btn-tooltip">{t('headerRowToggle')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -249,7 +257,7 @@
         >
           <PanelLeft size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">헤더 열 토글</span>
+        <span class="hce-table-btn-tooltip">{t('headerColToggle')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -265,7 +273,7 @@
         >
           <Combine size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">셀 병합</span>
+        <span class="hce-table-btn-tooltip">{t('cellMerge')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -281,7 +289,7 @@
         >
           <SplitSquareHorizontal size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">셀 분할</span>
+        <span class="hce-table-btn-tooltip">{t('cellSplit')}</span>
       </div>
 
       <div class="w-px h-5 bg-border mx-0.5"></div>
@@ -299,7 +307,7 @@
           >
             <UnfoldVertical size={iconSize} />
           </button>
-          <span class="hce-table-btn-tooltip">줄 간격</span>
+          <span class="hce-table-btn-tooltip">{t('lineSpacing')}</span>
         </div>
         {#if showLineHeight}
           <div
@@ -337,7 +345,7 @@
                   showLineHeight = false;
                 }}
               >
-                {lh.label}
+                {t(lh.labelKey)}
               </button>
             {/each}
           </div>
@@ -387,7 +395,7 @@
         >
           <EqualApproximately size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">너비 동일</span>
+        <span class="hce-table-btn-tooltip">{t('widthEqual')}</span>
       </div>
 
       <!-- Background color -->
@@ -403,7 +411,7 @@
           >
             <Paintbrush size={iconSize} />
           </button>
-          <span class="hce-table-btn-tooltip">셀 배경색</span>
+          <span class="hce-table-btn-tooltip">{t('cellBackground')}</span>
         </div>
         {#if showColors}
           <div
@@ -413,13 +421,13 @@
             <p
               class="text-xs font-medium text-muted-foreground mb-1.5 px-1"
             >
-              배경색
+              {t('background')}
             </p>
             <div class="grid grid-cols-3 gap-1">
               {#each PRESET_COLORS as c}
                 <button
                   type="button"
-                  title={c.label}
+                  title={t(c.labelKey)}
                   class="w-full h-7 rounded-md border border-border transition-transform hover:scale-110"
                   style="background: {c.value ||
                     'transparent'}; {!c.value
@@ -456,7 +464,7 @@
         >
           <RowsIcon size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">행 삭제</span>
+        <span class="hce-table-btn-tooltip">{t('rowDelete')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -472,7 +480,7 @@
         >
           <ColumnsIcon size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">열 삭제</span>
+        <span class="hce-table-btn-tooltip">{t('colDelete')}</span>
       </div>
 
       <div class="hce-table-btn-wrap">
@@ -488,7 +496,7 @@
         >
           <Trash2 size={iconSize} />
         </button>
-        <span class="hce-table-btn-tooltip">표 삭제</span>
+        <span class="hce-table-btn-tooltip">{t('tableDelete')}</span>
       </div>
     </div>
   </div>

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

@@ -1,6 +1,9 @@
 import type { Editor } from "@tiptap/core";
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     editor: Editor;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const TableBubbleMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type TableBubbleMenu = ReturnType<typeof TableBubbleMenu>;

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

@@ -1 +1 @@
-{"version":3,"file":"TableBubbleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TableBubbleMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAqB1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAqY7C,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TableBubbleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TableBubbleMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAoB3C,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAyYJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}