@crystallize/design-system 1.10.0 → 1.11.1

package/dist/index.mjs

@@ -1503,7 +1503,7 @@ var Info = forwardRef28((delegated, ref) => {
       }),
       /* @__PURE__ */ jsx35("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"
       }),
@@ -1513,7 +1513,7 @@ var Info = forwardRef28((delegated, ref) => {
       }),
       /* @__PURE__ */ jsx35("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"
       })
@@ -3554,6 +3554,7 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { useLexicalComposerContext as useLexicalComposerContext12 } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 
 // src/rich-text-editor/context/SharedHistoryContext.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -3571,6 +3572,105 @@ var useSharedHistoryContext = () => {
   return useContext(Context);
 };
 
+// src/rich-text-editor/i18n/index.tsx
+import { createContext as createContext2, useContext as useContext2 } from "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
+import { jsx as jsx77 } from "react/jsx-runtime";
+var I18nContext = createContext2(null);
+function I18nProvider({
+  labelTranslations,
+  children
+}) {
+  const translations2 = labelTranslations || en_default;
+  return /* @__PURE__ */ jsx77(I18nContext.Provider, {
+    value: translations2,
+    children
+  });
+}
+function replaceI18nVariablesInString(str, replaceWith) {
+  return str.replace(/({{[^}]+}})/g, replaceWith);
+}
+function useTr() {
+  const context = useContext2(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
 import {
   $createLineBreakNode,
@@ -3984,7 +4084,7 @@ var BaseNodes = [
 // src/rich-text-editor/plugins/AutoLinkPlugin/index.tsx
 import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
 import "react";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "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 = [
@@ -4012,7 +4112,7 @@ var MATCHERS = [
   }
 ];
 function LexicalAutoLinkPlugin() {
-  return /* @__PURE__ */ jsx77(AutoLinkPlugin, {
+  return /* @__PURE__ */ jsx78(AutoLinkPlugin, {
     matchers: MATCHERS
   });
 }
@@ -4031,9 +4131,10 @@ import { useState } from "react";
 import { $getNearestNodeFromDOMNode, $getSelection, $setSelection } from "lexical";
 import { useDebouncedCallback } from "use-debounce";
 import { $isCodeNode as $isCodeNode2 } from "@lexical/code";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 function CopyButton({ editor, getCodeDOMNode }) {
   const [isCopyCompleted, setCopyCompleted] = useState(false);
+  const tr = useTr();
   const removeSuccessIcon = useDebouncedCallback(() => {
     setCopyCompleted(false);
   }, 1e3);
@@ -4059,13 +4160,13 @@ function CopyButton({ editor, getCodeDOMNode }) {
       console.error("Failed to copy: ", err);
     }
   }
-  return /* @__PURE__ */ jsx78("button", {
+  return /* @__PURE__ */ jsx79("button", {
     className: "menu-item",
     onClick: handleClick,
-    "aria-label": "copy",
-    children: isCopyCompleted ? /* @__PURE__ */ jsx78("i", {
+    "aria-label": tr("actionCopyCode"),
+    children: isCopyCompleted ? /* @__PURE__ */ jsx79("i", {
       className: "format success"
-    }) : /* @__PURE__ */ jsx78("i", {
+    }) : /* @__PURE__ */ jsx79("i", {
       className: "format copy"
     })
   });
@@ -4076,7 +4177,7 @@ import "react";
 import { useState as useState2 } from "react";
 import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode2 } from "lexical";
 import { $isCodeNode as $isCodeNode3 } from "@lexical/code";
-import { jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
 var PRETTIER_PARSER_MODULES = {
   css: () => import("prettier/parser-postcss"),
   html: () => import("prettier/parser-html"),
@@ -4118,6 +4219,7 @@ function getPrettierOptions(lang) {
 function PrettierButton({ lang, editor, getCodeDOMNode }) {
   const [syntaxError, setSyntaxError] = useState2("");
   const [tipsVisible, setTipsVisible] = useState2(false);
+  const tr = useTr();
   async function handleClick() {
     const codeDOMNode = getCodeDOMNode();
     try {
@@ -4133,6 +4235,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);
@@ -4163,19 +4266,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
   return /* @__PURE__ */ jsxs58("div", {
     className: "prettier-wrapper",
     children: [
-      /* @__PURE__ */ jsx79("button", {
+      /* @__PURE__ */ jsx80("button", {
         className: "menu-item",
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        "aria-label": "prettier",
-        children: syntaxError ? /* @__PURE__ */ jsx79("i", {
+        "aria-label": tr("actionFormatCode"),
+        children: syntaxError ? /* @__PURE__ */ jsx80("i", {
           className: "format prettier-error"
-        }) : /* @__PURE__ */ jsx79("i", {
+        }) : /* @__PURE__ */ jsx80("i", {
           className: "format prettier"
         })
       }),
-      tipsVisible ? /* @__PURE__ */ jsx79("pre", {
+      tipsVisible ? /* @__PURE__ */ jsx80("pre", {
         className: "code-error-tips",
         children: syntaxError
       }) : null
@@ -4184,13 +4287,13 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
-import { Fragment as Fragment2, jsx as jsx80, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
 var CODE_PADDING = 8;
 function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext();
   const [lang, setLang] = useState3("");
   const [isShown, setShown] = useState3(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = useState3(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = useState3(true);
   const [position, setPosition] = useState3({
     right: "0",
     top: "0"
@@ -4261,20 +4364,20 @@ function CodeActionMenuContainer({ anchorElem }) {
   });
   const normalizedLang = normalizeCodeLang(lang);
   const codeFriendlyName = getLanguageFriendlyName(lang);
-  return /* @__PURE__ */ jsx80(Fragment2, {
+  return /* @__PURE__ */ jsx81(Fragment2, {
     children: isShown ? /* @__PURE__ */ jsxs59("div", {
       className: "code-action-menu-container",
       style: { ...position },
       children: [
-        /* @__PURE__ */ jsx80("div", {
+        /* @__PURE__ */ jsx81("div", {
           className: "code-highlight-language",
           children: codeFriendlyName
         }),
-        /* @__PURE__ */ jsx80(CopyButton, {
+        /* @__PURE__ */ jsx81(CopyButton, {
           editor,
           getCodeDOMNode
         }),
-        canBePrettier(normalizedLang) ? /* @__PURE__ */ jsx80(PrettierButton, {
+        canBePrettier(normalizedLang) ? /* @__PURE__ */ jsx81(PrettierButton, {
           editor,
           getCodeDOMNode,
           lang: normalizedLang
@@ -4296,7 +4399,7 @@ function getMouseInfo(event) {
 function CodeActionMenuPlugin({
   anchorElem = document.body
 }) {
-  return createPortal(/* @__PURE__ */ jsx80(CodeActionMenuContainer, {
+  return createPortal(/* @__PURE__ */ jsx81(CodeActionMenuContainer, {
     anchorElem
   }), anchorElem);
 }
@@ -4334,7 +4437,7 @@ import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import { Suspense, useEffect as useEffect3, useState as useState4 } from "react";
 import { $getSelection as $getSelection2, $isTextNode as $isTextNode3 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
-import { Fragment as Fragment3, jsx as jsx81, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx82, jsxs as jsxs60 } from "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) {
@@ -4361,6 +4464,7 @@ function LinkPreviewContent({
   const [textContent, setTextContent] = useState4("");
   const { preview } = useSuspenseRequest(url);
   const [editor] = useLexicalComposerContext3();
+  const tr = useTr();
   const hasPreview = preview !== null && preview.google?.title;
   useEffect3(() => {
     editor.update(() => {
@@ -4393,32 +4497,32 @@ function LinkPreviewContent({
   return /* @__PURE__ */ jsxs60("div", {
     className: "LinkPreview__container",
     children: [
-      preview.google.image && /* @__PURE__ */ jsx81("div", {
+      preview.google.image && /* @__PURE__ */ jsx82("div", {
         className: "LinkPreview__imageWrapper bg-purple-50-900",
-        children: /* @__PURE__ */ jsx81("img", {
+        children: /* @__PURE__ */ jsx82("img", {
           src: preview.google.image,
           alt: preview.google.title,
           className: "LinkPreview__image"
         })
       }),
-      preview.google.title && /* @__PURE__ */ jsx81("div", {
+      preview.google.title && /* @__PURE__ */ jsx82("div", {
         className: "LinkPreview__title",
         children: preview.google.title
       }),
-      preview.google.description && /* @__PURE__ */ jsx81("div", {
+      preview.google.description && /* @__PURE__ */ jsx82("div", {
         className: "LinkPreview__description",
         children: preview.google.description
       }),
-      textContent && textContent !== preview.google.title ? /* @__PURE__ */ jsx81(Button, {
+      textContent && textContent !== preview.google.title ? /* @__PURE__ */ jsx82(Button, {
         className: "mb-4 ml-5",
         onClick: useTitleForText,
-        children: "Replace link text with its title"
+        children: tr("linkPreviewReplaceTextWithTitle")
       }) : null
     ]
   });
 }
 function Glimmer(props) {
-  return /* @__PURE__ */ jsx81("div", {
+  return /* @__PURE__ */ jsx82("div", {
     className: "LinkPreview__glimmer",
     ...props,
     style: {
@@ -4430,24 +4534,24 @@ function Glimmer(props) {
 function LinkPreview({
   url
 }) {
-  return /* @__PURE__ */ jsx81(Suspense, {
+  return /* @__PURE__ */ jsx82(Suspense, {
     fallback: /* @__PURE__ */ jsxs60(Fragment3, {
       children: [
-        /* @__PURE__ */ jsx81(Glimmer, {
+        /* @__PURE__ */ jsx82(Glimmer, {
           style: { height: "80px" },
           index: 0
         }),
-        /* @__PURE__ */ jsx81(Glimmer, {
+        /* @__PURE__ */ jsx82(Glimmer, {
           style: { width: "60%" },
           index: 1
         }),
-        /* @__PURE__ */ jsx81(Glimmer, {
+        /* @__PURE__ */ jsx82(Glimmer, {
           style: { width: "80%" },
           index: 2
         })
       ]
     }),
-    children: /* @__PURE__ */ jsx81(LinkPreviewContent, {
+    children: /* @__PURE__ */ jsx82(LinkPreviewContent, {
       url
     })
   });
@@ -4516,7 +4620,7 @@ function validateUrl(url) {
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-import { Fragment as Fragment4, jsx as jsx82, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
 function FloatingLinkEditor({
   editor,
   isLink,
@@ -4530,6 +4634,7 @@ function FloatingLinkEditor({
   const [target, setTarget] = useState5(null);
   const [isEditMode, setEditMode] = useState5(false);
   const [lastSelection, setLastSelection] = useState5(null);
+  const tr = useTr();
   const updateLinkEditor = useCallback(() => {
     const selection = $getSelection3();
     if ($isRangeSelection(selection)) {
@@ -4636,41 +4741,41 @@ function FloatingLinkEditor({
       inputRef.current.focus();
     }
   }, [isEditMode]);
-  return /* @__PURE__ */ jsx82("div", {
+  return /* @__PURE__ */ jsx83("div", {
     ref: editorRef,
     className: "link-editor",
     children: isEditMode ? /* @__PURE__ */ jsxs61("div", {
       children: [
-        /* @__PURE__ */ jsx82("div", {
+        /* @__PURE__ */ jsx83("div", {
           className: "border-0 border-b border-gray-100-800 border-solid px-3",
-          children: /* @__PURE__ */ jsx82(InputWithLabel, {
-            label: "Link",
+          children: /* @__PURE__ */ jsx83(InputWithLabel, {
+            label: tr("linkEditorLink"),
             type: "text",
             value: linkUrl,
             onChange: (e) => setLinkUrl(e.target.value)
           })
         }),
-        /* @__PURE__ */ jsx82("div", {
+        /* @__PURE__ */ jsx83("div", {
           className: "border-0 border-b border-gray-100-800 border-solid px-3",
-          children: /* @__PURE__ */ jsx82(InputWithLabel, {
-            label: "Rel",
+          children: /* @__PURE__ */ jsx83(InputWithLabel, {
+            label: tr("linkEditorRel"),
             type: "text",
             value: rel ?? "",
             onChange: (e) => setRel(e.target.value)
           })
         }),
-        /* @__PURE__ */ jsx82("div", {
+        /* @__PURE__ */ jsx83("div", {
           className: "border-0 border-b border-gray-100-800 border-solid px-3",
-          children: /* @__PURE__ */ jsx82(InputWithLabel, {
-            label: "Target",
+          children: /* @__PURE__ */ jsx83(InputWithLabel, {
+            label: tr("linkEditorTarget"),
             type: "text",
             value: target ?? "",
             onChange: (e) => setTarget(e.target.value)
           })
         }),
-        /* @__PURE__ */ jsx82("div", {
+        /* @__PURE__ */ jsx83("div", {
           className: "flex px-6 py-2 justify-end",
-          children: /* @__PURE__ */ jsx82(Button, {
+          children: /* @__PURE__ */ jsx83(Button, {
             onClick: () => {
               if (lastSelection !== null) {
                 if (linkUrl !== "") {
@@ -4683,7 +4788,7 @@ function FloatingLinkEditor({
                 setEditMode(false);
               }
             },
-            children: "Done"
+            children: tr("linkEditorCommit")
           })
         })
       ]
@@ -4693,9 +4798,9 @@ function FloatingLinkEditor({
           className: "link-input !flex flex-nowrap justify-between items-center max-w-full ",
           children: [
             /* @__PURE__ */ jsxs61("div", {
-              className: " grid",
+              className: "grid",
               children: [
-                /* @__PURE__ */ jsx82("a", {
+                /* @__PURE__ */ jsx83("a", {
                   href: linkUrl,
                   target: "_blank",
                   rel: "noopener noreferrer",
@@ -4704,11 +4809,11 @@ function FloatingLinkEditor({
                 rel || target ? /* @__PURE__ */ jsxs61("div", {
                   className: "flex mt-1 gap-1",
                   children: [
-                    rel && /* @__PURE__ */ jsx82("div", {
+                    rel && /* @__PURE__ */ jsx83("div", {
                       className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900 rounded-md py-0.5",
                       children: rel
                     }),
-                    target && /* @__PURE__ */ jsx82("div", {
+                    target && /* @__PURE__ */ jsx83("div", {
                       className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900  rounded-md py-0.5",
                       children: target
                     })
@@ -4716,19 +4821,20 @@ function FloatingLinkEditor({
                 }) : null
               ]
             }),
-            /* @__PURE__ */ jsx82("div", {
-              children: /* @__PURE__ */ jsx82(IconButton, {
+            /* @__PURE__ */ jsx83("div", {
+              children: /* @__PURE__ */ jsx83(IconButton, {
                 size: "sm",
                 tabIndex: 0,
                 onMouseDown: (event) => event.preventDefault(),
                 onClick: () => setEditMode(true),
-                children: /* @__PURE__ */ jsx82(Icon.Edit, {})
+                "aria-label": tr("linkEditorEdit"),
+                children: /* @__PURE__ */ jsx83(Icon.Edit, {})
               })
             })
           ]
         }),
-        /* @__PURE__ */ jsx82("div", {
-          children: /* @__PURE__ */ jsx82(LinkPreview, {
+        /* @__PURE__ */ jsx83("div", {
+          children: /* @__PURE__ */ jsx83(LinkPreview, {
             url: linkUrl
           })
         })
@@ -4764,7 +4870,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
     );
   }, [editor, updateToolbar]);
   return isLink ? createPortal2(
-    /* @__PURE__ */ jsx82(FloatingLinkEditor, {
+    /* @__PURE__ */ jsx83(FloatingLinkEditor, {
       editor: activeEditor,
       isLink,
       anchorElem,
@@ -4797,6 +4903,9 @@ import { $isLinkNode as $isLinkNode3, TOGGLE_LINK_COMMAND as TOGGLE_LINK_COMMAND
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister2 } from "@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);
@@ -4827,7 +4936,7 @@ function getDOMRangeRect(nativeSelection, rootElement) {
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-import { Fragment as Fragment5, jsx as jsx83, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -4841,6 +4950,7 @@ function TextFormatFloatingToolbar({
   isSuperscript
 }) {
   const popupCharStylesEditorRef = useRef3(null);
+  const tr = useTr();
   const insertLink = useCallback2(() => {
     if (!isLink) {
       editor.dispatchCommand(TOGGLE_LINK_COMMAND2, "https://");
@@ -4899,88 +5009,92 @@ function TextFormatFloatingToolbar({
       )
     );
   }, [editor, updateTextFormatFloatingToolbar]);
-  return /* @__PURE__ */ jsx83("div", {
+  return /* @__PURE__ */ jsx84("div", {
     ref: popupCharStylesEditorRef,
     className: "c-floating-text-format-popup gap-0.5",
     children: editor.isEditable() && /* @__PURE__ */ jsxs62(Fragment5, {
       children: [
-        /* @__PURE__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
           },
           style: { padding: 0, overflow: "hidden" },
-          "aria-label": "Format text as bold",
-          children: /* @__PURE__ */ jsx83("i", {
+          title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
+          "aria-label": tr("actionFormatAsStrongLabel"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
           },
-          "aria-label": "Format text as italics",
-          children: /* @__PURE__ */ jsx83("i", {
+          title: tr("actionFormatAsEmphasizedTitle"),
+          "aria-label": tr("actionFormatAsEmphasizedLabel"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
           },
-          "aria-label": "Format text to underlined",
-          children: /* @__PURE__ */ jsx83("i", {
+          title: tr("actionFormatAsUnderlinedTitle"),
+          "aria-label": tr("actionFormatAsUnderlinedLabel"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
           },
-          "aria-label": "Format text with a strikethrough",
-          children: /* @__PURE__ */ jsx83("i", {
+          title: tr("actionFormatWithStrikethroughTitle"),
+          "aria-label": tr("actionFormatWithStrikethroughLabel"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
           },
-          title: "Subscript",
-          "aria-label": "Format Subscript",
-          children: /* @__PURE__ */ jsx83("i", {
+          title: tr("actionFormatWithSubscriptTitle"),
+          "aria-label": tr("actionFormatWithSubscriptLabel"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
           },
-          title: "Superscript",
-          "aria-label": "Format Superscript",
-          children: /* @__PURE__ */ jsx83("i", {
+          title: tr("actionFormatWithSuperscriptTitle"),
+          "aria-label": tr("actionFormatWithSuperscriptLabel"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
           },
-          "aria-label": "Insert code block",
-          children: /* @__PURE__ */ jsx83("i", {
+          "aria-label": tr("actionInsertCodeBlock"),
+          children: /* @__PURE__ */ jsx84("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__ */ jsx83(IconButton, {
+        /* @__PURE__ */ jsx84(IconButton, {
           style: { padding: 0, overflow: "hidden" },
           onClick: insertLink,
-          "aria-label": "Insert link",
-          children: /* @__PURE__ */ jsx83("i", {
+          "aria-label": tr("actionInsertlink"),
+          children: /* @__PURE__ */ jsx84("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"}`
           })
         })
@@ -5056,7 +5170,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
     return null;
   }
   return createPortal3(
-    /* @__PURE__ */ jsx83(TextFormatFloatingToolbar, {
+    /* @__PURE__ */ jsx84(TextFormatFloatingToolbar, {
       editor,
       anchorElem,
       isLink,
@@ -5081,9 +5195,9 @@ function FloatingTextFormatToolbarPlugin({
 // src/rich-text-editor/plugins/LinkPlugin/index.tsx
 import { LinkPlugin as LexicalLinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import "react";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 function LinkPlugin() {
-  return /* @__PURE__ */ jsx84(LexicalLinkPlugin, {
+  return /* @__PURE__ */ jsx85(LexicalLinkPlugin, {
     validateUrl
   });
 }
@@ -5218,14 +5332,9 @@ function MaxLengthPlugin({ maxLength }) {
 }
 
 // src/rich-text-editor/plugins/TabFocusPlugin/index.tsx
-import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
-import {
-  $getSelection as $getSelection7,
-  $isRangeSelection as $isRangeSelection5,
-  $setSelection as $setSelection2,
-  FOCUS_COMMAND
-} from "lexical";
 import { useEffect as useEffect8 } from "react";
+import { $getSelection as $getSelection7, $isRangeSelection as $isRangeSelection5, $setSelection as $setSelection2, FOCUS_COMMAND } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 var COMMAND_PRIORITY_LOW3 = 1;
 var TAB_TO_FOCUS_INTERVAL = 100;
 var lastTabKeyDownTimestamp = 0;
@@ -5288,7 +5397,7 @@ import {
   TableCellHeaderStates,
   TableCellNode as TableCellNode2
 } from "@lexical/table";
-import { Fragment as Fragment6, jsx as jsx85, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx86, jsxs as jsxs63 } from "react/jsx-runtime";
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = useLexicalComposerContext9();
   const [tableCellNode, updateTableCellNode] = useState7(_tableCellNode);
@@ -5296,6 +5405,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     columns: 1,
     rows: 1
   });
+  const tr = useTr();
   useEffect9(() => {
     return editor.registerMutationListener(TableCellNode2, (nodeMutations) => {
       const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
@@ -5444,71 +5554,53 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   }, [editor, tableCellNode, clearTableSelection]);
   return /* @__PURE__ */ jsxs63(Fragment6, {
     children: [
-      /* @__PURE__ */ jsxs63(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(false),
-        children: [
-          "Insert ",
-          selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
-          " above"
-        ]
+        children: tr("actionTableInsertRowsAbove", selectionCounts.rows)
       }),
-      /* @__PURE__ */ jsxs63(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(true),
-        children: [
-          "Insert ",
-          selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
-          " below"
-        ]
+        children: tr("actionTableInsertRowsBelow", selectionCounts.rows)
       }),
-      /* @__PURE__ */ jsxs63(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => insertTableColumnAtSelection(false),
-        children: [
-          "Insert ",
-          selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
-          " left"
-        ]
+        children: tr("actionTableInsertColumnsBefore", selectionCounts.columns)
       }),
-      /* @__PURE__ */ jsxs63(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => insertTableColumnAtSelection(true),
-        children: [
-          "Insert ",
-          selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
-          " right"
-        ]
+        children: tr("actionTableInsertColumnsAfter", selectionCounts.columns)
       }),
-      /* @__PURE__ */ jsxs63(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => toggleTableRowIsHeader(),
-        children: [
-          (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
-          " row header"
-        ]
+        children: tr(
+          (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "actionTableRemoveRowHeader" : "actionTableAddRowHeader"
+        )
       }),
-      /* @__PURE__ */ jsxs63(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => toggleTableColumnIsHeader(),
-        children: [
-          (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
-          " ",
-          "column header"
-        ]
+        children: tr(
+          (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "actionTableRemoveColumnHeader" : "actionTableAddColumnHeader"
+        )
       }),
-      /* @__PURE__ */ jsx85(DropdownMenu.Separator, {}),
-      tableStats.columns > 1 && /* @__PURE__ */ jsx85(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Separator, {}),
+      tableStats.columns > 1 && /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => deleteTableColumnAtSelection(),
-        children: "Delete column"
+        children: tr("actionTableDeleteColumn")
       }),
-      tableStats.rows > 1 && /* @__PURE__ */ jsx85(DropdownMenu.Item, {
+      tableStats.rows > 1 && /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => deleteTableRowAtSelection(),
-        children: "Delete row"
+        children: tr("actionTableDeleteRow")
       }),
-      /* @__PURE__ */ jsx85(DropdownMenu.Item, {
+      /* @__PURE__ */ jsx86(DropdownMenu.Item, {
         onSelect: () => deleteTableAtSelection(),
-        children: "Delete table"
+        children: tr("actionTableDeleteTable")
       })
     ]
   });
 }
 function TableCellActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext9();
+  const tr = useTr();
   const menuButtonRef = useRef4(null);
   const [isMenuOpen, setIsMenuOpen] = useState7(false);
   const [tableCellNode, setTableMenuCellNode] = useState7(null);
@@ -5581,19 +5673,20 @@ function TableCellActionMenuContainer({ anchorElem }) {
       }
     }
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-  return /* @__PURE__ */ jsx85("div", {
+  return /* @__PURE__ */ jsx86("div", {
     className: "table-cell-action-button-container",
     ref: menuButtonRef,
-    children: tableCellNode != null && /* @__PURE__ */ jsx85(DropdownMenu.Root, {
+    children: tableCellNode != null && /* @__PURE__ */ jsx86(DropdownMenu.Root, {
       onOpenChange: (isOpen) => setIsMenuOpen(isOpen),
-      content: /* @__PURE__ */ jsx85(TableActionMenu, {
+      content: /* @__PURE__ */ jsx86(TableActionMenu, {
         tableCellNode,
         tableStats
       }),
-      children: /* @__PURE__ */ jsx85(IconButton, {
+      children: /* @__PURE__ */ jsx86(IconButton, {
         size: "xs",
         className: "table-cell-action-button",
-        children: /* @__PURE__ */ jsx85(Icon.Arrow, {})
+        "aria-label": tr("actionTableOpenOptions"),
+        children: /* @__PURE__ */ jsx86(Icon.Arrow, {})
       })
     })
   });
@@ -5602,7 +5695,7 @@ function TableActionMenuPlugin({
   anchorElem = document.body
 }) {
   const isEditable = useLexicalEditable();
-  return createPortal4(isEditable ? /* @__PURE__ */ jsx85(TableCellActionMenuContainer, {
+  return createPortal4(isEditable ? /* @__PURE__ */ jsx86(TableCellActionMenuContainer, {
     anchorElem
   }) : null, anchorElem);
 }
@@ -5653,13 +5746,10 @@ import {
   mergeRegister as mergeRegister3
 } from "@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
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
-import { jsx as jsx86, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs64 } from "react/jsx-runtime";
 async function copyJson(editor) {
   const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
   try {
@@ -5668,53 +5758,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] = useLexicalComposerContext10();
+  const tr = useTr();
   return /* @__PURE__ */ jsxs64("div", {
     className: "z-50 flex items-center ",
     children: [
-      /* @__PURE__ */ jsx86("div", {}),
+      /* @__PURE__ */ jsx87("div", {}),
       /* @__PURE__ */ jsxs64(ActionMenu, {
         children: [
-          !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx86(ActionMenu.Item, {
+          !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx87(ActionMenu.Item, {
             onSelect: actionItem.action,
             className: actionItem.type === "danger" ? "danger" : "",
             children: actionItem.title
           }, actionItem.title)),
-          /* @__PURE__ */ jsx86(ActionMenu.Item, {
+          /* @__PURE__ */ jsx87(ActionMenu.Item, {
             onSelect: () => copyJson(editor),
-            children: "Copy JSON"
-          }),
-          /* @__PURE__ */ jsx86(ActionMenu.Item, {
-            onSelect: () => exportJson(editor),
-            children: "Export JSON"
+            children: tr("actionCopyJSON")
           }),
-          /* @__PURE__ */ jsx86(ActionMenu.Item, {
+          /* @__PURE__ */ jsx87(ActionMenu.Item, {
             className: "danger",
             onSelect: () => {
               editor.dispatchCommand(CLEAR_EDITOR_COMMAND, void 0);
               editor.focus();
             },
-            children: "Clear paragraph"
+            children: tr("actionClear")
           }),
-          !append ? null : append.map((actionItem) => /* @__PURE__ */ jsx86(ActionMenu.Item, {
+          !append ? null : append.map((actionItem) => /* @__PURE__ */ jsx87(ActionMenu.Item, {
             onSelect: actionItem.action,
             className: actionItem.type === "danger" ? "danger" : "",
             children: actionItem.title
@@ -5728,10 +5801,11 @@ function ActionsPlugin({
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
 import { useState as useState8 } from "react";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
-import { Fragment as Fragment7, jsx as jsx87, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx88, jsxs as jsxs65 } from "react/jsx-runtime";
 function InsertTableDialog({ activeEditor }) {
   const [rows, setRows] = useState8("5");
   const [columns, setColumns] = useState8("5");
+  const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
       return;
@@ -5750,20 +5824,20 @@ function InsertTableDialog({ activeEditor }) {
       /* @__PURE__ */ jsxs65("div", {
         className: "grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ",
         children: [
-          /* @__PURE__ */ jsx87(InputWithLabel, {
-            label: "Rows",
+          /* @__PURE__ */ jsx88(InputWithLabel, {
+            label: tr("insertTableRows"),
             value: rows,
             placeholder: "0",
             type: "text",
             inputMode: "numeric",
             onChange: (e) => setRows(e.target.value)
           }),
-          /* @__PURE__ */ jsx87("span", {
+          /* @__PURE__ */ jsx88("span", {
             className: "h-full bg-gray-100-800"
           }),
-          /* @__PURE__ */ jsx87(InputWithLabel, {
+          /* @__PURE__ */ jsx88(InputWithLabel, {
             type: "text",
-            label: "Columns",
+            label: tr("insertTableColumns"),
             placeholder: "0",
             value: columns,
             inputMode: "numeric",
@@ -5771,15 +5845,15 @@ function InsertTableDialog({ activeEditor }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsx87("div", {
+      /* @__PURE__ */ jsx88("div", {
         className: "flex justify-end mt-3",
-        children: /* @__PURE__ */ jsx87(Button, {
+        children: /* @__PURE__ */ jsx88(Button, {
           as: Dialog.Close,
           size: "sm",
           intent: "action",
-          "aria-label": "Confirm",
+          "aria-label": tr("insertTableCommit"),
           onClick,
-          children: "Confirm"
+          children: tr("insertTableCommit")
         })
       })
     ]
@@ -5787,7 +5861,7 @@ function InsertTableDialog({ activeEditor }) {
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-import { Fragment as Fragment8, jsx as jsx88, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx89, jsxs as jsxs66 } from "react/jsx-runtime";
 var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
@@ -5891,7 +5965,7 @@ function BlockFormatDropDown({
       });
     }
   };
-  return /* @__PURE__ */ jsx88(DropdownMenu.Root, {
+  return /* @__PURE__ */ jsx89(DropdownMenu.Root, {
     disabled,
     style: { zIndex: 1 },
     content: /* @__PURE__ */ jsxs66(Fragment8, {
@@ -5899,13 +5973,13 @@ function BlockFormatDropDown({
         /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
           onClick: formatParagraph,
           children: [
-            /* @__PURE__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("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__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("i", {
               className: "icon paragraph"
             }),
-            /* @__PURE__ */ jsx88("span", {
+            /* @__PURE__ */ jsx89("span", {
               className: `${blockType === "paragraph" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Normal"
             })
@@ -5914,10 +5988,10 @@ function BlockFormatDropDown({
         headings.map((headingSize) => /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
           onClick: () => formatHeading(headingSize),
           children: [
-            /* @__PURE__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+            /* @__PURE__ */ jsx89("span", {
               className: `${blockType === headingSize ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`,
               children: headingTypeToBlockName[headingSize]
             })
@@ -5926,10 +6000,10 @@ function BlockFormatDropDown({
         /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
           onClick: formatBulletList,
           children: [
-            /* @__PURE__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+            /* @__PURE__ */ jsx89("span", {
               className: `${blockType === "bullet" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Bullet List"
             })
@@ -5938,10 +6012,10 @@ function BlockFormatDropDown({
         /* @__PURE__ */ jsxs66(DropdownMenu.Item, {
           onClick: formatNumberedList,
           children: [
-            /* @__PURE__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+            /* @__PURE__ */ jsx89("span", {
               className: `${blockType === "number" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Numbered List"
             })
@@ -5951,10 +6025,10 @@ function BlockFormatDropDown({
           onClick: formatQuote,
           "data-testid": "toggle-block-format-quote",
           children: [
-            /* @__PURE__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+            /* @__PURE__ */ jsx89("span", {
               className: `${blockType === "quote" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Quote"
             })
@@ -5964,10 +6038,10 @@ function BlockFormatDropDown({
           onClick: formatCode,
           "data-testid": "toggle-block-format-code",
           children: [
-            /* @__PURE__ */ jsx88("i", {
+            /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+            /* @__PURE__ */ jsx89("span", {
               className: `${blockType === "code" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`,
               children: "Code block"
             })
@@ -5980,16 +6054,16 @@ function BlockFormatDropDown({
       "aria-label": "Formatting options for text style",
       "data-testid": "toggle-block-format",
       children: [
-        /* @__PURE__ */ jsx88("i", {
+        /* @__PURE__ */ jsx89("i", {
           className: `icon ${blockType} border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`
         }),
-        /* @__PURE__ */ jsx88(Icon.Arrow, {})
+        /* @__PURE__ */ jsx89(Icon.Arrow, {})
       ]
     })
   });
 }
 function Divider() {
-  return /* @__PURE__ */ jsx88("div", {
+  return /* @__PURE__ */ jsx89("div", {
     className: "divider"
   });
 }
@@ -6011,6 +6085,7 @@ function ToolbarPlugin({
   const [isCode, setIsCode] = useState9(false);
   const [canUndo, setCanUndo] = useState9(false);
   const [canRedo, setCanRedo] = useState9(false);
+  const tr = useTr();
   const [codeLanguage, setCodeLanguage] = useState9("");
   const [isEditable, setIsEditable] = useState9(() => editor.isEditable());
   const updateToolbar = useCallback4(() => {
@@ -6143,138 +6218,138 @@ function ToolbarPlugin({
       /* @__PURE__ */ jsxs66("div", {
         className: "flex",
         children: [
-          /* @__PURE__ */ jsx88(IconButton, {
+          /* @__PURE__ */ jsx89(IconButton, {
             disabled: !canUndo || !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(UNDO_COMMAND, void 0);
             },
-            title: IS_APPLE ? "Undo (\u2318Z)" : "Undo (Ctrl+Z)",
             type: "button",
-            "aria-label": "Undo",
-            children: /* @__PURE__ */ jsx88("i", {
+            title: tr(IS_APPLE ? "actionUndoTitleApple" : "actionUndoTitle"),
+            "aria-label": tr("actionUndoLabel"),
+            children: /* @__PURE__ */ jsx89("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__ */ jsx88(IconButton, {
+          /* @__PURE__ */ jsx89(IconButton, {
             disabled: !canRedo || !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(REDO_COMMAND, void 0);
             },
-            title: IS_APPLE ? "Redo (\u2318Y)" : "Redo (Ctrl+Y)",
             type: "button",
-            "aria-label": "Redo",
-            children: /* @__PURE__ */ jsx88("i", {
+            title: tr(IS_APPLE ? "actionRedoTitleApple" : "actionRedoTitle"),
+            "aria-label": tr("actionRedoLabel"),
+            children: /* @__PURE__ */ jsx89("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__ */ jsx88(Divider, {}),
+          /* @__PURE__ */ jsx89(Divider, {}),
           blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs66(Fragment8, {
             children: [
-              /* @__PURE__ */ jsx88(BlockFormatDropDown, {
+              /* @__PURE__ */ jsx89(BlockFormatDropDown, {
                 disabled: !isEditable,
                 blockType,
                 editor
               }),
-              /* @__PURE__ */ jsx88(Divider, {})
+              /* @__PURE__ */ jsx89(Divider, {})
             ]
           }),
-          blockType === "code" ? /* @__PURE__ */ jsx88(Fragment8, {
-            children: /* @__PURE__ */ jsx88(DropdownMenu.Root, {
+          blockType === "code" ? /* @__PURE__ */ jsx89(Fragment8, {
+            children: /* @__PURE__ */ jsx89(DropdownMenu.Root, {
               disabled: !isEditable,
               style: { zIndex: 1 },
-              content: /* @__PURE__ */ jsx88(Fragment8, {
+              content: /* @__PURE__ */ jsx89(Fragment8, {
                 children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
-                  return /* @__PURE__ */ jsx88(DropdownMenu.Item, {
+                  return /* @__PURE__ */ jsx89(DropdownMenu.Item, {
                     className: `item ${dropDownActiveClass(value === codeLanguage)}`,
                     onClick: () => onCodeLanguageSelect(value),
-                    children: /* @__PURE__ */ jsx88("span", {
+                    children: /* @__PURE__ */ jsx89("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__ */ jsx88(Button, {
-                "aria-label": "Select language",
-                append: /* @__PURE__ */ jsx88(Icon.Arrow, {}),
-                children: /* @__PURE__ */ jsx88("span", {
+              children: /* @__PURE__ */ jsx89(Button, {
+                "aria-label": tr("codeSelectLanguage"),
+                append: /* @__PURE__ */ jsx89(Icon.Arrow, {}),
+                children: /* @__PURE__ */ jsx89("span", {
                   className: "font-medium text-sm",
                   children: getLanguageFriendlyName2(codeLanguage)
                 })
               })
             })
-          }) : /* @__PURE__ */ jsx88(Dialog, {
+          }) : /* @__PURE__ */ jsx89(Dialog, {
             children: /* @__PURE__ */ jsxs66("div", {
               className: "flex gap-1",
               children: [
-                /* @__PURE__ */ jsx88(IconButton, {
+                /* @__PURE__ */ jsx89(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(FORMAT_TEXT_COMMAND2, "bold");
                   },
-                  children: /* @__PURE__ */ jsx88("i", {
+                  children: /* @__PURE__ */ jsx89("i", {
                     className: `format icon bold border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ jsx88(IconButton, {
+                /* @__PURE__ */ jsx89(IconButton, {
                   className: `${isItalic ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: () => {
                     activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "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__ */ jsx88("i", {
+                  children: /* @__PURE__ */ jsx89("i", {
                     className: `format icon italic border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ jsx88(IconButton, {
+                /* @__PURE__ */ jsx89(IconButton, {
                   className: `${isUnderline ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: () => {
                     activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "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__ */ jsx88("i", {
+                  children: /* @__PURE__ */ jsx89("i", {
                     className: `format icon underline border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ jsx88(IconButton, {
+                /* @__PURE__ */ jsx89(IconButton, {
                   className: `${isCode ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
                   disabled: !isEditable,
                   onClick: () => {
                     activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "code");
                   },
-                  title: "Insert code block",
                   type: "button",
-                  "aria-label": "Insert code block",
-                  children: /* @__PURE__ */ jsx88("i", {
+                  title: tr("actionInsertCodeBlock"),
+                  "aria-label": tr("actionInsertCodeBlock"),
+                  children: /* @__PURE__ */ jsx89("i", {
                     className: `format icon code border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ jsx88(IconButton, {
+                /* @__PURE__ */ jsx89(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__ */ jsx88("i", {
+                  "aria-label": tr("actionInsertlink"),
+                  title: tr("actionInsertlink"),
+                  children: /* @__PURE__ */ jsx89("i", {
                     className: `format icon link border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
                   })
                 }),
-                /* @__PURE__ */ jsx88(DropdownMenu.Root, {
+                /* @__PURE__ */ jsx89(DropdownMenu.Root, {
                   disabled: !isEditable,
                   style: { zIndex: 1 },
                   content: /* @__PURE__ */ jsxs66(Fragment8, {
@@ -6283,15 +6358,15 @@ function ToolbarPlugin({
                         onClick: () => {
                           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "strikethrough");
                         },
-                        title: "Strikethrough",
-                        "aria-label": "Format text with a strikethrough",
+                        title: tr("actionFormatWithStrikethroughTitle"),
+                        "aria-label": tr("actionFormatWithStrikethroughLabel"),
                         children: [
-                          /* @__PURE__ */ jsx88("i", {
+                          /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+                          /* @__PURE__ */ jsx89("span", {
                             className: `px-3 text-sm font-sans ${isStrikethrough ? "font-medium" : "font-normal"}`,
-                            children: "Strikethrough"
+                            children: tr("actionFormatAsStrongTitle")
                           })
                         ]
                       }),
@@ -6299,15 +6374,15 @@ function ToolbarPlugin({
                         onClick: () => {
                           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "subscript");
                         },
-                        title: "Subscript",
-                        "aria-label": "Format text with a subscript",
+                        title: tr("actionFormatWithSubscriptTitle"),
+                        "aria-label": tr("actionFormatWithSubscriptLabel"),
                         children: [
-                          /* @__PURE__ */ jsx88("i", {
+                          /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+                          /* @__PURE__ */ jsx89("span", {
                             className: `px-3 text-sm font-sans ${isSubscript ? "font-medium" : "font-normal"}`,
-                            children: "Subscript"
+                            children: tr("actionFormatWithSubscriptTitle")
                           })
                         ]
                       }),
@@ -6315,28 +6390,28 @@ function ToolbarPlugin({
                         onClick: () => {
                           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "superscript");
                         },
-                        title: "Superscript",
-                        "aria-label": "Format text with a superscript",
+                        title: tr("actionFormatWithSuperscriptTitle"),
+                        "aria-label": tr("actionFormatWithSuperscriptLabel"),
                         children: [
-                          /* @__PURE__ */ jsx88("i", {
+                          /* @__PURE__ */ jsx89("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__ */ jsx88("span", {
+                          /* @__PURE__ */ jsx89("span", {
                             className: `px-3 text-sm font-sans ${isSuperscript ? "bg-purple-50-900" : "font-normal"}`,
-                            children: "Superscript"
+                            children: tr("actionFormatWithSuperscriptTitle")
                           })
                         ]
                       }),
                       /* @__PURE__ */ jsxs66(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__ */ jsx88("i", {
+                          /* @__PURE__ */ jsx89("i", {
                             className: "icon w-6 h-6 clear border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60"
                           }),
-                          /* @__PURE__ */ jsx88("span", {
+                          /* @__PURE__ */ jsx89("span", {
                             className: "px-3 text-sm text-pink-600-300 font-sans font-normal",
                             children: "Clear Formatting"
                           })
@@ -6346,50 +6421,50 @@ function ToolbarPlugin({
                   }),
                   children: /* @__PURE__ */ jsxs66(Button, {
                     style: { backgroundColor: "transparent", padding: "0 8px" },
-                    "aria-label": "Formatting options for additional text styles",
+                    "aria-label": tr("actionTextFormattingOptions"),
                     children: [
-                      /* @__PURE__ */ jsx88("i", {
+                      /* @__PURE__ */ jsx89("i", {
                         className: `icon dropdown-more border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`
                       }),
-                      /* @__PURE__ */ jsx88(Icon.Arrow, {})
+                      /* @__PURE__ */ jsx89(Icon.Arrow, {})
                     ]
                   })
                 }),
-                /* @__PURE__ */ jsx88(Divider, {}),
-                /* @__PURE__ */ jsx88(DropdownMenu.Root, {
+                /* @__PURE__ */ jsx89(Divider, {}),
+                /* @__PURE__ */ jsx89(DropdownMenu.Root, {
                   style: { zIndex: 1 },
                   disabled: !isEditable,
                   content: /* @__PURE__ */ jsxs66(Fragment8, {
                     children: [
-                      /* @__PURE__ */ jsx88(DropdownMenu.Item, {
+                      /* @__PURE__ */ jsx89(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
                         },
                         children: /* @__PURE__ */ jsxs66("div", {
                           className: "flex items-center font-sans font-normal",
                           children: [
-                            /* @__PURE__ */ jsx88("i", {
+                            /* @__PURE__ */ jsx89("i", {
                               className: "icon w-5 h-5 horizontal-rule border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60"
                             }),
-                            /* @__PURE__ */ jsx88("span", {
+                            /* @__PURE__ */ jsx89("span", {
                               className: "px-3 text-sm",
-                              children: "Horizontal rule"
+                              children: tr("horizontalRule")
                             })
                           ]
                         })
                       }),
-                      /* @__PURE__ */ jsx88(DropdownMenu.Item, {
-                        children: /* @__PURE__ */ jsx88(Dialog.Trigger, {
+                      /* @__PURE__ */ jsx89(DropdownMenu.Item, {
+                        children: /* @__PURE__ */ jsx89(Dialog.Trigger, {
                           asChild: true,
                           children: /* @__PURE__ */ jsxs66("div", {
                             className: "flex items-center font-sans font-normal",
                             children: [
-                              /* @__PURE__ */ jsx88("i", {
+                              /* @__PURE__ */ jsx89("i", {
                                 className: "icon w-5 h-5 table border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60"
                               }),
-                              /* @__PURE__ */ jsx88("span", {
+                              /* @__PURE__ */ jsx89("span", {
                                 className: "px-3 text-sm",
-                                children: "Table"
+                                children: tr("table")
                               })
                             ]
                           })
@@ -6397,23 +6472,23 @@ function ToolbarPlugin({
                       })
                     ]
                   }),
-                  children: /* @__PURE__ */ jsx88(IconButton, {
-                    children: /* @__PURE__ */ jsx88("i", {
+                  children: /* @__PURE__ */ jsx89(IconButton, {
+                    children: /* @__PURE__ */ jsx89("i", {
                       className: "icon plus border w-full h-full bg-no-repeat bg-center bg-[length:20px_20px] "
                     })
                   })
                 }),
                 /* @__PURE__ */ jsxs66(Dialog.Content, {
                   children: [
-                    /* @__PURE__ */ jsx88(Dialog.Title, {
-                      children: "Insert table"
+                    /* @__PURE__ */ jsx89(Dialog.Title, {
+                      children: tr("insertTableTitle")
                     }),
-                    /* @__PURE__ */ jsx88(Dialog.Description, {
-                      children: "Define your starting point of a table, you can add and remove columns and rows after creation."
+                    /* @__PURE__ */ jsx89(Dialog.Description, {
+                      children: tr("insertTableDescription")
                     }),
-                    /* @__PURE__ */ jsx88("div", {
+                    /* @__PURE__ */ jsx89("div", {
                       className: "items-center justify-between",
-                      children: /* @__PURE__ */ jsx88(InsertTableDialog, {
+                      children: /* @__PURE__ */ jsx89(InsertTableDialog, {
                         activeEditor
                       })
                     })
@@ -6424,7 +6499,7 @@ function ToolbarPlugin({
           })
         ]
       }),
-      /* @__PURE__ */ jsx88(ActionsPlugin, {
+      /* @__PURE__ */ jsx89(ActionsPlugin, {
         prepend: actionsMenuPrepend,
         append: actionsMenuAppend
       })
@@ -6534,21 +6609,13 @@ var theme = {
 };
 var CrystallizeRTEditorTheme_default = theme;
 
-// src/rich-text-editor/ui/ContentEditable.tsx
-import "react";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { jsx as jsx89 } from "react/jsx-runtime";
-function LexicalContentEditable({ className }) {
-  return /* @__PURE__ */ jsx89(ContentEditable, {
-    className: className || "ContentEditable__root"
-  });
-}
-
 // src/rich-text-editor/rich-text-editor.tsx
 import { Fragment as Fragment9, jsx as jsx90, jsxs as jsxs67 } from "react/jsx-runtime";
 function RichTextEditor({
   initialData,
   editable = true,
+  language = "en",
+  labelTranslations,
   ...rest
 }) {
   return /* @__PURE__ */ jsx90(LexicalComposer, {
@@ -6564,12 +6631,16 @@ function RichTextEditor({
         richText: initialData
       }) : void 0
     },
-    children: /* @__PURE__ */ jsx90(SharedHistoryContext, {
-      children: /* @__PURE__ */ jsx90("div", {
-        className: "c-rich-text-editor",
-        children: /* @__PURE__ */ jsx90(RichTextEditorWithoutContext, {
-          ...rest,
-          editable
+    children: /* @__PURE__ */ jsx90(I18nProvider, {
+      language,
+      labelTranslations,
+      children: /* @__PURE__ */ jsx90(SharedHistoryContext, {
+        children: /* @__PURE__ */ jsx90("div", {
+          className: "c-rich-text-editor",
+          children: /* @__PURE__ */ jsx90(RichTextEditorWithoutContext, {
+            ...rest,
+            editable
+          })
         })
       })
     })
@@ -6652,7 +6723,9 @@ function RichTextEditorWithoutContext({
               children: /* @__PURE__ */ jsx90("div", {
                 className: "editor",
                 ref: onRef,
-                children: /* @__PURE__ */ jsx90(LexicalContentEditable, {})
+                children: /* @__PURE__ */ jsx90(ContentEditable, {
+                  className: "ContentEditable__root"
+                })
               })
             }),
             placeholder,