@_sh/strapi-plugin-ckeditor 6.0.3 → 7.1.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-C5uO1-1c.mjs → Field-C2N3FIDl.mjs}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useReducer } from "react";
+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-CwLpvdFD.mjs";
+import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-Be7yVVtW.mjs";
 import "sanitize-html";
 import { Collapse, Expand } from "@strapi/icons";
 const STORAGE_KEYS = {
@@ -323,7 +323,9 @@ const CKEReact = React.forwardRef((_, forwardedRef) => {
     const ckWrapper = document.querySelector(".ck-body-wrapper");
     const listener = ckWrapper?.addEventListener("pointerdown", (e) => e.stopPropagation(), true);
     return () => {
-      listener && ckWrapper?.removeEventListener("pointerdown", listener);
+      if (listener) {
+        ckWrapper?.removeEventListener("pointerdown", listener);
+      }
     };
   }, [editorInstance]);
   useImperativeHandle(
@@ -431,24 +433,44 @@ const WordCounter = styled(Flex)`
 `;
 function EditorLayout({ children }) {
   const { error, preset } = useEditorContext();
-  const [isExpandedMode, handleToggleExpand] = useReducer((prev) => !prev, false);
-  useEffect(() => {
-    if (isExpandedMode) {
-      document.body.classList.add("lock-body-scroll");
+  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");
     }
     return () => {
       document.body.classList.remove("lock-body-scroll");
     };
   }, [isExpandedMode]);
   if (isExpandedMode) {
-    return /* @__PURE__ */ jsx(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(
-      Modal.Content,
+    return /* @__PURE__ */ jsx(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(Content, { id: "ck-editor-modal", children: /* @__PURE__ */ jsx(
+      Flex,
       {
-        style: { maxWidth: "var(--ck-editor-full-screen-box-max-width)", width: "unset" },
-        children: /* @__PURE__ */ jsx(Flex, { height: "90dvh", width: "90dvw", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxs(
+        height: "90dvh",
+        width: "90dvw",
+        maxWidth: "100%",
+        direction: "column",
+        alignItems: "flex-start",
+        background: "neutral100",
+        children: /* @__PURE__ */ jsxs(
           EditorWrapper,
           {
             $presetStyles: preset?.styles,
@@ -457,12 +479,20 @@ function EditorLayout({ children }) {
             className: "ck-editor__expanded",
             children: [
               children,
-              /* @__PURE__ */ jsx(CollapseButton, { tabindex: "-1", label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsx(Collapse, {}) })
+              /* @__PURE__ */ jsx(
+                CollapseButton,
+                {
+                  tabIndex: "-1",
+                  label: "Collapse",
+                  onClick: () => handleToggleExpand(false),
+                  children: /* @__PURE__ */ jsx(Collapse, {})
+                }
+              )
             ]
           }
-        ) })
+        )
       }
-    ) });
+    ) }) });
   }
   return /* @__PURE__ */ jsxs(
     EditorWrapper,
@@ -472,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, {}) })
       ]
     }
   );
@@ -514,6 +544,11 @@ const CollapseButton = styled(IconButton)`
   z-index: 2;
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
+const Content = styled(Modal.Content)`
+  max-width: var(--ck-editor-full-screen-box-max-width);
+  width: unset;
+  overflow: visible;
+`;
 const GlobalStyle = createGlobalStyle`
   ${({ $editortTheme, $variant }) => $editortTheme && css`
       ${$editortTheme.common}

package/dist/_chunks/{Field-Bjfn0oud.js → Field-LK0YigdM.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-D48ig74s.js");
+const index = require("./index-BmYyqc_l.js");
 require("sanitize-html");
 const icons = require("@strapi/icons");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -349,7 +349,9 @@ const CKEReact = React__default.default.forwardRef((_, forwardedRef) => {
     const ckWrapper = document.querySelector(".ck-body-wrapper");
     const listener = ckWrapper?.addEventListener("pointerdown", (e) => e.stopPropagation(), true);
     return () => {
-      listener && ckWrapper?.removeEventListener("pointerdown", listener);
+      if (listener) {
+        ckWrapper?.removeEventListener("pointerdown", listener);
+      }
     };
   }, [editorInstance]);
   React.useImperativeHandle(
@@ -457,24 +459,44 @@ const WordCounter = styledComponents.styled(designSystem.Flex)`
 `;
 function EditorLayout({ children }) {
   const { error, preset } = useEditorContext();
-  const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);
-  React.useEffect(() => {
-    if (isExpandedMode) {
-      document.body.classList.add("lock-body-scroll");
+  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");
     }
     return () => {
       document.body.classList.remove("lock-body-scroll");
     };
   }, [isExpandedMode]);
   if (isExpandedMode) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Modal.Content,
+    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,
       {
-        style: { maxWidth: "var(--ck-editor-full-screen-box-max-width)", width: "unset" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { height: "90dvh", width: "90dvw", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        height: "90dvh",
+        width: "90dvw",
+        maxWidth: "100%",
+        direction: "column",
+        alignItems: "flex-start",
+        background: "neutral100",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
           EditorWrapper,
           {
             $presetStyles: preset?.styles,
@@ -483,12 +505,20 @@ function EditorLayout({ children }) {
             className: "ck-editor__expanded",
             children: [
               children,
-              /* @__PURE__ */ jsxRuntime.jsx(CollapseButton, { tabindex: "-1", label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {}) })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CollapseButton,
+                {
+                  tabIndex: "-1",
+                  label: "Collapse",
+                  onClick: () => handleToggleExpand(false),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {})
+                }
+              )
             ]
           }
-        ) })
+        )
       }
-    ) });
+    ) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     EditorWrapper,
@@ -498,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, {}) })
       ]
     }
   );
@@ -540,6 +570,11 @@ const CollapseButton = styledComponents.styled(designSystem.IconButton)`
   z-index: 2;
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
+const Content = styledComponents.styled(designSystem.Modal.Content)`
+  max-width: var(--ck-editor-full-screen-box-max-width);
+  width: unset;
+  overflow: visible;
+`;
 const GlobalStyle = styledComponents.createGlobalStyle`
   ${({ $editortTheme, $variant }) => $editortTheme && styledComponents.css`
       ${$editortTheme.common}