@underverse-ui/underverse 1.0.49 → 1.0.51

package/dist/index.js

@@ -748,6 +748,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",
@@ -967,6 +972,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",
@@ -1185,6 +1195,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",
@@ -1403,6 +1418,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",
@@ -1424,6 +1444,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(
@@ -1433,20 +1472,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]
@@ -1457,20 +1483,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);
@@ -1496,17 +1509,53 @@ var ForceInternalContext = React5.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
   return /* @__PURE__ */ jsx6(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() {
@@ -15017,9 +15066,9 @@ function CategoryTreeSelect(props) {
       category.id
     );
   };
-  const renderSearch = () => {
+  const renderSearch = ({ sticky = true, className: className2 } = {}) => {
     if (!isSearchEnabled) return null;
-    return /* @__PURE__ */ jsx46("div", { className: "sticky top-0 z-10 bg-popover/85 backdrop-blur-xl pb-2", children: /* @__PURE__ */ jsxs38("div", { className: "relative", children: [
+    return /* @__PURE__ */ jsx46("div", { className: cn(sticky && "sticky top-0 z-10 bg-popover/85 pb-2 backdrop-blur-xl", className2), children: /* @__PURE__ */ jsxs38("div", { className: "relative", children: [
       /* @__PURE__ */ jsx46(Search5, { className: "absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
       /* @__PURE__ */ jsx46(
         "input",
@@ -15195,18 +15244,18 @@ function CategoryTreeSelect(props) {
       displayText = mergedLabels.selectedText(selectedCount);
     }
   }
-  const dropdownBody = /* @__PURE__ */ jsxs38(
-    "div",
-    {
-      ref: dropdownViewportRef,
-      id: `${resolvedId}-tree`,
-      className: cn("max-h-80 overflow-auto overflow-x-hidden p-2"),
-      children: [
-        renderSearch(),
-        renderTreeContent()
-      ]
-    }
-  );
+  const dropdownBody = /* @__PURE__ */ jsxs38("div", { className: "flex max-h-80 flex-col overflow-hidden", children: [
+    renderSearch({ sticky: false, className: "border-b border-border/30 p-2 pb-2" }),
+    /* @__PURE__ */ jsx46(
+      "div",
+      {
+        ref: dropdownViewportRef,
+        id: `${resolvedId}-tree`,
+        className: cn("min-h-0 flex-1 overflow-auto overflow-x-hidden p-2 pt-2"),
+        children: renderTreeContent()
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxs38("div", { className: cn("w-full space-y-2", className), children: [
     renderLabel(),
     /* @__PURE__ */ jsx46(
@@ -22352,7 +22401,6 @@ import Blockquote from "@tiptap/extension-blockquote";
 import Code from "@tiptap/extension-code";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import History2 from "@tiptap/extension-history";
-import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
 import { TextStyle } from "@tiptap/extension-text-style";
 import Color from "@tiptap/extension-color";
@@ -22389,6 +22437,32 @@ import {
 } from "lucide-react";
 import tippy from "tippy.js";
 import { jsx as jsx79, jsxs as jsxs69 } from "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 = forwardRef13((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState47(0);
   const listRef = useRef30(null);
@@ -22420,10 +22494,10 @@ var CommandList = forwardRef13((props, ref) => {
     }
   }));
   if (props.items.length === 0) {
-    return /* @__PURE__ */ jsx79("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: "No results" });
+    return /* @__PURE__ */ jsx79("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: props.messages.noResults });
   }
   return /* @__PURE__ */ jsxs69("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
-    /* @__PURE__ */ jsx79("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx79("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Basic Blocks" }) }),
+    /* @__PURE__ */ jsx79("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx79("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: props.messages.basicBlocks }) }),
     /* @__PURE__ */ jsx79("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ jsxs69(
       "button",
       {
@@ -22456,92 +22530,92 @@ var CommandList = forwardRef13((props, ref) => {
   ] });
 });
 CommandList.displayName = "CommandList";
-var getSuggestionItems = ({ query }) => {
+var getSuggestionItems = ({ query, messages }) => {
   return [
     {
       icon: 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: 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: 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: 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: List3,
-      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: 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: 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: Quote,
-      title: "Quote",
-      description: "Capture a quote",
+      title: messages.quote,
+      description: messages.quoteDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleBlockquote().run();
       }
     },
     {
       icon: FileCode2,
-      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: Minus,
-      title: "Divider",
-      description: "Visually divide blocks",
+      title: messages.divider,
+      description: messages.dividerDesc,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setHorizontalRule().run();
       }
     },
     {
       icon: Table2,
-      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();
       }
@@ -22550,7 +22624,13 @@ var getSuggestionItems = ({ query }) => {
 };
 var SlashCommand = Extension.create({
   name: "slashCommand",
+  addOptions() {
+    return {
+      messages: DEFAULT_MESSAGES
+    };
+  },
   addProseMirrorPlugins() {
+    const messages = this.options.messages;
     return [
       Suggestion({
         editor: this.editor,
@@ -22558,14 +22638,17 @@ var SlashCommand = 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 ReactRenderer(CommandList, {
-                props,
+                props: {
+                  ...props,
+                  messages
+                },
                 editor: props.editor
               });
               if (!props.clientRect) {
@@ -22582,7 +22665,10 @@ var SlashCommand = Extension.create({
               });
             },
             onUpdate(props) {
-              component?.updateProps(props);
+              component?.updateProps({
+                ...props,
+                messages
+              });
               if (!props.clientRect) {
                 return;
               }
@@ -23615,6 +23701,79 @@ var EmojiSuggestion = Extension3.create({
   }
 });
 
+// src/components/UEditor/placeholder.ts
+import { Extension as Extension4, isNodeEmpty } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+var UEditorPlaceholder = Extension4.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 Plugin2({
+        key: new PluginKey2("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 && 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(
+                Decoration.node(pos, pos + node.nodeSize, {
+                  class: classes.join(" "),
+                  [dataAttribute]: placeholderValue
+                })
+              );
+              return this.options.includeChildren;
+            });
+            return DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+
 // src/components/UEditor/resizable-image.tsx
 import { useEffect as useEffect33, useRef as useRef31, useState as useState49 } from "react";
 import Image3 from "@tiptap/extension-image";
@@ -23834,6 +23993,7 @@ var resizable_image_default = ResizableImage;
 var lowlight = createLowlight(common);
 function buildUEditorExtensions({
   placeholder,
+  translate,
   maxCharacters,
   uploadImage,
   imageInsertMode = "base64",
@@ -23926,12 +24086,49 @@ function buildUEditorExtensions({
     }),
     Typography,
     History2,
-    Placeholder.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
   ];
 }
@@ -24152,6 +24349,7 @@ var CATEGORY_ICONS = {
   "flags": Flag
 };
 var EmojiPicker = ({ onSelect, onClose }) => {
+  const t = useSmartTranslations("UEditor");
   const [search, setSearch] = useState51("");
   const [activeCategory, setActiveCategory] = useState51(EMOJI_LIST[0]?.id || "");
   const scrollContainerRef = useRef33(null);
@@ -24221,7 +24419,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(
@@ -24267,8 +24465,8 @@ var EmojiPicker = ({ onSelect, onClose }) => {
             )) })
           ] }, category.id)) : /* @__PURE__ */ jsxs74("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
             /* @__PURE__ */ jsx84("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
-            /* @__PURE__ */ jsx84("div", { className: "text-sm font-medium text-muted-foreground", children: "Kh\xF4ng t\xECm th\u1EA5y emoji" }),
-            /* @__PURE__ */ jsx84("div", { className: "text-xs text-muted-foreground mt-1", children: "Th\u1EED t\u1EEB kh\xF3a kh\xE1c" })
+            /* @__PURE__ */ jsx84("div", { className: "text-sm font-medium text-muted-foreground", children: t("emojiPicker.noResults") }),
+            /* @__PURE__ */ jsx84("div", { className: "text-xs text-muted-foreground mt-1", children: t("emojiPicker.tryDifferentSearch") })
           ] })
         ) : (
           // All Categories - Messenger Style
@@ -25560,8 +25758,8 @@ var UEditor = React79.forwardRef(({
   const effectivePlaceholder = placeholder ?? t("placeholder");
   const inFlightPrepareRef = useRef36(null);
   const extensions = useMemo29(
-    () => 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 = useEditor({
     immediatelyRender: false,