@_sh/strapi-plugin-ckeditor 6.0.2 → 7.0.0

package/README.md

@@ -28,7 +28,7 @@
 - **Self-Hosted**
 
 <p align="right">
-    <a href="https://www.buymeacoffee.com/nshenderov" target="_blank">
+    <a href="https://boosty.to/nkshenderov/donate" target="_blank">
         <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px; width: 217px;" >
     </a>
 </p>
@@ -469,7 +469,7 @@ export default {
   <summary>Setting a new set of presets [TS]</summary>
 
 ```ts
-// src/admin/app.tsx
+// src/admin/app.ts
 
 import {
   Bold,
@@ -553,7 +553,7 @@ export default {
   <summary>Default presets modification using setPluginConfig [TS]</summary>
 
 ```ts
-// src/admin/app.tsx
+// src/admin/app.ts
 
 import { css } from 'styled-components';
 
@@ -627,7 +627,7 @@ export default {
   <summary>Default presets modification using getPluginPresets [TS]</summary>
 
 ```ts
-// src/admin/app.tsx
+// src/admin/app.ts
 
 import { css } from 'styled-components';
 import { getPluginPresets } from '@_sh/strapi-plugin-ckeditor';
@@ -687,7 +687,7 @@ export default {
   <summary>Modifying theme using setPluginConfig [TS]</summary>
 
 ```ts
-// src/admin/app.tsx
+// src/admin/app.ts
 
 import { css } from 'styled-components';
 
@@ -723,7 +723,7 @@ export default {
   <summary>Modifying theme using getPluginTheme [TS]</summary>
 
 ```ts
-// src/admin/app.tsx
+// src/admin/app.ts
 
 import { css } from 'styled-components';
 import { getPluginTheme } from '@_sh/strapi-plugin-ckeditor';
@@ -849,7 +849,7 @@ for detailed instructions.
 
 Strapi **>= 5.0.0**
 
-Node **>= 18.0.0 <= 22.x.x**
+Node **>= 20.0.0 <= 24.x.x**
 
 ---
 

package/dist/_chunks/{Field-bpNZPEcR.js → Field-D_sK_Mfq.js}

@@ -30,7 +30,7 @@ const admin = require("@strapi/strapi/admin");
 const ckeditor5 = require("ckeditor5");
 const ckeditor5React = require("@ckeditor/ckeditor5-react");
 require("ckeditor5/ckeditor5.css");
-const index = require("./index-CgWKes-C.js");
+const index = require("./index-V5z1nLLU.js");
 require("sanitize-html");
 const icons = require("@strapi/icons");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -309,7 +309,7 @@ function MediaLib({ isOpen = false, toggle, handleChangeAssets }) {
   return /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: toggle, onSelectAssets: handleSelectAssets });
 }
 const MemoizedMediaLib = React__default.default.memo(MediaLib);
-function CKEReact() {
+const CKEReact = React__default.default.forwardRef((_, forwardedRef) => {
   const [mediaLibVisible, setMediaLibVisible] = React.useState(false);
   const [editorInstance, setEditorInstance] = React.useState(null);
   const [isWordsMax, setIsWordsMax] = React.useState(false);
@@ -317,13 +317,20 @@ function CKEReact() {
   const { name, disabled, preset, wordsLimit, charsLimit } = useEditorContext();
   const { onChange: fieldOnChange, value: fieldValue } = admin.useField(name);
   const wordCounterRef = React.useRef(null);
+  const debounceTimeout = React.useRef(null);
   const onEditorReady = (editor) => {
     setUpPlugins(editor);
     setEditorInstance(editor);
   };
   const onEditorChange = (_e, editor) => {
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
     const data = editor.getData();
-    fieldOnChange(name, data);
+    debounceTimeout.current = setTimeout(() => {
+      fieldOnChange(name, data);
+      debounceTimeout.current = null;
+    }, 300);
   };
   const toggleMediaLib = React.useCallback(() => setMediaLibVisible((prev) => !prev), [setMediaLibVisible]);
   const handleChangeAssets = React.useCallback(
@@ -338,6 +345,24 @@ function CKEReact() {
     },
     [toggleMediaLib, editorInstance]
   );
+  React.useEffect(() => {
+    const ckWrapper = document.querySelector(".ck-body-wrapper");
+    const listener = ckWrapper?.addEventListener("pointerdown", (e) => e.stopPropagation(), true);
+    return () => {
+      if (listener) {
+        ckWrapper?.removeEventListener("pointerdown", listener);
+      }
+    };
+  }, [editorInstance]);
+  React.useImperativeHandle(
+    forwardedRef,
+    () => ({
+      focus() {
+        editorInstance?.focus();
+      }
+    }),
+    [editorInstance]
+  );
   if (!preset) {
     return null;
   }
@@ -421,7 +446,7 @@ function CKEReact() {
       setIsCharsMax(stats.characters > charsLimit);
     }
   }
-}
+});
 const WordCounter = styledComponents.styled(designSystem.Flex)`
   ${({ theme, $isWordsMax, $isCharsMax }) => styledComponents.css`
     .ck-word-count__words {
@@ -434,7 +459,25 @@ const WordCounter = styledComponents.styled(designSystem.Flex)`
 `;
 function EditorLayout({ children }) {
   const { error, preset } = useEditorContext();
-  const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);
+  const [isExpandedMode, setIsExpandedMode] = React.useState(false);
+  const handleToggleExpand = (open) => {
+    if (open) {
+      setTimeout(() => {
+        const ckPopupsWrapper = document.querySelector(".ck-body-wrapper");
+        const ckEditorModal = document.getElementById("ck-editor-modal");
+        if (ckPopupsWrapper && ckEditorModal) {
+          ckEditorModal.appendChild(ckPopupsWrapper);
+        }
+        document.querySelector(".ck-editor__expanded .ck-editor__editable")?.focus();
+      }, 0);
+    } else {
+      const ckPopupsWrapper = document.querySelector(".ck-body-wrapper");
+      if (ckPopupsWrapper) {
+        document.body.appendChild(ckPopupsWrapper);
+      }
+    }
+    setIsExpandedMode(open);
+  };
   React.useEffect(() => {
     if (isExpandedMode) {
       document.body.classList.add("lock-body-scroll");
@@ -444,41 +487,34 @@ function EditorLayout({ children }) {
     };
   }, [isExpandedMode]);
   if (isExpandedMode) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Portal, { role: "dialog", "aria-modal": false, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.FocusTrap, { onEscape: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Backdrop,
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(Content, { id: "ck-editor-modal", children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Flex,
       {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 4,
-        justifyContent: "center",
-        onClick: handleToggleExpand,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          FullScreenBox,
+        height: "90dvh",
+        width: "90dvw",
+        maxWidth: "100%",
+        direction: "column",
+        alignItems: "flex-start",
+        background: "neutral100",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          EditorWrapper,
           {
-            background: "neutral100",
-            hasRadius: true,
-            shadow: "popupShadow",
-            overflow: "hidden",
-            width: "90%",
-            height: "90%",
-            onClick: (e) => e.stopPropagation(),
-            position: "relative",
-            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { height: "100%", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              EditorWrapper,
-              {
-                $presetStyles: preset?.styles,
-                $isExpanded: isExpandedMode,
-                $hasError: Boolean(error),
-                className: "ck-editor__expanded",
-                children: [
-                  children,
-                  /* @__PURE__ */ jsxRuntime.jsx(CollapseButton, { label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {}) })
-                ]
-              }
-            ) })
+            $presetStyles: preset?.styles,
+            $isExpanded: isExpandedMode,
+            $hasError: Boolean(error),
+            className: "ck-editor__expanded",
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CollapseButton,
+                {
+                  tabIndex: "-1",
+                  label: "Collapse",
+                  onClick: () => handleToggleExpand(false),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {})
+                }
+              )
+            ]
           }
         )
       }
@@ -492,7 +528,7 @@ function EditorLayout({ children }) {
       $hasError: Boolean(error),
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { label: "Expand", onClick: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Expand, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { label: "Expand", onClick: () => handleToggleExpand(true), children: /* @__PURE__ */ jsxRuntime.jsx(icons.Expand, {}) })
       ]
     }
   );
@@ -534,11 +570,10 @@ const CollapseButton = styledComponents.styled(designSystem.IconButton)`
   z-index: 2;
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
-const FullScreenBox = styledComponents.styled(designSystem.Box)`
+const Content = styledComponents.styled(designSystem.Modal.Content)`
   max-width: var(--ck-editor-full-screen-box-max-width);
-`;
-const Backdrop = styledComponents.styled(designSystem.Flex)`
-  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+  width: unset;
+  overflow: visible;
 `;
 const GlobalStyle = styledComponents.createGlobalStyle`
   ${({ $editortTheme, $variant }) => $editortTheme && styledComponents.css`
@@ -555,18 +590,18 @@ function GlobalStyling() {
   return /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
 }
 const MemoizedGlobalStyling = React__default.default.memo(GlobalStyling);
-function Editor() {
+const Editor = React__default.default.forwardRef((_, forwardedRef) => {
   const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { id: name, name, error, hint, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
     preset ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(MemoizedGlobalStyling, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(EditorLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(CKEReact, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(EditorLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(CKEReact, { ref: forwardedRef }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading..." }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
   ] }) });
-}
+});
 const LoaderBox = styledComponents.styled(designSystem.Box)`
   display: flex;
   justify-content: center;
@@ -574,38 +609,40 @@ const LoaderBox = styledComponents.styled(designSystem.Box)`
   height: 200px;
   width: 100%;
 `;
-function Field({
-  name,
-  hint,
-  error,
-  placeholder,
-  label,
-  attribute,
-  labelAction = null,
-  disabled = false,
-  required = false
-}) {
-  const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
-  const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    EditorProvider,
-    {
-      name,
-      error,
-      disabled,
-      required,
-      placeholder,
-      hint,
-      label,
-      labelAction,
-      presetName: preset,
-      wordsLimit: maxLengthWords,
-      charsLimit: maxLengthCharacters,
-      isFieldLocalized,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Editor, {})
-    }
-  );
-}
+const Field = React__default.default.forwardRef(
+  ({
+    name,
+    hint,
+    error,
+    placeholder,
+    label,
+    attribute,
+    labelAction = null,
+    disabled = false,
+    required = false
+  }, forwardedRef) => {
+    const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
+    const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EditorProvider,
+      {
+        name,
+        error,
+        disabled,
+        required,
+        placeholder,
+        hint,
+        label,
+        labelAction,
+        presetName: preset,
+        wordsLimit: maxLengthWords,
+        charsLimit: maxLengthCharacters,
+        isFieldLocalized,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Editor, { ref: forwardedRef })
+      }
+    );
+  }
+);
 function compare(oldProps, newProps) {
   return oldProps.error === newProps.error && oldProps.labelAction === newProps.labelAction;
 }

package/dist/_chunks/{Field-DwEixuI8.mjs → Field-SB2kmV75.mjs}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useReducer } from "react";
-import { Flex, IconButton, Box, Portal, FocusTrap, Field as Field$1, Loader } from "@strapi/design-system";
+import React, { createContext, useContext, useState, useEffect, useMemo, useRef, useCallback, useImperativeHandle } from "react";
+import { Flex, IconButton, Modal, Field as Field$1, Loader, Box } from "@strapi/design-system";
 import { styled, css, createGlobalStyle } from "styled-components";
 import { useStrapiApp, useField } from "@strapi/strapi/admin";
 import { ClassicEditor } from "ckeditor5";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
 import "ckeditor5/ckeditor5.css";
