@select-org/select-post-builder 1.1.3 → 1.1.5

package/dist/post-builder.js

@@ -2524,7 +2524,7 @@ var ImageSearchFrom = /* @__PURE__ */ ((ImageSearchFrom2) => {
 })(ImageSearchFrom || {});
 var EditorTypes = /* @__PURE__ */ ((EditorTypes2) => {
   EditorTypes2["Media"] = "Media";
-  EditorTypes2["Text"] = "Blog";
+  EditorTypes2["Blog"] = "Blog";
   EditorTypes2["Poll"] = "Poll";
   return EditorTypes2;
 })(EditorTypes || {});
@@ -8528,12 +8528,25 @@ const usePostBuilderAnalytics = () => {
 };
 const editorTypes = enumToOptions(EditorTypes);
 const EditorTypeTabs = ({ editorTab, onSwitchEditorTab }) => {
+  const { t } = usePostBuilder();
   const { trackTabSwitch } = usePostBuilderAnalytics();
   const handleSwitchTab = (newTab) => {
     const oldTab = editorTab;
     trackTabSwitch({ oldTab, newTab });
     onSwitchEditorTab(newTab);
   };
+  const translationKeyMapping = (tab) => {
+    switch (tab) {
+      case EditorTypes.Media:
+        return "postTabKey";
+      case EditorTypes.Blog:
+        return "blogTabKey";
+      case EditorTypes.Poll:
+        return "pollTabKey";
+      default:
+        return "postTabKey";
+    }
+  };
   return /* @__PURE__ */ jsx(
     Tabs,
     {
@@ -8541,7 +8554,7 @@ const EditorTypeTabs = ({ editorTab, onSwitchEditorTab }) => {
       value: editorTab,
       onValueChange: handleSwitchTab,
       className: "w-full",
-      children: /* @__PURE__ */ jsx(TabsList, { className: "w-full rounded-none border-b", children: editorTypes.map((data) => /* @__PURE__ */ jsx(TabsTrigger, { value: data.value.toString(), children: data.label }, data.value)) })
+      children: /* @__PURE__ */ jsx(TabsList, { className: "w-full rounded-none border-b", children: editorTypes.map((data) => /* @__PURE__ */ jsx(TabsTrigger, { value: data.value.toString(), children: t(translationKeyMapping(data.key), data.value) }, data.value)) })
     }
   );
 };
@@ -14820,6 +14833,7 @@ const ToolbarButton = forwardRef(
   ({ id, icon: Icon2, tooltip, active, children, className, onClick, ...buttonProps }, ref) => {
     const { editor } = useCurrentEditor();
     const { trackFeature } = usePostBuilderAnalytics();
+    const { t } = usePostBuilder();
     const handleClick = (e) => {
       onClick?.(e);
       if (id) trackFeature({ featureName: id });
@@ -14845,7 +14859,7 @@ const ToolbarButton = forwardRef(
           children: children ?? (Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "size-full" }))
         }
       ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+      /* @__PURE__ */ jsx(TooltipContent, { children: t(tooltip, tooltip) ?? tooltip })
     ] }) });
   }
 );
