@underverse-ui/underverse 1.0.50 → 1.0.51

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "sourceEntry": "src/index.ts",
   "totalExports": 239,
   "exports": [

package/dist/index.cjs

@@ -937,6 +937,11 @@ var en_default = {
       cancelBtn: "Cancel",
       addFromUrl: "Add from URL"
     },
+    emojiPicker: {
+      searchPlaceholder: "Search emoji",
+      noResults: "No emoji found",
+      tryDifferentSearch: "Try a different keyword"
+    },
     tableMenu: {
       insert3x3: "Insert 3\xD73 Table",
       addColumnBefore: "Add Column Before",
@@ -1156,6 +1161,11 @@ var vi_default = {
       cancelBtn: "H\u1EE7y",
       addFromUrl: "Th\xEAm t\u1EEB URL"
     },
+    emojiPicker: {
+      searchPlaceholder: "T\xECm ki\u1EBFm bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\xFAc",
+      noResults: "Kh\xF4ng t\xECm th\u1EA5y emoji",
+      tryDifferentSearch: "Th\u1EED t\u1EEB kh\xF3a kh\xE1c"
+    },
     tableMenu: {
       insert3x3: "Ch\xE8n b\u1EA3ng 3\xD73",
       addColumnBefore: "Th\xEAm c\u1ED9t tr\u01B0\u1EDBc",
@@ -1374,6 +1384,11 @@ var ko_default = {
       cancelBtn: "\uCDE8\uC18C",
       addFromUrl: "URL\uC5D0\uC11C \uCD94\uAC00"
     },
+    emojiPicker: {
+      searchPlaceholder: "\uC774\uBAA8\uC9C0 \uAC80\uC0C9",
+      noResults: "\uC774\uBAA8\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4",
+      tryDifferentSearch: "\uB2E4\uB978 \uAC80\uC0C9\uC5B4\uB97C \uC2DC\uB3C4\uD574 \uBCF4\uC138\uC694"
+    },
     tableMenu: {
       insert3x3: "3x3 \uD45C \uC0BD\uC785",
       addColumnBefore: "\uC55E\uC5D0 \uC5F4 \uCD94\uAC00",
@@ -1592,6 +1607,11 @@ var ja_default = {
       cancelBtn: "\u30AD\u30E3\u30F3\u30BB\u30EB",
       addFromUrl: "URL\u304B\u3089\u8FFD\u52A0"
     },
+    emojiPicker: {
+      searchPlaceholder: "\u7D75\u6587\u5B57\u3092\u691C\u7D22",
+      noResults: "\u7D75\u6587\u5B57\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093",
+      tryDifferentSearch: "\u5225\u306E\u30AD\u30FC\u30EF\u30FC\u30C9\u3067\u304A\u8A66\u3057\u304F\u3060\u3055\u3044"
+    },
     tableMenu: {
       insert3x3: "3x3 \u8868\u3092\u633F\u5165",
       addColumnBefore: "\u524D\u306B\u5217\u3092\u8FFD\u52A0",
@@ -1613,6 +1633,25 @@ var defaultTranslations = {
   ko: ko_default,
   ja: ja_default
 };
+function resolveTranslationValue(translations, namespace, key) {
+  const parts = namespace.split(".");
+  let current = translations;
+  for (const part of parts) {
+    if (current && typeof current === "object" && part in current) {
+      current = current[part];
+    } else {
+      return null;
+    }
+  }
+  if (current && typeof current === "object" && key in current) {
+    const value = current[key];
+    return typeof value === "string" ? value : null;
+  }
+  return null;
+}
+function getUnderverseDefaultTranslation(locale, namespace, key) {
+  return resolveTranslationValue(defaultTranslations[locale] ?? defaultTranslations.en, namespace, key) ?? resolveTranslationValue(defaultTranslations.en, namespace, key) ?? key;
+}
 var TranslationContext = React4.createContext(null);
 var TranslationProvider = ({ children, locale = "en", translations }) => {
   const t = React4.useCallback(
@@ -1622,20 +1661,7 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
           ...defaultTranslations[locale],
           ...translations?.[locale]
         };
-        const parts = namespace.split(".");
-        let current = mergedTranslations;
-        for (const part of parts) {
-          if (current && typeof current === "object" && part in current) {
-            current = current[part];
-          } else {
-            return key;
-          }
-        }
-        if (current && typeof current === "object" && key in current) {
-          const value = current[key];
-          return typeof value === "string" ? value : key;
-        }
-        return key;
+        return resolveTranslationValue(mergedTranslations, namespace, key) ?? key;
       };
     },
     [locale, translations]
@@ -1646,20 +1672,7 @@ var useUnderverseTranslations = (namespace) => {
   const context = React4.useContext(TranslationContext);
   if (!context) {
     return (key) => {
-      const parts = namespace.split(".");
-      let current = defaultTranslations.en;
-      for (const part of parts) {
-        if (current && typeof current === "object" && part in current) {
-          current = current[part];
-        } else {
-          return key;
-        }
-      }
-      if (current && typeof current === "object" && key in current) {
-        const value = current[key];
-        return typeof value === "string" ? value : key;
-      }
-      return key;
+      return getUnderverseDefaultTranslation("en", namespace, key);
     };
   }
   return context.t(namespace);
@@ -1685,17 +1698,53 @@ var ForceInternalContext = React5.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ForceInternalContext.Provider, { value: true, children });
 };
+function normalizeLocale(locale, fallback) {
+  const normalized = locale?.toLowerCase().split("-")[0];
+  if (normalized === "en" || normalized === "vi" || normalized === "ko" || normalized === "ja") {
+    return normalized;
+  }
+  return fallback;
+}
+function isUnresolvedTranslation(value, namespace, key) {
+  return value === key || value === `${namespace}.${key}`;
+}
 function useSmartTranslations(namespace) {
   const forceInternal = React5.useContext(ForceInternalContext);
   const internalT = useUnderverseTranslations(namespace);
+  const internalLocale = useUnderverseLocale();
   if (forceInternal || !nextIntlHooks?.useTranslations) {
     return internalT;
   }
+  let resolvedLocale = internalLocale;
+  try {
+    resolvedLocale = normalizeLocale(nextIntlHooks.useLocale?.(), internalLocale);
+  } catch {
+    resolvedLocale = internalLocale;
+  }
   try {
     const nextIntlT = nextIntlHooks.useTranslations(namespace);
-    return nextIntlT;
+    return (key) => {
+      try {
+        const translated = nextIntlT(key);
+        if (!isUnresolvedTranslation(translated, namespace, key)) {
+          return translated;
+        }
+      } catch {
+      }
+      const internalValue = internalT(key);
+      if (internalValue !== key) {
+        return internalValue;
+      }
+      return getUnderverseDefaultTranslation(resolvedLocale, namespace, key);
+    };
   } catch {
-    return internalT;
+    return (key) => {
+      const internalValue = internalT(key);
+      if (internalValue !== key) {
+        return internalValue;
+      }
+      return getUnderverseDefaultTranslation(resolvedLocale, namespace, key);
+    };
   }
 }
 function useSmartLocale() {
@@ -22525,7 +22574,6 @@ var import_extension_blockquote = __toESM(require("@tiptap/extension-blockquote"
 var import_extension_code = __toESM(require("@tiptap/extension-code"), 1);
 var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
 var import_extension_history = __toESM(require("@tiptap/extension-history"), 1);
-var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
 var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
 var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_color = __toESM(require("@tiptap/extension-color"), 1);
@@ -22550,6 +22598,32 @@ var import_react47 = require("react");
 var import_lucide_react39 = require("lucide-react");
 var import_tippy = __toESM(require("tippy.js"), 1);
 var import_jsx_runtime79 = require("react/jsx-runtime");
+var DEFAULT_MESSAGES = {
+  noResults: "No results",
+  basicBlocks: "Basic Blocks",
+  text: "Text",
+  textDesc: "Start writing with plain text",
+  heading1: "Heading 1",
+  heading1Desc: "Large section heading",
+  heading2: "Heading 2",
+  heading2Desc: "Medium section heading",
+  heading3: "Heading 3",
+  heading3Desc: "Small section heading",
+  bulletList: "Bullet List",
+  bulletListDesc: "Create a simple bullet list",
+  orderedList: "Numbered List",
+  orderedListDesc: "Create a list with numbering",
+  todoList: "Todo List",
+  todoListDesc: "Track tasks with a todo list",
+  quote: "Quote",
+  quoteDesc: "Capture a quote",
+  codeBlock: "Code Block",
+  codeBlockDesc: "Display code with syntax highlighting",
+  divider: "Divider",
+  dividerDesc: "Visually divide blocks",
+  table: "Table",
+  tableDesc: "Insert a table"
+};
 var CommandList = (0, import_react47.forwardRef)((props, ref) => {
   const [selectedIndex, setSelectedIndex] = (0, import_react47.useState)(0);
   const listRef = (0, import_react47.useRef)(null);
@@ -22581,10 +22655,10 @@ var CommandList = (0, import_react47.forwardRef)((props, ref) => {
     }
   }));
   if (props.items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: "No results" });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: props.messages.noResults });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Basic Blocks" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: props.messages.basicBlocks }) }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "button",
       {
@@ -22617,92 +22691,92 @@ var CommandList = (0, import_react47.forwardRef)((props, ref) => {
   ] });
 });
 CommandList.displayName = "CommandList";
-var getSuggestionItems = ({ query }) => {
+var getSuggestionItems = ({ query, messages }) => {
   return [
     {
       icon: import_lucide_react39.Type,
-      title: "Text",
-      description: "Start writing with plain text",
+      title: messages.text,
+      description: messages.textDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setParagraph().run();
       }
     },
     {
       icon: import_lucide_react39.Heading1,
-      title: "Heading 1",
-      description: "Large section heading",
+      title: messages.heading1,
+      description: messages.heading1Desc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
       }
     },
     {
       icon: import_lucide_react39.Heading2,
-      title: "Heading 2",
-      description: "Medium section heading",
+      title: messages.heading2,
+      description: messages.heading2Desc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
       }
     },
     {
       icon: import_lucide_react39.Heading3,
-      title: "Heading 3",
-      description: "Small section heading",
+      title: messages.heading3,
+      description: messages.heading3Desc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
       }
     },
     {
       icon: import_lucide_react39.List,
-      title: "Bullet List",
-      description: "Create a simple bullet list",
+      title: messages.bulletList,
+      description: messages.bulletListDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleBulletList().run();
       }
     },
     {
       icon: import_lucide_react39.ListOrdered,
-      title: "Numbered List",
-      description: "Create a list with numbering",
+      title: messages.orderedList,
+      description: messages.orderedListDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleOrderedList().run();
       }
     },
     {
       icon: import_lucide_react39.ListTodo,
-      title: "Todo List",
-      description: "Track tasks with a todo list",
+      title: messages.todoList,
+      description: messages.todoListDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleTaskList().run();
       }
     },
     {
       icon: import_lucide_react39.Quote,
-      title: "Quote",
-      description: "Capture a quote",
+      title: messages.quote,
+      description: messages.quoteDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleBlockquote().run();
       }
     },
     {
       icon: import_lucide_react39.FileCode,
-      title: "Code Block",
-      description: "Display code with syntax highlighting",
+      title: messages.codeBlock,
+      description: messages.codeBlockDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
       }
     },
     {
       icon: import_lucide_react39.Minus,
-      title: "Divider",
-      description: "Visually divide blocks",
+      title: messages.divider,
+      description: messages.dividerDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setHorizontalRule().run();
       }
     },
     {
       icon: import_lucide_react39.Table,
-      title: "Table",
-      description: "Insert a table",
+      title: messages.table,
+      description: messages.tableDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
       }