-import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-CM-eZqTL.mjs";
+import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-D6brYb_3.mjs";
 import "sanitize-html";
 import { Collapse, Expand } from "@strapi/icons";
 const STORAGE_KEYS = {
@@ -283,7 +283,7 @@ function MediaLib({ isOpen = false, toggle, handleChangeAssets }) {
   return /* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: toggle, onSelectAssets: handleSelectAssets });
 }
 const MemoizedMediaLib = React.memo(MediaLib);
-function CKEReact() {
+const CKEReact = React.forwardRef((_, forwardedRef) => {
   const [mediaLibVisible, setMediaLibVisible] = useState(false);
   const [editorInstance, setEditorInstance] = useState(null);
   const [isWordsMax, setIsWordsMax] = useState(false);
@@ -291,13 +291,20 @@ function CKEReact() {
   const { name, disabled, preset, wordsLimit, charsLimit } = useEditorContext();
   const { onChange: fieldOnChange, value: fieldValue } = useField(name);
   const wordCounterRef = useRef(null);
+  const debounceTimeout = useRef(null);
   const onEditorReady = (editor) => {
     setUpPlugins(editor);
     setEditorInstance(editor);
   };
   const onEditorChange = (_e, editor) => {
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
     const data = editor.getData();
-    fieldOnChange(name, data);
+    debounceTimeout.current = setTimeout(() => {
+      fieldOnChange(name, data);
+      debounceTimeout.current = null;
+    }, 300);
   };
   const toggleMediaLib = useCallback(() => setMediaLibVisible((prev) => !prev), [setMediaLibVisible]);
   const handleChangeAssets = useCallback(
@@ -312,6 +319,24 @@ function CKEReact() {
     },
     [toggleMediaLib, editorInstance]
   );
+  useEffect(() => {
+    const ckWrapper = document.querySelector(".ck-body-wrapper");
+    const listener = ckWrapper?.addEventListener("pointerdown", (e) => e.stopPropagation(), true);
+    return () => {
+      if (listener) {
+        ckWrapper?.removeEventListener("pointerdown", listener);
+      }
+    };
+  }, [editorInstance]);
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      focus() {
+        editorInstance?.focus();
+      }
+    }),
+    [editorInstance]
+  );
   if (!preset) {
     return null;
   }
@@ -395,7 +420,7 @@ function CKEReact() {
       setIsCharsMax(stats.characters > charsLimit);
     }
   }
-}
+});
 const WordCounter = styled(Flex)`
   ${({ theme, $isWordsMax, $isCharsMax }) => css`
     .ck-word-count__words {
@@ -408,7 +433,25 @@ const WordCounter = styled(Flex)`
 `;
 function EditorLayout({ children }) {
   const { error, preset } = useEditorContext();
-  const [isExpandedMode, handleToggleExpand] = useReducer((prev) => !prev, false);
+  const [isExpandedMode, setIsExpandedMode] = useState(false);
+  const handleToggleExpand = (open) => {
+    if (open) {
+      setTimeout(() => {
+        const ckPopupsWrapper = document.querySelector(".ck-body-wrapper");
+        const ckEditorModal = document.getElementById("ck-editor-modal");
+        if (ckPopupsWrapper && ckEditorModal) {
+          ckEditorModal.appendChild(ckPopupsWrapper);
+        }
+        document.querySelector(".ck-editor__expanded .ck-editor__editable")?.focus();
+      }, 0);
+    } else {
+      const ckPopupsWrapper = document.querySelector(".ck-body-wrapper");
+      if (ckPopupsWrapper) {
+        document.body.appendChild(ckPopupsWrapper);
+      }
+    }
+    setIsExpandedMode(open);
+  };
   useEffect(() => {
     if (isExpandedMode) {
       document.body.classList.add("lock-body-scroll");
@@ -418,41 +461,34 @@ function EditorLayout({ children }) {
     };
   }, [isExpandedMode]);
   if (isExpandedMode) {
-    return /* @__PURE__ */ jsx(Portal, { role: "dialog", "aria-modal": false, children: /* @__PURE__ */ jsx(FocusTrap, { onEscape: handleToggleExpand, children: /* @__PURE__ */ jsx(
-      Backdrop,
+    return /* @__PURE__ */ jsx(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(Content, { id: "ck-editor-modal", children: /* @__PURE__ */ jsx(
+      Flex,
       {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 4,
-        justifyContent: "center",
-        onClick: handleToggleExpand,
-        children: /* @__PURE__ */ jsx(
-          FullScreenBox,
+        height: "90dvh",
+        width: "90dvw",
+        maxWidth: "100%",
+        direction: "column",
+        alignItems: "flex-start",
+        background: "neutral100",
+        children: /* @__PURE__ */ jsxs(
+          EditorWrapper,
           {
-            background: "neutral100",
-            hasRadius: true,
-            shadow: "popupShadow",
-            overflow: "hidden",
-            width: "90%",
-            height: "90%",
-            onClick: (e) => e.stopPropagation(),
-            position: "relative",
-            children: /* @__PURE__ */ jsx(Flex, { height: "100%", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxs(
-              EditorWrapper,
-              {
-                $presetStyles: preset?.styles,
-                $isExpanded: isExpandedMode,
-                $hasError: Boolean(error),
-                className: "ck-editor__expanded",
-                children: [
-                  children,
-                  /* @__PURE__ */ jsx(CollapseButton, { label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsx(Collapse, {}) })
-                ]
-              }
-            ) })
+            $presetStyles: preset?.styles,
+            $isExpanded: isExpandedMode,
+            $hasError: Boolean(error),
+            className: "ck-editor__expanded",
+            children: [
+              children,
+              /* @__PURE__ */ jsx(
+                CollapseButton,
+                {
+                  tabIndex: "-1",
+                  label: "Collapse",
+                  onClick: () => handleToggleExpand(false),
+                  children: /* @__PURE__ */ jsx(Collapse, {})
+                }
+              )
+            ]
           }
         )
       }
@@ -466,7 +502,7 @@ function EditorLayout({ children }) {
       $hasError: Boolean(error),
       children: [
         children,
-        /* @__PURE__ */ jsx(ExpandButton, { label: "Expand", onClick: handleToggleExpand, children: /* @__PURE__ */ jsx(Expand, {}) })
+        /* @__PURE__ */ jsx(ExpandButton, { label: "Expand", onClick: () => handleToggleExpand(true), children: /* @__PURE__ */ jsx(Expand, {}) })
       ]
     }
   );
@@ -508,11 +544,10 @@ const CollapseButton = styled(IconButton)`
   z-index: 2;
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
-const FullScreenBox = styled(Box)`
+const Content = styled(Modal.Content)`
   max-width: var(--ck-editor-full-screen-box-max-width);
-`;
-const Backdrop = styled(Flex)`
-  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+  width: unset;
+  overflow: visible;
 `;
 const GlobalStyle = createGlobalStyle`
   ${({ $editortTheme, $variant }) => $editortTheme && css`
@@ -529,18 +564,18 @@ function GlobalStyling() {
   return /* @__PURE__ */ jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
 }
 const MemoizedGlobalStyling = React.memo(GlobalStyling);
-function Editor() {
+const Editor = React.forwardRef((_, forwardedRef) => {
   const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
   return /* @__PURE__ */ jsx(Field$1.Root, { id: name, name, error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
     /* @__PURE__ */ jsx(Field$1.Label, { action: labelAction, children: label }),
     preset ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(MemoizedGlobalStyling, {}),
-      /* @__PURE__ */ jsx(EditorLayout, { children: /* @__PURE__ */ jsx(CKEReact, {}) })
+      /* @__PURE__ */ jsx(EditorLayout, { children: /* @__PURE__ */ jsx(CKEReact, { ref: forwardedRef }) })
     ] }) : /* @__PURE__ */ jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }),
     /* @__PURE__ */ jsx(Field$1.Hint, {}),
     /* @__PURE__ */ jsx(Field$1.Error, {})
   ] }) });
-}
+});
 const LoaderBox = styled(Box)`
   display: flex;
   justify-content: center;
@@ -548,38 +583,40 @@ const LoaderBox = styled(Box)`
   height: 200px;
   width: 100%;
 `;
-function Field({
-  name,
-  hint,
-  error,
-  placeholder,
-  label,
-  attribute,
-  labelAction = null,
-  disabled = false,
-  required = false
-}) {
-  const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
-  const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
-  return /* @__PURE__ */ jsx(
-    EditorProvider,
-    {
-      name,
-      error,
-      disabled,
-      required,
-      placeholder,
-      hint,
-      label,
-      labelAction,
-      presetName: preset,
-      wordsLimit: maxLengthWords,
-      charsLimit: maxLengthCharacters,
-      isFieldLocalized,
-      children: /* @__PURE__ */ jsx(Editor, {})
-    }
-  );
-}
+const Field = React.forwardRef(
+  ({
+    name,
+    hint,
+    error,
+    placeholder,
+    label,
+    attribute,
+    labelAction = null,
+    disabled = false,
+    required = false
+  }, forwardedRef) => {
+    const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
+    const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
+    return /* @__PURE__ */ jsx(
+      EditorProvider,
+      {
+        name,
+        error,
+        disabled,
+        required,
+        placeholder,
+        hint,
+        label,
+        labelAction,
+        presetName: preset,
+        wordsLimit: maxLengthWords,
+        charsLimit: maxLengthCharacters,
+        isFieldLocalized,
+        children: /* @__PURE__ */ jsx(Editor, { ref: forwardedRef })
+      }
+    );
+  }
+);
 function compare(oldProps, newProps) {
   return oldProps.error === newProps.error && oldProps.labelAction === newProps.labelAction;
 }