@crystallize/design-system 1.17.0 → 1.17.1

package/dist/index.js

@@ -29160,8 +29160,9 @@ var DropdownMenu = {
 // src/action-menu/action-item.tsx
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Item2({ children, className, onSelect }) {
+function Item2({ children, className, onSelect, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenu.Item, {
+    ...delegated,
     onClick: onSelect,
     className: (0, import_class_variance_authority5.cx)(className, ["c-action-menu-item"]),
     children
@@ -34805,7 +34806,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_react121 = require("react");
+var import_react119 = require("react");
 var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -34858,6 +34859,7 @@ var translations = {
   actionFormatWithSubscriptTitle: "Subscript",
   actionFormatWithSuperscriptLabel: "Format text as superscript",
   actionFormatWithSuperscriptTitle: "Superscript",
+  actionFormatClear: "Clear formatting",
   actionInsertCodeBlock: "Insert code block",
   actionInsertlink: "Insert link",
   actionCopyJSON: "Copy JSON",
@@ -35687,45 +35689,8 @@ function CodeHighlightPlugin() {
   return null;
 }
 
-// src/rich-text-editor/plugins/DimensionsDetectorPlugin/index.tsx
-var import_react110 = require("react");
-var import_jsx_runtime126 = require("react/jsx-runtime");
-function DimensionDetectorPlugin({ onChange }) {
-  const [dimensions, setDimensions] = (0, import_react110.useState)();
-  const ref = (0, import_react110.useRef)(null);
-  (0, import_react110.useEffect)(() => {
-    if (ref.current) {
-      const el = ref.current;
-      const resizeObserver = new ResizeObserver((entries) => {
-        const [first] = entries;
-        if (first) {
-          const [contentBox] = first.contentBoxSize;
-          if (contentBox) {
-            const width = contentBox.inlineSize;
-            setDimensions({
-              width,
-              isSmallWidth: width < 600
-            });
-          }
-        }
-      });
-      resizeObserver.observe(el);
-      return () => resizeObserver.disconnect();
-    }
-  }, []);
-  (0, import_react110.useEffect)(() => {
-    if (dimensions) {
-      onChange(dimensions);
-    }
-  }, [dimensions, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", {
-    ref,
-    style: { height: 1, marginTop: -1 }
-  });
-}
-
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-var import_react112 = require("react");
+var import_react111 = require("react");
 var React4 = require("react");
 var import_lexical8 = require("lexical");
 var import_react_dom3 = require("react-dom");
@@ -35734,10 +35699,10 @@ var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerCont
 var import_utils = require("@lexical/utils");
 
 // src/rich-text-editor/ui/LinkPreview.tsx
-var import_react111 = require("react");
+var import_react110 = require("react");
 var import_lexical7 = require("lexical");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime126 = 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) {
@@ -35761,12 +35726,12 @@ function useSuspenseRequest(url) {
 function LinkPreviewContent({
   url
 }) {
-  const [textContent, setTextContent] = (0, import_react111.useState)("");
+  const [textContent, setTextContent] = (0, import_react110.useState)("");
   const { preview } = useSuspenseRequest(url);
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
   const tr = useTr();
   const hasPreview = preview !== null && preview.google?.title;
-  (0, import_react111.useEffect)(() => {
+  (0, import_react110.useEffect)(() => {
     editor.update(() => {
       const sel = (0, import_lexical7.$getSelection)();
       const nodes = sel?.getNodes();
@@ -35794,26 +35759,26 @@ function LinkPreviewContent({
   if (!hasPreview) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", {
     className: "c-rte-link-preview",
     children: [
-      preview.google.image && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
+      preview.google.image && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", {
         className: "c-rte-link-preview-image-wrapper",
-        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("img", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("img", {
           src: preview.google.image,
           alt: preview.google.title,
           className: "c-rte-link-preview-image"
         })
       }),
-      preview.google.title && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
+      preview.google.title && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", {
         className: "c-rte-link-preview-title",
         children: preview.google.title
       }),
-      preview.google.description && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
+      preview.google.description && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", {
         className: "c-rte-link-preview-description",
         children: preview.google.description
       }),
-      textContent && textContent !== preview.google.title ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, {
+      textContent && textContent !== preview.google.title ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Button, {
         className: "c-rte-link-preview__replace-text-btn",
         onClick: useTitleForText,
         children: tr("linkPreviewReplaceTextWithTitle")
@@ -35822,7 +35787,7 @@ function LinkPreviewContent({
   });
 }
 function Glimmer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", {
     className: "c-rte-link-preview-glimmer",
     ...props,
     style: {
@@ -35834,24 +35799,24 @@ function Glimmer(props) {
 function LinkPreview({
   url
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_react111.Suspense, {
-    fallback: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react110.Suspense, {
+    fallback: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Glimmer, {
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Glimmer, {
           style: { height: "80px" },
           index: 0
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Glimmer, {
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Glimmer, {
           style: { width: "60%" },
           index: 1
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Glimmer, {
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Glimmer, {
           style: { width: "80%" },
           index: 2
         })
       ]
     }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LinkPreviewContent, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(LinkPreviewContent, {
       url
     })
   });
@@ -35919,22 +35884,22 @@ function validateUrl(url) {
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 function FloatingLinkEditor({
   editor,
   isLink,
   setIsLink,
   anchorElem
 }) {
-  const editorRef = (0, import_react112.useRef)(null);
-  const inputRef = (0, import_react112.useRef)(null);
-  const [linkUrl, setLinkUrl] = (0, import_react112.useState)("");
-  const [rel, setRel] = (0, import_react112.useState)(null);
-  const [target, setTarget] = (0, import_react112.useState)(null);
-  const [isEditMode, setEditMode] = (0, import_react112.useState)(false);
-  const [lastSelection, setLastSelection] = (0, import_react112.useState)(null);
+  const editorRef = (0, import_react111.useRef)(null);
+  const inputRef = (0, import_react111.useRef)(null);
+  const [linkUrl, setLinkUrl] = (0, import_react111.useState)("");
+  const [rel, setRel] = (0, import_react111.useState)(null);
+  const [target, setTarget] = (0, import_react111.useState)(null);
+  const [isEditMode, setEditMode] = (0, import_react111.useState)(false);
+  const [lastSelection, setLastSelection] = (0, import_react111.useState)(null);
   const tr = useTr();
-  const updateLinkEditor = (0, import_react112.useCallback)(() => {
+  const updateLinkEditor = (0, import_react111.useCallback)(() => {
     const selection = (0, import_lexical8.$getSelection)();
     if ((0, import_lexical8.$isRangeSelection)(selection)) {
       const node = getSelectedNode(selection);
@@ -35984,7 +35949,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor]);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -36002,7 +35967,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, updateLinkEditor]);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     return (0, import_utils.mergeRegister)(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -36030,51 +35995,53 @@ function FloatingLinkEditor({
       )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateLinkEditor();
     });
   }, [editor, updateLinkEditor]);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     if (isEditMode && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isEditMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
     ref: editorRef,
     className: "c-rte-link-editor",
-    children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", {
+    "data-testid": "rich-text-link-editor",
+    children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
           className: "c-rte-link-editor-input-group",
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(InputWithLabel, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(InputWithLabel, {
             label: tr("linkEditorLink"),
             type: "text",
             value: linkUrl,
             onChange: (e) => setLinkUrl(e.target.value)
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
           className: "c-rte-link-editor-input-group",
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(InputWithLabel, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(InputWithLabel, {
             label: tr("linkEditorRel"),
             type: "text",
             value: rel ?? "",
             onChange: (e) => setRel(e.target.value)
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
           className: "c-rte-link-editor-input-group",
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(InputWithLabel, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(InputWithLabel, {
             label: tr("linkEditorTarget"),
             type: "text",
             value: target ?? "",
             onChange: (e) => setTarget(e.target.value)
           })
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
           className: "c-rte-link-editor-button-wrap",
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Button, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, {
+            "data-testid": "link-editor-save-button",
             onClick: () => {
               if (lastSelection !== null) {
                 if (linkUrl !== "") {
@@ -36091,28 +36058,28 @@ function FloatingLinkEditor({
           })
         })
       ]
-    }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, {
+    }) : /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", {
           className: "c-rte-link-editor-link-input",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", {
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", {
               className: "c-rte-link-editor-link-preview",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("a", {
+                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("a", {
                   href: linkUrl,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   children: linkUrl
                 }),
-                rel || target ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", {
+                rel || target ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", {
                   className: "c-rte-link-editor-preview-attrs",
                   children: [
-                    rel && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+                    rel && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
                       className: "c-rte-link-editor-preview-attr",
                       children: rel
                     }),
-                    target && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
+                    target && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
                       className: "c-rte-link-editor-preview-attr",
                       children: target
                     })
@@ -36120,20 +36087,21 @@ function FloatingLinkEditor({
                 }) : null
               ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
-              children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
+              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(IconButton, {
                 size: "sm",
                 tabIndex: 0,
                 onMouseDown: (event) => event.preventDefault(),
                 onClick: () => setEditMode(true),
                 "aria-label": tr("linkEditorEdit"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon.Edit, {})
+                "data-testid": "link-editor-edit",
+                children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon.Edit, {})
               })
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", {
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(LinkPreview, {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", {
+          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LinkPreview, {
             url: linkUrl
           })
         })
@@ -36142,9 +36110,9 @@ function FloatingLinkEditor({
   });
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem) {
-  const [activeEditor, setActiveEditor] = (0, import_react112.useState)(editor);
-  const [isLink, setIsLink] = (0, import_react112.useState)(false);
-  const updateToolbar = (0, import_react112.useCallback)(() => {
+  const [activeEditor, setActiveEditor] = (0, import_react111.useState)(editor);
+  const [isLink, setIsLink] = (0, import_react111.useState)(false);
+  const updateToolbar = (0, import_react111.useCallback)(() => {
     const selection = (0, import_lexical8.$getSelection)();
     if ((0, import_lexical8.$isRangeSelection)(selection)) {
       const node = getSelectedNode(selection);
@@ -36157,7 +36125,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       }
     }
   }, []);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     return editor.registerCommand(
       import_lexical8.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -36169,7 +36137,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
     );
   }, [editor, updateToolbar]);
   return isLink ? (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FloatingLinkEditor, {
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FloatingLinkEditor, {
       editor: activeEditor,
       isLink,
       anchorElem,
@@ -36186,7 +36154,7 @@ function FloatingLinkEditorPlugin({
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-var import_react113 = require("react");
+var import_react112 = require("react");
 var React5 = require("react");
 var import_lexical9 = require("lexical");
 var import_react_dom4 = require("react-dom");
@@ -36228,7 +36196,7 @@ function getDOMRangeRect(nativeSelection, rootElement) {
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -36241,16 +36209,16 @@ function TextFormatFloatingToolbar({
   isSubscript,
   isSuperscript
 }) {
-  const popupCharStylesEditorRef = (0, import_react113.useRef)(null);
+  const popupCharStylesEditorRef = (0, import_react112.useRef)(null);
   const tr = useTr();
-  const insertLink = (0, import_react113.useCallback)(() => {
+  const insertLink = (0, import_react112.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_react113.useCallback)(() => {
+  const updateTextFormatFloatingToolbar = (0, import_react112.useCallback)(() => {
     const selection = (0, import_lexical9.$getSelection)();
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
     const nativeSelection = window.getSelection();
@@ -36263,7 +36231,7 @@ function TextFormatFloatingToolbar({
       setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
   }, [editor, anchorElem]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -36281,7 +36249,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -36302,110 +36270,110 @@ function TextFormatFloatingToolbar({
     );
   }, [editor, updateTextFormatFloatingToolbar]);
   if (!editor.isEditable()) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", {});
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", {
     ref: popupCharStylesEditorRef,
     className: "c-rte-floating-text-format-tb-plugin",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
         onClick: () => {
           editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "bold");
         },
         style: { padding: 0, overflow: "hidden" },
         title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
         "aria-label": tr("actionFormatAsStrongLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
           className: `c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${isBold ? "selected" : ""}`
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
           editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "italic");
         },
         title: tr("actionFormatAsEmphasizedTitle"),
         "aria-label": tr("actionFormatAsEmphasizedLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
           className: `c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${isItalic ? "selected" : ""}`
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
           editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "underline");
         },
         title: tr("actionFormatAsUnderlinedTitle"),
         "aria-label": tr("actionFormatAsUnderlinedLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
           className: `c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${isUnderline ? "selected" : ""}`
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "code");
+        },
+        "aria-label": tr("actionInsertCodeBlock"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
+          className: `c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: insertLink,
+        "aria-label": tr("actionInsertlink"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
+          className: `c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
           editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "strikethrough");
         },
         title: tr("actionFormatWithStrikethroughTitle"),
         "aria-label": tr("actionFormatWithStrikethroughLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
           className: `c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${isStrikethrough ? "selected" : ""}`
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
           editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "subscript");
         },
         title: tr("actionFormatWithSubscriptTitle"),
         "aria-label": tr("actionFormatWithSubscriptLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
           className: `c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${isSubscript ? "selected" : ""}`
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(IconButton, {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
           editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "superscript");
         },
         title: tr("actionFormatWithSuperscriptTitle"),
         "aria-label": tr("actionFormatWithSuperscriptLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("i", {
           className: `c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${isSuperscript ? "selected" : ""}`
         })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
-        style: { padding: 0, overflow: "hidden" },
-        onClick: () => {
-          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "code");
-        },
-        "aria-label": tr("actionInsertCodeBlock"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
-          className: `c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? "selected" : ""}`
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconButton, {
-        style: { padding: 0, overflow: "hidden" },
-        onClick: insertLink,
-        "aria-label": tr("actionInsertlink"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("i", {
-          className: `c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? "selected" : ""}`
-        })
       })
     ]
   });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem) {
-  const [isText, setIsText] = (0, import_react113.useState)(false);
-  const [isLink, setIsLink] = (0, import_react113.useState)(false);
-  const [isBold, setIsBold] = (0, import_react113.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react113.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react113.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react113.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react113.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react113.useState)(false);
-  const [isCode, setIsCode] = (0, import_react113.useState)(false);
-  const updatePopup = (0, import_react113.useCallback)(() => {
+  const [isText, setIsText] = (0, import_react112.useState)(false);
+  const [isLink, setIsLink] = (0, import_react112.useState)(false);
+  const [isBold, setIsBold] = (0, import_react112.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react112.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react112.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react112.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react112.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react112.useState)(false);
+  const [isCode, setIsCode] = (0, import_react112.useState)(false);
+  const updatePopup = (0, import_react112.useCallback)(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
         return;
@@ -36441,13 +36409,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
       }
     });
   }, [editor]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -36463,7 +36431,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
     return null;
   }
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TextFormatFloatingToolbar, {
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TextFormatFloatingToolbar, {
       editor,
       anchorElem,
       isLink,
@@ -36488,15 +36456,15 @@ function FloatingTextFormatToolbarPlugin({
 // src/rich-text-editor/plugins/LinkPlugin/index.tsx
 var React6 = require("react");
 var import_LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 function LinkPlugin() {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalLinkPlugin.LinkPlugin, {
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalLinkPlugin.LinkPlugin, {
     validateUrl
   });
 }
 
 // src/rich-text-editor/plugins/ListMaxIndentLevelPlugin/index.ts
-var import_react114 = require("react");
+var import_react113 = require("react");
 var import_lexical10 = require("lexical");
 var import_list4 = require("@lexical/list");
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
@@ -36529,7 +36497,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListMaxIndentLevelPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
-  (0, import_react114.useEffect)(() => {
+  (0, import_react113.useEffect)(() => {
     return editor.registerCommand(
       import_lexical10.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
@@ -36540,7 +36508,7 @@ function ListMaxIndentLevelPlugin({ maxDepth }) {
 }
 
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
-var import_react115 = require("react");
+var import_react114 = require("react");
 var import_lexical11 = require("lexical");
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
 var import_selection3 = require("@lexical/selection");
@@ -36582,7 +36550,7 @@ ${content}
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
 function MaxLengthPlugin({ maxLength }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react115.useEffect)(() => {
+  (0, import_react114.useEffect)(() => {
     let lastRestoredEditorState = null;
     return editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       editor.update(() => {
@@ -36612,7 +36580,7 @@ function MaxLengthPlugin({ maxLength }) {
 }
 
 // src/rich-text-editor/plugins/TabFocusPlugin/index.tsx
-var import_react116 = require("react");
+var import_react115 = require("react");
 var import_lexical12 = require("lexical");
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var COMMAND_PRIORITY_LOW3 = 1;
@@ -36632,7 +36600,7 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react116.useEffect)(() => {
+  (0, import_react115.useEffect)(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
@@ -36655,22 +36623,22 @@ function TabFocusPlugin() {
 }
 
 // src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx
-var import_react117 = require("react");
+var import_react116 = require("react");
 var import_lexical13 = 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_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  const [tableCellNode, updateTableCellNode] = (0, import_react117.useState)(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = (0, import_react117.useState)({
+  const [tableCellNode, updateTableCellNode] = (0, import_react116.useState)(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = (0, import_react116.useState)({
     columns: 1,
     rows: 1
   });
   const tr = useTr();
-  (0, import_react117.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     return editor.registerMutationListener(import_table4.TableCellNode, (nodeMutations) => {
       const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
       if (nodeUpdated) {
@@ -36680,7 +36648,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor, tableCellNode]);
-  (0, import_react117.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     editor.getEditorState().read(() => {
       const selection = (0, import_lexical13.$getSelection)();
       if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
@@ -36692,7 +36660,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor]);
-  const clearTableSelection = (0, import_react117.useCallback)(() => {
+  const clearTableSelection = (0, import_react116.useCallback)(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
@@ -36711,7 +36679,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       rootNode.selectStart();
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = (0, import_react117.useCallback)(
+  const insertTableRowAtSelection = (0, import_react116.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
         const selection = (0, import_lexical13.$getSelection)();
@@ -36730,7 +36698,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     },
     [editor, tableCellNode, selectionCounts.rows, clearTableSelection]
   );
-  const insertTableColumnAtSelection = (0, import_react117.useCallback)(
+  const insertTableColumnAtSelection = (0, import_react116.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
         const selection = (0, import_lexical13.$getSelection)();
@@ -36749,7 +36717,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     },
     [editor, tableCellNode, selectionCounts.columns, clearTableSelection]
   );
-  const deleteTableRowAtSelection = (0, import_react117.useCallback)(() => {
+  const deleteTableRowAtSelection = (0, import_react116.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -36757,14 +36725,14 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableAtSelection = (0, import_react117.useCallback)(() => {
+  const deleteTableAtSelection = (0, import_react116.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = (0, import_react117.useCallback)(() => {
+  const deleteTableColumnAtSelection = (0, import_react116.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -36772,7 +36740,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableRowIsHeader = (0, import_react117.useCallback)(() => {
+  const toggleTableRowIsHeader = (0, import_react116.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -36793,7 +36761,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = (0, import_react117.useCallback)(() => {
+  const toggleTableColumnIsHeader = (0, import_react116.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -36816,46 +36784,46 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(false),
         children: tr("actionTableInsertRowsAbove", selectionCounts.rows)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(true),
         children: tr("actionTableInsertRowsBelow", selectionCounts.rows)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableColumnAtSelection(false),
         children: tr("actionTableInsertColumnsBefore", selectionCounts.columns)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => insertTableColumnAtSelection(true),
         children: tr("actionTableInsertColumnsAfter", selectionCounts.columns)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => toggleTableRowIsHeader(),
         children: tr(
           (tableCellNode.__headerState & import_table4.TableCellHeaderStates.ROW) === import_table4.TableCellHeaderStates.ROW ? "actionTableRemoveRowHeader" : "actionTableAddRowHeader"
         )
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => toggleTableColumnIsHeader(),
         children: tr(
           (tableCellNode.__headerState & import_table4.TableCellHeaderStates.COLUMN) === import_table4.TableCellHeaderStates.COLUMN ? "actionTableRemoveColumnHeader" : "actionTableAddColumnHeader"
         )
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Separator, {}),
-      tableStats.columns > 1 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Separator, {}),
+      tableStats.columns > 1 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => deleteTableColumnAtSelection(),
         children: tr("actionTableDeleteColumn")
       }),
-      tableStats.rows > 1 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      tableStats.rows > 1 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => deleteTableRowAtSelection(),
         children: tr("actionTableDeleteRow")
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Item, {
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Item, {
         onSelect: () => deleteTableAtSelection(),
         children: tr("actionTableDeleteTable")
       })
@@ -36865,11 +36833,11 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
 function TableCellActionMenuContainer({ anchorElem }) {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
   const tr = useTr();
-  const menuButtonRef = (0, import_react117.useRef)(null);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react117.useState)(false);
-  const [tableCellNode, setTableMenuCellNode] = (0, import_react117.useState)(null);
-  const [tableStats, setTablestats] = (0, import_react117.useState)({ rows: 1, columns: 1 });
-  const moveMenu = (0, import_react117.useCallback)(() => {
+  const menuButtonRef = (0, import_react116.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react116.useState)(false);
+  const [tableCellNode, setTableMenuCellNode] = (0, import_react116.useState)(null);
+  const [tableStats, setTablestats] = (0, import_react116.useState)({ rows: 1, columns: 1 });
+  const moveMenu = (0, import_react116.useCallback)(() => {
     if (isMenuOpen) {
       return;
     }
@@ -36912,14 +36880,14 @@ function TableCellActionMenuContainer({ anchorElem }) {
       setTableMenuCellNode(null);
     }
   }, [editor, isMenuOpen]);
-  (0, import_react117.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         moveMenu();
       });
     });
   });
-  (0, import_react117.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     const menuButtonDOM = menuButtonRef.current;
     if (menuButtonDOM != null && tableCellNode != null) {
       const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
@@ -36937,19 +36905,19 @@ function TableCellActionMenuContainer({ anchorElem }) {
       }
     }
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", {
     className: "c-rte-table-cell-action-button-container",
     ref: menuButtonRef,
-    children: tableCellNode != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DropdownMenu.Root, {
+    children: tableCellNode != null && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DropdownMenu.Root, {
       onOpenChange: (isOpen) => setIsMenuOpen(isOpen),
-      content: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableActionMenu, {
+      content: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TableActionMenu, {
         tableCellNode,
         tableStats
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(IconButton, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconButton, {
         size: "xs",
         "aria-label": tr("actionTableOpenOptions"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon.Arrow, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon.Arrow, {})
       })
     })
   });
@@ -36958,13 +36926,13 @@ function TableActionMenuPlugin({
   anchorElem = document.body
 }) {
   const isEditable = (0, import_useLexicalEditable.default)();
-  return (0, import_react_dom5.createPortal)(isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellActionMenuContainer, {
+  return (0, import_react_dom5.createPortal)(isEditable ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TableCellActionMenuContainer, {
     anchorElem
   }) : null, anchorElem);
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_react120 = require("react");
+var import_react118 = require("react");
 var import_lexical15 = require("lexical");
 var import_code9 = require("@lexical/code");
 var import_link6 = require("@lexical/link");
@@ -36977,10 +36945,9 @@ var import_selection4 = require("@lexical/selection");
 var import_utils4 = require("@lexical/utils");
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
-var import_react118 = require("react");
 var import_lexical14 = require("lexical");
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 async function copyJson(editor) {
   const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
   try {
@@ -36995,47 +36962,41 @@ function ActionsPlugin({
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
   const tr = useTr();
-  const actionMenuAnchorRef = (0, import_react118.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", {
-    ref: actionMenuAnchorRef,
-    className: "c-rte-actions-plugin",
-    children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(ActionMenu, {
-      container: actionMenuAnchorRef.current,
-      children: [
-        !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ActionMenu.Item, {
-          onSelect: actionItem.action,
-          className: actionItem.type === "danger" ? "danger" : "",
-          children: actionItem.title
-        }, actionItem.title)),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ActionMenu.Item, {
-          onSelect: () => copyJson(editor),
-          children: tr("actionCopyJSON")
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ActionMenu.Item, {
-          className: "danger",
-          onSelect: () => {
-            editor.dispatchCommand(import_lexical14.CLEAR_EDITOR_COMMAND, void 0);
-            editor.focus();
-          },
-          children: tr("actionClear")
-        }),
-        !append ? null : append.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ActionMenu.Item, {
-          onSelect: actionItem.action,
-          className: actionItem.type === "danger" ? "danger" : "",
-          children: actionItem.title
-        }, actionItem.title))
-      ]
-    })
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(ActionMenu, {
+    children: [
+      !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ActionMenu.Item, {
+        onSelect: actionItem.action,
+        className: actionItem.type === "danger" ? "danger" : "",
+        children: actionItem.title
+      }, actionItem.title)),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ActionMenu.Item, {
+        onSelect: () => copyJson(editor),
+        children: tr("actionCopyJSON")
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ActionMenu.Item, {
+        className: "danger",
+        onSelect: () => {
+          editor.dispatchCommand(import_lexical14.CLEAR_EDITOR_COMMAND, void 0);
+          editor.focus();
+        },
+        children: tr("actionClear")
+      }),
+      !append ? null : append.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ActionMenu.Item, {
+        onSelect: actionItem.action,
+        className: actionItem.type === "danger" ? "danger" : "",
+        children: actionItem.title
+      }, actionItem.title))
+    ]
   });
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-var import_react119 = require("react");
+var import_react117 = require("react");
 var import_table5 = require("@lexical/table");
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = (0, import_react119.useState)("5");
-  const [columns, setColumns] = (0, import_react119.useState)("5");
+  const [rows, setRows] = (0, import_react117.useState)("5");
+  const [columns, setColumns] = (0, import_react117.useState)("5");
   const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -37050,13 +37011,13 @@ function InsertTableDialog({ activeEditor }) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", {
     className: "c-rte-insert-table",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", {
         className: "c-rte-insert-table__dimensions",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(InputWithLabel, {
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(InputWithLabel, {
             label: tr("insertTableRows"),
             value: rows,
             placeholder: "0",
@@ -37064,10 +37025,10 @@ function InsertTableDialog({ activeEditor }) {
             inputMode: "numeric",
             onChange: (e) => setRows(e.target.value)
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", {
             className: "c-rte-insert-table__dimensions__separator"
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(InputWithLabel, {
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(InputWithLabel, {
             type: "text",
             label: tr("insertTableColumns"),
             placeholder: "0",
@@ -37077,9 +37038,9 @@ function InsertTableDialog({ activeEditor }) {
           })
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", {
         className: "c-rte-insert-table__actions",
-        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Button, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Button, {
           as: Dialog.Close,
           size: "sm",
           intent: "action",
@@ -37093,7 +37054,7 @@ function InsertTableDialog({ activeEditor }) {
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
@@ -37197,80 +37158,80 @@ function BlockFormatDropDown({
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownMenu.Root, {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownMenu.Root, {
     disabled,
     style: { zIndex: 1 },
-    content: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, {
+    content: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
           onClick: formatParagraph,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-paragraph c-rte-toolbar__block-format__icon ${blockType === "paragraph" ? "selected" : ""}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "paragraph" ? "selected" : ""}`,
               children: "Normal"
             })
           ]
         }),
-        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
           onClick: () => formatHeading(headingSize),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-${headingSize} c-rte-toolbar__block-format__icon ${blockType === headingSize ? "selected" : ""}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === headingSize ? "selected" : ""}`,
               children: headingTypeToBlockName[headingSize]
             })
           ]
         }, headingSize)),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
           onClick: formatBulletList,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-bullet-list c-rte-toolbar__block-format__icon ${blockType === "bullet" ? "selected" : ""}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "bullet" ? "selected" : ""}`,
               children: "Bullet List"
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
           onClick: formatNumberedList,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-numbered-list c-rte-toolbar__block-format__icon ${blockType === "number" ? "selected" : ""}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "number" ? "selected" : ""}`,
               children: "Numbered List"
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
           onClick: formatQuote,
           "data-testid": "toggle-block-format-quote",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-quote c-rte-toolbar__block-format__icon ${blockType === "quote" ? "selected" : ""}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "quote" ? "selected" : ""}`,
               children: "Quote"
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
           onClick: formatCode,
           "data-testid": "toggle-block-format-code",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `icon c-rte-icon-code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "code" ? "selected" : ""}`
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "code" ? "selected" : ""}`,
               children: "Code block"
             })
@@ -37278,21 +37239,21 @@ function BlockFormatDropDown({
         })
       ]
     }),
-    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Button, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime133.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_runtime134.jsx)("i", {
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
           className: `c-rte-toolbar__toggle-icon c-rte-icon-${blockType}`
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon.Arrow, {})
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon.Arrow, {})
       ]
     })
   });
 }
 function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", {
     className: "c-rte-toolbar__divider"
   });
 }
@@ -37301,23 +37262,23 @@ function ToolbarPlugin({
   actionsMenuAppend
 }) {
   const [editor] = (0, import_LexicalComposerContext11.useLexicalComposerContext)();
-  const [activeEditor, setActiveEditor] = (0, import_react120.useState)(editor);
-  const [blockType, setBlockType] = (0, import_react120.useState)("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = (0, import_react120.useState)(null);
-  const [isLink, setIsLink] = (0, import_react120.useState)(false);
-  const [isBold, setIsBold] = (0, import_react120.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react120.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react120.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react120.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react120.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react120.useState)(false);
-  const [isCode, setIsCode] = (0, import_react120.useState)(false);
-  const [canUndo, setCanUndo] = (0, import_react120.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react120.useState)(false);
+  const [activeEditor, setActiveEditor] = (0, import_react118.useState)(editor);
+  const [blockType, setBlockType] = (0, import_react118.useState)("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = (0, import_react118.useState)(null);
+  const [isLink, setIsLink] = (0, import_react118.useState)(false);
+  const [isBold, setIsBold] = (0, import_react118.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react118.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react118.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react118.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react118.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react118.useState)(false);
+  const [isCode, setIsCode] = (0, import_react118.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react118.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react118.useState)(false);
   const tr = useTr();
-  const [codeLanguage, setCodeLanguage] = (0, import_react120.useState)("");
-  const [isEditable, setIsEditable] = (0, import_react120.useState)(() => editor.isEditable());
-  const updateToolbar = (0, import_react120.useCallback)(() => {
+  const [codeLanguage, setCodeLanguage] = (0, import_react118.useState)("");
+  const [isEditable, setIsEditable] = (0, import_react118.useState)(() => editor.isEditable());
+  const updateToolbar = (0, import_react118.useCallback)(() => {
     const selection = (0, import_lexical15.$getSelection)();
     if ((0, import_lexical15.$isRangeSelection)(selection)) {
       const anchorNode = selection.anchor.getNode();
@@ -37364,7 +37325,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react120.useEffect)(() => {
+  (0, import_react118.useEffect)(() => {
     return editor.registerCommand(
       import_lexical15.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -37375,7 +37336,7 @@ function ToolbarPlugin({
       import_lexical15.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react120.useEffect)(() => {
+  (0, import_react118.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -37403,7 +37364,7 @@ function ToolbarPlugin({
       )
     );
   }, [activeEditor, editor, updateToolbar]);
-  const clearFormatting = (0, import_react120.useCallback)(() => {
+  const clearFormatting = (0, import_react118.useCallback)(() => {
     activeEditor.update(() => {
       const selection = (0, import_lexical15.$getSelection)();
       if ((0, import_lexical15.$isRangeSelection)(selection)) {
@@ -37421,14 +37382,14 @@ function ToolbarPlugin({
       }
     });
   }, [activeEditor]);
-  const insertLink = (0, import_react120.useCallback)(() => {
+  const insertLink = (0, import_react118.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_react120.useCallback)(
+  const onCodeLanguageSelect = (0, import_react118.useCallback)(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
@@ -37441,13 +37402,13 @@ function ToolbarPlugin({
     },
     [activeEditor, selectedElementKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", {
     className: "c-rte-toolbar",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", {
         className: "c-rte-toolbar__inner",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
             disabled: !canUndo || !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(import_lexical15.UNDO_COMMAND, void 0);
@@ -37455,12 +37416,13 @@ function ToolbarPlugin({
             type: "button",
             title: tr(IS_APPLE ? "actionUndoTitleApple" : "actionUndoTitle"),
             "aria-label": tr("actionUndoLabel"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            "data-testid": "rich-text-undo-button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-undo c-rte-toolbar__icon ${!canUndo ? "disabled" : ""}
         `
             })
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
             disabled: !canRedo || !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(import_lexical15.REDO_COMMAND, void 0);
@@ -37468,51 +37430,51 @@ function ToolbarPlugin({
             type: "button",
             title: tr(IS_APPLE ? "actionRedoTitleApple" : "actionRedoTitle"),
             "aria-label": tr("actionRedoLabel"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+            children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
               className: `c-rte-icon-redo c-rte-toolbar__icon ${!canRedo ? "disabled" : ""}`
             })
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Divider, {}),
-          blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, {
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Divider, {}),
+          blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(BlockFormatDropDown, {
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(BlockFormatDropDown, {
                 disabled: !isEditable,
                 blockType,
                 editor
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Divider, {})
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Divider, {})
             ]
           }),
-          blockType === "code" ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownMenu.Root, {
+          blockType === "code" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownMenu.Root, {
               disabled: !isEditable,
               style: { zIndex: 1 },
-              content: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, {
+              content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, {
                 children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownMenu.Item, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownMenu.Item, {
                     className: `item ${dropDownActiveClass(value === codeLanguage)}`,
                     onClick: () => onCodeLanguageSelect(value),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                       className: `c-rte-toolbar__code-lang__sel-item ${dropDownActiveClass(value === codeLanguage) ? "selected" : ""}`,
                       children: name
                     })
                   }, value);
                 })
               }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, {
+              children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Button, {
                 "aria-label": tr("codeSelectLanguage"),
-                append: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon.Arrow, {}),
-                children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                append: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon.Arrow, {}),
+                children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                   className: "c-rte-toolbar__code-lang__button-text",
                   children: (0, import_code9.getLanguageFriendlyName)(codeLanguage)
                 })
               })
             })
-          }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Dialog, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", {
+          }) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Dialog, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", {
               className: "c-rte-toolbar__actions-rest",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
                   disabled: !isEditable,
                   className: `c-rte-toolbar__icon-btn ${isBold ? "selected" : ""}`,
                   type: "button",
@@ -37522,11 +37484,11 @@ function ToolbarPlugin({
                   onClick: () => {
                     activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "bold");
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                     className: `c-rte-toolbar__icon-btn__icon c-rte-icon-bold`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
                   className: `c-rte-toolbar__icon-btn ${isItalic ? "selected" : ""}`,
                   disabled: !isEditable,
                   onClick: () => {
@@ -37536,11 +37498,11 @@ function ToolbarPlugin({
                   title: tr(IS_APPLE ? "actionFormatAsEmphasizedTitleApple" : "actionFormatAsEmphasizedTitle"),
                   "aria-label": tr("actionFormatAsEmphasizedLabel"),
                   "data-testid": "toggle-format-emphasized",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                     className: `c-rte-toolbar__icon-btn__icon c-rte-icon-italic`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
                   className: `c-rte-toolbar__icon-btn ${isUnderline ? "selected" : ""}`,
                   disabled: !isEditable,
                   onClick: () => {
@@ -37550,11 +37512,11 @@ function ToolbarPlugin({
                   title: tr(IS_APPLE ? "actionFormatAsUnderlinedTitleApple" : "actionFormatAsUnderlinedTitle"),
                   "aria-label": tr("actionFormatAsUnderlinedLabel"),
                   "data-testid": "toggle-format-underlined",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                     className: `c-rte-toolbar__icon-btn__icon c-rte-icon-underline`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
                   className: `c-rte-toolbar__icon-btn ${isCode ? "selected" : ""}`,
                   disabled: !isEditable,
                   onClick: () => {
@@ -37563,132 +37525,131 @@ function ToolbarPlugin({
                   type: "button",
                   title: tr("actionInsertCodeBlock"),
                   "aria-label": tr("actionInsertCodeBlock"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                  "data-testid": "toggle-format-code",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                     className: `c-rte-toolbar__icon-btn__icon c-rte-icon-code`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
                   className: `c-rte-toolbar__icon-btn ${isLink ? "selected" : ""}`,
                   disabled: !isEditable,
                   onClick: insertLink,
                   type: "button",
                   "aria-label": tr("actionInsertlink"),
                   title: tr("actionInsertlink"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                     className: `c-rte-toolbar__icon-btn__icon c-rte-icon-link`
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownMenu.Root, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownMenu.Root, {
                   disabled: !isEditable,
                   style: { zIndex: 1 },
-                  content: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, {
+                  content: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, {
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
-                        onClick: () => {
-                          activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "strikethrough");
-                        },
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
+                        disabled: !isEditable,
+                        onClick: () => activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "strikethrough"),
                         title: tr("actionFormatWithStrikethroughTitle"),
                         "aria-label": tr("actionFormatWithStrikethroughLabel"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                             className: `c-rte-icon-strikethrough c-rte-toolbar__dd-item__icon ${isStrikethrough ? "selected" : ""}`
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                             className: `c-rte-toolbar__dd-item__text ${isStrikethrough ? "selected" : ""}`,
-                            children: tr("actionFormatAsStrongTitle")
+                            children: tr("actionFormatWithStrikethroughTitle")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
-                        onClick: () => {
-                          activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "subscript");
-                        },
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
+                        disabled: !isEditable,
+                        onClick: () => activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "subscript"),
                         title: tr("actionFormatWithSubscriptTitle"),
                         "aria-label": tr("actionFormatWithSubscriptLabel"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                             className: `c-rte-icon-subscript c-rte-toolbar__dd-item__icon ${isSubscript ? "selected" : ""}`
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                             className: `c-rte-toolbar__dd-item__text ${isSubscript ? "selected" : ""}`,
                             children: tr("actionFormatWithSubscriptTitle")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
-                        onClick: () => {
-                          activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "superscript");
-                        },
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
+                        disabled: !isEditable,
+                        onClick: () => activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "superscript"),
                         title: tr("actionFormatWithSuperscriptTitle"),
                         "aria-label": tr("actionFormatWithSuperscriptLabel"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                             className: `c-rte-icon-superscript c-rte-toolbar__dd-item__icon ${isSuperscript ? "selected" : ""}`
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                             className: `c-rte-toolbar__dd-item__text ${isSuperscript ? "selected" : ""}`,
                             children: tr("actionFormatWithSuperscriptTitle")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
+                        disabled: !isEditable,
                         onClick: clearFormatting,
                         className: "item",
                         title: tr("actionClearTextFormatting"),
                         "aria-label": tr("actionClearTextFormatting"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                             className: "c-rte-icon-clear c-rte-toolbar__dd-item__icon"
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                             className: "c-rte-toolbar__dd-item__text--clear",
-                            children: "Clear Formatting"
+                            children: tr("actionFormatClear")
                           })
                         ]
                       })
                     ]
                   }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Button, {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(Button, {
                     style: { backgroundColor: "transparent", padding: "0 8px" },
                     "aria-label": tr("actionTextFormattingOptions"),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                         className: `c-rte-icon-dropdown-more c-rte-toolbar__toggle-icon`
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon.Arrow, {})
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon.Arrow, {})
                     ]
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Divider, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownMenu.Root, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownMenu.Root, {
                   style: { zIndex: 1 },
                   disabled: !isEditable,
-                  content: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, {
+                  content: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, {
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DropdownMenu.Item, {
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(import_LexicalHorizontalRuleNode4.INSERT_HORIZONTAL_RULE_COMMAND, void 0);
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                             className: "c-rte-toolbar__dd-item__icon c-rte-icon-horizontal-rule"
                           }),
-                          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                             className: "c-rte-toolbar__dd-item__text",
                             children: tr("horizontalRule")
                           })
                         ]
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DropdownMenu.Item, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Dialog.Trigger, {
+                      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DropdownMenu.Item, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Dialog.Trigger, {
                           asChild: true,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", {
+                          children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", {
                             className: "c-rte-toolbar__dd-item--table",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                                 className: "c-rte-toolbar__dd-item__icon c-rte-icon-table"
                               }),
-                              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", {
+                              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", {
                                 className: "c-rte-toolbar__dd-item__text",
                                 children: tr("table")
                               })
@@ -37698,21 +37659,21 @@ function ToolbarPlugin({
                       })
                     ]
                   }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconButton, {
-                    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("i", {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("i", {
                       className: "c-rte-icon-plus c-rte-toolbar__plus"
                     })
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(Dialog.Content, {
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(Dialog.Content, {
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Dialog.Title, {
+                    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Dialog.Title, {
                       children: tr("insertTableTitle")
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Dialog.Description, {
+                    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Dialog.Description, {
                       children: tr("insertTableDescription")
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(InsertTableDialog, {
+                    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(InsertTableDialog, {
                       activeEditor
                     })
                   ]
@@ -37722,7 +37683,7 @@ function ToolbarPlugin({
           })
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ActionsPlugin, {
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ActionsPlugin, {
         prepend: actionsMenuPrepend,
         append: actionsMenuAppend
       })
@@ -37833,33 +37794,31 @@ var theme = {
 var CrystallizeRTEditorTheme_default = theme;
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 function RichTextEditor({
   initialData,
   language = "en",
   labelTranslations,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalComposer.LexicalComposer, {
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalComposer.LexicalComposer, {
     initialConfig: {
       editable: !rest.disabled,
       namespace: "crystallize-rich-text-editor",
       nodes: [...BaseNodes],
+      theme: CrystallizeRTEditorTheme_default,
+      editorState: initialData ? composeInitialState({ richText: initialData }) : void 0,
       onError: (error) => {
         throw error;
-      },
-      theme: CrystallizeRTEditorTheme_default,
-      editorState: initialData ? composeInitialState({
-        richText: initialData
-      }) : void 0
+      }
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(I18nProvider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(I18nProvider, {
       language,
       labelTranslations,
-      children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(SharedHistoryContext, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(SharedHistoryContext, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", {
           className: "c-rich-text-editor",
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(RichTextEditorWithoutContext, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RichTextEditorWithoutContext, {
             ...rest
           })
         })
@@ -37881,20 +37840,19 @@ function RichTextEditorWithoutContext({
 }) {
   const editable = !disabled;
   const { historyState } = useSharedHistoryContext();
-  const placeholder = /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", {
+  const placeholder = /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", {
     className: "c-rte-placeholder",
     children: placeholderText ?? ""
   });
   const [editor] = (0, import_LexicalComposerContext12.useLexicalComposerContext)();
-  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react121.useState)(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react121.useState)(false);
-  const firstOnChangeTriggeredRef = (0, import_react121.useRef)(!autoFocus);
+  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react119.useState)(null);
+  const firstOnChangeTriggeredRef = (0, import_react119.useRef)(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  (0, import_react121.useEffect)(() => {
+  (0, import_react119.useEffect)(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
   function onLocalChange(editorState) {
@@ -37905,39 +37863,36 @@ function RichTextEditorWithoutContext({
     }
     firstOnChangeTriggeredRef.current = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalOnChangePlugin.OnChangePlugin, {
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalOnChangePlugin.OnChangePlugin, {
         onChange: onLocalChange,
         ignoreSelectionChange: true
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DimensionDetectorPlugin, {
-        onChange: (d) => setIsSmallWidthViewport(d.isSmallWidth)
-      }),
-      isSmallWidthViewport ? null : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToolbarPlugin, {
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ToolbarPlugin, {
         actionsMenuPrepend,
         actionsMenuAppend
       }),
       slotPreContent,
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", {
         className: `c-rte-editor-container ${disabled ? "disabled" : ""}`,
         children: [
-          maxLength != null ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(MaxLengthPlugin, {
+          maxLength != null ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(MaxLengthPlugin, {
             maxLength
           }) : null,
-          !autoFocus ? null : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalAutoFocusPlugin.AutoFocusPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LexicalAutoLinkPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalHistoryPlugin2.HistoryPlugin, {
+          !autoFocus ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalAutoFocusPlugin.AutoFocusPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LexicalAutoLinkPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin2.HistoryPlugin, {
             externalHistoryState: historyState
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalRichTextPlugin.RichTextPlugin, {
-            contentEditable: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", {
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalRichTextPlugin.RichTextPlugin, {
+            contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", {
               className: "c-rte-editor-scroller",
-              children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", {
+              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", {
                 className: "c-rte-editor",
                 ref: onRef,
-                children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalContentEditable.ContentEditable, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, {
                   className: "c-rte-contenteditable-root",
                   id
                 })
@@ -37946,28 +37901,28 @@ function RichTextEditorWithoutContext({
             placeholder,
             ErrorBoundary: import_LexicalErrorBoundary.default
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CodeHighlightPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ListMaxIndentLevelPlugin, {
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CodeHighlightPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListMaxIndentLevelPlugin, {
             maxDepth: 7
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalTablePlugin.TablePlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LinkPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalHorizontalRulePlugin.HorizontalRulePlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(TabFocusPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {}),
-          floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LinkPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHorizontalRulePlugin.HorizontalRulePlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TabFocusPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {}),
+          floatingAnchorElem && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CodeActionMenuPlugin, {
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CodeActionMenuPlugin, {
                 anchorElem: floatingAnchorElem
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FloatingLinkEditorPlugin, {
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FloatingLinkEditorPlugin, {
                 anchorElem: floatingAnchorElem
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(TableActionMenuPlugin, {
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableActionMenuPlugin, {
                 anchorElem: floatingAnchorElem
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FloatingTextFormatToolbarPlugin, {
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FloatingTextFormatToolbarPlugin, {
                 anchorElem: floatingAnchorElem
               })
             ]
@@ -37980,12 +37935,12 @@ function RichTextEditorWithoutContext({
 
 // src/switch/switch.tsx
 var RadixSwitch = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 function Switch2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(RadixSwitch.Root, {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(RadixSwitch.Root, {
     ...props,
     className: "c-switch-root",
-    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(RadixSwitch.Thumb, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(RadixSwitch.Thumb, {
       className: "c-switch-thumb"
     })
   });