@_sh/strapi-plugin-ckeditor 6.0.1 → 6.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,12 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import React, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useReducer } from "react";
3
- import { Flex, IconButton, Modal, Box, Field as Field$1, Loader } from "@strapi/design-system";
3
+ import { Flex, IconButton, Box, Portal, FocusTrap, Field as Field$1, Loader } from "@strapi/design-system";
4
4
  import { styled, css, createGlobalStyle } from "styled-components";
5
5
  import { useStrapiApp, useField } from "@strapi/strapi/admin";
6
6
  import { ClassicEditor } from "ckeditor5";
7
7
  import { CKEditor } from "@ckeditor/ckeditor5-react";
8
8
  import "ckeditor5/ckeditor5.css";
9
- import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-Q6to6uwX.mjs";
9
+ import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-CM-eZqTL.mjs";
10
10
  import "sanitize-html";
11
11
  import { Collapse, Expand } from "@strapi/icons";
12
12
  const STORAGE_KEYS = {
@@ -418,19 +418,45 @@ function EditorLayout({ children }) {
418
418
  };
419
419
  }, [isExpandedMode]);
420
420
  if (isExpandedMode) {
421
- return /* @__PURE__ */ jsx(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(Modal.Content, { style: { maxWidth: "unset", width: "unset" }, children: /* @__PURE__ */ jsx(FullScreenBox, { height: "90vh", width: "90vw", background: "neutral100", children: /* @__PURE__ */ jsxs(
422
- EditorWrapper,
421
+ return /* @__PURE__ */ jsx(Portal, { role: "dialog", "aria-modal": false, children: /* @__PURE__ */ jsx(FocusTrap, { onEscape: handleToggleExpand, children: /* @__PURE__ */ jsx(
422
+ Backdrop,
423
423
  {
424
- $presetStyles: preset?.styles,
425
- $isExpanded: isExpandedMode,
426
- $hasError: Boolean(error),
427
- className: "ck-editor__expanded",
428
- children: [
429
- children,
430
- /* @__PURE__ */ jsx(CollapseButton, { label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsx(Collapse, {}) })
431
- ]
424
+ position: "fixed",
425
+ top: 0,
426
+ left: 0,
427
+ right: 0,
428
+ bottom: 0,
429
+ zIndex: 4,
430
+ justifyContent: "center",
431
+ onClick: handleToggleExpand,
432
+ children: /* @__PURE__ */ jsx(
433
+ FullScreenBox,
434
+ {
435
+ background: "neutral100",
436
+ hasRadius: true,
437
+ shadow: "popupShadow",
438
+ overflow: "hidden",
439
+ width: "90%",
440
+ height: "90%",
441
+ onClick: (e) => e.stopPropagation(),
442
+ position: "relative",
443
+ children: /* @__PURE__ */ jsx(Flex, { height: "100%", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxs(
444
+ EditorWrapper,
445
+ {
446
+ $presetStyles: preset?.styles,
447
+ $isExpanded: isExpandedMode,
448
+ $hasError: Boolean(error),
449
+ className: "ck-editor__expanded",
450
+ children: [
451
+ children,
452
+ /* @__PURE__ */ jsx(CollapseButton, { label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsx(Collapse, {}) })
453
+ ]
454
+ }
455
+ ) })
456
+ }
457
+ )
432
458
  }
433
- ) }) }) });
459
+ ) }) });
434
460
  }
