@_sh/strapi-plugin-ckeditor 6.0.2 → 6.0.3

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.
@@ -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-CgWKes-C.js");
33
+ const index = require("./index-D48ig74s.js");
34
34
  require("sanitize-html");
35
35
  const icons = require("@strapi/icons");
36
36
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -309,7 +309,7 @@ function MediaLib({ isOpen = false, toggle, handleChangeAssets }) {
309
309
  return /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: toggle, onSelectAssets: handleSelectAssets });
310
310
  }
311
311
  const MemoizedMediaLib = React__default.default.memo(MediaLib);
312
- function CKEReact() {
312
+ const CKEReact = React__default.default.forwardRef((_, forwardedRef) => {
313
313
  const [mediaLibVisible, setMediaLibVisible] = React.useState(false);
314
314
  const [editorInstance, setEditorInstance] = React.useState(null);
315
315
  const [isWordsMax, setIsWordsMax] = React.useState(false);
@@ -317,13 +317,20 @@ function CKEReact() {
317
317
  const { name, disabled, preset, wordsLimit, charsLimit } = useEditorContext();
318
318
  const { onChange: fieldOnChange, value: fieldValue } = admin.useField(name);
319
319
  const wordCounterRef = React.useRef(null);
320
+ const debounceTimeout = React.useRef(null);
320
321
  const onEditorReady = (editor) => {
321
322
  setUpPlugins(editor);
322
323
  setEditorInstance(editor);
323
324
  };
324
325
  const onEditorChange = (_e, editor) => {
326
+ if (debounceTimeout.current) {
327
+ clearTimeout(debounceTimeout.current);
328
+ }
325
329
  const data = editor.getData();
326
- fieldOnChange(name, data);
330
+ debounceTimeout.current = setTimeout(() => {
331
+ fieldOnChange(name, data);
332
+ debounceTimeout.current = null;
333
+ }, 300);
327
334
  };
328
335
  const toggleMediaLib = React.useCallback(() => setMediaLibVisible((prev) => !prev), [setMediaLibVisible]);
329
336
  const handleChangeAssets = React.useCallback(
@@ -338,6 +345,22 @@ function CKEReact() {
338
345
  },
339
346
  [toggleMediaLib, editorInstance]
340
347
  );
348
+ React.useEffect(() => {
349
+ const ckWrapper = document.querySelector(".ck-body-wrapper");
350
+ const listener = ckWrapper?.addEventListener("pointerdown", (e) => e.stopPropagation(), true);
351
+ return () => {
352
+ listener && ckWrapper?.removeEventListener("pointerdown", listener);
353
+ };
354
+ }, [editorInstance]);
355
+ React.useImperativeHandle(
356
+ forwardedRef,
357
+ () => ({
358
+ focus() {
359
+ editorInstance?.focus();
360
+ }
361
+ }),
362
+ [editorInstance]
363
+ );
341
364
  if (!preset) {
342
365
  return null;
343
366
  }
@@ -421,7 +444,7 @@ function CKEReact() {
421
444
  setIsCharsMax(stats.characters > charsLimit);
422
445
  }
423
446
  }
424
- }
447
+ });
425
448
  const WordCounter = styledComponents.styled(designSystem.Flex)`
426
449
  ${({ theme, $isWordsMax, $isCharsMax }) => styledComponents.css`
427
450
  .ck-word-count__words {
@@ -438,51 +461,34 @@ function EditorLayout({ children }) {
438
461
  React.useEffect(() => {
439
462
  if (isExpandedMode) {
440
463
  document.body.classList.add("lock-body-scroll");
464
+ setTimeout(() => {
465
+ document.querySelector(".ck-editor__expanded .ck-editor__editable")?.focus();
466
+ }, 0);
441
467
  }
442
468
  return () => {
443
469
  document.body.classList.remove("lock-body-scroll");
444
470
  };
445
471
  }, [isExpandedMode]);
446
472
  if (isExpandedMode) {
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,
473
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
474
+ designSystem.Modal.Content,
449
475
  {
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,
476
+ style: { maxWidth: "var(--ck-editor-full-screen-box-max-width)", width: "unset" },
477
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { height: "90dvh", width: "90dvw", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(
478
+ EditorWrapper,
460
479
  {
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
- ) })
480
+ $presetStyles: preset?.styles,
481
+ $isExpanded: isExpandedMode,
482
+ $hasError: Boolean(error),
483
+ className: "ck-editor__expanded",
484
+ children: [
485
+ children,
486
+ /* @__PURE__ */ jsxRuntime.jsx(CollapseButton, { tabindex: "-1", label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Collapse, {}) })
487
+ ]
482
488
  }
483
- )
489
+ ) })
484
490
  }
