@crystallize/design-system 1.9.0 → 1.11.0

package/dist/index.js

@@ -3601,7 +3601,7 @@ function Tag({ children, className, variant, ...delegated }) {
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -3614,6 +3614,7 @@ var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_LexicalTablePlugin = require("@lexical/react/LexicalTablePlugin");
 var import_LexicalComposerContext12 = require("@lexical/react/LexicalComposerContext");
+var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
 
 // src/rich-text-editor/context/SharedHistoryContext.tsx
 var import_react62 = require("react");
@@ -3631,6 +3632,54 @@ var useSharedHistoryContext = () => {
   return (0, import_react62.useContext)(Context);
 };
 
+// src/rich-text-editor/i18n/index.tsx
+var import_react63 = require("react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var I18nContext = (0, import_react63.createContext)(null);
+function I18nProvider({
+  language,
+  labelTranslations,
+  children
+}) {
+  const [translations, setTranslations] = (0, import_react63.useState)(labelTranslations || null);
+  (0, import_react63.useEffect)(() => {
+    let unmounted = false;
+    (async function load() {
+      if (!labelTranslations) {
+        const resource = await import(`./translations/${language}.ts`);
+        if (!unmounted) {
+          setTranslations(resource.default);
+        }
+      }
+    })();
+    return () => {
+      unmounted = true;
+    };
+  }, [language, labelTranslations]);
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(I18nContext.Provider, {
+    value: translations,
+    children
+  });
+}
+function replaceI18nVariablesInString(str, replaceWith) {
+  return str.replace(/({{[^}]+}})/g, replaceWith);
+}
+function useTr() {
+  const context = (0, import_react63.useContext)(I18nContext);
+  return (key, units) => {
+    const thereAreUnits = typeof units === "number";
+    const keyToUse = thereAreUnits && units > 1 ? `${key}_plural` : key;
+    if (context && keyToUse in context) {
+      const tr = context[keyToUse];
+      if (thereAreUnits) {
+        return replaceI18nVariablesInString(tr, units.toString());
+      }
+      return tr;
+    }
+    return "";
+  };
+}
+
 // src/rich-text-editor/model/crystallize-to-lexical.ts
 var import_lexical = require("lexical");
 var import_code = require("@lexical/code");
@@ -3761,7 +3810,25 @@ function composeInitialState({ richText }) {
       }
       if (lexicalNode) {
         if (Array.isArray(children)) {
-          children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode }));
+          if ((0, import_lexical.$isTextNode)(lexicalNode)) {
+            const handleInlineTextChild = (child) => {
+              if ((0, import_lexical.$isTextNode)(lexicalNode)) {
+                const textFormat = getLexicalTextFormat(child);
+                if (textFormat && !lexicalNode.hasFormat(textFormat)) {
+                  lexicalNode.toggleFormat(textFormat);
+                }
+                if (child.textContent) {
+                  lexicalNode.setTextContent(child.textContent);
+                }
+              }
+              if ("children" in child) {
+                child.children?.forEach(handleInlineTextChild);
+              }
+            };
+            children.forEach(handleInlineTextChild);
+          } else {
+            children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode }));
+          }
         }
         lexicalParent.append(lexicalNode);
       }
@@ -3928,10 +3995,8 @@ function lexicalToCrystallizeRichText({
                   kind: "block",
                   type: "horizontal-line"
                 });
-              } else {
-                if ((0, import_lexical2.$isTextNode)(childNode)) {
-                  parentChildrenToUse.push(getTextChild(childNode));
-                }
+              } else if ((0, import_lexical2.$isTextNode)(childNode)) {
+                parentChildrenToUse.push(getTextChild(childNode));
               }
             });
           }
@@ -3941,32 +4006,47 @@ function lexicalToCrystallizeRichText({
   });
   return crystallizeRichText;
 }
