@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/components/TipTapEditor.svelte

@@ -4,6 +4,8 @@
   import { TableCell } from "@tiptap/extension-table-cell";
   import { Extension } from "@tiptap/core";
   import { TextSelection } from "@tiptap/pm/state";
+  import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+  import { guardVSCodePaste } from "../utils/guard-vscode-paste";
   import { lowlight } from "../utils/lowlight";
 
   /*
@@ -89,8 +91,20 @@
     },
   });
 
+  /*
+   * ⚠️ 업스트림 `codeBlockVSCodeHandler` 는 클립보드의 `vscode-editor-data` 를 검증 없이
+   * `JSON.parse` 한다 — VS Code 계열이 아닌 앱이 같은 타입에 깨진 값을 실으면 붙여넣기
+   * 한 번에 handlePaste 가 던져 에디터가 멈춘다. 부모 플러그인을 그대로 두고
+   * 메타데이터 검증만 앞에 끼운다(`utils/guard-vscode-paste.ts`).
+   */
+  const GuardedCodeBlockLowlight = CodeBlockLowlight.extend({
+    addProseMirrorPlugins() {
+      return (this.parent?.() ?? []).map((plugin) => guardVSCodePaste(plugin));
+    },
+  });
+
   /**
-   * 편집 크롬(툴바 2 · 메뉴 2 · 모달 3)은 **`editable` 일 때만 그려지는데**
+   * 편집 크롬(툴바 2 · 메뉴 3 · 헬퍼 1 · 모달 3)은 **`editable` 일 때만 그려지는데**
    * 정적 import 면 읽기 전용 페이지도 통째로 받는다.
    *
    * 실측(정올 prod 빌드, `apps/jungol/.svelte-kit/output/client`): 이 일곱만 쓰는
@@ -122,6 +136,8 @@
     BubbleToolbar: typeof import("./BubbleToolbar.svelte").default;
     TableBubbleMenu: typeof import("./TableBubbleMenu.svelte").default;
     SlashCommandMenu: typeof import("./SlashCommandMenu.svelte").default;
+    EmojiSuggestionMenu: typeof import("./EmojiSuggestionMenu.svelte").default;
+    FloatingHelper: typeof import("./FloatingHelper.svelte").default;
     MediaPickerModal: typeof import("./MediaPickerModal.svelte").default;
     InputModal: typeof import("./InputModal.svelte").default;
     MathModal: typeof import("./MathModal.svelte").default;
@@ -136,15 +152,19 @@
       import("./BubbleToolbar.svelte"),
       import("./TableBubbleMenu.svelte"),
       import("./SlashCommandMenu.svelte"),
+      import("./EmojiSuggestionMenu.svelte"),
+      import("./FloatingHelper.svelte"),
       import("./MediaPickerModal.svelte"),
       import("./InputModal.svelte"),
       import("./MathModal.svelte"),
-    ]).then(([fixed, bubble, table, slash, media, input, math]) => {
+    ]).then(([fixed, bubble, table, slash, emoji, floating, media, input, math]) => {
       sharedChrome = {
         FixedToolbar: fixed.default,
         BubbleToolbar: bubble.default,
         TableBubbleMenu: table.default,
         SlashCommandMenu: slash.default,
+        EmojiSuggestionMenu: emoji.default,
+        FloatingHelper: floating.default,
         MediaPickerModal: media.default,
         InputModal: input.default,
         MathModal: math.default,
@@ -158,7 +178,6 @@
   import { onMount, onDestroy } from "svelte";
   import { Editor } from "@tiptap/core";
   import StarterKit from "@tiptap/starter-kit";
-  import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
   import Placeholder from "@tiptap/extension-placeholder";
   import Link from "@tiptap/extension-link";
   import Underline from "@tiptap/extension-underline";
@@ -180,14 +199,22 @@
     LeveledDetailsSummary,
     NotionToggleInputRule,
   } from "../extensions/NotionInputRules";
+  import { OrderedListMarker } from "../extensions/OrderedListMarker";
   import FileHandler from "@tiptap/extension-file-handler";
-  import type { AnyExtension } from "@tiptap/core";
+  import type { AnyExtension, JSONContent } from "@tiptap/core";
   import { PdfBlock } from "../extensions/PdfBlock";
   import { Columns } from "../extensions/Columns";
   import { Column } from "../extensions/Column";
   import { TabsBlock, Tab } from "../extensions/TabsBlock";
-  import { transformLegacyHtml } from "../utils/sanitize";
+  import { transformLegacyHtml, stripUploadSkeletonHtml } from "../utils/sanitize";
+  import {
+    UploadSkeleton,
+    insertUploadSkeleton,
+    type UploadSkeletonKind,
+  } from "../extensions/UploadSkeleton";
+  import { MediaResizeToolbar } from "../extensions/MediaToolbar";
   import { Indent } from "../extensions/Indent";
+  import { TableKeymap } from "../extensions/TableKeymap";
   import { FileAttachment } from "../extensions/FileAttachment";
   import { MbusVideo } from "../extensions/MbusVideo";
   import { ResizableImage } from "../extensions/ResizableImage";
@@ -198,12 +225,14 @@
   import { MathInline, MathDisplay, type MathPrompt } from "../extensions/Math";
   import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
   import { resolveFeatures } from "../types";
+  import { createTranslator, EditorI18n, type EditorLocaleInput } from "../i18n";
   import type { FileResolver } from "../extensions/FileAttachment";
 
   let {
     content = "",
     onChange,
-    placeholder = "'/'를 눌러 명령어를 입력하세요...",
+    placeholder,
+    locale,
     onUploadFile,
     onResolveFile,
     fileDownloadBaseUrl,
@@ -223,7 +252,13 @@
   }: {
     content: string;
     onChange: (html: string) => void;
+    /** 본문 안내문. 미지정 시 로케일의 기본 안내문(ko: "'/'를 눌러 명령어를 입력하세요..."). */
     placeholder?: string;