485
- ) }) });
491
+ ) });
486
492
  }
487
493
  return /* @__PURE__ */ jsxRuntime.jsxs(
488
494
  EditorWrapper,
@@ -534,12 +540,6 @@ const CollapseButton = styledComponents.styled(designSystem.IconButton)`
534
540
  z-index: 2;
535
541
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
536
542
  `;
537
- const FullScreenBox = styledComponents.styled(designSystem.Box)`
538
- max-width: var(--ck-editor-full-screen-box-max-width);
539
- `;
540
- const Backdrop = styledComponents.styled(designSystem.Flex)`
541
- background: ${({ theme }) => `${theme.colors.neutral800}1F`};
542
- `;
543
543
  const GlobalStyle = styledComponents.createGlobalStyle`
544
544
  ${({ $editortTheme, $variant }) => $editortTheme && styledComponents.css`
545
545
  ${$editortTheme.common}
@@ -555,18 +555,18 @@ function GlobalStyling() {
555
555
  return /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
556
556
  }
557
557
  const MemoizedGlobalStyling = React__default.default.memo(GlobalStyling);
558
- function Editor() {
558
+ const Editor = React__default.default.forwardRef((_, forwardedRef) => {
559
559
  const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
560
560
  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: [
561
561
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
562
562
  preset ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
563
563
  /* @__PURE__ */ jsxRuntime.jsx(MemoizedGlobalStyling, {}),
564
- /* @__PURE__ */ jsxRuntime.jsx(EditorLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(CKEReact, {}) })
564
+ /* @__PURE__ */ jsxRuntime.jsx(EditorLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(CKEReact, { ref: forwardedRef }) })
565
565
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading..." }) }),
566
566
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
567
567
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
568
568
  ] }) });
569
- }
569
+ });
570
570
  const LoaderBox = styledComponents.styled(designSystem.Box)`
571
571
  display: flex;
572
572
  justify-content: center;
@@ -574,38 +574,40 @@ const LoaderBox = styledComponents.styled(designSystem.Box)`
574
574
  height: 200px;
575
575
  width: 100%;
