@crystallize/design-system 1.10.0 → 1.11.1

package/dist/index.js

@@ -1563,7 +1563,7 @@ var Info = (0, import_react28.forwardRef)((delegated, ref) => {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", {
         fillRule: "evenodd",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         d: "M18.253 3.85212C18.253 5.04383 17.2869 6.00991 16.0952 6.00991C14.9035 6.00991 13.9374 5.04383 13.9374 3.85212C13.9374 2.66041 14.9035 1.69434 16.0952 1.69434C17.2869 1.69434 18.253 2.66041 18.253 3.85212ZM16.0952 5.34999C16.9224 5.34999 17.5931 4.67937 17.5931 3.85212C17.5931 3.02487 16.9224 2.35425 16.0952 2.35425C15.2679 2.35425 14.5973 3.02487 14.5973 3.85212C14.5973 4.67937 15.2679 5.34999 16.0952 5.34999Z",
         fill: "#528693"
       }),
@@ -1573,7 +1573,7 @@ var Info = (0, import_react28.forwardRef)((delegated, ref) => {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", {
         fillRule: "evenodd",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         d: "M11.2842 18.976L11.3049 18.9785C11.5112 19.0031 11.7201 18.9658 11.9049 18.8714C12.0891 18.7772 12.2409 18.6306 12.3411 18.4504C12.3471 18.4394 12.352 18.4277 12.3558 18.4158C12.3317 18.4124 12.3048 18.4091 12.2731 18.4053C12.0384 18.3881 11.8084 18.33 11.5936 18.2335C11.2334 18.0797 10.9456 17.7933 10.7906 17.433C10.6341 17.0694 10.6252 16.6594 10.7658 16.2894C10.9266 15.8663 11.1487 15.4689 11.4246 15.1101L11.6291 14.8181C11.6293 14.8178 11.629 14.8184 11.6291 14.8181C12.0038 14.2802 12.4092 13.763 12.8423 13.2707L12.9418 13.1535C12.9894 13.097 13.0361 13.0418 13.0821 12.9874C13.2314 12.8108 13.3734 12.6428 13.5141 12.4665L13.5237 12.4544L13.5339 12.4428C14.107 11.7899 14.5194 11.0128 14.7386 10.1733C14.8642 9.60674 14.7724 9.1134 14.5125 8.69961C14.2452 8.27422 13.7678 7.88337 13.0466 7.60647L13.0376 7.60304C12.2034 7.26882 11.3198 7.07373 10.4221 7.02572C10.2586 7.02444 10.0952 7.03841 9.93422 7.06745L9.91342 7.0712L9.89242 7.07362C9.77981 7.08656 9.67209 7.12639 9.57839 7.18964C9.48729 7.25113 9.41209 7.33296 9.35867 7.42842C9.35249 7.44171 9.33941 7.47402 9.32659 7.52286C9.31959 7.54951 9.31383 7.57671 9.30949 7.60325C9.36308 7.61115 9.41754 7.61364 9.47206 7.61055L9.51828 7.60793L9.63538 7.61773C9.79024 7.6263 9.94419 7.64682 10.0959 7.67913L10.1211 7.68451L10.1459 7.69185C10.6213 7.83272 11.1176 8.10198 11.3044 8.65041L11.3058 8.6547C11.4603 9.11879 11.309 9.5616 11.1547 9.87197C10.9947 10.194 10.7584 10.5161 10.546 10.7961C10.1932 11.2626 9.79323 11.726 9.4222 12.1559L9.4167 12.1622L9.30686 12.2896L9.29607 12.301C8.50411 13.1358 7.82119 14.0671 7.26353 15.0728C6.95101 15.7053 6.92585 16.2828 7.10297 16.7755C7.28379 17.2785 7.70442 17.772 8.42421 18.1631L8.42623 18.1642C9.29923 18.6426 10.2687 18.9197 11.2633 18.9749L11.2842 18.976ZM6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8828 13.0625 13.7326 13.2401 13.582 13.4182C13.5366 13.4719 13.4912 13.5256 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659Z",
         fill: "#528693"
       })
@@ -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,105 @@ var useSharedHistoryContext = () => {
   return (0, import_react62.useContext)(Context);
 };
 