@@ -16252,6 +16266,7 @@ const LinkDecoratorModal = ({
 }) => {
   const { editor } = useCurrentEditor();
   const { core } = useApi();
+  const { t } = usePostBuilder();
   const [uid, setUid] = useState(defaultValues?.uid ?? null);
   const [link, setLink] = useState(defaultValues?.link ?? "");
   const [text2, setText] = useState(defaultValues?.text || "");
@@ -16312,11 +16327,12 @@ const LinkDecoratorModal = ({
   return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: handleOpenChange, children: [
     children ? /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children }) : null,
     /* @__PURE__ */ jsxs(DialogContent, { className: "-translate-1/2", children: [
-      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Add Link" }) }),
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: isUpdate ? t("updateLinkKey") : t("insertLinkKey") }) }),
       /* @__PURE__ */ jsx(FieldSet, { children: /* @__PURE__ */ jsxs(FieldGroup, { className: "gap-3", children: [
         /* @__PURE__ */ jsxs(Field, { className: "gap-1.5", children: [
           /* @__PURE__ */ jsxs(FieldLabel, { children: [
-            "Link ",
+            t("linkInputLabelKey"),
+            " ",
             /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
           ] }),
           /* @__PURE__ */ jsxs(InputGroup, { children: [
@@ -16332,10 +16348,10 @@ const LinkDecoratorModal = ({
             ),
             /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Link, {}) })
           ] }),
-          !isValid && isValid !== void 0 && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: "Invalid link" }] })
+          !isValid && isValid !== void 0 && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: t("invalidLinkKey") }] })
         ] }),
         !hideTextInput && /* @__PURE__ */ jsxs(Field, { className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx(FieldLabel, { children: "Text to display" }),
+          /* @__PURE__ */ jsx(FieldLabel, { children: t("linkTextInputLabelKey") }),
           /* @__PURE__ */ jsxs(InputGroup, { children: [
             /* @__PURE__ */ jsx(
               InputGroupInput,
@@ -16344,7 +16360,7 @@ const LinkDecoratorModal = ({
                 value: text2,
                 onChange: handleChangeText,
                 onKeyDown: handleKeyDown,
-                placeholder: "Text to display"
+                placeholder: t("linkTextInputLabelKey")
               }
             ),
             /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(TextAlignStart, {}) })
@@ -16352,7 +16368,7 @@ const LinkDecoratorModal = ({
         ] })
       ] }) }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onOpenChange?.(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onOpenChange?.(false), children: t("cancelKey") }),
         /* @__PURE__ */ jsxs(
           Button,
           {
@@ -16360,7 +16376,7 @@ const LinkDecoratorModal = ({
             onClick: () => handleInsertLink(link, text2, uid ?? void 0),
             children: [
               isLoading && /* @__PURE__ */ jsx(Spinner, {}),
-              isUpdate ? "Update" : "Insert"
+              isUpdate ? t("updateKey") : t("insertKey")
             ]
           }
         )
@@ -18336,6 +18352,7 @@ function ImageSearchModal({
   onImageSelect,
   children
 }) {
+  const { t } = usePostBuilder();
   const [activeTab, setActiveTab] = useState("gifs");
   const [searchQuery, setSearchQuery] = useState("");
   const imageSearch = useMediaSearch("images");
@@ -18403,7 +18420,7 @@ function ImageSearchModal({
   return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx(Button, { children: "Open Search Modal" }) }),
     /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-4xl w-full h-[80vh] flex flex-col overflow-hidden px-0 py-0 -translate-1/2", children: [
-      /* @__PURE__ */ jsx(DialogHeader, { className: "p-4 border-b bg-accent", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Search Media" }) }),
+      /* @__PURE__ */ jsx(DialogHeader, { className: "p-4 border-b bg-accent", children: /* @__PURE__ */ jsx(DialogTitle, { children: t("mediaSearchTitleKey") }) }),
       /* @__PURE__ */ jsxs(
         Tabs,
         {
@@ -18413,15 +18430,15 @@ function ImageSearchModal({
           className: "flex-1 grow flex flex-col overflow-y-auto",
           children: [
             /* @__PURE__ */ jsx("div", { className: "px-4", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
-              /* @__PURE__ */ jsx(TabsTrigger, { value: "gifs", children: "GIF Search" }),
-              /* @__PURE__ */ jsx(TabsTrigger, { value: "images", children: "Image Search" })
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "gifs", children: t("gifSearchKey") }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "images", children: t("imageSearchKey") })
             ] }) }),
             /* @__PURE__ */ jsx(
               SearchBar,
               {
                 value: searchQuery,
                 onChange: handleSearch,
-                placeholder: `Search ${activeTab}...`
+                placeholder: activeTab === "gifs" ? t("searchGifPlaceholder") : t("searchIMagePlaceholder")
               }
             ),
             /* @__PURE__ */ jsx(TabsContent, { value: "images", className: "flex-1 grow mt-4 overflow-y-auto", children: /* @__PURE__ */ jsx(
@@ -18452,7 +18469,7 @@ function ImageSearchModal({
 }
 function SearchBar({ value, onChange, placeholder }) {
   return /* @__PURE__ */ jsx("div", { className: "mt-2 px-4", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 transform-none h-4 w-4 text-muted-foreground" }),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -20225,7 +20242,7 @@ function isOnlyContentNode(node, targetType, options = {}) {
   return foundTargetType && !foundOtherContentNode;
 }
 const TOOLBAR_FEATURES = {
-  [EditorTypes.Text]: {
+  [EditorTypes.Blog]: {
     showFormatting: true,
     showImage: true,
     showVideo: true,
@@ -20262,6 +20279,7 @@ const Toolbar = ({
   const editorState = useEditorStateSnapshot(editor);
   const { showCrossMentionIndicator } = useEditorWithMentionTracking(editor, { debounceMs: 150 });
   const { trackFeature } = usePostBuilderAnalytics();
+  const { t } = usePostBuilder();
   if (!editor) return null;
   const features = TOOLBAR_FEATURES[editorType];
   const handleClickLink = (e) => {
@@ -20271,7 +20289,7 @@ const Toolbar = ({
     }
   };
   const handleInsertLink = (link, text2, uid, previewPayload) => {
-    const linkText = editorType === EditorTypes.Text ? text2 || link : link;
+    const linkText = editorType === EditorTypes.Blog ? text2 || link : link;
     if (uid) {
       editor.commands.updateLink(uid, { href: link, text: linkText, previewPayload });
       return;
@@ -20352,7 +20370,7 @@ const Toolbar = ({
         {
           id: FEATURE_NAME_MAP.undo,
           icon: Undo,
-          tooltip: "Undo",
+          tooltip: "undoKey",
           onClick: actions?.undo,
           disabled: !editorState?.canUndo
         }
@@ -20362,7 +20380,7 @@ const Toolbar = ({
         {
           id: FEATURE_NAME_MAP.redo,
           icon: Redo,
-          tooltip: "Redo",
+          tooltip: "redoKey",
           onClick: actions?.redo,
           disabled: !editorState?.canRedo
         }
@@ -20371,7 +20389,7 @@ const Toolbar = ({
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           ToolbarButton,
           {
-            tooltip: "Heading Options",
+            tooltip: "headingOptionsKey",
             icon: getHeadingIcon(editorState),
             "aria-label": "More formatting options"
           }
@@ -20382,13 +20400,14 @@ const Toolbar = ({
             {
               id: FEATURE_NAME_MAP.paragraph,
               className: "w-full justify-start",
-              tooltip: "Paragraph",
+              tooltip: "paragraphKey",
               onClick: actions?.setParagraph,
               active: editorState?.isParagraph,
               disabled: !editorState?.canParagraph,
               children: [
                 /* @__PURE__ */ jsx(Type, {}),
-                " Paragraph"
+                " ",
+                t("paragraphKey")
               ]
             }
           ) }),
@@ -20397,13 +20416,14 @@ const Toolbar = ({
             {
               id: HEADING_FEATURE_MAP[1],
               className: "w-full justify-start",
-              tooltip: "Heading One",
+              tooltip: "heading1Key",
               onClick: () => actions?.toggleHeading(1),
               active: editorState?.isHeading1,
               disabled: !editorState?.canHeading1,
               children: [
                 /* @__PURE__ */ jsx(Heading1, {}),
-                " Heading 1"
+                " ",
+                t("heading1Key")
               ]
             }
           ) }),
@@ -20412,13 +20432,14 @@ const Toolbar = ({
             {
               id: HEADING_FEATURE_MAP[2],
               className: "w-full justify-start",
-              tooltip: "Heading Two",
+              tooltip: "heading2Key",
               onClick: () => actions?.toggleHeading(2),
               active: editorState?.isHeading2,
               disabled: !editorState?.canHeading2,
               children: [
                 /* @__PURE__ */ jsx(Heading2, {}),
-                " Heading 2"
+                " ",
+                t("heading2Key")
               ]
             }
           ) }),
@@ -20427,13 +20448,14 @@ const Toolbar = ({
             {
               id: HEADING_FEATURE_MAP[3],
               className: "w-full justify-start",
-              tooltip: "Heading Three",
+              tooltip: "heading3Key",
               onClick: () => actions?.toggleHeading(3),
               active: editorState?.isHeading3,
               disabled: !editorState?.canHeading3,
               children: [
                 /* @__PURE__ */ jsx(Heading3, {}),
-                " Heading 3"
+                " ",
+                t("heading3Key")
               ]
             }
           ) })
@@ -20445,7 +20467,7 @@ const Toolbar = ({
         {
           id: FEATURE_NAME_MAP.bold,
           icon: Bold,
-          tooltip: "Bold",
+          tooltip: "boldKey",
           onClick: actions?.toggleBold,
           active: editorState?.isBold,
           disabled: !editorState?.canBold
@@ -20457,7 +20479,7 @@ const Toolbar = ({
           {
             id: FEATURE_NAME_MAP.italic,
             icon: Italic,
-            tooltip: "Italic",
+            tooltip: "italicKey",
             onClick: actions?.toggleItalic,
             active: editorState?.isItalic,
             disabled: !editorState?.canItalic
@@ -20468,7 +20490,7 @@ const Toolbar = ({
           {
             id: FEATURE_NAME_MAP.strike,
             icon: Strikethrough,
-            tooltip: "Strikethrough",
+            tooltip: "strikethroughKey",
             onClick: actions?.toggleStrikethrough,
             active: editorState?.isStrike,
             disabled: !editorState?.canStrike
@@ -20481,7 +20503,7 @@ const Toolbar = ({
         {
           id: FEATURE_NAME_MAP.bulletList,
           icon: List,
-          tooltip: "Bullet List",
+          tooltip: "bulletListKey",
           onClick: actions?.toggleBulletList,
           active: editorState?.isBulletList,
           disabled: !editorState?.canBulletList
@@ -20492,7 +20514,7 @@ const Toolbar = ({
         {
           id: FEATURE_NAME_MAP.orderedList,
           icon: ListOrdered,
-          tooltip: "Ordered List",
+          tooltip: "orderedListKey",
           onClick: actions?.toggleOrderedList,
           active: editorState?.isOrderedList,
           disabled: !editorState?.canOrderedList
@@ -20505,7 +20527,7 @@ const Toolbar = ({
           {
             id: FEATURE_NAME_MAP.blockquote,
             icon: TextQuote,
-            tooltip: "BlockQuote",
+            tooltip: "blockquoteKey",
             onClick: actions?.toggleBlockquote,
             active: editorState?.isBlockquote,
             disabled: !editorState?.canBlockquote
@@ -20516,7 +20538,7 @@ const Toolbar = ({
           {
             id: FEATURE_NAME_MAP.code,
             icon: Code,
-            tooltip: "Code",
+            tooltip: "codeKey",
             onClick: actions?.toggleCode,
             active: editorState?.isCode,
             disabled: !editorState?.canCode
@@ -20527,7 +20549,7 @@ const Toolbar = ({
           {
             id: FEATURE_NAME_MAP.codeBlock,
             icon: FileCode2,
-            tooltip: "Codeblock",
+            tooltip: "codeBlockKey",
             onClick: actions?.toggleCodeBlock,
             active: editorState?.isCodeBlock,
             disabled: !editorState?.canCodeBlock
@@ -20538,7 +20560,7 @@ const Toolbar = ({
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           ToolbarButton,
           {
-            tooltip: "More formatting options",
+            tooltip: "moreOptionsKey",
             icon: Ellipsis,
             "aria-label": "More formatting options"
           }
@@ -20549,7 +20571,7 @@ const Toolbar = ({
             {
               id: FEATURE_NAME_MAP.italic,
               icon: Italic,
-              tooltip: "Italic",
+              tooltip: "italicKey",
               onClick: actions?.toggleItalic,
               active: editorState?.isItalic,
               disabled: !editorState?.canItalic
@@ -20560,7 +20582,7 @@ const Toolbar = ({
             {
               id: FEATURE_NAME_MAP.strike,
               icon: Strikethrough,
-              tooltip: "Strikethrough",
+              tooltip: "strikethroughKey",
               onClick: actions?.toggleStrikethrough,
               active: editorState?.isStrike,
               disabled: !editorState?.canStrike
@@ -20571,7 +20593,7 @@ const Toolbar = ({
             {
               id: FEATURE_NAME_MAP.blockquote,
               icon: TextQuote,
-              tooltip: "BlockQuote",
+              tooltip: "blockquoteKey",
               onClick: actions?.toggleBlockquote,
               active: editorState?.isBlockquote,
               disabled: !editorState?.canBlockquote
@@ -20582,7 +20604,7 @@ const Toolbar = ({
             {
               id: FEATURE_NAME_MAP.code,
               icon: Code,
-              tooltip: "Code",
+              tooltip: "codeKey",
               onClick: actions?.toggleCode,
               active: editorState?.isCode,
               disabled: !editorState?.canCode
@@ -20593,7 +20615,7 @@ const Toolbar = ({
             {
               id: FEATURE_NAME_MAP.codeBlock,
               icon: FileCode2,
-              tooltip: "Codeblock",
+              tooltip: "codeBlockKey",
               onClick: actions?.toggleCodeBlock,
               active: editorState?.isCodeBlock,
               disabled: !editorState?.canCodeBlock
@@ -20635,7 +20657,7 @@ const Toolbar = ({
         {
           id: FEATURE_NAME_MAP.image,
           icon: ImagePlus,
-          tooltip: "Insert Image",
+          tooltip: "insertImageKey",
           disabled: !editorState?.canInsertImage,
           onMouseOver: () => setMediaType(MediaNodeTypes.Image),
           onClick: handleOpenLocalMediaPicker
@@ -20647,7 +20669,7 @@ const Toolbar = ({
           id: FEATURE_NAME_MAP.video,
           icon: Video,
           disabled: !editorState?.canInsertVideo,
-          tooltip: "Insert Video",
+          tooltip: "insertVideoKey",
           onMouseOver: () => setMediaType(MediaNodeTypes.Video),
           onClick: handleOpenLocalMediaPicker
         }
@@ -20658,7 +20680,7 @@ const Toolbar = ({
           id: FEATURE_NAME_MAP.audio,
           icon: Music,
           disabled: !editorState?.canInsertAudio,
-          tooltip: "Insert Audio",
+          tooltip: "insertAudioKey",
           onMouseOver: () => setMediaType(MediaNodeTypes.Audio),
           onClick: handleOpenLocalMediaPicker
         }
@@ -20676,7 +20698,7 @@ const Toolbar = ({
               onClick: handleOpenGifPicker,
               disabled: !editorState?.canInsertImage,
               icon: GifIcon,
-              tooltip: "Search Gif/Images Online",
+              tooltip: "searchGifOrImagesKey",
               className: "p-1 [&>svg]:size-5!"
             }
           )
@@ -20696,7 +20718,7 @@ const Toolbar = ({
               {
                 id: FEATURE_NAME_MAP.customLink,
                 icon: Link,
-                tooltip: "Add link with preview",
+                tooltip: "addLinkPreviewKey",
                 onClick: handleClickLink,
                 active: editorState?.isLink,
                 disabled: !editorState?.canLink
@@ -20717,7 +20739,8 @@ const Toolbar = ({
             }
           ),
           /* @__PURE__ */ jsxs(Label$1, { htmlFor: "send-cross-mention", children: [
-            "Cross-post to groups you #mention? ",
+            t("crossPostKey"),
+            " ",
             /* @__PURE__ */ jsx(Forward, {})
           ] })
         ] })
@@ -20731,7 +20754,8 @@ const Toolbar = ({
             "cursor-pointer bg-primary-send hover:bg-primary-send/85 active:scale-95 w-fit ml-auto"
           ),
           children: [
-            "Post ",
+            t("postKey"),
+            " ",
             isSubmitting ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(SendHorizontal, {})
           ]
         }
@@ -20815,8 +20839,7 @@ const useHostAnalyticsBridge = () => {
 };
 const usePersistence = () => {
   const saveCurrentTabContent = (editorType, editor) => {
-    if (typeof window === "undefined" || typeof localStorage === "undefined" || !editor || editor.isEmpty)
-      return;
+    if (typeof window === "undefined" || typeof localStorage === "undefined" || !editor) return;
     const json = editor?.getJSON();
     const filteredJson = filterNodes(json, (node) => !node?.attrs?.uploading);
     if (filteredJson) {
@@ -20981,7 +21004,7 @@ const EditMediaToolbar = ({
       {
         active: align === Alignment.LEFT,
         icon: TextAlignStart,
-        tooltip: "Align left",
+        tooltip: "alignLeftKey",
         onClick: () => onAlign(Alignment.LEFT)
       }
     ),
@@ -20990,7 +21013,7 @@ const EditMediaToolbar = ({
       {
         active: align === Alignment.CENTER,
         icon: TextAlignCenter,
-        tooltip: "Align center",
+        tooltip: "alignCenterKey",
         onClick: () => onAlign(Alignment.CENTER)
       }
     ),
@@ -20999,7 +21022,7 @@ const EditMediaToolbar = ({
       {
         active: align === Alignment.RIGHT,
         icon: TextAlignEnd,
-        tooltip: "Align right",
+        tooltip: "alignRightKey",
         onClick: () => onAlign(Alignment.RIGHT)
       }
     )
@@ -21010,7 +21033,7 @@ const EditMediaToolbar = ({
       variant: "destructive",
       className: "bg-transparent hover:bg-accent text-red-300 hover:text-destructive",
       icon: Trash2,
-      tooltip: "Delete",
+      tooltip: "deleteKey",
       onClick: onDelete
     }
   )
@@ -22843,6 +22866,7 @@ const TextInputSection = ({
   onSubmit,
   disabled
 }) => {
+  const { t } = usePostBuilder();
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -22851,13 +22875,13 @@ const TextInputSection = ({
   };
   const isNearLimit = value.length > POLL_LIMITS.MAX_TEXT_LENGTH * 0.9;
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: "poll-text-input", className: "text-sm font-medium text-foreground", children: "Add text option" }),
+    /* @__PURE__ */ jsx("label", { htmlFor: "poll-text-input", className: "text-sm font-medium text-foreground", children: t("addTextOptionKey") }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center sm:gap-3 gap-1", children: [
       /* @__PURE__ */ jsx(
         Input,
         {
           id: "poll-text-input",
-          placeholder: "Enter a text option...",
+          placeholder: t("enterTextOptionKey"),
           value,
           onChange: (e) => onChange(e.target.value),
           onKeyDown: handleKeyDown,
@@ -22875,13 +22899,13 @@ const TextInputSection = ({
           size: "default",
           children: [
             /* @__PURE__ */ jsx(Type, { className: "h-4 w-4 sm:mr-2" }),
-            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Add" })
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("addKey") })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { children: "Press Enter to add" }),
+      /* @__PURE__ */ jsx("span", { children: t("pressEnterToAddKey") }),
       /* @__PURE__ */ jsxs(
         "span",
         {
@@ -22904,6 +22928,7 @@ const FileInputSection = ({
   onImageSelect,
   disabled
 }) => {
+  const { t } = usePostBuilder();
   const ref = useRef(null);
   const [openSearchModal, setOpenSearchModal] = useState(false);
   const handleFileSelect = (e) => {
@@ -22913,7 +22938,7 @@ const FileInputSection = ({
     void onFileSelect(files);
     e.target.value = "";
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex xl:flex-wrap items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
     /* @__PURE__ */ jsxs(
       Button,
       {
@@ -22923,7 +22948,7 @@ const FileInputSection = ({
         onClick: () => ref.current?.click(),
         children: [
           /* @__PURE__ */ jsx(ImagePlus, { className: "h-4 w-4" }),
-          "Upload"
+          t("uploadKey")
         ]
       }
     ),
@@ -22948,7 +22973,8 @@ const FileInputSection = ({
         onImageSelect,
         children: /* @__PURE__ */ jsxs(Button, { disabled, className: "cursor-pointer flex-1 [&>svg]:size-6", children: [
           /* @__PURE__ */ jsx(GifIcon, {}),
-          " Search Images"
+          " ",
+          t("searchGifOrImagesKey")
         ] })
       }
     )
@@ -23775,7 +23801,7 @@ const LinkMarkView = ({ mark, editor }) => {
             ToolbarButton,
             {
               size: "icon",
-              tooltip: "Open Link",
+              tooltip: "visitLinkKey",
               onClick: () => window.open(mark.attrs.href, "_blank"),
               children: /* @__PURE__ */ jsx(ExternalLink, {})
             }
@@ -23792,14 +23818,14 @@ const LinkMarkView = ({ mark, editor }) => {
               },
               onInsertLink: handleUpdateLink,
               hideTextInput: mark?.attrs?.isLinkMode,
-              children: /* @__PURE__ */ jsx(ToolbarButton, { size: "icon", tooltip: "Edit Link", children: /* @__PURE__ */ jsx(SquarePen, {}) })
+              children: /* @__PURE__ */ jsx(ToolbarButton, { size: "icon", tooltip: "editLinkKey", children: /* @__PURE__ */ jsx(SquarePen, {}) })
             }
           ),
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
               size: "icon",
-              tooltip: "Unset Link",
+              tooltip: "unsetLinkKey",
               onClick: () => {
                 setOpen(false);
                 editor.commands.unsetLink();
@@ -29670,7 +29696,7 @@ const MentionList = forwardRef((props, ref) => {
       filteredItems.length,
       ")"
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "max-h-64 overflow-y-auto", children: filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-gray-400", children: props.query ? `No ${isMention ? "users" : "hashtags"} found for "${props.query}"` : `No ${isMention ? "users" : "hashtags"} found` }) : /* @__PURE__ */ jsx("div", { className: "p-1", children: filteredItems.map((item, index2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("ul", { className: "max-h-64 overflow-y-auto", children: filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-gray-400", children: props.query ? `No ${isMention ? "users" : "hashtags"} found for "${props.query}"` : `No ${isMention ? "users" : "hashtags"} found` }) : /* @__PURE__ */ jsx("div", { className: "p-1", children: filteredItems.map((item, index2) => /* @__PURE__ */ jsxs(
       "li",
       {
         ref: (el) => {
@@ -29678,39 +29704,12 @@ const MentionList = forwardRef((props, ref) => {
         },
         onClick: () => selectItem(index2),
         className: `flex items-center gap-3 px-3 py-2.5 cursor-pointer rounded-md transition-colors ${selectedIndex === index2 ? "bg-blue-50 dark:bg-blue-900/20" : "hover:bg-gray-50 dark:hover:bg-gray-700/50"}`,
-        children: isMention ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx("div", { className: "h-9 w-9 flex-shrink-0 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center", children: item.avatar ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: item.avatar,
-              alt: item.label,
-              className: "h-9 w-9 rounded-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: "text-white font-medium text-sm", children: item.label?.charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { className: "size-9 shrink-0 bg-linear-to-br from-blue-400 to-blue-600", children: item.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: item.avatar, alt: item.label }) : /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white bg-transparent font-medium text-sm", children: item.label?.charAt(0).toUpperCase() }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col min-w-0 flex-1", children: isMention ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-gray-900 dark:text-gray-100 truncate", children: item.label }),
             item.email && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: item.email })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-purple-400 to-purple-600", children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "h-5 w-5 text-white",
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsxs("span", { className: "font-medium text-sm text-gray-900 dark:text-gray-100 truncate", children: [
               "#",
               item.label
@@ -29719,8 +29718,8 @@ const MentionList = forwardRef((props, ref) => {
               item.count.toLocaleString(),
               " posts"
             ] })
-          ] })
-        ] })
+          ] }) })
+        ]
       },
       item.id
     )) }) }),
@@ -29770,7 +29769,7 @@ const mentionService = (api, mfs, store) => {
       return [];
     }
     const response = await api.fetchGroupConversations(999, 0);
-    return response.entries.filter((item) => item?.group_id !== activeGroupId).map(
+    return response.entries.map(
       (item) => ({
         id: item?.group_id,
         label: item?.group?.name,
@@ -29883,16 +29882,6 @@ const configureMentionExtension = (api, mfs, store) => {
     ]
   });
 };
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "skeleton",
-      className: cn("bg-accent animate-pulse rounded-md", className),
-      ...props
-    }
-  );
-}
 const LinkPreviewCompact = ({
   selected,
   href,
@@ -29902,6 +29891,7 @@ const LinkPreviewCompact = ({
   domain,
   onClickDelete
 }) => {
+  const { t } = usePostBuilder();
   const safeDomain = useMemo(() => {
     try {
       return domain || new URL(href).hostname;
@@ -29923,16 +29913,16 @@ const LinkPreviewCompact = ({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 absolute z-50 right-2 top-1", children: [
-          /* @__PURE__ */ jsx(ToolbarButton, { asChild: true, tooltip: "Visit Link", children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+          /* @__PURE__ */ jsx(ToolbarButton, { asChild: true, tooltip: "visitLinkKey", children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
             /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", className: "absolute inset-0" }),
             /* @__PURE__ */ jsx(ExternalLink, {})
           ] }) }),
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
-              tooltip: "Remove Link Preview",
+              tooltip: "removeLinkPreviewKey",
               onClick: handleDelete,
-              "aria-label": "Delete link preview",
+              "aria-label": t("removeLinkPreviewKey"),
               type: "button",
               size: "icon",
               className: "cursor-pointer size-6 shadow-none bg-transparent group-hover:bg-destructive/5 hover:bg-destructive/10 text-destructive hover:text-destructive",
@@ -29941,7 +29931,7 @@ const LinkPreviewCompact = ({
           )
         ] }),
         /* @__PURE__ */ jsx("div", { className: "relative z-0 w-full", children: /* @__PURE__ */ jsxs("div", { className: "group flex items-center gap-3 rounded-lg border bg-accent/30 p-3 transition-all hover:border-foreground/20 hover:shadow-sm", children: [
-          /* @__PURE__ */ jsx("div", { className: "relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md bg-muted", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "relative h-16 w-16 shrink-0 overflow-hidden rounded-md bg-muted", children: /* @__PURE__ */ jsx(
             "img",
             {
               src: image,
@@ -29954,7 +29944,7 @@ const LinkPreviewCompact = ({
             /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-xs text-muted-foreground", children: description }),
             /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1 text-xs text-muted-foreground", children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: safeDomain }),
-              /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 flex-shrink-0 opacity-50" })
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50" })
             ] })
           ] })
         ] }) })
@@ -29971,6 +29961,7 @@ const LinkPreviewExtended = ({
   domain,
   onClickDelete
 }) => {
+  const { t } = usePostBuilder();
   const safeDomain = useMemo(() => {
     try {
       return domain || new URL(href).hostname;
@@ -29996,7 +29987,7 @@ const LinkPreviewExtended = ({
             ToolbarButton,
             {
               asChild: true,
-              tooltip: "Visit Link",
+              tooltip: "visitLinkKey",
               className: "cursor-pointer backdrop-blur-2xl size-6 shadow-none group-hover:bg-accent/70 group-hover:text-accent-foreground text-primary-send",
               children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
                 /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", className: "absolute inset-0" }),
@@ -30007,9 +29998,9 @@ const LinkPreviewExtended = ({
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
-              tooltip: "Remove Link Preview",
+              tooltip: "removeLinkPreviewKey",
               onClick: handleDelete,
-              "aria-label": "Delete link preview",
+              "aria-label": t("removeLinkPreviewKey"),
               type: "button",
               size: "icon",
               className: "cursor-pointer backdrop-blur-2xl size-6 shadow-none bg-transparent group-hover:bg-red-50/70 hover:bg-red-50 text-destructive hover:text-destructive",
@@ -30039,8 +30030,19 @@ const LinkPreviewExtended = ({
     }
   );
 };
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-accent animate-pulse rounded-md", className),
+      ...props
+    }
+  );
+}
 const LinkPreviewCard = ({ node, deleteNode, selected }) => {
   const { loading, href, domain, variant } = node.attrs;
+  const { t } = usePostBuilder();
   const safeDomain = useMemo(() => {
     try {
       return domain || new URL(href).hostname;
@@ -30049,7 +30051,7 @@ const LinkPreviewCard = ({ node, deleteNode, selected }) => {
     }
   }, [href, domain]);
   if (loading)
-    return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-24 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Fetching Link Metadata..." }) }) });
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-24 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("fetchingMetadataKey") }) }) });
   if (!href) return null;
   return /* @__PURE__ */ jsx(NodeViewWrapper, { contentEditable: false, "data-drag-handle": true, children: variant === LinkPreviewType.Compact ? /* @__PURE__ */ jsx(
     LinkPreviewCompact,
@@ -30529,7 +30531,7 @@ const CODE_BLOCK_HTML_ATTRIBUTES = {
 };
 const createCustomDocument = (content) => Document.extend({ content });
 const PollDoc = createCustomDocument("paragraph poll");
-const MediaDoc = createCustomDocument("paragraph media? linkPreview? mediaGroup?");
+const MediaDoc = createCustomDocument("paragraph+ media? linkPreview? mediaGroup?");
 createCustomDocument("paragraph linkPreview?");
 const getStarterKitConfig = ({
   includeLink = false,
@@ -30549,7 +30551,7 @@ const getPlaceholderExtension = (placeholder) => Placeholder.configure({
 const getMentionExtension = (core, mfs, store) => configureMentionExtension(core, mfs, store);
 const getExtensions = ({ editorType, api, store, user }) => {
   const extensionMap = {
-    [EditorTypes.Text]: getDefaultExtensions,
+    [EditorTypes.Blog]: getDefaultExtensions,
     [EditorTypes.Media]: getMediaExtensions,
     // [EditorTypes.Link]: getLinkExtensions,
     [EditorTypes.Poll]: getPollExtensions
@@ -30711,7 +30713,7 @@ const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
       editorProps: getEditorProps(),
       onCreate: ({ editor: editor2 }) => {
         store.getState().setEditor(editor2);
-        if (editorType === EditorTypes.Text) editor2?.chain()?.focus()?.run();
+        if (editorType === EditorTypes.Blog) editor2?.chain()?.focus()?.run();
         if (editorType === EditorTypes.Media) editor2?.chain()?.focus()?.run();
         if (editorType === EditorTypes.Poll) initializePollEditor(editor2);
       },
@@ -30860,7 +30862,7 @@ const generatePollPostPayload = ({
 };
 const generateCreatePostPayload = (editorTab, params) => {
   switch (editorTab) {
-    case EditorTypes.Text:
+    case EditorTypes.Blog:
       return generateHtmlPostPayload(params);
     case EditorTypes.Media:
       return generateMediaPostPayload(params);
@@ -30961,7 +30963,7 @@ const PostBuilderEditorInstance = ({
                         editor,
                         className: cn(
                           "pr-2",
-                          editorTab !== EditorTypes.Text && "hidden size-0 overflow-hidden pointer-events-none"
+                          editorTab !== EditorTypes.Blog && "hidden size-0 overflow-hidden pointer-events-none"
                         ),
                         children: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "bg-white cursor-grab py-0.5 px-0 border size-auto", children: /* @__PURE__ */ jsx(GripVertical, { className: "text-muted-foreground" }) })
                       }
@@ -31692,18 +31694,152 @@ const PostBuilderEditor = ({
     }
   );
 };
+const translationFallback = {
+  // General
+  addKey: "Add",
+  cancelKey: "Cancel",
+  deleteKey: "Delete",
+  editKey: "Edit",
+  updateKey: "Update",
+  insertKey: "Insert",
+  uploadKey: "Upload",
+  postKey: "Post",
+  crossPostKey: "Cross-post to groups you #mention?",
+  //Editor Tabs
+  postTabKey: "Post",
+  blogTabKey: "Blog",
+  pollTabKey: "Poll",
+  // Toolbar buttons
+  alignLeftKey: "Align Left",
+  alignCenterKey: "Align Center",
+  alignRightKey: "Align Right",
+  undoKey: "Undo",
+  redoKey: "Redo",
+  headingOptionsKey: "Heading Options",
+  paragraphKey: "Paragraph",
+  heading1Key: "Heading 1",
+  heading2Key: "Heading 2",
+  heading3Key: "Heading 3",
+  boldKey: "Bold",
+  italicKey: "Italic",
+  strikethroughKey: "Strikethrough",
+  bulletListKey: "Bullet List",
+  orderedListKey: "Ordered List",
+  blockquoteKey: "BlockQuote",
+  codeKey: "Code",
+  codeBlockKey: "Codeblock",
+  moreOptionsKey: "More formatting options",
+  // Media
+  insertImageKey: "Insert Image",
+  // Toolbar
+  insertVideoKey: "Insert Video",
+  // Toolbar
+  insertAudioKey: "Insert Audio",
+  // Toolbar
+  searchGifOrImagesKey: "Search Gif/Images Online",
+  mediaSearchTitleKey: "Search Media",
+  gifSearchKey: "GIF Search",
+  imageSearchKey: "Image Search",
+  searchGifPlaceholder: "Search GIFs...",
+  searchIMagePlaceholder: "Search Images...",
+  // Links
+  addLinkPreviewKey: "Add link with preview",
+  editLinkKey: "Edit Link",
+  visitLinkKey: "Visit Link",
+  unsetLinkKey: "Unset Link",
+  linkInputLabelKey: "Link URL",
+  linkTextInputLabelKey: "Text to display",
+  invalidLinkKey: "Please enter a valid URL",
+  insertLinkKey: "Insert Link",
+  updateLinkKey: "Update Link",
+  removeLinkPreviewKey: "Remove Link Preview",
+  fetchingMetadataKey: "Fetching Link Metadata...",
+  // Poll related
+  addTextOptionKey: "Add text option",
+  enterTextOptionKey: "Enter a text option...",
+  pressEnterToAddKey: "Press Enter to add"
+};
+const defaultTranslationKeyMappings = {
+  // General
+  addKey: "general_add",
+  cancelKey: "cancel",
+  deleteKey: "general_delete",
+  editKey: "general_edit",
+  updateKey: "general_update",
+  insertKey: "general_insert",
+  uploadKey: "general_upload",
+  postKey: "general_send_post",
+  crossPostKey: "cross_mention_title",
+  //Editor Tabs
+  postTabKey: "post_builder_tab_post_title",
+  blogTabKey: "post_builder_tab_blog_title",
+  pollTabKey: "post_builder_tab_poll_title",
+  // Toolbar buttons
+  alignLeftKey: "post_builder_formatting_tooltip_align_left",
+  alignCenterKey: "post_builder_formatting_tooltip_align_center",
+  alignRightKey: "post_builder_formatting_tooltip_align_right",
+  undoKey: "post_builder_formatting_tooltip_undo",
+  redoKey: "post_builder_formatting_tooltip_redo",
+  headingOptionsKey: "post_builder_formatting_tooltip_heading_options",
+  paragraphKey: "post_builder_formatting_tooltip_paragraph",
+  heading1Key: "post_builder_formatting_tooltip_heading_one",
+  heading2Key: "post_builder_formatting_tooltip_heading_two",
+  heading3Key: "post_builder_formatting_tooltip_heading_three",
+  boldKey: "post_builder_formatting_tooltip_bold",
+  italicKey: "post_builder_formatting_tooltip_italic",
+  strikethroughKey: "post_builder_formatting_tooltip_strikethrough",
+  bulletListKey: "post_builder_formatting_tooltip_list_bullet",
+  orderedListKey: "post_builder_formatting_tooltip_list_ordered",
+  blockquoteKey: "post_builder_formatting_tooltip_blockquote",
+  codeKey: "post_builder_formatting_tooltip_code",
+  codeBlockKey: "post_builder_formatting_tooltip_codeblock",
+  moreOptionsKey: "post_builder_formatting_tooltip_more_options",
+  // Media
+  insertImageKey: "post_builder_tooltip_insert_image",
+  // Toolbar
+  insertVideoKey: "post_builder_tooltip_insert_video",
+  // Toolbar
+  insertAudioKey: "post_builder_tooltip_insert_audio",
+  // Toolbar
+  searchGifOrImagesKey: "post_builder_tooltip_search_gif_or_image",
+  mediaSearchTitleKey: "post_builder_media_search_modal_title",
+  gifSearchKey: "post_builder_media_search_tab_gif_title",
+  imageSearchKey: "post_builder_media_search_tab_image_title",
+  searchGifPlaceholder: "post_builder_media_search_input_gif_placeholder",
+  searchIMagePlaceholder: "post_builder_media_search_input_image_placeholder",
+  // Links
+  addLinkPreviewKey: "post_builder_tooltip_link_add",
+  editLinkKey: "post_builder_tooltip_link_edit",
+  visitLinkKey: "post_builder_tooltip_link_visit",
+  unsetLinkKey: "post_builder_tooltip_link_unset",
+  linkInputLabelKey: "post_builder_link_input_label",
+  linkTextInputLabelKey: "post_builder_link_text_input_label",
+  invalidLinkKey: "post_builder_link_input_invalid",
+  insertLinkKey: "post_builder_link_insert_modal_title",
+  updateLinkKey: "post_builder_link_update_modal_title",
+  removeLinkPreviewKey: "post_builder_tooltip_link_remove_preview",
+  fetchingMetadataKey: "post_builder_link_loading_metadata_placeholder",
+  // Poll related
+  addTextOptionKey: "post_builder_poll_add_text_option_input_label",
+  enterTextOptionKey: "post_builder_poll_add_text_option_input_placeholder",
+  pressEnterToAddKey: "post_builder_poll_add_text_option_input_command"
+};
 const PostBuilderProvider = ({
   children,
   apiBaseURL,
   authToken,
   toI18N,
-  i18nKeys,
+  i18nKeys = defaultTranslationKeyMappings,
   logEvent
 }) => {
   const t = useCallback(
     (key, fallback) => {
-      const message = toI18N(i18nKeys[key]);
-      if (message) return message;
+      const i18nKeysDerived = { ...defaultTranslationKeyMappings, ...i18nKeys };
+      const translationKey = i18nKeysDerived[key];
+      const message = toI18N(translationKey);
+      if (message !== translationKey) return message;
+      const defaultMessage = translationFallback[key];
+      if (defaultMessage) return defaultMessage;
       return fallback || key;
     },
     [toI18N, i18nKeys]