576
576
  `;
577
- function Field({
578
- name,
579
- hint,
580
- error,
581
- placeholder,
582
- label,
583
- attribute,
584
- labelAction = null,
585
- disabled = false,
586
- required = false
587
- }) {
588
- const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
589
- const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
590
- return /* @__PURE__ */ jsxRuntime.jsx(
591
- EditorProvider,
592
- {
593
- name,
594
- error,
595
- disabled,
596
- required,
597
- placeholder,
598
- hint,
599
- label,
600
- labelAction,
601
- presetName: preset,
602
- wordsLimit: maxLengthWords,
603
- charsLimit: maxLengthCharacters,
604
- isFieldLocalized,
605
- children: /* @__PURE__ */ jsxRuntime.jsx(Editor, {})
606
- }
607
- );
608
- }
577
+ const Field = React__default.default.forwardRef(
578
+ ({
579
+ name,
580
+ hint,
581
+ error,
582
+ placeholder,
583
+ label,
584
+ attribute,
585
+ labelAction = null,
586
+ disabled = false,
587
+ required = false
588
+ }, forwardedRef) => {
589
+ const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
590
+ const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
591
+ return /* @__PURE__ */ jsxRuntime.jsx(
592
+ EditorProvider,
593
+ {
594
+ name,
595
+ error,
596
+ disabled,
597
+ required,
598
+ placeholder,
599
+ hint,
600
+ label,
601
+ labelAction,
602
+ presetName: preset,
603
+ wordsLimit: maxLengthWords,
604
+ charsLimit: maxLengthCharacters,
605
+ isFieldLocalized,
606
+ children: /* @__PURE__ */ jsxRuntime.jsx(Editor, { ref: forwardedRef })
607
+ }
608
+ );
609
+ }
610
+ );
609
611
  function compare(oldProps, newProps) {
610
612
  return oldProps.error === newProps.error && oldProps.labelAction === newProps.labelAction;
611
613
  }
@@ -1,12 +1,12 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import React, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useReducer } from "react";
3
- import { Flex, IconButton, Box, Portal, FocusTrap, Field as Field$1, Loader } from "@strapi/design-system";
2
+ import React, { createContext, useContext, useState, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useReducer } from "react";
3
+ import { Flex, IconButton, Modal, Field as Field$1, Loader, Box } 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-CM-eZqTL.mjs";
9
+ import { g as getPluginConfig, p as prefixFileUrlWithBackendUrl, i as isImageResponsive } from "./index-CwLpvdFD.mjs";
10
10
  import "sanitize-html";
11
11
  import { Collapse, Expand } from "@strapi/icons";
12
12
  const STORAGE_KEYS = {
@@ -283,7 +283,7 @@ function MediaLib({ isOpen = false, toggle, handleChangeAssets }) {
283
283
  return /* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: toggle, onSelectAssets: handleSelectAssets });
284
284
  }
285
285
  const MemoizedMediaLib = React.memo(MediaLib);
286
- function CKEReact() {
286
+ const CKEReact = React.forwardRef((_, forwardedRef) => {
287
287
  const [mediaLibVisible, setMediaLibVisible] = useState(false);
288
288
  const [editorInstance, setEditorInstance] = useState(null);
289
289
  const [isWordsMax, setIsWordsMax] = useState(false);
@@ -291,13 +291,20 @@ function CKEReact() {
291
291
  const { name, disabled, preset, wordsLimit, charsLimit } = useEditorContext();
292
292
  const { onChange: fieldOnChange, value: fieldValue } = useField(name);
293
293
  const wordCounterRef = useRef(null);
294
+ const debounceTimeout = useRef(null);
294
295
  const onEditorReady = (editor) => {
295
296
  setUpPlugins(editor);
296
297
  setEditorInstance(editor);
297
298
  };
298
299
  const onEditorChange = (_e, editor) => {
300
+ if (debounceTimeout.current) {
301
+ clearTimeout(debounceTimeout.current);
302
+ }
299
303
  const data = editor.getData();
300
- fieldOnChange(name, data);
304
+ debounceTimeout.current = setTimeout(() => {
305
+ fieldOnChange(name, data);
306
+ debounceTimeout.current = null;
307
+ }, 300);
301
308
  };
302
309
  const toggleMediaLib = useCallback(() => setMediaLibVisible((prev) => !prev), [setMediaLibVisible]);
303
310
  const handleChangeAssets = useCallback(
@@ -312,6 +319,22 @@ function CKEReact() {
312
319
  },
313
320
  [toggleMediaLib, editorInstance]
314
321
  );
322
+ useEffect(() => {
323
+ const ckWrapper = document.querySelector(".ck-body-wrapper");
324
+ const listener = ckWrapper?.addEventListener("pointerdown", (e) => e.stopPropagation(), true);
325
+ return () => {
326
+ listener && ckWrapper?.removeEventListener("pointerdown", listener);
327
+ };
328
+ }, [editorInstance]);
329
+ useImperativeHandle(
330
+ forwardedRef,
331
+ () => ({
332
+ focus() {
333
+ editorInstance?.focus();
334
+ }
335
+ }),
336
+ [editorInstance]
337
+ );
315
338
  if (!preset) {
316
339
  return null;
317
340
  }
@@ -395,7 +418,7 @@ function CKEReact() {
395
418
  setIsCharsMax(stats.characters > charsLimit);
396
419
  }
397
420
  }
398
- }
421
+ });
399
422
  const WordCounter = styled(Flex)`
