@teriusu/rich-editor 0.10.8 → 0.11.1

package/dist/components/EmojiSuggestionMenu.svelte

@@ -0,0 +1,291 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import {
+    findEmojiQuery,
+    searchEmojis,
+    type EmojiSuggestion,
+  } from "../utils/emoji-suggestion";
+
+  /*
+   * 이모지 `:` 자동완성의 **화면 절반** — 판정·검색은 `utils/emoji-suggestion.ts`.
+   *
+   * 슬래시 메뉴와 달리 상태(열림·위치·검색어)를 이 컴포넌트가 전부 들고 있다.
+   * `TipTapEditor` 는 마운트만 한다 — 에디터 update/selectionUpdate 를 여기서 직접
+   * 구독하므로 에디터 쪽에 끼워 넣을 배선이 없다.
+   *
+   * 키보드는 슬래시 메뉴(`SlashCommandMenu`)와 같은 방식: 문서 캡처 단계에서 가로챈다.
+   * `preventDefault` 만으로 충분하다 — prosemirror-view 는 `defaultPrevented` 인 keydown
+   * 을 버린다(설치본 `input.ts` 확인). Tab 이동은 main(emoji.ts)에서 가져온 것이다.
+   */
+  /*
+   * `onOpenChange` 는 실표시(`visible`) 기준 알림이다 — `TipTapEditor` 가 빈 줄 플로팅
+   * 헬퍼를 이 팝업과 동시에 띄우지 않으려고 받는다. 열려 있어도 후보가 없어 안 그리면
+   * (`visible` 주석) 닫힌 것으로 알린다.
+   */
+  let {
+    editor,
+    onOpenChange,
+  }: { editor: Editor; onOpenChange?: (open: boolean) => void } = $props();
+
+  let open = $state(false);
+  let pos = $state({ top: 0, left: 0 });
+  let query = $state("");
+  let range: { from: number; to: number } | null = null;
+  let selectedIndex = $state(0);
+  let menuEl: HTMLDivElement | undefined = $state();
+  let mouseMovedSinceKeyboard = $state(true);
+
+  const items = $derived(searchEmojis(query));
+  /*
+   * 열려 있어도 후보가 없으면 **없는 것처럼** 군다 — 빈 상자를 띄우지 않고, 키보드도
+   * 가로채지 않는다(`:x` 뒤에 일반 문장을 이어 칠 때 Enter 를 뺏으면 안 된다).
+   */
+  const visible = $derived(open && items.length > 0);
+
+  $effect(() => {
+    onOpenChange?.(visible);
+    /* 열린 채로 내려가는 경우(editable 전환 등)에도 닫힘을 알린다. */
+    return () => {
+      if (visible) onOpenChange?.(false);
+    };
+  });
+
+  const MENU_HEIGHT = 320;
+
+  /* `updateSlashMenuPosition`(TipTapEditor)과 같은 계산 — 고정 툴바·하단 바를 피해 뒤집는다. */
+  function updatePosition() {
+    if (!range) return;
+    const coords = editor.view.coordsAtPos(range.to);
+
+    const headerHeight = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue(
+        "--header-height",
+      ) || "74",
+    );
+    const toolbarEl = editor.view.dom
+      .closest(".hce-editor-wrapper")
+      ?.querySelector(".sticky");
+    const toolbarBottom = toolbarEl
+      ? toolbarEl.getBoundingClientRect().bottom
+      : headerHeight;
+    const topSafe = Math.max(toolbarBottom, headerHeight) + 4;
+
+    const bottomBar = document.querySelector(".sticky.bottom-0");
+    const bottomBarHeight = bottomBar
+      ? bottomBar.getBoundingClientRect().height
+      : 0;
+    const bottomSafe = window.innerHeight - bottomBarHeight - 4;
+
+    const spaceBelow = bottomSafe - coords.bottom;
+    const spaceAbove = coords.top - topSafe;
+    const goUp = spaceBelow < MENU_HEIGHT && spaceAbove > spaceBelow;
+
+    let top: number;
+    if (goUp) {
+      top = Math.max(topSafe, coords.top - MENU_HEIGHT);
+    } else {
+      top = Math.min(coords.bottom + 4, bottomSafe - MENU_HEIGHT);
+    }
+
+    pos = { top, left: coords.left };
+  }
+
+  function close() {
+    open = false;
+    range = null;
+    query = "";
+  }
+
+  /* 문서가 바뀔 때(타이핑) — 열고 닫기 전부 판정한다. */
+  function handleUpdate() {
+    const match = findEmojiQuery(editor.state);
+    if (!match) {
+      if (open) close();
+      return;
+    }
+    range = { from: match.from, to: match.to };
+    if (match.query !== query) {
+      query = match.query;
+      selectedIndex = 0;
+    }
+    open = true;
+    updatePosition();
+  }
+
+  /*
+   * 선택만 움직일 때(클릭·화살표 이동)는 **닫기만** 판정한다 — 슬래시 메뉴의
+   * `handleSelectionUpdate` 와 같은 비대칭. 옛 `:word` 텍스트를 클릭했다고 팝업이
+   * 열리면 안 된다.
+   */
+  function handleSelectionUpdate() {
+    if (!open) return;
+    if (!findEmojiQuery(editor.state)) close();
+  }
+
+  $effect(() => {
+    editor.on("update", handleUpdate);
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("update", handleUpdate);
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  });
+
+  function select(item: EmojiSuggestion) {
+    if (!range) return;
+    const { from, to } = range;
+    close();
+    // main 과 같은 삽입 꼴 — `:query` 를 지우고 이모지 + 공백.
+    editor
+      .chain()
+      .focus()
+      .deleteRange({ from, to })
+      .insertContent(`${item.emoji} `)
+      .run();
+  }
+
+  $effect(() => {
+    if (!visible) return;
+    const onScroll = () => updatePosition();
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  });
+
+  $effect(() => {
+    if (!visible) return;
+    function handleMouseDown(e: MouseEvent) {
+      if (menuEl && !menuEl.contains(e.target as Node)) close();
+    }
+    document.addEventListener("mousedown", handleMouseDown, true);
+    return () =>
+      document.removeEventListener("mousedown", handleMouseDown, true);
+  });
+
+  $effect(() => {
+    if (!visible) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "ArrowDown" || (e.key === "Tab" && !e.shiftKey)) {
+        e.preventDefault();
+        mouseMovedSinceKeyboard = false;
+        selectedIndex = (selectedIndex + 1) % items.length;
+      } else if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+        e.preventDefault();
+        mouseMovedSinceKeyboard = false;
+        selectedIndex =
+          selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const item = items[selectedIndex];
+        if (item) select(item);
+      } else if (e.key === "Escape") {
+        // main 처럼 친 텍스트는 남기고 팝업만 접는다(다음 글자를 치면 다시 뜬다).
+        e.preventDefault();
+        open = false;
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  });
+
+  $effect(() => {
+    // 선택 항목을 보이는 자리로
+    if (menuEl) {
+      const el = menuEl.querySelector(`[data-index="${selectedIndex}"]`);
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  });
+</script>
+
+{#if visible}
+  <div class="fixed z-50" style="top: {pos.top}px; left: {pos.left}px">
+    <div
+      bind:this={menuEl}
+      class="emoji-menu z-50 bg-popover border border-border rounded-xl shadow-xl overflow-y-auto py-1.5"
+    >
+      {#each items as item, i (item.keyword)}
+        <button
+          type="button"
+          data-index={i}
+          class="emoji-item {i === selectedIndex ? 'is-selected' : ''}"
+          onmousemove={() => {
+            if (!mouseMovedSinceKeyboard) {
+              mouseMovedSinceKeyboard = true;
+              return;
+            }
+            selectedIndex = i;
+          }}
+          onclick={() => select(item)}
+        >
+          <span class="emoji-glyph">{item.emoji}</span>
+          <span class="emoji-keyword">{item.keyword}</span>
+        </button>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .emoji-menu {
+    width: 224px;
+    max-height: 320px;
+  }
+
+  /* `SlashCommandMenu` 의 .slash-item 과 같은 결 — 두 팝업이 같은 물건으로 보여야 한다. */
+  .emoji-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 4px 10px;
+    text-align: left;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--foreground);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background-color 0.12s;
+  }
+
+  .emoji-item:hover,
+  .emoji-item.is-selected {
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
+    color: var(--primary);
+  }
+
+  .emoji-item.is-selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    bottom: 3px;
+    width: 3px;
+    border-radius: 0 2px 2px 0;
+    background: var(--primary);
+  }
+
+  .emoji-glyph {
+    flex-shrink: 0;
+    width: 20px;
+    font-size: 15px;
+    line-height: 1;
+    text-align: center;
+  }
+
+  .emoji-keyword {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    color: var(--muted-foreground);
+  }
+
+  .emoji-item.is-selected .emoji-keyword,
+  .emoji-item:hover .emoji-keyword {
+    color: var(--primary);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+type $$ComponentProps = {
+    editor: Editor;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const EmojiSuggestionMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmojiSuggestionMenu = ReturnType<typeof EmojiSuggestionMenu>;
+export default EmojiSuggestionMenu;
+//# sourceMappingURL=EmojiSuggestionMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiSuggestionMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EmojiSuggestionMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAO1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AA0NrF,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/FixedToolbar.svelte

@@ -41,6 +41,7 @@
   import ToggleHeadingIcon from "./icons/ToggleHeadingIcon.svelte";
   import InputModal from "./InputModal.svelte";
   import type { ToolbarFeature, PromptHandler } from "../types";
+  import { defaultTranslator, type EditorTranslator } from "../i18n";
 
   let {
     editor,
@@ -52,6 +53,7 @@
     onPromptMbus,
     onPromptVideo,
     toolbarEnd,
+    t = defaultTranslator,
   }: {
     editor: Editor;
     features: Set<ToolbarFeature>;
@@ -76,6 +78,8 @@
      * 여기에 넣으면 툴바의 flex 행에 그대로 얹혀 정렬이 저절로 맞는다.
      */
     toolbarEnd?: Snippet;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
   } = $props();
 
   /*
@@ -171,21 +175,21 @@
   }
 
   const currentBlockLabel = $derived.by(() => {
-    if (isActive("heading", { level: 1 })) return "제목 1";
-    if (isActive("heading", { level: 2 })) return "제목 2";
-    if (isActive("heading", { level: 3 })) return "제목 3";
-    if (isActive("bulletList")) return "글머리 목록";
-    if (isActive("orderedList")) return "번호 목록";
-    if (isActive("taskList")) return "체크리스트";
-    if (isActive("blockquote")) return "인용문";
+    if (isActive("heading", { level: 1 })) return t("heading1");
+    if (isActive("heading", { level: 2 })) return t("heading2");
+    if (isActive("heading", { level: 3 })) return t("heading3");
+    if (isActive("bulletList")) return t("bulletList");
+    if (isActive("orderedList")) return t("orderedList");
+    if (isActive("taskList")) return t("taskList");
+    if (isActive("blockquote")) return t("blockquote");
     if (isActive("details")) {
       // 토글 제목이면 단계까지 보여 준다 — 그냥 "토글" 이면 무엇을 고른 건지 안 보인다.
       for (const lv of [1, 2, 3]) {
-        if (isActive("detailsSummary", { level: lv })) return `토글 제목 ${lv}`;
+        if (isActive("detailsSummary", { level: lv })) return t("toggleHeading", { level: lv });
       }
-      return "토글";
+      return t("toggle");
     }
-    return "본문";
+    return t("paragraph");
   });
 
   function runBlock(fn: () => void) {
@@ -238,7 +242,7 @@
       type="button"
       onclick={() => editor.chain().focus().undo().run()}
       disabled={!canDo((c) => c.undo())}
-      aria-label="실행 취소"
+      aria-label={t('undo')}
       class={cn(
         "p-1.5 rounded-md transition-colors text-muted-foreground hover:bg-muted hover:text-foreground",
         !canDo((c) => c.undo()) && "opacity-30 pointer-events-none",
@@ -252,7 +256,7 @@
       type="button"
       onclick={() => editor.chain().focus().redo().run()}
       disabled={!canDo((c) => c.redo())}
-      aria-label="다시 실행"
+      aria-label={t('redo')}
       class={cn(
         "p-1.5 rounded-md transition-colors text-muted-foreground hover:bg-muted hover:text-foreground",
         !canDo((c) => c.redo()) && "opacity-30 pointer-events-none",
@@ -271,7 +275,7 @@
       <button
         type="button"
         onclick={() => (blockMenuOpen = !blockMenuOpen)}
-        aria-label="블록 타입"
+        aria-label={t('blockType')}
         class="flex items-center gap-1 px-2 py-1.5 rounded-md transition-colors text-muted-foreground hover:bg-muted hover:text-foreground min-w-[96px]"
       >
         <span class="text-sm">{currentBlockLabel}</span>
@@ -301,7 +305,7 @@
             onclick={() =>
               runBlock(() => editor.chain().focus().setParagraph().run())}
           >
-            <Pilcrow size={14} /> 본문
+            <Pilcrow size={14} /> {t('paragraph')}
           </button>
           {#if has('h1')}
           <button
@@ -315,7 +319,7 @@
                 editor.chain().focus().toggleHeading({ level: 1 }).run(),
               )}
           >
-            <Heading1 size={14} /> 제목 1
+            <Heading1 size={14} /> {t('heading1')}
             <span class="hce-menu-shortcut"># </span>
           </button>
           {/if}
@@ -331,7 +335,7 @@
                 editor.chain().focus().toggleHeading({ level: 2 }).run(),
               )}
           >
-            <Heading2 size={14} /> 제목 2
+            <Heading2 size={14} /> {t('heading2')}
             <span class="hce-menu-shortcut">## </span>
           </button>
           {/if}
@@ -347,7 +351,7 @@
                 editor.chain().focus().toggleHeading({ level: 3 }).run(),
               )}
           >
-            <Heading3 size={14} /> 제목 3
+            <Heading3 size={14} /> {t('heading3')}
             <span class="hce-menu-shortcut">### </span>
           </button>
           {/if}
@@ -364,7 +368,7 @@
             onclick={() =>
               runBlock(() => editor.chain().focus().toggleBulletList().run())}
           >
-            <List size={14} /> 글머리 목록
+            <List size={14} /> {t('bulletList')}
             <span class="hce-menu-shortcut">- </span>
           </button>
           {/if}
@@ -378,7 +382,7 @@
             onclick={() =>
               runBlock(() => editor.chain().focus().toggleOrderedList().run())}
           >
-            <ListOrdered size={14} /> 번호 목록
+            <ListOrdered size={14} /> {t('orderedList')}
             <span class="hce-menu-shortcut">1. </span>
           </button>
           {/if}
@@ -392,7 +396,7 @@
             onclick={() =>
               runBlock(() => editor.chain().focus().toggleTaskList().run())}
           >
-            <CheckSquare size={14} /> 체크리스트
+            <CheckSquare size={14} /> {t('taskList')}
             <span class="hce-menu-shortcut">[] </span>
           </button>
           {/if}
@@ -409,7 +413,7 @@
             onclick={() =>
               runBlock(() => editor.chain().focus().toggleBlockquote().run())}
           >
-            <Quote size={14} /> 인용문
+            <Quote size={14} /> {t('blockquote')}
             <span class="hce-menu-shortcut">" </span>
           </button>
           {/if}
@@ -423,7 +427,7 @@
             onclick={() =>
               runBlock(() => editor.chain().focus().setDetails().run())}
           >
-            <ChevronRight size={14} /> 토글
+            <ChevronRight size={14} /> {t('toggle')}
             <span class="hce-menu-shortcut">> </span>
           </button>
           <!--
@@ -450,7 +454,7 @@
                     .run(),
                 )}
             >
-              <ToggleHeadingIcon size={14} level={level as 1 | 2 | 3} /> 토글 제목 {level}
+              <ToggleHeadingIcon size={14} level={level as 1 | 2 | 3} /> {t('toggleHeading', { level })}
               <span class="hce-menu-shortcut">{'#'.repeat(level)} &gt; </span>
             </button>
           {/each}
@@ -475,7 +479,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleBold().run()}
-      aria-label="굵게"
+      aria-label={t('bold')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive("bold")
@@ -490,7 +494,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleItalic().run()}
-      aria-label="기울임"
+      aria-label={t('italic')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive("italic")
@@ -505,7 +509,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleUnderline().run()}
-      aria-label="밑줄"
+      aria-label={t('underline')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive("underline")
@@ -520,7 +524,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleStrike().run()}
-      aria-label="취소선"
+      aria-label={t('strike')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive("strike")
@@ -552,7 +556,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().setTextAlign('left').run()}
-      aria-label="왼쪽 정렬"
+      aria-label={t('alignLeft')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive({ textAlign: 'left' })
@@ -567,7 +571,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().setTextAlign('center').run()}
-      aria-label="가운데 정렬"
+      aria-label={t('alignCenter')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive({ textAlign: 'center' })
@@ -582,7 +586,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().setTextAlign('right').run()}
-      aria-label="오른쪽 정렬"
+      aria-label={t('alignRight')}
       class={cn(
         "p-1.5 rounded-md transition-colors",
         isActive({ textAlign: 'right' })
@@ -603,11 +607,11 @@
       <button
         type="button"
         onclick={() => (insertMenuOpen = !insertMenuOpen)}
-        aria-label="삽입"
+        aria-label={t('insert')}
         class="flex items-center gap-1 px-2 py-1.5 rounded-md transition-colors text-muted-foreground hover:bg-muted hover:text-foreground"
       >
         <Plus size={iconSize} />
-        <span class="text-sm">삽입</span>
+        <span class="text-sm">{t('insert')}</span>
         <ChevronDown size={12} />
       </button>
       {#if insertMenuOpen}
@@ -622,7 +626,7 @@
             onclick={() =>
               runInsert(() => editor.chain().focus().setCodeBlock().run())}
           >
-            <Code2 size={14} /> 코드 블록
+            <Code2 size={14} /> {t('codeBlock')}
             <span class="hce-menu-shortcut">```</span>
           </button>
           {/if}
@@ -633,7 +637,7 @@
             onclick={() =>
               runInsert(() => editor.chain().focus().promptMathDisplay().run())}
           >
-            <Sigma size={14} /> 수식 블록
+            <Sigma size={14} /> {t('mathBlock')}
             <span class="hce-menu-shortcut">$$</span>
           </button>
           <!--
@@ -648,7 +652,7 @@
             onclick={() =>
               runInsert(() => editor.chain().focus().promptMathInline().run())}
           >
-            <Sigma size={14} /> 인라인 수식
+            <Sigma size={14} /> {t('mathInline')}
             <span class="hce-menu-shortcut">$ $</span>
           </button>
           {/if}
@@ -667,7 +671,7 @@
             class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
             onclick={() => runInsert(onFileClick!)}
           >
-            <Paperclip size={14} /> 파일
+            <Paperclip size={14} /> {t('file')}
           </button>
           {/if}
           {#if has('table')}
@@ -679,7 +683,7 @@
                 insertTableSized(editor, { rows: 3, cols: 3, withHeaderRow: true }),
               )}
           >
-            <TableIcon size={14} /> 표 (3x3)
+            <TableIcon size={14} /> {t('table3x3')}
           </button>
           {/if}
 
@@ -695,7 +699,7 @@
                 editor.chain().focus().setHorizontalRule().run(),
               )}
           >
-            <Minus size={14} /> 구분선
+            <Minus size={14} /> {t('divider')}
             <span class="hce-menu-shortcut">---</span>
           </button>
           {/if}
@@ -706,7 +710,7 @@
             onclick={() =>
               runInsert(() => editor.chain().focus().setColumns(2).run())}
           >
-            <Columns2 size={14} /> 2단 컬럼
+            <Columns2 size={14} /> {t('columns2')}
           </button>
           {/if}
           {#if has('columns-3')}
@@ -716,7 +720,7 @@
             onclick={() =>
               runInsert(() => editor.chain().focus().setColumns(3).run())}
           >
-            <Columns3 size={14} /> 3단 컬럼
+            <Columns3 size={14} /> {t('columns3')}
           </button>
           {/if}
           {#if has('tabs')}
@@ -726,7 +730,7 @@
             onclick={() =>
               runInsert(() => editor.chain().focus().setTabs(3).run())}
           >
-            <PanelTop size={14} /> 탭
+            <PanelTop size={14} /> {t('tabs')}
           </button>
           {/if}
           {#if has('card')}
@@ -735,7 +739,7 @@
             class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
             onclick={() => runInsert(() => editor.chain().focus().setCard().run())}
           >
-            <SquareDashed size={14} /> 카드
+            <SquareDashed size={14} /> {t('card')}
           </button>
           {/if}
 
@@ -748,7 +752,7 @@
             class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
             onclick={addImage}
           >
-            <ImageIcon size={14} /> 이미지
+            <ImageIcon size={14} /> {t('image')}
           </button>
           {/if}
           {#if has('video')}
@@ -761,7 +765,7 @@
             class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
             onclick={addVideo}
           >
-            <Youtube size={14} /> 영상
+            <Youtube size={14} /> {t('video')}
           </button>
           {/if}
           {#if has('mbus')}
@@ -770,7 +774,7 @@
             class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
             onclick={addMbus}
           >
-            <Tv size={14} /> 미디버스 영상
+            <Tv size={14} /> {t('mbusVideo')}
           </button>
           {/if}
         </div>
@@ -783,24 +787,26 @@
   <!-- (이미지 모달은 없다 — 에디터가 업로드/링크 탭 모달을 띄운다. `onImageClick` 참고.) -->
   {#if modalState?.type === "video"}
     <InputModal
-      title="영상 URL"
+      title={t('videoUrl')}
       placeholder="https://www.youtube.com/watch?v=..."
       onConfirm={(url) => {
         editor.chain().focus().setVideoEmbed({ src: url }).run();
         modalState = null;
       }}
       onCancel={() => (modalState = null)}
+      {t}
     />
   {/if}
   {#if modalState?.type === "mbus"}
     <InputModal
-      title="미디버스 영상 URL"
+      title={t('mbusVideoUrl')}
       placeholder="https://play.mbus.tv/v1/hls/..."
       onConfirm={(url) => {
         editor.chain().focus().setMbusVideo({ src: url }).run();
         modalState = null;
       }}
       onCancel={() => (modalState = null)}
+      {t}
     />
   {/if}