+    /**
+     * 에디터 UI 로케일 — 코드('ko'·'en'·'ja'·'es'·'zh-hans'·'zh-hant', 지역 변형 허용) 또는
+     * 부분 메시지 오버라이드 객체. **미주입 시 ko** — 기존 호스트와 픽셀 단위 동일(하위호환).
+     */
+    locale?: EditorLocaleInput;
     onUploadFile?: UploadHandler;
     onResolveFile?: FileResolver;
     fileDownloadBaseUrl?: string;
@@ -259,6 +294,12 @@
 
   const features = $derived(resolveFeatures(toolbar, featuresOverride));
 
+  /*
+   * 에디터 UI 번역기. 크롬 컴포넌트에는 prop 으로, vanilla NodeView 에는 `EditorI18n`
+   * 확장(→ `editor.storage.editorI18n.t`)으로 내려간다. 미주입 시 ko — 하위호환 계약.
+   */
+  const t = $derived(createTranslator(locale));
+
   let editorElement: HTMLDivElement | undefined = $state();
   let editor: Editor | undefined = $state();
 
@@ -277,6 +318,8 @@
   const BubbleToolbar = $derived(sharedChrome?.BubbleToolbar);
   const TableBubbleMenu = $derived(sharedChrome?.TableBubbleMenu);
   const SlashCommandMenu = $derived(sharedChrome?.SlashCommandMenu);
+  const EmojiSuggestionMenu = $derived(sharedChrome?.EmojiSuggestionMenu);
+  const FloatingHelper = $derived(sharedChrome?.FloatingHelper);
   const MediaPickerModal = $derived(sharedChrome?.MediaPickerModal);
   const InputModal = $derived(sharedChrome?.InputModal);
   const MathModal = $derived(sharedChrome?.MathModal);
@@ -355,9 +398,9 @@
     try {
       const path = new URL(raw, "http://x").pathname;
       const last = decodeURIComponent(path.split("/").filter(Boolean).pop() || "");
-      return last || "파일";
+      return last || t("file");
     } catch {
-      return "파일";
+      return t("file");
     }
   }
 
@@ -391,22 +434,51 @@
    * ⚠️ 업로드는 **실패해도 모달을 닫는다.** 열어 둔 채로 두면 `업로드 중...` 오버레이가
    * 모달 뒤에 깔려 무슨 일이 일어나는지 안 보인다. 실패는 아래 `catch` 가 알린다.
    */