400
423
  ${({ theme, $isWordsMax, $isCharsMax }) => css`
401
424
  .ck-word-count__words {
@@ -412,51 +435,34 @@ function EditorLayout({ children }) {
412
435
  useEffect(() => {
413
436
  if (isExpandedMode) {
414
437
  document.body.classList.add("lock-body-scroll");
438
+ setTimeout(() => {
439
+ document.querySelector(".ck-editor__expanded .ck-editor__editable")?.focus();
440
+ }, 0);
415
441
  }
416
442
  return () => {
417
443
  document.body.classList.remove("lock-body-scroll");
418
444
  };
419
445
  }, [isExpandedMode]);
420
446
  if (isExpandedMode) {
421
- return /* @__PURE__ */ jsx(Portal, { role: "dialog", "aria-modal": false, children: /* @__PURE__ */ jsx(FocusTrap, { onEscape: handleToggleExpand, children: /* @__PURE__ */ jsx(
422
- Backdrop,
447
+ return /* @__PURE__ */ jsx(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(
448
+ Modal.Content,
423
449
  {
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,
450
+ style: { maxWidth: "var(--ck-editor-full-screen-box-max-width)", width: "unset" },
451
+ children: /* @__PURE__ */ jsx(Flex, { height: "90dvh", width: "90dvw", alignItems: "flex-start", direction: "column", children: /* @__PURE__ */ jsxs(
452
+ EditorWrapper,
434
453
  {
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
- ) })
454
+ $presetStyles: preset?.styles,
455
+ $isExpanded: isExpandedMode,
456
+ $hasError: Boolean(error),
457
+ className: "ck-editor__expanded",
458
+ children: [
459
+ children,
460
+ /* @__PURE__ */ jsx(CollapseButton, { tabindex: "-1", label: "Collapse", onClick: handleToggleExpand, children: /* @__PURE__ */ jsx(Collapse, {}) })
461
+ ]
456
462
  }
457
- )
463
+ ) })
458
464
  }
459
- ) }) });
465
+ ) });
460
466
  }
461
467
  return /* @__PURE__ */ jsxs(
462
468
  EditorWrapper,
@@ -508,12 +514,6 @@ const CollapseButton = styled(IconButton)`
508
514
  z-index: 2;
509
515
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
510
516
  `;
511
- const FullScreenBox = styled(Box)`
512
- max-width: var(--ck-editor-full-screen-box-max-width);
513
- `;
514
- const Backdrop = styled(Flex)`
515
- background: ${({ theme }) => `${theme.colors.neutral800}1F`};
516
- `;
517
517
  const GlobalStyle = createGlobalStyle`
518
518
  ${({ $editortTheme, $variant }) => $editortTheme && css`
519
519
  ${$editortTheme.common}
@@ -529,18 +529,18 @@ function GlobalStyling() {
529
529
  return /* @__PURE__ */ jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
530
530
  }
531
531
  const MemoizedGlobalStyling = React.memo(GlobalStyling);
532
- function Editor() {
532
+ const Editor = React.forwardRef((_, forwardedRef) => {
533
533
  const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
534
534
  return /* @__PURE__ */ jsx(Field$1.Root, { id: name, name, error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
535
535
  /* @__PURE__ */ jsx(Field$1.Label, { action: labelAction, children: label }),
536
536
  preset ? /* @__PURE__ */ jsxs(Fragment, { children: [
537
537
  /* @__PURE__ */ jsx(MemoizedGlobalStyling, {}),
538
- /* @__PURE__ */ jsx(EditorLayout, { children: /* @__PURE__ */ jsx(CKEReact, {}) })
538
+ /* @__PURE__ */ jsx(EditorLayout, { children: /* @__PURE__ */ jsx(CKEReact, { ref: forwardedRef }) })
539
539
  ] }) : /* @__PURE__ */ jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }),
540
540
  /* @__PURE__ */ jsx(Field$1.Hint, {}),
541
541
  /* @__PURE__ */ jsx(Field$1.Error, {})
542
542
  ] }) });
543
- }
543
+ });
544
544
  const LoaderBox = styled(Box)`
545
545
  display: flex;
546
546
  justify-content: center;
@@ -548,38 +548,40 @@ const LoaderBox = styled(Box)`
548
548
  height: 200px;
549
549
  width: 100%;
550
550
  `;
551
- function Field({
552
- name,
553
- hint,
554
- error,
555
- placeholder,
556
- label,
557
- attribute,
558
- labelAction = null,
559
- disabled = false,
560
- required = false
561
- }) {
562
- const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
563
- const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
564
- return /* @__PURE__ */ jsx(
565
- EditorProvider,
566
- {
567
- name,
568
- error,
569
- disabled,
570
- required,
571
- placeholder,
572
- hint,
573
- label,
574
- labelAction,
575
- presetName: preset,
576
- wordsLimit: maxLengthWords,
577
- charsLimit: maxLengthCharacters,
578
- isFieldLocalized,
579
- children: /* @__PURE__ */ jsx(Editor, {})
580
- }
581
- );
582
- }
551
+ const Field = React.forwardRef(
552
+ ({
553
+ name,
554
+ hint,
555
+ error,
556
+ placeholder,
557
+ label,
558
+ attribute,
559
+ labelAction = null,
560
+ disabled = false,
561
+ required = false
562
+ }, forwardedRef) => {
563
+ const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
564
+ const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
565
+ return /* @__PURE__ */ jsx(
566
+ EditorProvider,
567
+ {
568
+ name,
569
+ error,
570
+ disabled,
571
+ required,
572
+ placeholder,
573
+ hint,
574
+ label,
575
+ labelAction,
576
+ presetName: preset,
577
+ wordsLimit: maxLengthWords,
578
+ charsLimit: maxLengthCharacters,
579
+ isFieldLocalized,
580
+ children: /* @__PURE__ */ jsx(Editor, { ref: forwardedRef })
581
+ }
582
+ );
583
+ }
584
+ );
583
585
  function compare(oldProps, newProps) {
584
586
  return oldProps.error === newProps.error && oldProps.labelAction === newProps.labelAction;
585
587
  }
@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
6
6
  import { Flex, lightTheme } from "@strapi/design-system";
7
7
  import cloneDeep from "lodash/cloneDeep";
8
8
  const name = "@_sh/strapi-plugin-ckeditor";
9
- const version = "6.0.1";
9
+ const version = "6.0.3";
10
10
  const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
11
11
  const keywords = [
12
12
  "strapi",
@@ -526,6 +526,8 @@ const plugin = css`
526
526
  `;
527
527
  const expanded = css`
528
528
  .ck-editor__expanded {
529
+ max-width: var(--ck-editor-full-screen-box-max-width);
530
+
529
531
  .ck.ck-content.ck-editor__editable,
530
532
  .ck-source-editing-area {
531
533
  min-height: 100% !important;
@@ -565,6 +567,10 @@ const expanded = css`
565
567
  right: 1.2rem;
566
568
  }
567
569
  }
570
+
571
+ .ck-body-wrapper {
572
+ pointer-events: all;
573
+ }
568
574
  `;
569
575
  const common = css`
570
576
  ${reset}
@@ -1243,7 +1249,7 @@ const index = {
1243
1249
  defaultMessage: "The advanced rich text editor. (Community Edition)"
1244
1250
  },
1245
1251
  components: {
1246
- Input: async () => import("./Field-DwEixuI8.mjs").then((module) => ({
1252
+ Input: async () => import("./Field-C5uO1-1c.mjs").then((module) => ({
1247
1253
  default: module.Field
1248
1254
  }))
1249
1255
  },
@@ -28,7 +28,7 @@ const yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
28
28
  const sanitizeHtml__namespace = /* @__PURE__ */ _interopNamespace(sanitizeHtml);
29
29
  const cloneDeep__default = /* @__PURE__ */ _interopDefault(cloneDeep);
30
30
  const name = "@_sh/strapi-plugin-ckeditor";
31
- const version = "6.0.1";
31
+ const version = "6.0.3";
32
32
  const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
33
33
  const keywords = [
34
34
  "strapi",
@@ -548,6 +548,8 @@ const plugin = styledComponents.css`
548
548
  `;
549
549
  const expanded = styledComponents.css`
550
550
  .ck-editor__expanded {
551
+ max-width: var(--ck-editor-full-screen-box-max-width);
552
+
551
553
  .ck.ck-content.ck-editor__editable,
552
554
  .ck-source-editing-area {
553
555
  min-height: 100% !important;
@@ -587,6 +589,10 @@ const expanded = styledComponents.css`
587
589
  right: 1.2rem;
588
590
  }
589
591
  }
592
+
593
+ .ck-body-wrapper {
594
+ pointer-events: all;
595
+ }
590
596
  `;
591
597
  const common = styledComponents.css`
592
598
  ${reset}
@@ -1265,7 +1271,7 @@ const index = {
1265
1271
  defaultMessage: "The advanced rich text editor. (Community Edition)"
1266
1272
  },
1267
1273
  components: {
1268
- Input: async () => Promise.resolve().then(() => require("./Field-bpNZPEcR.js")).then((module2) => ({
1274
+ Input: async () => Promise.resolve().then(() => require("./Field-Bjfn0oud.js")).then((module2) => ({
1269
1275
  default: module2.Field
1270
1276
  }))
1271
1277
  },
@@ -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-CgWKes-C.js");
4
+ const index = require("../_chunks/index-D48ig74s.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-CM-eZqTL.mjs";
2
+ import { S, h, a, b, d, c, e, f, s } from "../_chunks/index-CwLpvdFD.mjs";
3
3
  import "ckeditor5";
4
4
  import "sanitize-html";
5
5
  export {
@@ -1,6 +1,9 @@
1
+ import React from 'react';
1
2
  import 'ckeditor5/ckeditor5.css';
2
3
  export type WordCountPluginStats = {
3
4
  words: number;
4
5
  characters: number;
5
6
  };
6
- export declare function CKEReact(): import("react/jsx-runtime").JSX.Element | null;
7
+ export declare const CKEReact: React.ForwardRefExoticComponent<React.RefAttributes<{
8
+ focus: () => void;
9
+ }>>;
@@ -1 +1,4 @@
1
- export declare function Editor(): import("react/jsx-runtime").JSX.Element;
1
+ import React from 'react';
2
+ export declare const Editor: React.ForwardRefExoticComponent<React.RefAttributes<{
3
+ focus: () => void;
4
+ }>>;
@@ -15,6 +15,7 @@ type CKEditorFieldProps = Readonly<InputProps & FieldValue & {
15
15
  };
16
16
  };
17
17
  }>;
18
- declare function Field({ name, hint, error, placeholder, label, attribute, labelAction, disabled, required, }: CKEditorFieldProps): import("react/jsx-runtime").JSX.Element;
19
- declare const MemoizedField: React.MemoExoticComponent<typeof Field>;
18
+ declare const MemoizedField: React.MemoExoticComponent<React.ForwardRefExoticComponent<CKEditorFieldProps & React.RefAttributes<{
19
+ focus: () => void;
20
+ }>>>;
20
21
  export { MemoizedField as Field };
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  const name = "@_sh/strapi-plugin-ckeditor";
3
- const version = "6.0.1";
3
+ const version = "6.0.3";
4
4
  const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
5
5
  const keywords = [
6
6
  "strapi",
@@ -1,5 +1,5 @@
1
1
  const name = "@_sh/strapi-plugin-ckeditor";
2
- const version = "6.0.1";
2
+ const version = "6.0.3";
3
3
  const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
4
4
  const keywords = [
5
5
  "strapi",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@_sh/strapi-plugin-ckeditor",
3
- "version": "6.0.2",
3
+ "version": "6.0.3",
4
4
  "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)",
5
5
  "keywords": [
6
6
  "strapi",