435
461
  return /* @__PURE__ */ jsxs(
436
462
  EditorWrapper,
@@ -482,9 +508,12 @@ const CollapseButton = styled(IconButton)`
482
508
  z-index: 2;
483
509
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
484
510
  `;
485
- const FullScreenBox = styled(Flex)`
511
+ const FullScreenBox = styled(Box)`
486
512
  max-width: var(--ck-editor-full-screen-box-max-width);
487
513
  `;
514
+ const Backdrop = styled(Flex)`
515
+ background: ${({ theme }) => `${theme.colors.neutral800}1F`};
516
+ `;
488
517
  const GlobalStyle = createGlobalStyle`
489
518
  ${({ $editortTheme, $variant }) => $editortTheme && css`
490
519
  ${$editortTheme.common}
@@ -30,7 +30,7 @@ const admin = require("@strapi/strapi/admin");
30
30
  const ckeditor5 = require("ckeditor5");
31
31
  const ckeditor5React = require("@ckeditor/ckeditor5-react");
32
32
  require("ckeditor5/ckeditor5.css");
33
- const index = require("./index-DUYTlr_2.js");
33
+ const index = require("./index-CgWKes-C.js");
34
34
  require("sanitize-html");
35
35
  const icons = require("@strapi/icons");
36
36
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -444,19 +444,45 @@ function EditorLayout({ children }) {
444
444
  };
445
445
  }, [isExpandedMode]);
446
446
  if (isExpandedMode) {
447
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { style: { maxWidth: "unset", width: "unset" }, children: /* @__PURE__ */ jsxRuntime.jsx(FullScreenBox, { height: "90vh", width: "90vw", background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(
448
- EditorWrapper,
447
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Portal, { role: "dialog", "aria-modal": false, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.FocusTrap, { onEscape: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
448
+ Backdrop,
449
449
  {
450
- $presetStyles: preset?.styles,
451
- $isExpanded: isExpandedMode,
452
- $hasError: Boolean(error),
453
- className: "ck-editor__expanded",
454
- children: [
455
- children,
456
- /* @__PURE__ */ jsxRuntime.jsx(CollapseButton, { label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {}) })
457
- ]
450
+ position: "fixed",
451
+ top: 0,
452
+ left: 0,
453
+ right: 0,
454
+ bottom: 0,
455
+ zIndex: 4,
456
+ justifyContent: "center",
457
+ onClick: handleToggleExpand,
458
+ children: /* @__PURE__ */ jsxRuntime.jsx(
459
+ FullScreenBox,
460
+ {
461
+ background: "neutral100",
462
+ hasRadius: true,
463
+ shadow: "popupShadow",
464
+ overflow: "hidden",
465
+ width: "90%",
466
+ height: "90%",
467
+ onClick: (e) => e.stopPropagation(),
468
+ position: "relative",
469
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { height: "100%", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(
470
+ EditorWrapper,
471
+ {
472
+ $presetStyles: preset?.styles,
473
+ $isExpanded: isExpandedMode,
474
+ $hasError: Boolean(error),
475
+ className: "ck-editor__expanded",
476
+ children: [
477
+ children,
478
+ /* @__PURE__ */ jsxRuntime.jsx(CollapseButton, { label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {}) })
479
+ ]
480
+ }
481
+ ) })
482
+ }
483
+ )
458
484
  }
459
- ) }) }) });
485
+ ) }) });
460
486
  }
461
487
  return /* @__PURE__ */ jsxRuntime.jsxs(
462
488
  EditorWrapper,
@@ -508,9 +534,12 @@ const CollapseButton = styledComponents.styled(designSystem.IconButton)`
508
534
  z-index: 2;
509
535
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
510
536
  `;
511
- const FullScreenBox = styledComponents.styled(designSystem.Flex)`
537
+ const FullScreenBox = styledComponents.styled(designSystem.Box)`
512
538
  max-width: var(--ck-editor-full-screen-box-max-width);
513
539
  `;
540
+ const Backdrop = styledComponents.styled(designSystem.Flex)`
541
+ background: ${({ theme }) => `${theme.colors.neutral800}1F`};
542
+ `;
514
543
  const GlobalStyle = styledComponents.createGlobalStyle`
515
544
  ${({ $editortTheme, $variant }) => $editortTheme && styledComponents.css`
516
545
  ${$editortTheme.common}
@@ -73,7 +73,7 @@ const dependencies = {
73
73
  "@ckeditor/ckeditor5-react": "~9.5.0",
74
74
  "@strapi/design-system": "2.0.0-rc.18",
75
75
  "@strapi/icons": "2.0.0-rc.18",
76
- ckeditor5: "~45.0.0",
76
+ ckeditor5: "~45.2.0",
77
77
  lodash: "4.17.21",
78
78
  "sanitize-html": "2.13.0",
79
79
  yup: "0.32.9"
@@ -1243,7 +1243,7 @@ const index = {
1243
1243
  defaultMessage: "The advanced rich text editor. (Community Edition)"
1244
1244
  },
1245
1245
  components: {
1246
- Input: async () => import("./Field-Dh4Ympog.mjs").then((module) => ({
1246
+ Input: async () => import("./Field-DwEixuI8.mjs").then((module) => ({
1247
1247
  default: module.Field
1248
1248
  }))
1249
1249
  },
@@ -95,7 +95,7 @@ const dependencies = {
95
95
  "@ckeditor/ckeditor5-react": "~9.5.0",
96
96
  "@strapi/design-system": "2.0.0-rc.18",
97
97
  "@strapi/icons": "2.0.0-rc.18",
98
- ckeditor5: "~45.0.0",
98
+ ckeditor5: "~45.2.0",
99
99
  lodash: "4.17.21",
100
100
  "sanitize-html": "2.13.0",
101
101
  yup: "0.32.9"
@@ -1265,7 +1265,7 @@ const index = {
1265
1265
  defaultMessage: "The advanced rich text editor. (Community Edition)"
1266
1266
  },
1267
1267
  components: {
1268
- Input: async () => Promise.resolve().then(() => require("./Field-CJHYTedG.js")).then((module2) => ({
1268
+ Input: async () => Promise.resolve().then(() => require("./Field-bpNZPEcR.js")).then((module2) => ({
1269
1269
  default: module2.Field
1270
1270
  }))
1271
1271
  },
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
3
  require("yup");
4
- const index = require("../_chunks/index-DUYTlr_2.js");
4
+ const index = require("../_chunks/index-CgWKes-C.js");
5
5
  require("ckeditor5");
6
6
  require("sanitize-html");
7
7
  exports.StrapiMediaLib = index.StrapiMediaLib;
@@ -1,5 +1,5 @@
1
1
  import "yup";
2
- import { S, h, a, b, d, c, e, f, s } from "../_chunks/index-Q6to6uwX.mjs";
2
+ import { S, h, a, b, d, c, e, f, s } from "../_chunks/index-CM-eZqTL.mjs";
3
3
  import "ckeditor5";
4
4
  import "sanitize-html";
5
5
  export {
@@ -67,7 +67,7 @@ const dependencies = {
67
67
  "@ckeditor/ckeditor5-react": "~9.5.0",
68
68
  "@strapi/design-system": "2.0.0-rc.18",
69
69
  "@strapi/icons": "2.0.0-rc.18",
70
- ckeditor5: "~45.0.0",
70
+ ckeditor5: "~45.2.0",
71
71
  lodash: "4.17.21",
72
72
  "sanitize-html": "2.13.0",
73
73
  yup: "0.32.9"
@@ -66,7 +66,7 @@ const dependencies = {
66
66
  "@ckeditor/ckeditor5-react": "~9.5.0",
67
67
  "@strapi/design-system": "2.0.0-rc.18",
68
68
  "@strapi/icons": "2.0.0-rc.18",
69
- ckeditor5: "~45.0.0",
69
+ ckeditor5: "~45.2.0",
70
70
  lodash: "4.17.21",
71
71
  "sanitize-html": "2.13.0",
72
72
  yup: "0.32.9"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@_sh/strapi-plugin-ckeditor",
3
- "version": "6.0.1",
3
+ "version": "6.0.2",
4
4
  "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)",
5
5
  "keywords": [
6
6
  "strapi",
@@ -67,7 +67,7 @@
67
67
  "@ckeditor/ckeditor5-react": "~9.5.0",
68
68
  "@strapi/design-system": "2.0.0-rc.18",
69
69
  "@strapi/icons": "2.0.0-rc.18",
70
- "ckeditor5": "~45.0.0",
70
+ "ckeditor5": "~45.2.0",
71
71
  "lodash": "4.17.21",
72
72
  "sanitize-html": "2.13.0",
73
73
  "yup": "0.32.9"