-  function insertImageFile(file: File) {
-    mediaPicker = null;
+  /*
+   * ── 업로드 스켈레톤 흐름 ──────────────────────────────────────────────────
+   * 업로드가 시작되면 **삽입 지점에** 스켈레톤을 세우고, 끝나면 그 자리를 실제 노드로
+   * 바꾼다(실패하면 제거). 전체 오버레이와 달리 문서를 막지 않아서, 업로드가 도는
+   * 동안에도 커서를 옮기고 다른 곳을 계속 편집할 수 있다. 그 사이 위쪽 편집으로 자리가
+   * 밀려도 핸들이 id 로 다시 찾고, 사용자가 스켈레톤을 지워 버렸으면 결과를 현재 커서
+   * 자리에 넣는다 — 업로드까지 끝난 파일을 버리지 않는다. 스켈레톤을 못 세우는 드문
+   * 경우(스키마 미등록)에만 예전 전체 오버레이(`uploading`)로 물러난다.
+   */
+  function uploadWithSkeleton(opts: {
+    file: File;
+    kind: UploadSkeletonKind;
+    at?: number;
+    makeContent: (result: string) => JSONContent;
+    errorMessage: string;
+  }) {
     if (!editor || !onUploadFile) return;
-    uploading = true;
-    onUploadFile(file)
-      .then((url) => {
-        editor!.chain().focus().setImage({ src: url }).run();
+    const handle = insertUploadSkeleton(editor, { kind: opts.kind, at: opts.at });
+    if (!handle) uploading = true;
+    onUploadFile(opts.file)
+      .then((result) => {
+        const content = opts.makeContent(result);
+        if (!handle || !handle.replaceWith(content)) {
+          editor?.chain().focus().insertContent(content).run();
+        }
       })
       .catch(() => {
-        alert("이미지 업로드에 실패했습니다.");
+        handle?.remove();
+        alert(opts.errorMessage);
       })
       .finally(() => {
-        uploading = false;
+        if (!handle) uploading = false;
       });
   }
 
+  function insertImageFile(file: File) {
+    mediaPicker = null;
+    uploadWithSkeleton({
+      file,
+      kind: "image",
+      makeContent: (url) => ({ type: "image", attrs: { src: url } }),
+      errorMessage: t("imageUploadFailed"),
+    });
+  }
+
   function insertImageUrl(url: string) {
     mediaPicker = null;
     editor?.chain().focus().setImage({ src: url }).run();
@@ -435,6 +507,13 @@
   let slashStartPos: number | null = null;
   const MENU_HEIGHT = 320;
 
+  /*
+   * 이모지 메뉴 열림 여부. 그 메뉴는 상태를 스스로 들고 있어(해당 파일 주석) 여기서는
+   * 알림만 받는다 — 빈 줄 플로팅 헬퍼가 슬래시·이모지 팝업과 **동시에 뜨지 않게** 끄는
+   * 데에만 쓴다(좌표계가 달라 자동 회피가 안 된다. `FloatingHelper.svelte` 주석 참고).
+   */
+  let emojiMenuOpen = $state(false);
+
   function updateSlashMenuPosition() {
     if (!editor || slashStartPos === null) return;
     const { from } = editor.state.selection;
@@ -491,54 +570,36 @@
   }
 
   function uploadPdf(file: File) {
-    if (!editor || !onUploadFile) return;
-    uploading = true;
-    onUploadFile(file)
-      .then((url) => {
-        editor!
-          .chain()
-          .focus()
-          .insertContent({
-            type: "pdfBlock",
-            attrs: { src: url, name: file.name },
-          })
-          .run();
-      })
-      .catch(() => {
-        alert("PDF 업로드에 실패했습니다.");
-      })
-      .finally(() => {
-        uploading = false;
-      });
+    uploadWithSkeleton({
+      file,
+      kind: "pdf",
+      makeContent: (url) => ({
+        type: "pdfBlock",
+        attrs: { src: url, name: file.name },
+      }),
+      errorMessage: t("pdfUploadFailed"),
+    });
   }
 
   function uploadFile(file: File) {
-    if (!editor || !onUploadFile) return;
-    uploading = true;
     const size = file.size;
-    onUploadFile(file)
-      .then((result) => {
+    uploadWithSkeleton({
+      file,
+      kind: "file",
+      makeContent: (result) => {
         const isFileId = result && !result.includes("/") && !result.includes(":");
-        editor!
-          .chain()
-          .focus()
-          .insertContent({
-            type: "fileAttachment",
-            attrs: {
-              src: isFileId ? null : result,
-              fileId: isFileId ? result : null,
-              name: file.name,
-              size,
-            },
-          })
-          .run();
-      })
-      .catch(() => {
-        alert("파일 업로드에 실패했습니다.");
-      })
-      .finally(() => {
-        uploading = false;
-      });
+        return {
+          type: "fileAttachment",
+          attrs: {
+            src: isFileId ? null : result,
+            fileId: isFileId ? result : null,
+            name: file.name,
+            size,
+          },
+        };
+      },
+      errorMessage: t("fileUploadFailed"),
+    });
   }
 
   // Slash command handlers (component-level for cleanup access)
@@ -600,6 +661,13 @@
     editor = new Editor({
       element: editorElement,
       extensions: [
+        /*
+         * UI 번역기를 storage 로 나르는 확장 — vanilla NodeView 가 `getEditorTranslator` 로
+         * 읽는다. 호스트가 직접 넘겼으면 비켜선다(`math` 와 같은 꼴).
+         */
+        ...(extraExtensions.some((ext) => (ext as any).name === "editorI18n")
+          ? []
+          : [EditorI18n.configure({ locale })]),
         /*
          * `link`·`underline` 을 끄는 것은 **v3 이전의 뒷정리**다.
          *
@@ -630,11 +698,18 @@
           blockquote: false,
           link: false,
           underline: false,
+          /*
+           * `codeBlock: false` 와 같은 꼴 — **끄고 자기 것을 단다.** `a.`·`가.` 같은
+           * 마커 입력 규칙은 `configure` 로 못 넣어서 확장을 갈아 끼우는 수밖에 없다
+           * (`OrderedListMarker` 주석 참고).
+           */
+          orderedList: false,
         }),
+        OrderedListMarker,
         NotionBlockquote,
         ...(extraExtensions.some((ext) => (ext as any).name === 'codeBlock')
           ? []
-          : [CodeBlockLowlight.configure({
+          : [GuardedCodeBlockLowlight.configure({
               lowlight,
               defaultLanguage: "cpp",
             })]),
@@ -652,11 +727,11 @@
                   if (node.type.name === "codeBlock") return "";
                   if (node.type.name === "heading") {
                     const level = node.attrs.level;
-                    if (level === 1) return "제목 1";
-                    if (level === 2) return "제목 2";
-                    if (level === 3) return "제목 3";
+                    if (level === 1) return t("heading1");
+                    if (level === 2) return t("heading2");
+                    if (level === 3) return t("heading3");
                   }
-                  return placeholder;
+                  return placeholder ?? t("placeholder");
                 },
                 showOnlyWhenEditable: true,
                 showOnlyCurrent: true,
@@ -696,6 +771,19 @@
         TableRow,
         CustomTableHeader,
         CustomTableCell,
+        /*
+         * Tab 셀 이동·행 추가·빈 표 삭제. 업스트림 `Table` 에도 Tab 단축키가 있지만
+         * 아래 `Indent` 의 Tab(NBSP 삽입)이 키맵 순서상 먼저 먹어 죽는다 —
+         * `TableKeymap`(priority 110)이 표 안에서만 그걸 이긴다. 경위는 그 파일 주석.
+         */
+        TableKeymap,
+        /*
+         * 업로드 자리표시자. 스키마에 항상 실어 둔다 — 저장에 안 남으므로 읽기 전용
+         * 문서에 나타날 일은 없지만, 편집·읽기의 스키마가 갈리면 다른 데서 탈이 난다.
+         */
+        UploadSkeleton,
+        /* 미디어(이미지·영상) 선택 시 비율·정렬·폭 프리셋 칩. 읽기 전용엔 싣지 않는다. */
+        ...(editable ? [MediaResizeToolbar] : []),
         PdfBlock,
         FileAttachment.configure({
           resolver: onResolveFile ?? null,
@@ -755,60 +843,48 @@
                   "application/pdf",
                 ],
                 onDrop: (_currentEditor, files, pos) => {
+                  /* 파일마다 스켈레톤(1) + 뒤에 심는 빈 문단(2)만큼 다음 자리를 민다. */
+                  let at = pos;
                   for (const file of files) {
                     if (file.type.startsWith("image/")) {
-                      uploading = true;
-                      onUploadFile!(file)
-                        .then((url) => {
-                          _currentEditor
-                            .chain()
-                            .focus()
-                            .insertContentAt(pos, {
-                              type: "image",
-                              attrs: { src: url },
-                            })
-                            .run();
-                        })
-                        .catch(() =>
-                          alert("이미지 업로드에 실패했습니다."),
-                        )
-                        .finally(() => (uploading = false));
+                      uploadWithSkeleton({
+                        file,
+                        kind: "image",
+                        at,
+                        makeContent: (url) => ({
+                          type: "image",
+                          attrs: { src: url },
+                        }),
+                        errorMessage: t("imageUploadFailed"),
+                      });
+                      at += 3;
                     } else if (file.type === "application/pdf") {
-                      uploading = true;
-                      onUploadFile!(file)
-                        .then((url) => {
-                          _currentEditor
-                            .chain()
-                            .focus()
-                            .insertContentAt(pos, {
-                              type: "pdfBlock",
-                              attrs: { src: url, name: file.name },
-                            })
-                            .run();
-                        })
-                        .catch(() =>
-                          alert("PDF 업로드에 실패했습니다."),
-                        )
-                        .finally(() => (uploading = false));
+                      uploadWithSkeleton({
+                        file,
+                        kind: "pdf",
+                        at,
+                        makeContent: (url) => ({
+                          type: "pdfBlock",
+                          attrs: { src: url, name: file.name },
+                        }),
+                        errorMessage: t("pdfUploadFailed"),
+                      });
+                      at += 3;
                     }
                   }
                 },
                 onPaste: (_currentEditor, files) => {
                   for (const file of files) {
                     if (file.type.startsWith("image/")) {
-                      uploading = true;
-                      onUploadFile!(file)
-                        .then((url) => {
-                          _currentEditor
-                            .chain()
-                            .focus()
-                            .setImage({ src: url })
-                            .run();
-                        })
-                        .catch(() =>
-                          alert("이미지 업로드에 실패했습니다."),
-                        )
-                        .finally(() => (uploading = false));
+                      uploadWithSkeleton({
+                        file,
+                        kind: "image",
+                        makeContent: (url) => ({
+                          type: "image",
+                          attrs: { src: url },
+                        }),
+                        errorMessage: t("imageUploadFailed"),
+                      });
                     }
                   }
                 },
@@ -823,10 +899,10 @@
       editable,
       onUpdate: ({ editor: e }) => {
         // 빈 paragraph는 <p></p>로 저장 (ProseMirror가 편집기 DOM에 넣는 trailing <br>는 출력에서 제거).
-        const html = e
-          .getHTML()
-          .replace(/<p><br\s*\/?><\/p>/g, "<p></p>")
-          .replace(/(<p><\/p>\s*)+$/, "");
+        // 업로드 스켈레톤은 화면 상태지 내용이 아니다 — 저장 HTML 에서 걷어낸다.
+        const html = stripUploadSkeletonHtml(
+          e.getHTML().replace(/<p><br\s*\/?><\/p>/g, "<p></p>"),
+        ).replace(/(<p><\/p>\s*)+$/, "");
         lastEmittedHtml = html;
         onChange(html);
       },
@@ -879,6 +955,18 @@
     });
   });
 
+  /*
+   * 로케일이 마운트 뒤에 바뀌면 storage 의 번역기를 갈아 끼운다. 이미 그려진 NodeView 는
+   * 예전 문자열을 유지한다(다시 그려질 때 반영) — 크롬 컴포넌트는 prop 이라 즉시 따라온다.
+   */
+  $effect(() => {
+    const translator = t;
+    const storage = editor?.storage as
+      | { editorI18n?: { t: typeof translator } }
+      | undefined;
+    if (storage?.editorI18n) storage.editorI18n.t = translator;
+  });
+
   // Scroll handler for slash menu position
   $effect(() => {
     if (!slashMenuOpen) return;
@@ -921,6 +1009,7 @@
 		<FixedToolbar
 			{editor}
 			{features}
+			{t}
 			{onPromptLink}
 			{onPromptMbus}
 			{onPromptVideo}
@@ -940,11 +1029,11 @@
 
 	{#if editor && editable}
 		{#if BubbleToolbar && features.has('bubble-toolbar')}
-			<BubbleToolbar {editor} {features} {onPromptLink} />
+			<BubbleToolbar {editor} {features} {onPromptLink} {t} />
 		{/if}
 
 		{#if TableBubbleMenu && features.has('table-menu')}
-			<TableBubbleMenu {editor} />
+			<TableBubbleMenu {editor} {t} />
 		{/if}
 
 		{#if features.has('upload-overlay') && uploading}
@@ -952,7 +1041,7 @@
 				class="absolute inset-0 flex items-center justify-center bg-background/60 rounded-xl"
 			>
 				<p class="text-sm text-muted-foreground animate-pulse">
-					업로드 중...
+					{t('uploading')}
 				</p>
 			</div>
 		{/if}
@@ -965,6 +1054,7 @@
 				<SlashCommandMenu
 					{editor}
 					{features}
+					{t}
 					{onPromptLink}
 					{onPromptMbus}
 					{onPromptVideo}
@@ -981,6 +1071,24 @@
 			</div>
 		{/if}
 
+		<!--
+			이모지 `:` 자동완성. 슬래시 메뉴와 한 벌이라 같은 feature 로 켠다.
+			열림·위치·검색어를 컴포넌트가 스스로 판정하므로(에디터 이벤트 직접 구독)
+			여기는 마운트만 한다. 열림 여부만 받아 둔다 — 아래 플로팅 헬퍼 상호배제용.
+		-->
+		{#if EmojiSuggestionMenu && features.has('slash-menu')}
+			<EmojiSuggestionMenu {editor} onOpenChange={(open) => (emojiMenuOpen = open)} />
+		{/if}
+
+		<!--
+			빈 줄 플로팅 헬퍼. "/" 안내가 본체라 슬래시 메뉴와 같은 feature 로 켠다.
+			표시 판정·위치는 컴포넌트가 스스로 하고(에디터 이벤트 직접 구독), 여기는
+			슬래시·이모지 팝업이 열려 있는 동안만 꺼 달라는 신호를 넘긴다.
+		-->
+		{#if FloatingHelper && features.has('slash-menu')}
+			<FloatingHelper {editor} {features} {t} suppressed={slashMenuOpen || emojiMenuOpen} />
+		{/if}
+
 		<!--
 			수식 프롬프트. `onPromptMath` 를 준 호스트에겐 열리지 않는다(그쪽이 직접 띄운다).
 			`features` 로 막지 않는다 — `$…$` 입력 규칙과 붙여넣기 변환은 feature 와 무관하게
@@ -992,12 +1100,13 @@
 		-->
 		{#if MediaPickerModal && mediaPicker === 'image'}
 			<MediaPickerModal
-				title="이미지 추가"
+				title={t('addImage')}
 				accept="image/*"
-				uploadLabel="파일 업로드"
-				linkPlaceholder="이미지 링크 붙여넣기"
-				linkConfirmLabel="이미지 임베드"
-				linkHint="웹에 있는 모든 이미지와 호환됨"
+				uploadLabel={t('uploadFile')}
+				linkPlaceholder={t('imageLinkPlaceholder')}
+				linkConfirmLabel={t('imageEmbed')}
+				linkHint={t('imageLinkHint')}
+				{t}
 				onUpload={insertImageFile}
 				onLink={insertImageUrl}
 				onCancel={() => (mediaPicker = null)}
@@ -1005,10 +1114,11 @@
 		{/if}
 		{#if MediaPickerModal && mediaPicker === 'file'}
 			<MediaPickerModal
-				title="파일 추가"
-				uploadLabel="파일을 선택하세요"
-				linkPlaceholder="파일 링크 붙여넣기"
-				linkConfirmLabel="파일 임베드"
+				title={t('addFile')}
+				uploadLabel={t('chooseFile')}
+				linkPlaceholder={t('fileLinkPlaceholder')}
+				linkConfirmLabel={t('fileEmbed')}
+				{t}
 				onUpload={insertFileUpload}
 				onLink={insertFileUrl}
 				onCancel={() => (mediaPicker = null)}
@@ -1018,7 +1128,8 @@
 		<!-- 업로드를 못 하는 호스트용 폴백(URL 만 받는다). 위 `pickImage` 참고. -->
 		{#if InputModal && imageUrlPrompt}
 			<InputModal
-				title="이미지 URL 입력"
+				title={t('imageUrlTitle')}
+				{t}
 				placeholder="https://example.com/image.png"
 				onConfirm={(url) => {
 					imageUrlPrompt = false;
@@ -1031,6 +1142,7 @@
 		{#if MathModal && mathPrompt}
 			<MathModal
 				latex={mathPrompt.latex}
+				{t}
 				displayMode={mathPrompt.displayMode}
 				onConfirm={(value) => closeMathPrompt(value)}
 				onCancel={() => closeMathPrompt(null)}
@@ -1041,7 +1153,7 @@
 			<div
 				class="flex justify-end px-4 py-2 text-xs text-muted-foreground border-t border-border"
 			>
-				{counts.chars} 자 · {counts.words} 단어
+				{t('characterCount', { chars: counts.chars, words: counts.words })}
 			</div>
 		{/if}
 

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

@@ -4,11 +4,18 @@ import { type MidibusRenderer } from "../extensions/TiptapMidibus";
 import { type LegacyBlockRenderer } from "../extensions/LegacyBlock";
 import { type MathPrompt } from "../extensions/Math";
 import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
+import { type EditorLocaleInput } from "../i18n";
 import type { FileResolver } from "../extensions/FileAttachment";
 type $$ComponentProps = {
     content: string;
     onChange: (html: string) => void;
+    /** 본문 안내문. 미지정 시 로케일의 기본 안내문(ko: "'/'를 눌러 명령어를 입력하세요..."). */
     placeholder?: string;
+    /**
+     * 에디터 UI 로케일 — 코드('ko'·'en'·'ja'·'es'·'zh-hans'·'zh-hant', 지역 변형 허용) 또는
+     * 부분 메시지 오버라이드 객체. **미주입 시 ko** — 기존 호스트와 픽셀 단위 동일(하위호환).
+     */
+    locale?: EditorLocaleInput;
     onUploadFile?: UploadHandler;
     onResolveFile?: FileResolver;
     fileDownloadBaseUrl?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA6JA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA2BtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAWjD,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAe,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAElF,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAoyBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AAiLA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA2BtC,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,cAAc,CAAC;AAkB9D,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAe,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAElF,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,EAAgC,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAw2BJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/extensions/CardBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/CardBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAiCrD,4CAA4C;AAC5C,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE/E,MAAM,WAAW,gBAAgB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,gBAAgB,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAC9C;AAiBD,eAAO,MAAM,SAAS,6BAwNpB,CAAC;AAEH,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,IAAI,EAAE;YACL,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE;gBACjB,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,UAAU,CAAC,EAAE,MAAM,CAAC;gBACpB,MAAM,CAAC,EAAE,MAAM,CAAC;aAChB,KAAK,UAAU,CAAC;SACjB,CAAC;KACF;CACD"}
+{"version":3,"file":"CardBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/CardBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAkCrD,4CAA4C;AAC5C,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE/E,MAAM,WAAW,gBAAgB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,gBAAgB,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAC9C;AAiBD,eAAO,MAAM,SAAS,6BAyNpB,CAAC;AAEH,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,IAAI,EAAE;YACL,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE;gBACjB,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,UAAU,CAAC,EAAE,MAAM,CAAC;gBACpB,MAAM,CAAC,EAAE,MAAM,CAAC;aAChB,KAAK,UAAU,CAAC;SACjB,CAAC;KACF;CACD"}