@_sh/strapi-plugin-ckeditor 7.1.0 → 7.1.1

package/dist/_chunks/{Field-C2N3FIDl.mjs → Field-CmFipUw8.mjs}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { styled, css, useTheme } 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-Be7yVVtW.mjs";
+import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-Hsx0G4L9.mjs";
 import "sanitize-html";
 import { Collapse, Expand } from "@strapi/icons";
 const STORAGE_KEYS = {
@@ -549,29 +549,57 @@ const Content = styled(Modal.Content)`
   width: unset;
   overflow: visible;
 `;
-const GlobalStyle = createGlobalStyle`
-  ${({ $editortTheme, $variant }) => $editortTheme && css`
-      ${$editortTheme.common}
-      ${$editortTheme[$variant]}
-      ${$editortTheme.additional}
-    `}
-`;
+let styleElement = null;
 const getSystemColorScheme = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-function GlobalStyling() {
-  const { theme } = getPluginConfig();
+function flattenCSS(styles, theme) {
+  if (styles == null || styles === false) return "";
+  if (typeof styles === "string") {
+    return styles;
+  }
+  if (typeof styles === "number") {
+    return String(styles);
+  }
+  if (typeof styles === "function") {
+    return flattenCSS(styles({ theme }), theme);
+  }
+  if (Array.isArray(styles)) {
+    return styles.map((part) => flattenCSS(part, theme)).join("");
+  }
+  return "";
+}
+function buildCSS(pluginTheme, strapiTheme) {
   const profileTheme = getProfileTheme();
   const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
-  return /* @__PURE__ */ jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
+  return [
+    flattenCSS(pluginTheme.common, strapiTheme),
+    flattenCSS(pluginTheme[variant], strapiTheme),
+    flattenCSS(pluginTheme.additional, strapiTheme)
+  ].join("\n");
+}
+function injectStyles(strapiTheme) {
+  const { theme } = getPluginConfig();
+  const cssText = buildCSS(theme, strapiTheme);
+  if (!styleElement) {
+    styleElement = document.createElement("style");
+    styleElement.id = "ck-editor-global-styles";
+    document.head.appendChild(styleElement);
+  }
+  if (styleElement.textContent !== cssText) {
+    styleElement.textContent = cssText;
+  }
+}
+function useGlobalStyles() {
+  const strapiTheme = useTheme();
+  useEffect(() => {
+    injectStyles(strapiTheme);
+  }, [strapiTheme]);
 }
-const MemoizedGlobalStyling = React.memo(GlobalStyling);
 const Editor = React.forwardRef((_, forwardedRef) => {
   const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
+  useGlobalStyles();
   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, { ref: forwardedRef }) })
-    ] }) : /* @__PURE__ */ jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }),
+    preset ? /* @__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, {})
   ] }) });

package/dist/_chunks/{Field-LK0YigdM.js → Field-DXPrjUnm.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-BmYyqc_l.js");
+const index = require("./index-Db6yDUsF.js");
 require("sanitize-html");
 const icons = require("@strapi/icons");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -575,29 +575,57 @@ const Content = styledComponents.styled(designSystem.Modal.Content)`
   width: unset;
   overflow: visible;
 `;
-const GlobalStyle = styledComponents.createGlobalStyle`
-  ${({ $editortTheme, $variant }) => $editortTheme && styledComponents.css`
-      ${$editortTheme.common}
-      ${$editortTheme[$variant]}
-      ${$editortTheme.additional}
-    `}
-`;
+let styleElement = null;
 const getSystemColorScheme = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-function GlobalStyling() {
-  const { theme } = index.getPluginConfig();
+function flattenCSS(styles, theme) {
+  if (styles == null || styles === false) return "";
+  if (typeof styles === "string") {
+    return styles;
+  }
+  if (typeof styles === "number") {
+    return String(styles);
+  }
+  if (typeof styles === "function") {
+    return flattenCSS(styles({ theme }), theme);
+  }
+  if (Array.isArray(styles)) {
+    return styles.map((part) => flattenCSS(part, theme)).join("");
+  }
+  return "";
+}
+function buildCSS(pluginTheme, strapiTheme) {
   const profileTheme = getProfileTheme();
   const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
+  return [
+    flattenCSS(pluginTheme.common, strapiTheme),
+    flattenCSS(pluginTheme[variant], strapiTheme),
+    flattenCSS(pluginTheme.additional, strapiTheme)
+  ].join("\n");
+}
+function injectStyles(strapiTheme) {
+  const { theme } = index.getPluginConfig();
+  const cssText = buildCSS(theme, strapiTheme);
+  if (!styleElement) {
+    styleElement = document.createElement("style");
+    styleElement.id = "ck-editor-global-styles";
+    document.head.appendChild(styleElement);
+  }
+  if (styleElement.textContent !== cssText) {
+    styleElement.textContent = cssText;
+  }
+}
+function useGlobalStyles() {
+  const strapiTheme = styledComponents.useTheme();
+  React.useEffect(() => {
+    injectStyles(strapiTheme);
+  }, [strapiTheme]);
 }
-const MemoizedGlobalStyling = React__default.default.memo(GlobalStyling);
 const Editor = React__default.default.forwardRef((_, forwardedRef) => {
   const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
+  useGlobalStyles();
   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, { ref: forwardedRef }) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading..." }) }),
+    preset ? /* @__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, {})
   ] }) });

package/dist/_chunks/{index-BmYyqc_l.js → index-Db6yDUsF.js}

@@ -200,8 +200,8 @@ const reset = styledComponents.css`
     }
 
     .ck-editor__main {
-      --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial,
-        sans-serif;
+      --ck-font-face:
+        'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
 
       font-family: var(--ck-font-face);
 
@@ -304,6 +304,15 @@ const plugin = styledComponents.css`
       border: none !important;
     }
 
+    [role='dialog'] .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
+      position: static !important;
+      width: auto !important;
+    }
+
+    [role='dialog'] .ck.ck-sticky-panel .ck-sticky-panel__placeholder {
+      display: none !important;
+    }
+
     .ck.ck-editor__main {
       min-height: var(--ck-editor-min-height) !important;
       max-height: var(--ck-editor-max-height) !important;
@@ -491,7 +500,7 @@ class StrapiMediaLib extends ckeditor5.Plugin {
   }
 }
 const name = "@_sh/strapi-plugin-ckeditor";
-const version = "7.0.0";
+const version = "7.1.1";
 const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
 const keywords = [
   "strapi",
@@ -558,9 +567,7 @@ const scripts = {
 };
 const dependencies = {
   "@ckeditor/ckeditor5-react": "~11.0.1",
-  "@strapi/design-system": "2.1.2",
-  "@strapi/icons": "2.1.2",
-  ckeditor5: "~47.4.0",
+  ckeditor5: "~47.6.1",
   lodash: "4.17.21",
   "sanitize-html": "2.13.0",
   yup: "0.32.9"
@@ -593,6 +600,8 @@ const devDependencies = {
   "styled-components": "^6.0.0"
 };
 const peerDependencies = {
+  "@strapi/design-system": "^2.0.0",
+  "@strapi/icons": "^2.0.0",
   "@strapi/strapi": "^5.0.0",
   react: "^18.0.0",
   "react-dom": "^18.0.0",
@@ -1178,7 +1187,7 @@ function getPluginPresets() {
   return PLUGIN_CONFIG.presets;
 }
 function getPluginTheme() {
-  return PLUGIN_CONFIG.presets;
+  return PLUGIN_CONFIG.theme;
 }
 function getPluginConfig() {
   return PLUGIN_CONFIG;
@@ -1264,7 +1273,7 @@ const index = {
         defaultMessage: "The advanced rich text editor. (Community Edition)"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./Field-LK0YigdM.js")).then((module2) => ({
+        Input: async () => Promise.resolve().then(() => require("./Field-DXPrjUnm.js")).then((module2) => ({
           default: module2.Field
         }))
       },

package/dist/_chunks/{index-Be7yVVtW.mjs → index-Hsx0G4L9.mjs}

@@ -178,8 +178,8 @@ const reset = css`
     }
 
     .ck-editor__main {
-      --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial,
-        sans-serif;
+      --ck-font-face:
+        'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
 
       font-family: var(--ck-font-face);
 
@@ -282,6 +282,15 @@ const plugin = css`
       border: none !important;
     }
 
+    [role='dialog'] .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
+      position: static !important;
+      width: auto !important;
+    }
+
+    [role='dialog'] .ck.ck-sticky-panel .ck-sticky-panel__placeholder {
+      display: none !important;
+    }
+
     .ck.ck-editor__main {
       min-height: var(--ck-editor-min-height) !important;
       max-height: var(--ck-editor-max-height) !important;
@@ -469,7 +478,7 @@ class StrapiMediaLib extends Plugin {
   }
 }
 const name = "@_sh/strapi-plugin-ckeditor";
-const version = "7.0.0";
+const version = "7.1.1";
 const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
 const keywords = [
   "strapi",
@@ -536,9 +545,7 @@ const scripts = {
 };
 const dependencies = {
   "@ckeditor/ckeditor5-react": "~11.0.1",
-  "@strapi/design-system": "2.1.2",
-  "@strapi/icons": "2.1.2",
-  ckeditor5: "~47.4.0",
+  ckeditor5: "~47.6.1",
   lodash: "4.17.21",
   "sanitize-html": "2.13.0",
   yup: "0.32.9"
@@ -571,6 +578,8 @@ const devDependencies = {
   "styled-components": "^6.0.0"
 };
 const peerDependencies = {
+  "@strapi/design-system": "^2.0.0",
+  "@strapi/icons": "^2.0.0",
   "@strapi/strapi": "^5.0.0",
   react: "^18.0.0",
   "react-dom": "^18.0.0",
@@ -1156,7 +1165,7 @@ function getPluginPresets() {
   return PLUGIN_CONFIG.presets;
 }
 function getPluginTheme() {
-  return PLUGIN_CONFIG.presets;
+  return PLUGIN_CONFIG.theme;
 }
 function getPluginConfig() {
   return PLUGIN_CONFIG;
@@ -1242,7 +1251,7 @@ const index = {
         defaultMessage: "The advanced rich text editor. (Community Edition)"
       },
       components: {
-        Input: async () => import("./Field-C2N3FIDl.mjs").then((module) => ({
+        Input: async () => import("./Field-CmFipUw8.mjs").then((module) => ({
           default: module.Field
         }))
       },

package/dist/admin/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 require("yup");
-const index = require("../_chunks/index-BmYyqc_l.js");
+const index = require("../_chunks/index-Db6yDUsF.js");
 require("ckeditor5");
 require("sanitize-html");
 exports.StrapiMediaLib = index.StrapiMediaLib;

package/dist/admin/index.mjs

@@ -1,5 +1,5 @@
 import "yup";
-import { S, h, a, b, d, c, e, f, s } from "../_chunks/index-Be7yVVtW.mjs";
+import { S, h, a, b, d, c, e, f, s } from "../_chunks/index-Hsx0G4L9.mjs";
 import "ckeditor5";
 import "sanitize-html";
 export {

package/dist/admin/src/hooks/useGlobalStyles.d.ts

@@ -0,0 +1 @@
+export declare function useGlobalStyles(): void;

package/dist/admin/src/index.d.ts

@@ -1,3 +1,4 @@
+import './styled';
 export * from './exports';
 declare const _default: {
     bootstrap(): void;

package/dist/admin/src/styled.d.ts

@@ -0,0 +1,5 @@
+import type { StrapiTheme } from '@strapi/design-system';
+declare module 'styled-components' {
+    interface DefaultTheme extends StrapiTheme {
+    }
+}

package/dist/server/index.js

@@ -1,6 +1,6 @@
 "use strict";
 const name = "@_sh/strapi-plugin-ckeditor";
-const version = "7.0.0";
+const version = "7.1.1";
 const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
 const keywords = [
   "strapi",
@@ -67,9 +67,7 @@ const scripts = {
 };
 const dependencies = {
   "@ckeditor/ckeditor5-react": "~11.0.1",
-  "@strapi/design-system": "2.1.2",
-  "@strapi/icons": "2.1.2",
-  ckeditor5: "~47.4.0",
+  ckeditor5: "~47.6.1",
   lodash: "4.17.21",
   "sanitize-html": "2.13.0",
   yup: "0.32.9"
@@ -102,6 +100,8 @@ const devDependencies = {
   "styled-components": "^6.0.0"
 };
 const peerDependencies = {
+  "@strapi/design-system": "^2.0.0",
+  "@strapi/icons": "^2.0.0",
   "@strapi/strapi": "^5.0.0",
   react: "^18.0.0",
   "react-dom": "^18.0.0",

package/dist/server/index.mjs

@@ -1,5 +1,5 @@
 const name = "@_sh/strapi-plugin-ckeditor";
-const version = "7.0.0";
+const version = "7.1.1";
 const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
 const keywords = [
   "strapi",
@@ -66,9 +66,7 @@ const scripts = {
 };
 const dependencies = {
   "@ckeditor/ckeditor5-react": "~11.0.1",
-  "@strapi/design-system": "2.1.2",
-  "@strapi/icons": "2.1.2",
-  ckeditor5: "~47.4.0",
+  ckeditor5: "~47.6.1",
   lodash: "4.17.21",
   "sanitize-html": "2.13.0",
   yup: "0.32.9"
@@ -101,6 +99,8 @@ const devDependencies = {
   "styled-components": "^6.0.0"
 };
 const peerDependencies = {
+  "@strapi/design-system": "^2.0.0",
+  "@strapi/icons": "^2.0.0",
   "@strapi/strapi": "^5.0.0",
   react: "^18.0.0",
   "react-dom": "^18.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)",
   "keywords": [
     "strapi",
@@ -67,9 +67,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-react": "~11.0.1",
-    "@strapi/design-system": "2.1.2",
-    "@strapi/icons": "2.1.2",
-    "ckeditor5": "~47.4.0",
+    "ckeditor5": "~47.6.1",
     "lodash": "4.17.21",
     "sanitize-html": "2.13.0",
     "yup": "0.32.9"
@@ -102,6 +100,8 @@
     "styled-components": "^6.0.0"
   },
   "peerDependencies": {
+    "@strapi/design-system": "^2.0.0",
+    "@strapi/icons": "^2.0.0",
     "@strapi/strapi": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

package/dist/admin/src/components/GlobalStyling.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-declare function GlobalStyling(): import("react/jsx-runtime").JSX.Element;
-declare const MemoizedGlobalStyling: React.MemoExoticComponent<typeof GlobalStyling>;
-export { MemoizedGlobalStyling as GlobalStyling };