npm - @crystallize/design-system - Versions diffs - 1.10.0 → 1.11.0 - Mend

@crystallize/design-system 1.10.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/index.js CHANGED Viewed

@@ -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");
@@ -4032,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 = [
@@ -4060,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");
@@ -4075,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);
@@ -4107,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"
     })
   });
@@ -4121,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"),
@@ -4164,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 {
@@ -4181,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);
@@ -4208,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
@@ -4232,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;
   }
@@ -4278,7 +4330,7 @@ function CodeActionMenuContainer({ anchorElem }) {
       });
     }
   }, 50);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (!shouldListenMouseMove) {
       return;
     }
@@ -4309,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
@@ -4344,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");
@@ -4371,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) {
@@ -4398,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();
@@ -4430,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: {
@@ -4470,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
     })
   });
@@ -4556,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);
@@ -4620,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(() => {
@@ -4638,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(() => {
@@ -4666,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 !== "") {
@@ -4723,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
                     })
@@ -4756,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
           })
         })
@@ -4777,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);
@@ -4792,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) => {
@@ -4804,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,
@@ -4821,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");
@@ -4830,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);
@@ -4860,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,
@@ -4873,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();
@@ -4894,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(() => {
@@ -4912,7 +4971,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -4932,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"}`
           })
         })
@@ -5022,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;
@@ -5067,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();
@@ -5089,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,
@@ -5114,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
   });
 }
@@ -5125,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) {
@@ -5162,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),
@@ -5173,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");
@@ -5215,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(() => {
@@ -5245,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;
@@ -5265,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;
@@ -5288,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) {
@@ -5312,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)) {
@@ -5324,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);
@@ -5343,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)();
@@ -5362,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)();
@@ -5381,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);
@@ -5389,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);
@@ -5404,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);
@@ -5425,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);
@@ -5448,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;
     }
@@ -5562,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());
@@ -5587,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, {})
       })
     })
   });
@@ -5608,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");
@@ -5626,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 {
@@ -5641,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
@@ -5699,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;
@@ -5718,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",
@@ -5744,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")
         })
       })
     ]
@@ -5760,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",
@@ -5864,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"
             })
@@ -5948,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"
   });
 }
@@ -5971,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();
@@ -6033,7 +6062,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     return editor.registerCommand(
       import_lexical16.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -6044,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);
@@ -6072,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)) {
@@ -6090,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) {
@@ -6110,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"
                           })
@@ -6317,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")
                               })
                             ]
                           })
@@ -6370,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
                       })
                     })
@@ -6397,7 +6426,7 @@ function ToolbarPlugin({
           })
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ActionsPlugin, {
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ActionsPlugin, {
         prepend: actionsMenuPrepend,
         append: actionsMenuAppend
       })
@@ -6507,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, {
@@ -6537,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
+          })
         })
       })
     })
@@ -6565,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) {
@@ -6625,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,