+var lexicalFormatToCrystallizeType = {
+  bold: "strong",
+  italic: "emphasized",
+  underline: "underlined",
+  strikethrough: "deleted",
+  subscript: "subscripted",
+  superscript: "superscripted",
+  highlight: "emphasized",
+  code: "code"
+};
 function getTextChild(n) {
-  const textContent = n.getTextContent();
-  if (n.hasFormat("code")) {
-    return {
-      type: "code",
-      kind: "inline",
-      textContent
-    };
-  }
-  const textChild = {
-    kind: "inline",
-    textContent
+  let currentChild = {
+    kind: "inline"
   };
-  if (n.hasFormat("bold")) {
-    textChild.type = "strong";
-  } else if (n.hasFormat("italic")) {
-    textChild.type = "emphasized";
-  } else if (n.hasFormat("underline")) {
-    textChild.type = "underlined";
-  } else if (n.hasFormat("strikethrough")) {
-    textChild.type = "deleted";
-  } else if (n.hasFormat("subscript")) {
-    textChild.type = "subscripted";
-  } else if (n.hasFormat("superscript")) {
-    textChild.type = "superscripted";
+  let textChild = null;
+  function checkFormat(format) {
+    const type = lexicalFormatToCrystallizeType[format];
+    if (n.hasFormat(format) && type) {
+      if (!textChild) {
+        currentChild = textChild = {
+          kind: "inline",
+          type
+        };
+      } else {
+        currentChild.children = [
+          {
+            kind: "inline",
+            type
+          }
+        ];
+        currentChild = currentChild.children[0];
+      }
+    }
   }
+  Object.keys(lexicalFormatToCrystallizeType).forEach(checkFormat);
+  if (!textChild) {
+    currentChild = textChild = {
+      kind: "inline"
+    };
+  }
+  currentChild.textContent = n.getTextContent();
   return textChild;
 }
 
@@ -4001,7 +4081,7 @@ var BaseNodes = [
 // src/rich-text-editor/plugins/AutoLinkPlugin/index.tsx
 var import_LexicalAutoLinkPlugin = require("@lexical/react/LexicalAutoLinkPlugin");
 var React = require("react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 var EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 var MATCHERS = [
@@ -4029,13 +4109,13 @@ var MATCHERS = [
   }
 ];
 function LexicalAutoLinkPlugin() {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_LexicalAutoLinkPlugin.AutoLinkPlugin, {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_LexicalAutoLinkPlugin.AutoLinkPlugin, {
     matchers: MATCHERS
   });
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_lexical6 = require("lexical");
 var import_react_dom2 = require("react-dom");
 var import_use_debounce2 = require("use-debounce");
@@ -4044,13 +4124,14 @@ var import_LexicalComposerContext = require("@lexical/react/LexicalComposerConte
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx
 var React2 = require("react");
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_lexical4 = require("lexical");
 var import_use_debounce = require("use-debounce");
 var import_code4 = require("@lexical/code");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 function CopyButton({ editor, getCodeDOMNode }) {
-  const [isCopyCompleted, setCopyCompleted] = (0, import_react63.useState)(false);
+  const [isCopyCompleted, setCopyCompleted] = (0, import_react64.useState)(false);
+  const tr = useTr();
   const removeSuccessIcon = (0, import_use_debounce.useDebouncedCallback)(() => {
     setCopyCompleted(false);
   }, 1e3);
@@ -4076,13 +4157,13 @@ function CopyButton({ editor, getCodeDOMNode }) {
       console.error("Failed to copy: ", err);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", {
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("button", {
     className: "menu-item",
     onClick: handleClick,
-    "aria-label": "copy",
-    children: isCopyCompleted ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("i", {
+    "aria-label": tr("actionCopyCode"),
+    children: isCopyCompleted ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("i", {
       className: "format success"
-    }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("i", {
+    }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("i", {
       className: "format copy"
     })
   });
@@ -4090,10 +4171,10 @@ function CopyButton({ editor, getCodeDOMNode }) {
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
 var React3 = require("react");
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_lexical5 = require("lexical");
 var import_code5 = require("@lexical/code");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var PRETTIER_PARSER_MODULES = {
   css: () => import("prettier/parser-postcss"),
   html: () => import("prettier/parser-html"),
@@ -4133,8 +4214,9 @@ function getPrettierOptions(lang) {
   return options;
 }
 function PrettierButton({ lang, editor, getCodeDOMNode }) {
-  const [syntaxError, setSyntaxError] = (0, import_react64.useState)("");
-  const [tipsVisible, setTipsVisible] = (0, import_react64.useState)(false);
+  const [syntaxError, setSyntaxError] = (0, import_react65.useState)("");
+  const [tipsVisible, setTipsVisible] = (0, import_react65.useState)(false);
+  const tr = useTr();
   async function handleClick() {
     const codeDOMNode = getCodeDOMNode();
     try {
@@ -4150,6 +4232,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
           const content = codeNode.getTextContent();
           let parsed = "";
           parsed = format(content, options);
+          parsed = parsed.replace(/[\r\n]+$/, "");
           if (parsed !== "") {
             const selection = codeNode.select(0);
             selection.insertText(parsed);
@@ -4177,22 +4260,22 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       setTipsVisible(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", {
     className: "prettier-wrapper",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("button", {
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("button", {
         className: "menu-item",
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        "aria-label": "prettier",
-        children: syntaxError ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("i", {
+        "aria-label": tr("actionFormatCode"),
+        children: syntaxError ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("i", {
           className: "format prettier-error"
-        }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("i", {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("i", {
           className: "format prettier"
         })
       }),
-      tipsVisible ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("pre", {
+      tipsVisible ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("pre", {
         className: "code-error-tips",
         children: syntaxError
       }) : null
@@ -4201,19 +4284,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var CODE_PADDING = 8;
 function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  const [lang, setLang] = (0, import_react65.useState)("");
-  const [isShown, setShown] = (0, import_react65.useState)(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = (0, import_react65.useState)(false);
-  const [position, setPosition] = (0, import_react65.useState)({
+  const [lang, setLang] = (0, import_react66.useState)("");
+  const [isShown, setShown] = (0, import_react66.useState)(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = (0, import_react66.useState)(true);
+  const [position, setPosition] = (0, import_react66.useState)({
     right: "0",
     top: "0"
   });
-  const codeSetRef = (0, import_react65.useRef)(/* @__PURE__ */ new Set());
-  const codeDOMNodeRef = (0, import_react65.useRef)(null);
+  const codeSetRef = (0, import_react66.useRef)(/* @__PURE__ */ new Set());
+  const codeDOMNodeRef = (0, import_react66.useRef)(null);
   function getCodeDOMNode() {
     return codeDOMNodeRef.current;
   }
@@ -4247,7 +4330,7 @@ function CodeActionMenuContainer({ anchorElem }) {
       });
     }
   }, 50);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (!shouldListenMouseMove) {
       return;
     }
@@ -4278,20 +4361,20 @@ function CodeActionMenuContainer({ anchorElem }) {
   });
   const normalizedLang = (0, import_code6.normalizeCodeLang)(lang);
   const codeFriendlyName = (0, import_code6.getLanguageFriendlyName)(lang);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, {
-    children: isShown ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, {
+    children: isShown ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", {
       className: "code-action-menu-container",
       style: { ...position },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", {
           className: "code-highlight-language",
           children: codeFriendlyName
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CopyButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CopyButton, {
           editor,
           getCodeDOMNode
         }),
-        canBePrettier(normalizedLang) ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PrettierButton, {
+        canBePrettier(normalizedLang) ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PrettierButton, {
           editor,
           getCodeDOMNode,
           lang: normalizedLang
@@ -4313,25 +4396,25 @@ function getMouseInfo(event) {
 function CodeActionMenuPlugin({
   anchorElem = document.body
 }) {
-  return (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CodeActionMenuContainer, {
+  return (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CodeActionMenuContainer, {
     anchorElem
   }), anchorElem);
 }
 
 // src/rich-text-editor/plugins/CodeHighlightPlugin/index.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_code7 = require("@lexical/code");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 function CodeHighlightPlugin() {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     return (0, import_code7.registerCodeHighlighting)(editor);
   }, [editor]);
   return null;
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 var React4 = require("react");
 var import_lexical9 = require("lexical");
 var import_react_dom3 = require("react-dom");
@@ -4340,10 +4423,10 @@ var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerCont
 var import_utils = require("@lexical/utils");
 
 // src/rich-text-editor/ui/LinkPreview.tsx
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_lexical7 = require("lexical");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var PREVIEW_CACHE = {};
 var URL_MATCHER2 = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 function useSuspenseRequest(url) {
@@ -4367,11 +4450,12 @@ function useSuspenseRequest(url) {
 function LinkPreviewContent({
   url
 }) {
-  const [textContent, setTextContent] = (0, import_react67.useState)("");
+  const [textContent, setTextContent] = (0, import_react68.useState)("");
   const { preview } = useSuspenseRequest(url);
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
+  const tr = useTr();
   const hasPreview = preview !== null && preview.google?.title;
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     editor.update(() => {
       const sel = (0, import_lexical7.$getSelection)();
       const nodes = sel?.getNodes();
@@ -4399,35 +4483,35 @@ function LinkPreviewContent({
   if (!hasPreview) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", {
     className: "LinkPreview__container",
     children: [
-      preview.google.image && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", {
+      preview.google.image && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
         className: "LinkPreview__imageWrapper bg-purple-50-900",
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("img", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("img", {
           src: preview.google.image,
           alt: preview.google.title,
           className: "LinkPreview__image"
         })
       }),
-      preview.google.title && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", {
+      preview.google.title && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
         className: "LinkPreview__title",
         children: preview.google.title
       }),
-      preview.google.description && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", {
+      preview.google.description && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
         className: "LinkPreview__description",
         children: preview.google.description
       }),
-      textContent && textContent !== preview.google.title ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, {
+      textContent && textContent !== preview.google.title ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, {
         className: "mb-4 ml-5",
         onClick: useTitleForText,
-        children: "Replace link text with its title"
+        children: tr("linkPreviewReplaceTextWithTitle")
       }) : null
     ]
   });
 }
 function Glimmer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
     className: "LinkPreview__glimmer",
     ...props,
     style: {
@@ -4439,24 +4523,24 @@ function Glimmer(props) {
 function LinkPreview({
   url
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react67.Suspense, {
-    fallback: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react68.Suspense, {
+    fallback: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Glimmer, {
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Glimmer, {
           style: { height: "80px" },
           index: 0
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Glimmer, {
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Glimmer, {
           style: { width: "60%" },
           index: 1
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Glimmer, {
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Glimmer, {
           style: { width: "80%" },
           index: 2
         })
       ]
     }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LinkPreviewContent, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(LinkPreviewContent, {
       url
     })
   });
@@ -4525,21 +4609,22 @@ function validateUrl(url) {
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 function FloatingLinkEditor({
   editor,
   isLink,
   setIsLink,
   anchorElem
 }) {
-  const editorRef = (0, import_react68.useRef)(null);
-  const inputRef = (0, import_react68.useRef)(null);
-  const [linkUrl, setLinkUrl] = (0, import_react68.useState)("");
-  const [rel, setRel] = (0, import_react68.useState)(null);
-  const [target, setTarget] = (0, import_react68.useState)(null);
-  const [isEditMode, setEditMode] = (0, import_react68.useState)(false);
-  const [lastSelection, setLastSelection] = (0, import_react68.useState)(null);
-  const updateLinkEditor = (0, import_react68.useCallback)(() => {
+  const editorRef = (0, import_react69.useRef)(null);
+  const inputRef = (0, import_react69.useRef)(null);
+  const [linkUrl, setLinkUrl] = (0, import_react69.useState)("");
+  const [rel, setRel] = (0, import_react69.useState)(null);
+  const [target, setTarget] = (0, import_react69.useState)(null);
+  const [isEditMode, setEditMode] = (0, import_react69.useState)(false);
+  const [lastSelection, setLastSelection] = (0, import_react69.useState)(null);
+  const tr = useTr();
+  const updateLinkEditor = (0, import_react69.useCallback)(() => {
     const selection = (0, import_lexical9.$getSelection)();
     if ((0, import_lexical9.$isRangeSelection)(selection)) {
       const node = getSelectedNode(selection);
@@ -4589,7 +4674,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -4607,7 +4692,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, updateLinkEditor]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     return (0, import_utils.mergeRegister)(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -4635,51 +4720,51 @@ function FloatingLinkEditor({
       )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateLinkEditor();
     });
   }, [editor, updateLinkEditor]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (isEditMode && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isEditMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
     ref: editorRef,
     className: "link-editor",
-    children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", {
+    children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
           className: "border-0 border-b border-gray-100-800 border-solid px-3",
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(InputWithLabel, {
-            label: "Link",
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(InputWithLabel, {
+            label: tr("linkEditorLink"),
             type: "text",
             value: linkUrl,
             onChange: (e) => setLinkUrl(e.target.value)
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
           className: "border-0 border-b border-gray-100-800 border-solid px-3",
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(InputWithLabel, {
-            label: "Rel",
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(InputWithLabel, {
+            label: tr("linkEditorRel"),
             type: "text",
             value: rel ?? "",
             onChange: (e) => setRel(e.target.value)
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
           className: "border-0 border-b border-gray-100-800 border-solid px-3",
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(InputWithLabel, {
-            label: "Target",
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(InputWithLabel, {
+            label: tr("linkEditorTarget"),
             type: "text",
             value: target ?? "",
             onChange: (e) => setTarget(e.target.value)
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
           className: "flex px-6 py-2 justify-end",
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, {
             onClick: () => {
               if (lastSelection !== null) {
                 if (linkUrl !== "") {
@@ -4692,32 +4777,32 @@ function FloatingLinkEditor({
                 setEditMode(false);
               }
             },
-            children: "Done"
+            children: tr("linkEditorCommit")
           })
         })
       ]
-    }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, {
+    }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", {
           className: "link-input !flex flex-nowrap justify-between items-center max-w-full ",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", {
-              className: " grid",
+            /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", {
+              className: "grid",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("a", {
+                /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("a", {
                   href: linkUrl,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   children: linkUrl
                 }),
-                rel || target ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", {
+                rel || target ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", {
                   className: "flex mt-1 gap-1",
                   children: [
-                    rel && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+                    rel && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
                       className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900 rounded-md py-0.5",
                       children: rel
                     }),
-                    target && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
+                    target && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
                       className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900  rounded-md py-0.5",
                       children: target
                     })
@@ -4725,19 +4810,20 @@ function FloatingLinkEditor({
                 }) : null
               ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
-              children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(IconButton, {
+            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
+              children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
                 size: "sm",
                 tabIndex: 0,
                 onMouseDown: (event) => event.preventDefault(),
                 onClick: () => setEditMode(true),
-                children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Icon.Edit, {})
+                "aria-label": tr("linkEditorEdit"),
+                children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon.Edit, {})
               })
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", {
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(LinkPreview, {
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(LinkPreview, {
             url: linkUrl
           })
         })
@@ -4746,9 +4832,9 @@ function FloatingLinkEditor({
   });
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem) {
-  const [activeEditor, setActiveEditor] = (0, import_react68.useState)(editor);
-  const [isLink, setIsLink] = (0, import_react68.useState)(false);
-  const updateToolbar = (0, import_react68.useCallback)(() => {
+  const [activeEditor, setActiveEditor] = (0, import_react69.useState)(editor);
+  const [isLink, setIsLink] = (0, import_react69.useState)(false);
+  const updateToolbar = (0, import_react69.useCallback)(() => {
     const selection = (0, import_lexical9.$getSelection)();
     if ((0, import_lexical9.$isRangeSelection)(selection)) {
       const node = getSelectedNode(selection);
@@ -4761,7 +4847,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       }
     }
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     return editor.registerCommand(
       import_lexical9.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -4773,7 +4859,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
     );
   }, [editor, updateToolbar]);
   return isLink ? (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(FloatingLinkEditor, {
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FloatingLinkEditor, {
       editor: activeEditor,
       isLink,
       anchorElem,
@@ -4790,7 +4876,7 @@ function FloatingLinkEditorPlugin({
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var React5 = require("react");
 var import_lexical10 = require("lexical");
 var import_react_dom4 = require("react-dom");
@@ -4799,6 +4885,9 @@ var import_link5 = require("@lexical/link");
 var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
 var import_utils2 = require("@lexical/utils");
 
+// src/rich-text-editor/utils/environment.ts
+var IS_APPLE = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
 // src/rich-text-editor/utils/getDOMRangeRect.ts
 function getDOMRangeRect(nativeSelection, rootElement) {
   const domRange = nativeSelection.getRangeAt(0);
@@ -4829,7 +4918,7 @@ function getDOMRangeRect(nativeSelection, rootElement) {
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -4842,15 +4931,16 @@ function TextFormatFloatingToolbar({
   isSubscript,
   isSuperscript
 }) {
-  const popupCharStylesEditorRef = (0, import_react69.useRef)(null);
-  const insertLink = (0, import_react69.useCallback)(() => {
+  const popupCharStylesEditorRef = (0, import_react70.useRef)(null);
+  const tr = useTr();
+  const insertLink = (0, import_react70.useCallback)(() => {
     if (!isLink) {
       editor.dispatchCommand(import_link5.TOGGLE_LINK_COMMAND, "https://");
     } else {
       editor.dispatchCommand(import_link5.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  const updateTextFormatFloatingToolbar = (0, import_react69.useCallback)(() => {
+  const updateTextFormatFloatingToolbar = (0, import_react70.useCallback)(() => {
     const selection = (0, import_lexical10.$getSelection)();
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
     const nativeSelection = window.getSelection();
@@ -4863,7 +4953,7 @@ function TextFormatFloatingToolbar({
       setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
   }, [editor, anchorElem]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -4881,7 +4971,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -4901,88 +4991,92 @@ function TextFormatFloatingToolbar({
       )
     );
   }, [editor, updateTextFormatFloatingToolbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", {
     ref: popupCharStylesEditorRef,
     className: "c-floating-text-format-popup gap-0.5",
-    children: editor.isEditable() && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, {
+    children: editor.isEditable() && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "bold");
           },
           style: { padding: 0, overflow: "hidden" },
-          "aria-label": "Format text as bold",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
+          "aria-label": tr("actionFormatAsStrongLabel"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format bold  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isBold ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "italic");
           },
-          "aria-label": "Format text as italics",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          title: tr("actionFormatAsEmphasizedTitle"),
+          "aria-label": tr("actionFormatAsEmphasizedLabel"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format italic  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isItalic ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "underline");
           },
-          "aria-label": "Format text to underlined",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          title: tr("actionFormatAsUnderlinedTitle"),
+          "aria-label": tr("actionFormatAsUnderlinedLabel"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format underline  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isUnderline ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "strikethrough");
           },
-          "aria-label": "Format text with a strikethrough",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          title: tr("actionFormatWithStrikethroughTitle"),
+          "aria-label": tr("actionFormatWithStrikethroughLabel"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format strikethrough  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isStrikethrough ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "subscript");
           },
-          title: "Subscript",
-          "aria-label": "Format Subscript",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          title: tr("actionFormatWithSubscriptTitle"),
+          "aria-label": tr("actionFormatWithSubscriptLabel"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format subscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isSubscript ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "superscript");
           },
-          title: "Superscript",
-          "aria-label": "Format Superscript",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          title: tr("actionFormatWithSuperscriptTitle"),
+          "aria-label": tr("actionFormatWithSuperscriptLabel"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format superscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isSuperscript ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "code");
           },
-          "aria-label": "Insert code block",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          "aria-label": tr("actionInsertCodeBlock"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format code  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isCode ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, {
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: insertLink,
-          "aria-label": "Insert link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("i", {
+          "aria-label": tr("actionInsertlink"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", {
             className: `format link  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isLink ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
           })
         })
@@ -4991,16 +5085,16 @@ function TextFormatFloatingToolbar({
   });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem) {
-  const [isText, setIsText] = (0, import_react69.useState)(false);
-  const [isLink, setIsLink] = (0, import_react69.useState)(false);
-  const [isBold, setIsBold] = (0, import_react69.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react69.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react69.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react69.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react69.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react69.useState)(false);
-  const [isCode, setIsCode] = (0, import_react69.useState)(false);
-  const updatePopup = (0, import_react69.useCallback)(() => {
+  const [isText, setIsText] = (0, import_react70.useState)(false);
+  const [isLink, setIsLink] = (0, import_react70.useState)(false);
+  const [isBold, setIsBold] = (0, import_react70.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react70.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react70.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react70.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react70.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react70.useState)(false);
+  const [isCode, setIsCode] = (0, import_react70.useState)(false);
+  const updatePopup = (0, import_react70.useCallback)(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
         return;
@@ -5036,13 +5130,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
       }
     });
   }, [editor]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -5058,7 +5152,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
     return null;
   }
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TextFormatFloatingToolbar, {
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TextFormatFloatingToolbar, {
       editor,
       anchorElem,
       isLink,
@@ -5083,9 +5177,9 @@ function FloatingTextFormatToolbarPlugin({
 // src/rich-text-editor/plugins/LinkPlugin/index.tsx
 var import_LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
 var React6 = require("react");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 function LinkPlugin() {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_LexicalLinkPlugin.LinkPlugin, {
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_LexicalLinkPlugin.LinkPlugin, {
     validateUrl
   });
 }
@@ -5094,7 +5188,7 @@ function LinkPlugin() {
 var import_list4 = require("@lexical/list");
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
 var import_lexical11 = require("lexical");
-var import_react70 = require("react");
+var import_react71 = require("react");
 function getElementNodesInSelection(selection) {
   const nodesInSelection = selection.getNodes();
   if (nodesInSelection.length === 0) {
@@ -5131,7 +5225,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListMaxIndentLevelPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
-  (0, import_react70.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     return editor.registerCommand(
       import_lexical11.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
@@ -5142,7 +5236,7 @@ function ListMaxIndentLevelPlugin({ maxDepth }) {
 }
 
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_lexical12 = require("lexical");
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
 var import_selection2 = require("@lexical/selection");
@@ -5184,7 +5278,7 @@ ${content}
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
 function MaxLengthPlugin({ maxLength }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     let lastRestoredEditorState = null;
     return editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       editor.update(() => {
@@ -5214,9 +5308,9 @@ function MaxLengthPlugin({ maxLength }) {
 }
 
 // src/rich-text-editor/plugins/TabFocusPlugin/index.tsx
-var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
+var import_react73 = require("react");
 var import_lexical13 = require("lexical");
-var import_react72 = require("react");
+var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var COMMAND_PRIORITY_LOW3 = 1;
 var TAB_TO_FOCUS_INTERVAL = 100;
 var lastTabKeyDownTimestamp = 0;
@@ -5234,7 +5328,7 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
@@ -5257,21 +5351,22 @@ function TabFocusPlugin() {
 }
 
 // src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_lexical14 = require("lexical");
 var import_react_dom5 = require("react-dom");
 var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
 var import_useLexicalEditable = __toESM(require("@lexical/react/useLexicalEditable"));
 var import_table4 = require("@lexical/table");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  const [tableCellNode, updateTableCellNode] = (0, import_react73.useState)(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = (0, import_react73.useState)({
+  const [tableCellNode, updateTableCellNode] = (0, import_react74.useState)(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = (0, import_react74.useState)({
     columns: 1,
     rows: 1
   });
-  (0, import_react73.useEffect)(() => {
+  const tr = useTr();
+  (0, import_react74.useEffect)(() => {
     return editor.registerMutationListener(import_table4.TableCellNode, (nodeMutations) => {
       const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
       if (nodeUpdated) {
@@ -5281,7 +5376,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor, tableCellNode]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     editor.getEditorState().read(() => {
       const selection = (0, import_lexical14.$getSelection)();
       if ((0, import_lexical14.DEPRECATED_$isGridSelection)(selection)) {
@@ -5293,7 +5388,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor]);
-  const clearTableSelection = (0, import_react73.useCallback)(() => {
+  const clearTableSelection = (0, import_react74.useCallback)(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
@@ -5312,7 +5407,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       rootNode.selectStart();
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = (0, import_react73.useCallback)(
+  const insertTableRowAtSelection = (0, import_react74.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
         const selection = (0, import_lexical14.$getSelection)();
@@ -5331,7 +5426,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     },
     [editor, tableCellNode, selectionCounts.rows, clearTableSelection]
   );
-  const insertTableColumnAtSelection = (0, import_react73.useCallback)(
+  const insertTableColumnAtSelection = (0, import_react74.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
         const selection = (0, import_lexical14.$getSelection)();
@@ -5350,7 +5445,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     },
     [editor, tableCellNode, selectionCounts.columns, clearTableSelection]
   );
-  const deleteTableRowAtSelection = (0, import_react73.useCallback)(() => {
+  const deleteTableRowAtSelection = (0, import_react74.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -5358,14 +5453,14 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableAtSelection = (0, import_react73.useCallback)(() => {
+  const deleteTableAtSelection = (0, import_react74.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = (0, import_react73.useCallback)(() => {
+  const deleteTableColumnAtSelection = (0, import_react74.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -5373,7 +5468,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableRowIsHeader = (0, import_react73.useCallback)(() => {
+  const toggleTableRowIsHeader = (0, import_react74.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -5394,7 +5489,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = (0, import_react73.useCallback)(() => {
+  const toggleTableColumnIsHeader = (0, import_react74.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -5417,78 +5512,60 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(false),
-        children: [
-          "Insert ",
-          selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
-          " above"
-        ]
+        children: tr("actionTableInsertRowsAbove", selectionCounts.rows)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(true),
-        children: [
-          "Insert ",
-          selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
-          " below"
-        ]
+        children: tr("actionTableInsertRowsBelow", selectionCounts.rows)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableColumnAtSelection(false),
-        children: [
-          "Insert ",
-          selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
-          " left"
-        ]
+        children: tr("actionTableInsertColumnsBefore", selectionCounts.columns)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableColumnAtSelection(true),
-        children: [
-          "Insert ",
-          selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
-          " right"
-        ]
+        children: tr("actionTableInsertColumnsAfter", selectionCounts.columns)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => toggleTableRowIsHeader(),
-        children: [
-          (tableCellNode.__headerState & import_table4.TableCellHeaderStates.ROW) === import_table4.TableCellHeaderStates.ROW ? "Remove" : "Add",
-          " row header"
-        ]
+        children: tr(
+          (tableCellNode.__headerState & import_table4.TableCellHeaderStates.ROW) === import_table4.TableCellHeaderStates.ROW ? "actionTableRemoveRowHeader" : "actionTableAddRowHeader"
+        )
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => toggleTableColumnIsHeader(),
-        children: [
-          (tableCellNode.__headerState & import_table4.TableCellHeaderStates.COLUMN) === import_table4.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
-          " ",
-          "column header"
-        ]
+        children: tr(
+          (tableCellNode.__headerState & import_table4.TableCellHeaderStates.COLUMN) === import_table4.TableCellHeaderStates.COLUMN ? "actionTableRemoveColumnHeader" : "actionTableAddColumnHeader"
+        )
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropdownMenu.Separator, {}),
-      tableStats.columns > 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Separator, {}),
+      tableStats.columns > 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => deleteTableColumnAtSelection(),
-        children: "Delete column"
+        children: tr("actionTableDeleteColumn")
       }),
-      tableStats.rows > 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropdownMenu.Item, {
+      tableStats.rows > 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => deleteTableRowAtSelection(),
-        children: "Delete row"
+        children: tr("actionTableDeleteRow")
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Item, {
         onSelect: () => deleteTableAtSelection(),
-        children: "Delete table"
+        children: tr("actionTableDeleteTable")
       })
     ]
   });
 }
 function TableCellActionMenuContainer({ anchorElem }) {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  const menuButtonRef = (0, import_react73.useRef)(null);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react73.useState)(false);
-  const [tableCellNode, setTableMenuCellNode] = (0, import_react73.useState)(null);
-  const [tableStats, setTablestats] = (0, import_react73.useState)({ rows: 1, columns: 1 });
-  const moveMenu = (0, import_react73.useCallback)(() => {
+  const tr = useTr();
+  const menuButtonRef = (0, import_react74.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react74.useState)(false);
+  const [tableCellNode, setTableMenuCellNode] = (0, import_react74.useState)(null);
+  const [tableStats, setTablestats] = (0, import_react74.useState)({ rows: 1, columns: 1 });
+  const moveMenu = (0, import_react74.useCallback)(() => {
     if (isMenuOpen) {
       return;
     }
@@ -5531,14 +5608,14 @@ function TableCellActionMenuContainer({ anchorElem }) {
       setTableMenuCellNode(null);
     }
   }, [editor, isMenuOpen]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         moveMenu();
       });
     });
   });
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     const menuButtonDOM = menuButtonRef.current;
     if (menuButtonDOM != null && tableCellNode != null) {
       const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
@@ -5556,19 +5633,20 @@ function TableCellActionMenuContainer({ anchorElem }) {
       }
     }
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", {
     className: "table-cell-action-button-container",
     ref: menuButtonRef,
-    children: tableCellNode != null && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropdownMenu.Root, {
+    children: tableCellNode != null && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DropdownMenu.Root, {
       onOpenChange: (isOpen) => setIsMenuOpen(isOpen),
-      content: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableActionMenu, {
+      content: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TableActionMenu, {
         tableCellNode,
         tableStats
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(IconButton, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(IconButton, {
         size: "xs",
         className: "table-cell-action-button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon.Arrow, {})
+        "aria-label": tr("actionTableOpenOptions"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Icon.Arrow, {})
       })
     })
   });
@@ -5577,13 +5655,13 @@ function TableActionMenuPlugin({
   anchorElem = document.body
 }) {
   const isEditable = (0, import_useLexicalEditable.default)();
-  return (0, import_react_dom5.createPortal)(isEditable ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableCellActionMenuContainer, {
+  return (0, import_react_dom5.createPortal)(isEditable ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TableCellActionMenuContainer, {
     anchorElem
   }) : null, anchorElem);
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_lexical16 = require("lexical");
 var import_code9 = require("@lexical/code");
 var import_link6 = require("@lexical/link");
@@ -5595,13 +5673,10 @@ var import_rich_text4 = require("@lexical/rich-text");
 var import_selection3 = require("@lexical/selection");
 var import_utils4 = require("@lexical/utils");
 
-// src/rich-text-editor/utils/environment.ts
-var IS_APPLE = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
 var import_lexical15 = require("lexical");
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 async function copyJson(editor) {
   const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
   try {
@@ -5610,53 +5685,36 @@ async function copyJson(editor) {
     console.warn("Copy failed", error);
   }
 }
-async function exportJson(editor) {
-  const json = lexicalToCrystallizeRichText({ editorState: editor.getEditorState() });
-  const blob = new Blob([JSON.stringify(json, null, 1)], {
-    type: "application/json"
-  });
-  const href = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = href;
-  link.download = "crystallizeRichText.json";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(href);
-}
 function ActionsPlugin({
   append,
   prepend
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", {
+  const tr = useTr();
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", {
     className: "z-50 flex items-center ",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(ActionMenu, {
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(ActionMenu, {
         children: [
-          !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ActionMenu.Item, {
+          !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ActionMenu.Item, {
             onSelect: actionItem.action,
             className: actionItem.type === "danger" ? "danger" : "",
             children: actionItem.title
           }, actionItem.title)),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ActionMenu.Item, {
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ActionMenu.Item, {
             onSelect: () => copyJson(editor),
-            children: "Copy JSON"
+            children: tr("actionCopyJSON")
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ActionMenu.Item, {
-            onSelect: () => exportJson(editor),
-            children: "Export JSON"
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ActionMenu.Item, {
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ActionMenu.Item, {
             className: "danger",
             onSelect: () => {
               editor.dispatchCommand(import_lexical15.CLEAR_EDITOR_COMMAND, void 0);
               editor.focus();
             },
-            children: "Clear paragraph"
+            children: tr("actionClear")
           }),
-          !append ? null : append.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ActionMenu.Item, {
+          !append ? null : append.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ActionMenu.Item, {
             onSelect: actionItem.action,
             className: actionItem.type === "danger" ? "danger" : "",
             children: actionItem.title
@@ -5668,12 +5726,13 @@ function ActionsPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_table5 = require("@lexical/table");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = (0, import_react74.useState)("5");
-  const [columns, setColumns] = (0, import_react74.useState)("5");
+  const [rows, setRows] = (0, import_react75.useState)("5");
+  const [columns, setColumns] = (0, import_react75.useState)("5");
+  const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
       return;
@@ -5687,25 +5746,25 @@ function InsertTableDialog({ activeEditor }) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", {
         className: "grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(InputWithLabel, {
-            label: "Rows",
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputWithLabel, {
+            label: tr("insertTableRows"),
             value: rows,
             placeholder: "0",
             type: "text",
             inputMode: "numeric",
             onChange: (e) => setRows(e.target.value)
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", {
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
             className: "h-full bg-gray-100-800"
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(InputWithLabel, {
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputWithLabel, {
             type: "text",
-            label: "Columns",
+            label: tr("insertTableColumns"),
             placeholder: "0",
             value: columns,
             inputMode: "numeric",
@@ -5713,15 +5772,15 @@ function InsertTableDialog({ activeEditor }) {
           })
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", {
         className: "flex justify-end mt-3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, {
           as: Dialog.Close,
           size: "sm",
           intent: "action",
-          "aria-label": "Confirm",
+          "aria-label": tr("insertTableCommit"),
           onClick,
-          children: "Confirm"
+          children: tr("insertTableCommit")
         })
       })
     ]
@@ -5729,7 +5788,7 @@ function InsertTableDialog({ activeEditor }) {
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
@@ -5833,83 +5892,83 @@ function BlockFormatDropDown({
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Root, {
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Root, {
     disabled,
     style: { zIndex: 1 },
-    content: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, {
+    content: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
           onClick: formatParagraph,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `icon paragraph border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "paragraph" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: "icon paragraph"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
               className: `${blockType === "paragraph" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Normal"
             })
           ]
         }),
-        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
           onClick: () => formatHeading(headingSize),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `icon ${headingSize} border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${blockType === headingSize ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
               className: `${blockType === headingSize ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`,
               children: headingTypeToBlockName[headingSize]
             })
           ]
         }, headingSize)),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
           onClick: formatBulletList,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `icon bullet-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "bullet" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
               className: `${blockType === "bullet" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Bullet List"
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
           onClick: formatNumberedList,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `icon numbered-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "number" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
               className: `${blockType === "number" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Numbered List"
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
           onClick: formatQuote,
           "data-testid": "toggle-block-format-quote",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `icon quote border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "quote" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
               className: `${blockType === "quote" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Quote"
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
           onClick: formatCode,
           "data-testid": "toggle-block-format-code",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `icon code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "code" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
               className: `${blockType === "code" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Code block"
             })
@@ -5917,21 +5976,21 @@ function BlockFormatDropDown({
         })
       ]
     }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Button, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Button, {
       style: { backgroundColor: "transparent", padding: "0 8px" },
       "aria-label": "Formatting options for text style",
       "data-testid": "toggle-block-format",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
           className: `icon ${blockType} border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon.Arrow, {})
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon.Arrow, {})
       ]
     })
   });
 }
 function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", {
     className: "divider"
   });
 }
@@ -5940,22 +5999,23 @@ function ToolbarPlugin({
   actionsMenuAppend
 }) {
   const [editor] = (0, import_LexicalComposerContext11.useLexicalComposerContext)();
-  const [activeEditor, setActiveEditor] = (0, import_react75.useState)(editor);
-  const [blockType, setBlockType] = (0, import_react75.useState)("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = (0, import_react75.useState)(null);
-  const [isLink, setIsLink] = (0, import_react75.useState)(false);
-  const [isBold, setIsBold] = (0, import_react75.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react75.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react75.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react75.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react75.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react75.useState)(false);
-  const [isCode, setIsCode] = (0, import_react75.useState)(false);
-  const [canUndo, setCanUndo] = (0, import_react75.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react75.useState)(false);
-  const [codeLanguage, setCodeLanguage] = (0, import_react75.useState)("");
-  const [isEditable, setIsEditable] = (0, import_react75.useState)(() => editor.isEditable());
-  const updateToolbar = (0, import_react75.useCallback)(() => {
+  const [activeEditor, setActiveEditor] = (0, import_react76.useState)(editor);
+  const [blockType, setBlockType] = (0, import_react76.useState)("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = (0, import_react76.useState)(null);
+  const [isLink, setIsLink] = (0, import_react76.useState)(false);
+  const [isBold, setIsBold] = (0, import_react76.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react76.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react76.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react76.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react76.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react76.useState)(false);
+  const [isCode, setIsCode] = (0, import_react76.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react76.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react76.useState)(false);
+  const tr = useTr();
+  const [codeLanguage, setCodeLanguage] = (0, import_react76.useState)("");
+  const [isEditable, setIsEditable] = (0, import_react76.useState)(() => editor.isEditable());
+  const updateToolbar = (0, import_react76.useCallback)(() => {
     const selection = (0, import_lexical16.$getSelection)();
     if ((0, import_lexical16.$isRangeSelection)(selection)) {
       const anchorNode = selection.anchor.getNode();
@@ -6002,7 +6062,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     return editor.registerCommand(
       import_lexical16.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -6013,7 +6073,7 @@ function ToolbarPlugin({
       import_lexical16.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6041,7 +6101,7 @@ function ToolbarPlugin({
       )
     );
   }, [activeEditor, editor, updateToolbar]);
-  const clearFormatting = (0, import_react75.useCallback)(() => {
+  const clearFormatting = (0, import_react76.useCallback)(() => {
     activeEditor.update(() => {
       const selection = (0, import_lexical16.$getSelection)();
       if ((0, import_lexical16.$isRangeSelection)(selection)) {
@@ -6059,14 +6119,14 @@ function ToolbarPlugin({
       }
     });
   }, [activeEditor]);
-  const insertLink = (0, import_react75.useCallback)(() => {
+  const insertLink = (0, import_react76.useCallback)(() => {
     if (!isLink) {
       editor.dispatchCommand(import_link6.TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
     } else {
       editor.dispatchCommand(import_link6.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  const onCodeLanguageSelect = (0, import_react75.useCallback)(
+  const onCodeLanguageSelect = (0, import_react76.useCallback)(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
@@ -6079,206 +6139,206 @@ function ToolbarPlugin({
     },
     [activeEditor, selectedElementKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", {
     className: "toolbar",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", {
         className: "flex",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
             disabled: !canUndo || !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(import_lexical16.UNDO_COMMAND, void 0);
             },
-            title: IS_APPLE ? "Undo (\u2318Z)" : "Undo (Ctrl+Z)",
             type: "button",
-            "aria-label": "Undo",
-            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            title: tr(IS_APPLE ? "actionUndoTitleApple" : "actionUndoTitle"),
+            "aria-label": tr("actionUndoLabel"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `format icon undo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${canUndo ? "opacity-100" : "opacity-30"}
         `
             })
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
             disabled: !canRedo || !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(import_lexical16.REDO_COMMAND, void 0);
             },
-            title: IS_APPLE ? "Redo (\u2318Y)" : "Redo (Ctrl+Y)",
             type: "button",
-            "aria-label": "Redo",
-            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+            title: tr(IS_APPLE ? "actionRedoTitleApple" : "actionRedoTitle"),
+            "aria-label": tr("actionRedoLabel"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
               className: `format icon redo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${canRedo ? "opacity-100" : "opacity-30"}`
             })
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Divider, {}),
-          blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, {
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Divider, {}),
+          blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(BlockFormatDropDown, {
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(BlockFormatDropDown, {
                 disabled: !isEditable,
                 blockType,
                 editor
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Divider, {})
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Divider, {})
             ]
           }),
-          blockType === "code" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Root, {
+          blockType === "code" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_jsx_runtime89.Fragment, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Root, {
               disabled: !isEditable,
               style: { zIndex: 1 },
-              content: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, {
+              content: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_jsx_runtime89.Fragment, {
                 children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Item, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Item, {
                     className: `item ${dropDownActiveClass(value === codeLanguage)}`,
                     onClick: () => onCodeLanguageSelect(value),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                       className: `text min-w-[200px] block text-sm px-3 ${dropDownActiveClass(value === codeLanguage) ? "font-bold opacity-100" : "font-normal opacity-80"}`,
                       children: name
                     })
                   }, value);
                 })
               }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, {
-                "aria-label": "Select language",
-                append: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon.Arrow, {}),
-                children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+              children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Button, {
+                "aria-label": tr("codeSelectLanguage"),
+                append: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon.Arrow, {}),
+                children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                   className: "font-medium text-sm",
                   children: (0, import_code9.getLanguageFriendlyName)(codeLanguage)
                 })
               })
             })
-          }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", {
+          }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", {
               className: "flex gap-1",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
                   disabled: !isEditable,
-                  title: IS_APPLE ? "Bold (\u2318B)" : "Bold (Ctrl+B)",
                   className: `${isBold ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   type: "button",
-                  "aria-label": `Format text as bold. Shortcut: ${IS_APPLE ? "\u2318B" : "Ctrl+B"}`,
+                  title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
+                  "aria-label": tr("actionFormatAsStrongLabel"),
                   "data-testid": "toggle-format-bold",
                   onClick: () => {
                     activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "bold");
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                     className: `format icon bold border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
                   className: `${isItalic ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: () => {
                     activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "italic");
                   },
-                  title: IS_APPLE ? "Italic (\u2318I)" : "Italic (Ctrl+I)",
                   type: "button",
-                  "aria-label": `Format text as italics. Shortcut: ${IS_APPLE ? "\u2318I" : "Ctrl+I"}`,
+                  title: tr(IS_APPLE ? "actionFormatAsEmphasizedTitleApple" : "actionFormatAsEmphasizedTitle"),
+                  "aria-label": tr("actionFormatAsEmphasizedLabel"),
                   "data-testid": "toggle-format-emphasized",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                     className: `format icon italic border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
                   className: `${isUnderline ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: () => {
                     activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "underline");
                   },
-                  title: IS_APPLE ? "Underline (\u2318U)" : "Underline (Ctrl+U)",
                   type: "button",
-                  "aria-label": `Format text to underlined. Shortcut: ${IS_APPLE ? "\u2318U" : "Ctrl+U"}`,
+                  title: tr(IS_APPLE ? "actionFormatAsUnderlinedTitleApple" : "actionFormatAsUnderlinedTitle"),
+                  "aria-label": tr("actionFormatAsUnderlinedLabel"),
                   "data-testid": "toggle-format-underlined",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                     className: `format icon underline border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
                   className: `${isCode ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: () => {
                     activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "code");
                   },
-                  title: "Insert code block",
                   type: "button",
-                  "aria-label": "Insert code block",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                  title: tr("actionInsertCodeBlock"),
+                  "aria-label": tr("actionInsertCodeBlock"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                     className: `format icon code border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
                   className: `${isLink ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: insertLink,
-                  "aria-label": "Insert link",
-                  title: "Insert link",
                   type: "button",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                  "aria-label": tr("actionInsertlink"),
+                  title: tr("actionInsertlink"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                     className: `format icon link border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Root, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Root, {
                   disabled: !isEditable,
                   style: { zIndex: 1 },
-                  content: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, {
+                  content: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, {
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "strikethrough");
                         },
-                        title: "Strikethrough",
-                        "aria-label": "Format text with a strikethrough",
+                        title: tr("actionFormatWithStrikethroughTitle"),
+                        "aria-label": tr("actionFormatWithStrikethroughLabel"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                             className: `icon w-6 h-6 strikethrough border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${isStrikethrough ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                             className: `px-3 text-sm font-sans ${isStrikethrough ? "font-medium" : "font-normal"}`,
-                            children: "Strikethrough"
+                            children: tr("actionFormatAsStrongTitle")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "subscript");
                         },
-                        title: "Subscript",
-                        "aria-label": "Format text with a subscript",
+                        title: tr("actionFormatWithSubscriptTitle"),
+                        "aria-label": tr("actionFormatWithSubscriptLabel"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                             className: `icon w-6 h-6 subscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${isSubscript ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                             className: `px-3 text-sm font-sans ${isSubscript ? "font-medium" : "font-normal"}`,
-                            children: "Subscript"
+                            children: tr("actionFormatWithSubscriptTitle")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "superscript");
                         },
-                        title: "Superscript",
-                        "aria-label": "Format text with a superscript",
+                        title: tr("actionFormatWithSuperscriptTitle"),
+                        "aria-label": tr("actionFormatWithSuperscriptLabel"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                             className: `icon w-6 h-6 superscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${isSuperscript ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                             className: `px-3 text-sm font-sans ${isSuperscript ? "bg-purple-50-900" : "font-normal"}`,
-                            children: "Superscript"
+                            children: tr("actionFormatWithSuperscriptTitle")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(DropdownMenu.Item, {
                         onClick: clearFormatting,
                         className: "item",
-                        title: "Clear text formatting",
-                        "aria-label": "Clear all text formatting",
+                        title: tr("actionClearTextFormatting"),
+                        "aria-label": tr("actionClearTextFormatting"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                             className: "icon w-6 h-6 clear border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60"
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                             className: "px-3 text-sm text-pink-600-300 font-sans font-normal",
                             children: "Clear Formatting"
                           })
@@ -6286,52 +6346,52 @@ function ToolbarPlugin({
                       })
                     ]
                   }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Button, {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Button, {
                     style: { backgroundColor: "transparent", padding: "0 8px" },
-                    "aria-label": "Formatting options for additional text styles",
+                    "aria-label": tr("actionTextFormattingOptions"),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                         className: `icon dropdown-more border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon.Arrow, {})
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon.Arrow, {})
                     ]
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Divider, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Root, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Root, {
                   style: { zIndex: 1 },
                   disabled: !isEditable,
-                  content: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, {
+                  content: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, {
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(import_LexicalHorizontalRuleNode4.INSERT_HORIZONTAL_RULE_COMMAND, void 0);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", {
                           className: "flex items-center font-sans font-normal",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                               className: "icon w-5 h-5 horizontal-rule border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60"
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                               className: "px-3 text-sm",
-                              children: "Horizontal rule"
+                              children: tr("horizontalRule")
                             })
                           ]
                         })
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DropdownMenu.Item, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog.Trigger, {
+                      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DropdownMenu.Item, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog.Trigger, {
                           asChild: true,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", {
+                          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", {
                             className: "flex items-center font-sans font-normal",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                                 className: "icon w-5 h-5 table border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60"
                               }),
-                              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", {
+                              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", {
                                 className: "px-3 text-sm",
-                                children: "Table"
+                                children: tr("table")
                               })
                             ]
                           })
@@ -6339,23 +6399,23 @@ function ToolbarPlugin({
                       })
                     ]
                   }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, {
-                    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("i", {
                       className: "icon plus border w-full h-full bg-no-repeat bg-center bg-[length:20px_20px] "
                     })
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Dialog.Content, {
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Dialog.Content, {
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog.Title, {
-                      children: "Insert table"
+                    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog.Title, {
+                      children: tr("insertTableTitle")
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog.Description, {
-                      children: "Define your starting point of a table, you can add and remove columns and rows after creation."
+                    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog.Description, {
+                      children: tr("insertTableDescription")
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", {
+                    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", {
                       className: "items-center justify-between",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InsertTableDialog, {
+                      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(InsertTableDialog, {
                         activeEditor
                       })
                     })
@@ -6366,7 +6426,7 @@ function ToolbarPlugin({
           })
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ActionsPlugin, {
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ActionsPlugin, {
         prepend: actionsMenuPrepend,
         append: actionsMenuAppend
       })
@@ -6476,21 +6536,13 @@ var theme = {
 };
 var CrystallizeRTEditorTheme_default = theme;
 
-// src/rich-text-editor/ui/ContentEditable.tsx
-var React7 = require("react");
-var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var import_jsx_runtime89 = require("react/jsx-runtime");
-function LexicalContentEditable({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_LexicalContentEditable.ContentEditable, {
-    className: className || "ContentEditable__root"
-  });
-}
-
 // src/rich-text-editor/rich-text-editor.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
 function RichTextEditor({
   initialData,
   editable = true,
+  language = "en",
+  labelTranslations,
   ...rest
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalComposer.LexicalComposer, {
@@ -6506,12 +6558,16 @@ function RichTextEditor({
         richText: initialData
       }) : void 0
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SharedHistoryContext, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", {
-        className: "c-rich-text-editor",
-        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RichTextEditorWithoutContext, {
-          ...rest,
-          editable
+    children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(I18nProvider, {
+      language,
+      labelTranslations,
+      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SharedHistoryContext, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", {
+          className: "c-rich-text-editor",
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RichTextEditorWithoutContext, {
+            ...rest,
+            editable
+          })
         })
       })
     })
@@ -6534,18 +6590,18 @@ function RichTextEditorWithoutContext({
     children: placeholderText ?? ""
   });
   const [editor] = (0, import_LexicalComposerContext12.useLexicalComposerContext)();
-  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react76.useState)(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react76.useState)(false);
-  const firstOnChangeTriggeredRef = (0, import_react76.useRef)(!autoFocus);
+  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react77.useState)(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react77.useState)(false);
+  const firstOnChangeTriggeredRef = (0, import_react77.useRef)(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     const updateViewPortWidth = () => {
       const isNextSmallWidthViewport = window.matchMedia("(max-width: 1025px)").matches;
       if (isNextSmallWidthViewport !== isSmallWidthViewport) {
@@ -6594,7 +6650,9 @@ function RichTextEditorWithoutContext({
               children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", {
                 className: "editor",
                 ref: onRef,
-                children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(LexicalContentEditable, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalContentEditable.ContentEditable, {
+                  className: "ContentEditable__root"
+                })
               })
             }),
             placeholder,