@@ -22711,7 +22785,13 @@ var getSuggestionItems = ({ query }) => {
 };
 var SlashCommand = import_core.Extension.create({
   name: "slashCommand",
+  addOptions() {
+    return {
+      messages: DEFAULT_MESSAGES
+    };
+  },
   addProseMirrorPlugins() {
+    const messages = this.options.messages;
     return [
       (0, import_suggestion.default)({
         editor: this.editor,
@@ -22719,14 +22799,17 @@ var SlashCommand = import_core.Extension.create({
         command: ({ editor, range, props }) => {
           props.command({ editor, range });
         },
-        items: getSuggestionItems,
+        items: ({ query, editor }) => getSuggestionItems({ query, editor, messages }),
         render: () => {
           let component;
           let popup;
           return {
             onStart: (props) => {
               component = new import_react46.ReactRenderer(CommandList, {
-                props,
+                props: {
+                  ...props,
+                  messages
+                },
                 editor: props.editor
               });
               if (!props.clientRect) {
@@ -22743,7 +22826,10 @@ var SlashCommand = import_core.Extension.create({
               });
             },
             onUpdate(props) {
-              component?.updateProps(props);
+              component?.updateProps({
+                ...props,
+                messages
+              });
               if (!props.clientRect) {
                 return;
               }
@@ -23776,10 +23862,83 @@ var EmojiSuggestion = import_core3.Extension.create({
   }
 });
 
+// src/components/UEditor/placeholder.ts
+var import_core4 = require("@tiptap/core");
+var import_state3 = require("@tiptap/pm/state");
+var import_view = require("@tiptap/pm/view");
+var UEditorPlaceholder = import_core4.Extension.create({
+  name: "placeholder",
+  addOptions() {
+    return {
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty",
+      dataAttribute: "placeholder",
+      placeholder: "Write something...",
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false,
+      shouldShow: () => true
+    };
+  },
+  addProseMirrorPlugins() {
+    const dataAttribute = `data-${this.options.dataAttribute}`;
+    return [
+      new import_state3.Plugin({
+        key: new import_state3.PluginKey("placeholder"),
+        props: {
+          decorations: ({ doc, selection }) => {
+            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+            const { anchor } = selection;
+            const decorations = [];
+            let hasTable = false;
+            if (!active) {
+              return null;
+            }
+            const isEmptyDoc = this.editor.isEmpty;
+            doc.descendants((node) => {
+              if (node.type.name === "table") {
+                hasTable = true;
+                return false;
+              }
+              return void 0;
+            });
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+              const isEmpty = !node.isLeaf && (0, import_core4.isNodeEmpty)(node);
+              if (!((hasAnchor || !this.options.showOnlyCurrent) && isEmpty)) {
+                return this.options.includeChildren;
+              }
+              if (!this.options.shouldShow({ editor: this.editor, node, pos, hasAnchor, isEmptyDoc, hasTable })) {
+                return this.options.includeChildren;
+              }
+              const placeholderValue = typeof this.options.placeholder === "function" ? this.options.placeholder({ editor: this.editor, node, pos, hasAnchor }) : this.options.placeholder;
+              if (!placeholderValue) {
+                return this.options.includeChildren;
+              }
+              const classes = [this.options.emptyNodeClass];
+              if (isEmptyDoc) {
+                classes.push(this.options.emptyEditorClass);
+              }
+              decorations.push(
+                import_view.Decoration.node(pos, pos + node.nodeSize, {
+                  class: classes.join(" "),
+                  [dataAttribute]: placeholderValue
+                })
+              );
+              return this.options.includeChildren;
+            });
+            return import_view.DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+
 // src/components/UEditor/resizable-image.tsx
 var import_react50 = require("react");
 var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
-var import_core4 = require("@tiptap/core");
+var import_core5 = require("@tiptap/core");
 var import_react51 = require("@tiptap/react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var MIN_IMAGE_SIZE_PX = 40;
@@ -23978,7 +24137,7 @@ var ResizableImage = import_extension_image.default.extend({
     };
   },
   renderHTML({ HTMLAttributes }) {
-    return ["img", (0, import_core4.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)];
+    return ["img", (0, import_core5.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)];
   },
   addNodeView() {
     return (0, import_react51.ReactNodeViewRenderer)(ResizableImageNodeView);
@@ -23995,6 +24154,7 @@ var resizable_image_default = ResizableImage;
 var lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
 function buildUEditorExtensions({
   placeholder,
+  translate,
   maxCharacters,
   uploadImage,
   imageInsertMode = "base64",
@@ -24087,12 +24247,49 @@ function buildUEditorExtensions({
     }),
     import_extension_typography.default,
     import_extension_history.default,
-    import_extension_placeholder.default.configure({
+    UEditorPlaceholder.configure({
       placeholder,
       emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty"
+      emptyNodeClass: "is-empty",
+      shouldShow: ({ node, hasTable }) => {
+        const nodeName = node.type.name;
+        if (nodeName === "table" || nodeName === "tableCell" || nodeName === "tableHeader") {
+          return false;
+        }
+        if (hasTable) {
+          return false;
+        }
+        return true;
+      }
+    }),
+    SlashCommand.configure({
+      messages: {
+        noResults: translate("slashCommand.noResults"),
+        basicBlocks: translate("slashCommand.basicBlocks"),
+        text: translate("slashCommand.text"),
+        textDesc: translate("slashCommand.textDesc"),
+        heading1: translate("slashCommand.heading1"),
+        heading1Desc: translate("slashCommand.heading1Desc"),
+        heading2: translate("slashCommand.heading2"),
+        heading2Desc: translate("slashCommand.heading2Desc"),
+        heading3: translate("slashCommand.heading3"),
+        heading3Desc: translate("slashCommand.heading3Desc"),
+        bulletList: translate("slashCommand.bulletList"),
+        bulletListDesc: translate("slashCommand.bulletListDesc"),
+        orderedList: translate("slashCommand.orderedList"),
+        orderedListDesc: translate("slashCommand.orderedListDesc"),
+        todoList: translate("slashCommand.todoList"),
+        todoListDesc: translate("slashCommand.todoListDesc"),
+        quote: translate("slashCommand.quote"),
+        quoteDesc: translate("slashCommand.quoteDesc"),
+        codeBlock: translate("slashCommand.codeBlock"),
+        codeBlockDesc: translate("slashCommand.codeBlockDesc"),
+        divider: translate("slashCommand.divider"),
+        dividerDesc: translate("slashCommand.dividerDesc"),
+        table: translate("slashCommand.table"),
+        tableDesc: translate("slashCommand.tableDesc")
+      }
     }),
-    SlashCommand,
     EmojiSuggestion
   ];
 }
@@ -24279,6 +24476,7 @@ var CATEGORY_ICONS = {
   "flags": import_lucide_react43.Flag
 };
 var EmojiPicker = ({ onSelect, onClose }) => {
+  const t = useSmartTranslations("UEditor");
   const [search, setSearch] = (0, import_react54.useState)("");
   const [activeCategory, setActiveCategory] = (0, import_react54.useState)(EMOJI_LIST[0]?.id || "");
   const scrollContainerRef = (0, import_react54.useRef)(null);
@@ -24348,7 +24546,7 @@ var EmojiPicker = ({ onSelect, onClose }) => {
         "input",
         {
           type: "text",
-          placeholder: "T\xECm ki\u1EBFm bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\xFAc",
+          placeholder: t("emojiPicker.searchPlaceholder"),
           value: search,
           onChange: (e) => setSearch(e.target.value),
           className: cn(
@@ -24394,8 +24592,8 @@ var EmojiPicker = ({ onSelect, onClose }) => {
             )) })
           ] }, category.id)) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-sm font-medium text-muted-foreground", children: "Kh\xF4ng t\xECm th\u1EA5y emoji" }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: "Th\u1EED t\u1EEB kh\xF3a kh\xE1c" })
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-sm font-medium text-muted-foreground", children: t("emojiPicker.noResults") }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: t("emojiPicker.tryDifferentSearch") })
           ] })
         ) : (
           // All Categories - Messenger Style
@@ -25665,8 +25863,8 @@ var UEditor = import_react57.default.forwardRef(({
   const effectivePlaceholder = placeholder ?? t("placeholder");
   const inFlightPrepareRef = (0, import_react57.useRef)(null);
   const extensions = (0, import_react57.useMemo)(
-    () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable }),
-    [effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable]
+    () => buildUEditorExtensions({ placeholder: effectivePlaceholder, translate: t, maxCharacters, uploadImage, imageInsertMode, editable }),
+    [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, editable]
   );
   const editor = (0, import_react58.useEditor)({
     immediatelyRender: false,