+// src/rich-text-editor/i18n/index.tsx
+var import_react63 = require("react");
+
+// src/rich-text-editor/i18n/translations/en.ts
+var translations = {
+  actionClearTextFormatting: "Clear text formatting",
+  actionTextFormattingOptions: "Formatting options for additional text styles",
+  actionFormatAsStrongLabel: "Format text as bold",
+  actionFormatAsStrongTitle: "Bold (Ctrl+B)",
+  actionFormatAsStrongTitleApple: "Bold (\u2318B)",
+  actionFormatAsEmphasizedLabel: "Format text as italics",
+  actionFormatAsEmphasizedTitle: "Italic (Ctrl+I)",
+  actionFormatAsEmphasizedTitleApple: "Italic (\u2318I)",
+  actionFormatAsUnderlinedLabel: "Underline text",
+  actionFormatAsUnderlinedTitle: "Underlined (Ctrl+U)",
+  actionFormatAsUnderlinedTitleApple: "Underlined (\u2318U)",
+  actionFormatWithStrikethroughLabel: "Format text with a strikethrough",
+  actionFormatWithStrikethroughTitle: "Strikethrough",
+  actionFormatWithSubscriptLabel: "Format text as subscript",
+  actionFormatWithSubscriptTitle: "Subscript",
+  actionFormatWithSuperscriptLabel: "Format text as superscript",
+  actionFormatWithSuperscriptTitle: "Superscript",
+  actionInsertCodeBlock: "Insert code block",
+  actionInsertlink: "Insert link",
+  actionCopyJSON: "Copy JSON",
+  actionCopyCode: "Copy code",
+  actionClear: "Clear editor",
+  actionFormatCode: "Format code with Prettier",
+  actionTableInsertRowsAbove: "Insert row above",
+  actionTableInsertRowsAbove_plural: "Insert {{rows}} rows above",
+  actionTableInsertRowsBelow: "Insert row above",
+  actionTableInsertRowsBelow_plural: "Insert {{rows}} rows above",
+  actionTableInsertColumnsBefore: "Insert column left",
+  actionTableInsertColumnsBefore_plural: "Insert {{columns}} columns left",
+  actionTableInsertColumnsAfter: "Insert column right",
+  actionTableInsertColumnsAfter_plural: "Insert {{columns}} columns right",
+  actionTableAddRowHeader: "Add row header",
+  actionTableRemoveRowHeader: "Remove row header",
+  actionTableAddColumnHeader: "Add column header",
+  actionTableRemoveColumnHeader: "Remove column header",
+  actionTableDeleteColumn: "Delete column",
+  actionTableDeleteRow: "Delete row",
+  actionTableDeleteTable: "Delete table",
+  actionTableOpenOptions: "Open table options",
+  actionUndoLabel: "Undo",
+  actionUndoTitle: "Undo (Ctrl+Z)",
+  actionUndoTitleApple: "Undo (\u2318Z)",
+  actionRedoLabel: "Undo",
+  actionRedoTitle: "Undo (Ctrl+Y)",
+  actionRedoTitleApple: "Redo (\u2318Y)",
+  codeSelectLanguage: "Select language",
+  linkEditorLink: "Link",
+  linkEditorRel: "Rel",
+  linkEditorTarget: "Target",
+  linkEditorCommit: "Done",
+  linkEditorEdit: "Edit",
+  linkPreviewReplaceTextWithTitle: "Replace link text with its title",
+  horizontalRule: "Horizontal rule",
+  table: "Table",
+  insertTableTitle: "Insert table",
+  insertTableDescription: "Define your starting point of a table, you can add and remove columns and rows after creation.",
+  insertTableRows: "Rows",
+  insertTableColumns: "Columns",
+  insertTableCommit: "Insert table"
+};
+var en_default = translations;
+
+// src/rich-text-editor/i18n/index.tsx
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var I18nContext = (0, import_react63.createContext)(null);
+function I18nProvider({
+  labelTranslations,
+  children
+}) {
+  const translations2 = labelTranslations || en_default;
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(I18nContext.Provider, {
+    value: translations2,
+    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 +4132,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 +4160,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 +4175,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 +4208,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 +4222,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 +4265,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 +4283,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 +4311,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 +4335,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 +4381,7 @@ function CodeActionMenuContainer({ anchorElem }) {
       });
     }
   }, 50);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (!shouldListenMouseMove) {
       return;
     }
@@ -4309,20 +4412,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 +4447,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 +4474,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 +4501,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 +4534,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 +4574,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 +4660,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 +4725,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 +4743,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 +4771,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 +4828,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 +4861,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 +4883,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 +4898,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 +4910,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 +4927,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 +4936,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 +4969,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 +4982,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 +5004,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 +5022,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -4932,88 +5042,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 +5136,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 +5181,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 +5203,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 +5228,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 +5239,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 +5276,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 +5287,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 +5329,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 +5359,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 +5379,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 +5402,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 +5427,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 +5439,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 +5458,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 +5477,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 +5496,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 +5504,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 +5519,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 +5540,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 +5563,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 +5659,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 +5684,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 +5706,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 +5724,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 +5736,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 +5777,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 +5797,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 +5823,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 +5839,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 +5943,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 +6027,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 +6050,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 +6113,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     return editor.registerCommand(
       import_lexical16.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -6044,7 +6124,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 +6152,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 +6170,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 +6190,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 +6397,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 +6450,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 +6477,7 @@ function ToolbarPlugin({
           })
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ActionsPlugin, {
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ActionsPlugin, {
         prepend: actionsMenuPrepend,
         append: actionsMenuAppend
       })
@@ -6507,21 +6587,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 +6609,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 +6641,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 +6701,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,