@_sh/strapi-plugin-ckeditor 6.0.1 → 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.
- package/dist/_chunks/{Field-CJHYTedG.js → Field-Bjfn0oud.js} +84 -53
- package/dist/_chunks/{Field-Dh4Ympog.mjs → Field-C5uO1-1c.mjs} +86 -55
- package/dist/_chunks/{index-Q6to6uwX.mjs → index-CwLpvdFD.mjs} +9 -3
- package/dist/_chunks/{index-DUYTlr_2.js → index-D48ig74s.js} +9 -3
- package/dist/admin/index.js +1 -1
- package/dist/admin/index.mjs +1 -1
- package/dist/admin/src/components/CKEReact.d.ts +4 -1
- package/dist/admin/src/components/Editor.d.ts +4 -1
- package/dist/admin/src/components/Field.d.ts +3 -2
- package/dist/server/index.js +2 -2
- package/dist/server/index.mjs +2 -2
- package/package.json +2 -2
|
@@ -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-
|
|
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
|
-
|
|
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
|
-
|
|
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,25 +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.Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
448
|
-
|
|
473
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
474
|
+
designSystem.Modal.Content,
|
|
449
475
|
{
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
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,
|
|
479
|
+
{
|
|
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
|
+
]
|
|
488
|
+
}
|
|
489
|
+
) })
|
|
458
490
|
}
|
|
459
|
-
) })
|
|
491
|
+
) });
|
|
460
492
|
}
|
|
461
493
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
462
494
|
EditorWrapper,
|
|
@@ -508,9 +540,6 @@ const CollapseButton = styledComponents.styled(designSystem.IconButton)`
|
|
|
508
540
|
z-index: 2;
|
|
509
541
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
|
510
542
|
`;
|
|
511
|
-
const FullScreenBox = styledComponents.styled(designSystem.Flex)`
|
|
512
|
-
max-width: var(--ck-editor-full-screen-box-max-width);
|
|
513
|
-
`;
|
|
514
543
|
const GlobalStyle = styledComponents.createGlobalStyle`
|
|
515
544
|
${({ $editortTheme, $variant }) => $editortTheme && styledComponents.css`
|
|
516
545
|
${$editortTheme.common}
|
|
@@ -526,18 +555,18 @@ function GlobalStyling() {
|
|
|
526
555
|
return /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
|
|
527
556
|
}
|
|
528
557
|
const MemoizedGlobalStyling = React__default.default.memo(GlobalStyling);
|
|
529
|
-
|
|
558
|
+
const Editor = React__default.default.forwardRef((_, forwardedRef) => {
|
|
530
559
|
const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
|
|
531
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: [
|
|
532
561
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
|
533
562
|
preset ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
534
563
|
/* @__PURE__ */ jsxRuntime.jsx(MemoizedGlobalStyling, {}),
|
|
535
|
-
/* @__PURE__ */ jsxRuntime.jsx(EditorLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(CKEReact, {}) })
|
|
564
|
+
/* @__PURE__ */ jsxRuntime.jsx(EditorLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(CKEReact, { ref: forwardedRef }) })
|
|
536
565
|
] }) : /* @__PURE__ */ jsxRuntime.jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading..." }) }),
|
|
537
566
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
|
|
538
567
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
|
539
568
|
] }) });
|
|
540
|
-
}
|
|
569
|
+
});
|
|
541
570
|
const LoaderBox = styledComponents.styled(designSystem.Box)`
|
|
542
571
|
display: flex;
|
|
543
572
|
justify-content: center;
|
|
@@ -545,38 +574,40 @@ const LoaderBox = styledComponents.styled(designSystem.Box)`
|
|
|
545
574
|
height: 200px;
|
|
546
575
|
width: 100%;
|
|
547
576
|
`;
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
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
|
+
);
|
|
580
611
|
function compare(oldProps, newProps) {
|
|
581
612
|
return oldProps.error === newProps.error && oldProps.labelAction === newProps.labelAction;
|
|
582
613
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import React, { createContext, useState, useEffect, useMemo,
|
|
3
|
-
import { Flex, IconButton, Modal,
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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,25 +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(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(
|
|
422
|
-
|
|
447
|
+
return /* @__PURE__ */ jsx(Modal.Root, { open: isExpandedMode, onOpenChange: handleToggleExpand, children: /* @__PURE__ */ jsx(
|
|
448
|
+
Modal.Content,
|
|
423
449
|
{
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
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,
|
|
453
|
+
{
|
|
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
|
+
]
|
|
462
|
+
}
|
|
463
|
+
) })
|
|
432
464
|
}
|
|
433
|
-
) })
|
|
465
|
+
) });
|
|
434
466
|
}
|
|
435
467
|
return /* @__PURE__ */ jsxs(
|
|
436
468
|
EditorWrapper,
|
|
@@ -482,9 +514,6 @@ const CollapseButton = styled(IconButton)`
|
|
|
482
514
|
z-index: 2;
|
|
483
515
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
|
484
516
|
`;
|
|
485
|
-
const FullScreenBox = styled(Flex)`
|
|
486
|
-
max-width: var(--ck-editor-full-screen-box-max-width);
|
|
487
|
-
`;
|
|
488
517
|
const GlobalStyle = createGlobalStyle`
|
|
489
518
|
${({ $editortTheme, $variant }) => $editortTheme && css`
|
|
490
519
|
${$editortTheme.common}
|
|
@@ -500,18 +529,18 @@ function GlobalStyling() {
|
|
|
500
529
|
return /* @__PURE__ */ jsx(GlobalStyle, { $editortTheme: theme, $variant: variant });
|
|
501
530
|
}
|
|
502
531
|
const MemoizedGlobalStyling = React.memo(GlobalStyling);
|
|
503
|
-
|
|
532
|
+
const Editor = React.forwardRef((_, forwardedRef) => {
|
|
504
533
|
const { name, hint, required, labelAction, label, error, preset } = useEditorContext();
|
|
505
534
|
return /* @__PURE__ */ jsx(Field$1.Root, { id: name, name, error, hint, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
506
535
|
/* @__PURE__ */ jsx(Field$1.Label, { action: labelAction, children: label }),
|
|
507
536
|
preset ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
508
537
|
/* @__PURE__ */ jsx(MemoizedGlobalStyling, {}),
|
|
509
|
-
/* @__PURE__ */ jsx(EditorLayout, { children: /* @__PURE__ */ jsx(CKEReact, {}) })
|
|
538
|
+
/* @__PURE__ */ jsx(EditorLayout, { children: /* @__PURE__ */ jsx(CKEReact, { ref: forwardedRef }) })
|
|
510
539
|
] }) : /* @__PURE__ */ jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }),
|
|
511
540
|
/* @__PURE__ */ jsx(Field$1.Hint, {}),
|
|
512
541
|
/* @__PURE__ */ jsx(Field$1.Error, {})
|
|
513
542
|
] }) });
|
|
514
|
-
}
|
|
543
|
+
});
|
|
515
544
|
const LoaderBox = styled(Box)`
|
|
516
545
|
display: flex;
|
|
517
546
|
justify-content: center;
|
|
@@ -519,38 +548,40 @@ const LoaderBox = styled(Box)`
|
|
|
519
548
|
height: 200px;
|
|
520
549
|
width: 100%;
|
|
521
550
|
`;
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
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
|
+
);
|
|
554
585
|
function compare(oldProps, newProps) {
|
|
555
586
|
return oldProps.error === newProps.error && oldProps.labelAction === newProps.labelAction;
|
|
556
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.
|
|
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",
|
|
@@ -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.
|
|
76
|
+
ckeditor5: "~45.2.0",
|
|
77
77
|
lodash: "4.17.21",
|
|
78
78
|
"sanitize-html": "2.13.0",
|
|
79
79
|
yup: "0.32.9"
|
|
@@ -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-
|
|
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.
|
|
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",
|
|
@@ -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.
|
|
98
|
+
ckeditor5: "~45.2.0",
|
|
99
99
|
lodash: "4.17.21",
|
|
100
100
|
"sanitize-html": "2.13.0",
|
|
101
101
|
yup: "0.32.9"
|
|
@@ -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-
|
|
1274
|
+
Input: async () => Promise.resolve().then(() => require("./Field-Bjfn0oud.js")).then((module2) => ({
|
|
1269
1275
|
default: module2.Field
|
|
1270
1276
|
}))
|
|
1271
1277
|
},
|
package/dist/admin/index.js
CHANGED
|
@@ -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-
|
|
4
|
+
const index = require("../_chunks/index-D48ig74s.js");
|
|
5
5
|
require("ckeditor5");
|
|
6
6
|
require("sanitize-html");
|
|
7
7
|
exports.StrapiMediaLib = index.StrapiMediaLib;
|
package/dist/admin/index.mjs
CHANGED
|
@@ -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
|
|
7
|
+
export declare const CKEReact: React.ForwardRefExoticComponent<React.RefAttributes<{
|
|
8
|
+
focus: () => void;
|
|
9
|
+
}>>;
|
|
@@ -15,6 +15,7 @@ type CKEditorFieldProps = Readonly<InputProps & FieldValue & {
|
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
}>;
|
|
18
|
-
declare
|
|
19
|
-
|
|
18
|
+
declare const MemoizedField: React.MemoExoticComponent<React.ForwardRefExoticComponent<CKEditorFieldProps & React.RefAttributes<{
|
|
19
|
+
focus: () => void;
|
|
20
|
+
}>>>;
|
|
20
21
|
export { MemoizedField as Field };
|
package/dist/server/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const name = "@_sh/strapi-plugin-ckeditor";
|
|
3
|
-
const version = "6.0.
|
|
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",
|
|
@@ -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.
|
|
70
|
+
ckeditor5: "~45.2.0",
|
|
71
71
|
lodash: "4.17.21",
|
|
72
72
|
"sanitize-html": "2.13.0",
|
|
73
73
|
yup: "0.32.9"
|
package/dist/server/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const name = "@_sh/strapi-plugin-ckeditor";
|
|
2
|
-
const version = "6.0.
|
|
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",
|
|
@@ -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.
|
|
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.
|
|
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",
|
|
@@ -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.
|
|
70
|
+
"ckeditor5": "~45.2.0",
|
|
71
71
|
"lodash": "4.17.21",
|
|
72
72
|
"sanitize-html": "2.13.0",
|
|
73
73
|
"yup": "0.32.9"
|