@_sh/strapi-plugin-ckeditor 6.0.3 → 7.1.0

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,150 +1,10 @@
1
1
  import * as yup from "yup";
2
+ import cloneDeep from "lodash/cloneDeep";
2
3
  import { css, styled } from "styled-components";
3
4
  import { Plugin, ButtonView, FileRepository, logWarning, Alignment, Autoformat, AutoImage, BalloonToolbar, BlockQuote, Bold, Code, CodeBlock, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, HorizontalLine, HtmlEmbed, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, List, ListProperties, Link, LinkImage, MediaEmbed, Paragraph, PageBreak, PasteFromOffice, PictureEditing, RemoveFormat, SourceEditing, SpecialCharacters, SpecialCharactersEssentials, Strikethrough, Style, Subscript, Superscript, ShowBlocks, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TodoList, Underline, WordCount, IconIndent, Markdown, TextTransformation } from "ckeditor5";
4
5
  import * as sanitizeHtml from "sanitize-html";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  import { Flex, lightTheme } from "@strapi/design-system";
7
- import cloneDeep from "lodash/cloneDeep";
8
- const name = "@_sh/strapi-plugin-ckeditor";
9
- const version = "6.0.3";
10
- const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
11
- const keywords = [
12
- "strapi",
13
- "ckeditor",
14
- "ckeditor5",
15
- "ckeditor 5",
16
- "wysiwyg",
17
- "rich text",
18
- "editor"
19
- ];
20
- const author = {
21
- name: "nshenderov"
22
- };
23
- const homepage = "https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor";
24
- const repository = {
25
- type: "git",
26
- url: "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
27
- };
28
- const strapi = {
29
- name: "ckeditor5",
30
- displayName: "CKEditor 5",
31
- description: "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)",
32
- kind: "plugin"
33
- };
34
- const type = "commonjs";
35
- const exports = {
36
- "./package.json": "./package.json",
37
- ".": {
38
- types: "./dist/admin/src/index.d.ts",
39
- source: "./admin/src/index.ts",
40
- "import": "./dist/admin/index.mjs",
41
- require: "./dist/admin/index.js",
42
- "default": "./dist/admin/index.js"
43
- },
44
- "./strapi-admin": {
45
- types: "./dist/admin/src/index.d.ts",
46
- source: "./admin/src/index.ts",
47
- "import": "./dist/admin/index.mjs",
48
- require: "./dist/admin/index.js",
49
- "default": "./dist/admin/index.js"
50
- },
51
- "./strapi-server": {
52
- types: "./dist/server/src/index.d.ts",
53
- source: "./server/src/index.ts",
54
- "import": "./dist/server/index.mjs",
55
- require: "./dist/server/index.js",
56
- "default": "./dist/server/index.js"
57
- }
58
- };
59
- const files = [
60
- "dist"
61
- ];
62
- const scripts = {
63
- build: "strapi-plugin build",
64
- watch: "strapi-plugin watch",
65
- "watch:link": "strapi-plugin watch:link",
66
- verify: "strapi-plugin verify",
67
- "test:ts:front": "run -T tsc -p admin/tsconfig.json",
68
- "test:ts:back": "run -T tsc -p server/tsconfig.json",
69
- release: "release-it",
70
- "release:info": "release-it --changelog"
71
- };
72
- const dependencies = {
73
- "@ckeditor/ckeditor5-react": "~9.5.0",
74
- "@strapi/design-system": "2.0.0-rc.18",
75
- "@strapi/icons": "2.0.0-rc.18",
76
- ckeditor5: "~45.2.0",
77
- lodash: "4.17.21",
78
- "sanitize-html": "2.13.0",
79
- yup: "0.32.9"
80
- };
81
- const devDependencies = {
82
- "@release-it/conventional-changelog": "10.0.0",
83
- "@strapi/sdk-plugin": "5.3.2",
84
- "@strapi/strapi": "5.11.0",
85
- "@strapi/typescript-utils": "5.11.0",
86
- "@types/react": "^18.3.12",
87
- "@types/react-dom": "^18.3.1",
88
- "@types/sanitize-html": "2.13.0",
89
- "@typescript-eslint/eslint-plugin": "7.0.0",
90
- "@typescript-eslint/parser": "7.0.0",
91
- eslint: "8.2.0",
92
- "eslint-config-airbnb": "19.0.4",
93
- "eslint-config-airbnb-typescript": "18.0.0",
94
- "eslint-config-prettier": "9.1.0",
95
- "eslint-plugin-import": "2.25.3",
96
- "eslint-plugin-jsx-a11y": "6.10.2",
97
- "eslint-plugin-prettier": "5.2.1",
98
- "eslint-plugin-react": "7.28.0",
99
- "eslint-plugin-react-hooks": "4.3.0",
100
- prettier: "3.4.0",
101
- react: "18.3.1",
102
- "react-dom": "18.3.1",
103
- "react-router-dom": "6.30.0",
104
- "release-it": "18.1.2",
105
- "styled-components": "6.1.15",
106
- typescript: "5.6.3"
107
- };
108
- const peerDependencies = {
109
- "@strapi/strapi": "^5.0.0",
110
- react: "^18.0.0",
111
- "react-dom": "^18.0.0",
112
- "react-router-dom": "^6.0.0",
113
- "styled-components": "^6.0.0"
114
- };
115
- const engines = {
116
- node: ">=18.0.0 <=22.x.x",
117
- npm: ">=6.0.0"
118
- };
119
- const license = "MIT";
120
- const pluginPkg = {
121
- name,
122
- version,
123
- description,
124
- keywords,
125
- author,
126
- homepage,
127
- repository,
128
- strapi,
129
- type,
130
- exports,
131
- files,
132
- scripts,
133
- dependencies,
134
- devDependencies,
135
- peerDependencies,
136
- engines,
137
- license
138
- };
139
- const PLUGIN_ID = pluginPkg.strapi.name;
140
- function isImageResponsive(imgFormats) {
141
- const formats = Object.keys(imgFormats);
142
- const isResponsive = !(formats.length === 1 && formats[0] === "thumbnail");
143
- return isResponsive;
144
- }
145
- function prefixFileUrlWithBackendUrl(fileURL) {
146
- return !!fileURL && fileURL.startsWith("/") ? `${window.strapi.backendURL}${fileURL}` : fileURL;
147
- }
148
8
  const colors = css`
149
9
  ${({ theme }) => css`
150
10
  :root {
@@ -162,7 +22,7 @@ const colors = css`
162
22
  --ck-color-base-focus: ${theme.colors.primary200};
163
23
  --ck-color-base-active: ${theme.colors.primary500}8F;
164
24
  --ck-color-base-active-focus: ${theme.colors.primary600};
165
- --ck-color-editor-base-text: ${theme.colors.neutral800};
25
+ --ck-content-font-color: ${theme.colors.neutral800};
166
26
  --ck-color-base-border: ${theme.colors.neutral200};
167
27
  --ck-color-base-background: ${theme.colors.neutral0};
168
28
  --ck-custom-foreground: ${theme.colors.neutral200};
@@ -248,8 +108,13 @@ const colors = css`
248
108
 
249
109
  /* -- Image ------------------------------------------------------------------------------- */
250
110
 
251
- --ck-color-image-caption-background: ${theme.colors.neutral100};
252
- --ck-color-image-caption-text: ${theme.colors.neutral800};
111
+ --ck-content-color-image-caption-background: ${theme.colors.neutral100};
112
+ --ck-content-color-image-caption-text: ${theme.colors.neutral800};
113
+
114
+ /* -- Table ------------------------------------------------------------------------------- */
115
+
116
+ --ck-content-color-table-caption-background: ${theme.colors.neutral100};
117
+ --ck-content-color-table-caption-text: ${theme.colors.neutral800};
253
118
 
254
119
  /* -- Widget ------------------------------------------------------------------------------ */
255
120
 
@@ -288,18 +153,18 @@ const dark = css`
288
153
  const reset = css`
289
154
  ${({ theme }) => css`
290
155
  .ck {
291
- --ck-color-image-caption-background: hsl(0, 0%, 97%);
292
- --ck-color-image-caption-text: hsl(0, 0%, 20%);
293
- --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
294
- --ck-color-mention-text: hsl(341, 100%, 30%);
156
+ --ck-content-color-image-caption-background: hsl(0, 0%, 97%);
157
+ --ck-content-color-image-caption-text: hsl(0, 0%, 20%);
158
+ --ck-content-color-mention-background: hsla(341, 100%, 30%, 0.1);
159
+ --ck-content-color-mention-text: hsl(341, 100%, 30%);
295
160
  --ck-color-table-caption-background: hsl(0, 0%, 97%);
296
161
  --ck-color-table-caption-text: hsl(0, 0%, 20%);
297
- --ck-highlight-marker-blue: hsl(201, 97%, 72%);
298
- --ck-highlight-marker-green: hsl(120, 93%, 68%);
299
- --ck-highlight-marker-pink: hsl(345, 96%, 73%);
300
- --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
301
- --ck-highlight-pen-green: hsl(112, 100%, 27%);
302
- --ck-highlight-pen-red: hsl(0, 85%, 49%);
162
+ --ck-content-highlight-marker-blue: hsl(201, 97%, 72%);
163
+ --ck-content-highlight-marker-green: hsl(120, 93%, 68%);
164
+ --ck-content-highlight-marker-pink: hsl(345, 96%, 73%);
165
+ --ck-content-highlight-marker-yellow: hsl(60, 97%, 73%);
166
+ --ck-content-highlight-pen-green: hsl(112, 100%, 27%);
167
+ --ck-content-highlight-pen-red: hsl(0, 85%, 49%);
303
168
  --ck-image-style-spacing: 1.5em;
304
169
  --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
305
170
  --ck-todo-list-checkmark-size: 16px;
@@ -316,7 +181,6 @@ const reset = css`
316
181
  --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial,
317
182
  sans-serif;
318
183
 
319
- color: var(--ck-color-editor-base-text);
320
184
  font-family: var(--ck-font-face);
321
185
 
322
186
  * {
@@ -324,41 +188,6 @@ const reset = css`
324
188
  margin: revert;
325
189
  }
326
190
 
327
- h1 {
328
- font-size: 2.3em;
329
- }
330
-
331
- h2 {
332
- font-size: 1.84em;
333
- }
334
-
335
- h3 {
336
- font-size: 1.48em;
337
- }
338
-
339
- h4 {
340
- font-size: 1.22em;
341
- }
342
-
343
- h5 {
344
- font-size: 1.06em;
345
- }
346
-
347
- h6 {
348
- font-size: 1em;
349
- }
350
-
351
- h1,
352
- h2,
353
- h3,
354
- h4,
355
- h5,
356
- h6 {
357
- line-height: 1.2em;
358
- padding-top: 0.8em;
359
- margin-bottom: 0.4em;
360
- }
361
-
362
191
  blockquote,
363
192
  ol,
364
193
  p,
@@ -370,9 +199,9 @@ const reset = css`
370
199
  }
371
200
 
372
201
  figcaption {
373
- background-color: var(--ck-color-image-caption-background);
202
+ background-color: var(--ck-content-color-image-caption-background);
374
203
  caption-side: bottom;
375
- color: var(--ck-color-image-caption-text);
204
+ color: var(--ck-content-color-image-caption-text);
376
205
  display: table-caption;
377
206
  font-size: 0.75em;
378
207
  outline-offset: -1px;
@@ -418,6 +247,11 @@ const reset = css`
418
247
  sup {
419
248
  vertical-align: super;
420
249
  }
250
+
251
+ .ck-input-text.raw-html-embed__source,
252
+ .ck-button.raw-html-embed__edit-button {
253
+ color: var(--ck-color-text);
254
+ }
421
255
  }
422
256
  `}
423
257
  `;
@@ -515,7 +349,7 @@ const plugin = css`
515
349
  }
516
350
 
517
351
  .ck.ck-editor__editable > .ck-placeholder::before {
518
- color: var(--ck-color-editor-base-text);
352
+ color: var(--ck-content-font-color);
519
353
  opacity: 0.65;
520
354
  }
521
355
 
@@ -634,6 +468,148 @@ class StrapiMediaLib extends Plugin {
634
468
  this.strapiToggle();
635
469
  }
636
470
  }
471
+ const name = "@_sh/strapi-plugin-ckeditor";
472
+ const version = "7.0.0";
473
+ const description = "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)";
474
+ const keywords = [
475
+ "strapi",
476
+ "ckeditor",
477
+ "ckeditor5",
478
+ "ckeditor 5",
479
+ "wysiwyg",
480
+ "rich text",
481
+ "editor"
482
+ ];
483
+ const author = {
484
+ name: "nshenderov"
485
+ };
486
+ const homepage = "https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor";
487
+ const repository = {
488
+ type: "git",
489
+ url: "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
490
+ };
491
+ const strapi = {
492
+ name: "ckeditor5",
493
+ displayName: "CKEditor 5",
494
+ description: "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community Edition)",
495
+ kind: "plugin"
496
+ };
497
+ const type = "commonjs";
498
+ const exports$1 = {
499
+ "./package.json": "./package.json",
500
+ ".": {
501
+ types: "./dist/admin/src/index.d.ts",
502
+ source: "./admin/src/index.ts",
503
+ "import": "./dist/admin/index.mjs",
504
+ require: "./dist/admin/index.js",
505
+ "default": "./dist/admin/index.js"
506
+ },
507
+ "./strapi-admin": {
508
+ types: "./dist/admin/src/index.d.ts",
509
+ source: "./admin/src/index.ts",
510
+ "import": "./dist/admin/index.mjs",
511
+ require: "./dist/admin/index.js",
512
+ "default": "./dist/admin/index.js"
513
+ },
514
+ "./strapi-server": {
515
+ types: "./dist/server/src/index.d.ts",
516
+ source: "./server/src/index.ts",
517
+ "import": "./dist/server/index.mjs",
518
+ require: "./dist/server/index.js",
519
+ "default": "./dist/server/index.js"
520
+ }
521
+ };
522
+ const files = [
523
+ "dist"
524
+ ];
525
+ const scripts = {
526
+ build: "strapi-plugin build",
527
+ watch: "strapi-plugin watch",
528
+ "watch:link": "strapi-plugin watch:link",
529
+ verify: "strapi-plugin verify",
530
+ "test:ts:front": "run -T tsc -p admin/tsconfig.json",
531
+ "test:ts:back": "run -T tsc -p server/tsconfig.json",
532
+ release: "release-it",
533
+ "release:info": "release-it --changelog",
534
+ "lint:ts": "eslint . --ext ts,tsx --report-unused-disable-directives",
535
+ "lint:ts:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix"
536
+ };
537
+ const dependencies = {
538
+ "@ckeditor/ckeditor5-react": "~11.0.1",
539
+ "@strapi/design-system": "2.1.2",
540
+ "@strapi/icons": "2.1.2",
541
+ ckeditor5: "~47.4.0",
542
+ lodash: "4.17.21",
543
+ "sanitize-html": "2.13.0",
544
+ yup: "0.32.9"
545
+ };
546
+ const devDependencies = {
547
+ "@release-it/conventional-changelog": "10.0.0",
548
+ "@strapi/sdk-plugin": "5.4.0",
549
+ "@strapi/strapi": "5.33.4",
550
+ "@strapi/typescript-utils": "5.33.4",
551
+ "@types/react": "^18.0.0",
552
+ "@types/react-dom": "^18.0.0",
553
+ "@types/sanitize-html": "^2.13.0",
554
+ "@typescript-eslint/eslint-plugin": "^7.0.0",
555
+ "@typescript-eslint/parser": "^7.0.0",
556
+ eslint: "^8.2.0",
557
+ "eslint-config-airbnb": "^19.0.4",
558
+ "eslint-config-airbnb-typescript": "^18.0.0",
559
+ "eslint-config-prettier": "^9.1.0",
560
+ "eslint-plugin-import": "^2.25.3",
561
+ "eslint-plugin-jsx-a11y": "^6.10.2",
562
+ "eslint-plugin-prettier": "^5.2.1",
563
+ "eslint-plugin-react": "^7.28.0",
564
+ "eslint-plugin-react-hooks": "^4.3.0",
565
+ prettier: "^3.4.0",
566
+ "release-it": "^18.1.2",
567
+ typescript: "5.6.3",
568
+ react: "^18.0.0",
569
+ "react-dom": "^18.0.0",
570
+ "react-router-dom": "^6.0.0",
571
+ "styled-components": "^6.0.0"
572
+ };
573
+ const peerDependencies = {
574
+ "@strapi/strapi": "^5.0.0",
575
+ react: "^18.0.0",
576
+ "react-dom": "^18.0.0",
577
+ "react-router-dom": "^6.0.0",
578
+ "styled-components": "^6.0.0"
579
+ };
580
+ const engines = {
581
+ node: ">=20.0.0 <=24.x.x",
582
+ npm: ">=6.0.0"
583
+ };
584
+ const license = "MIT";
585
+ const pluginPkg = {
586
+ name,
587
+ version,
588
+ description,
589
+ keywords,
590
+ author,
591
+ homepage,
592
+ repository,
593
+ strapi,
594
+ type,
595
+ exports: exports$1,
596
+ files,
597
+ scripts,
598
+ dependencies,
599
+ devDependencies,
600
+ peerDependencies,
601
+ engines,
602
+ license
603
+ };
604
+ const PLUGIN_ID = pluginPkg.strapi.name;
605
+ function isImageResponsive(imgFormats) {
606
+ const formats = Object.keys(imgFormats);
607
+ const isResponsive = !(formats.length === 1 && formats[0] === "thumbnail");
608
+ return isResponsive;
609
+ }
610
+ function prefixFileUrlWithBackendUrl(fileURL) {
611
+ return !!fileURL && fileURL.startsWith("/") ? `${window.strapi.backendURL}${fileURL}` : fileURL;
612
+ }
637
613
  class StrapiUploadAdapter extends Plugin {
638
614
  static get requires() {
639
615
  return [FileRepository];
@@ -1185,6 +1161,20 @@ function getPluginTheme() {
1185
1161
  function getPluginConfig() {
1186
1162
  return PLUGIN_CONFIG;
1187
1163
  }
1164
+ const clonedDefaultTheme = cloneDeep(defaultTheme);
1165
+ const clonedDefaultHtmlPreset = cloneDeep(defaultHtmlPreset);
1166
+ const clonedDefaultMarkdownPreset = cloneDeep(defaultMarkdownPreset);
1167
+ const exports = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1168
+ __proto__: null,
1169
+ StrapiMediaLib,
1170
+ StrapiUploadAdapter,
1171
+ defaultHtmlPreset: clonedDefaultHtmlPreset,
1172
+ defaultMarkdownPreset: clonedDefaultMarkdownPreset,
1173
+ defaultTheme: clonedDefaultTheme,
1174
+ getPluginPresets,
1175
+ getPluginTheme,
1176
+ setPluginConfig
1177
+ }, Symbol.toStringTag, { value: "Module" }));
1188
1178
  function CKEditorIcon() {
1189
1179
  return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(SvgIcon, {}) });
1190
1180
  }
@@ -1210,9 +1200,6 @@ const IconBox = styled(Flex)`
1210
1200
  background-color: ${lightTheme.colors.secondary100};
1211
1201
  border: 1px solid ${lightTheme.colors.secondary200};
1212
1202
  `;
1213
- const clonedDefaultTheme = cloneDeep(defaultTheme);
1214
- const clonedDefaultHtmlPreset = cloneDeep(defaultHtmlPreset);
1215
- const clonedDefaultMarkdownPreset = cloneDeep(defaultMarkdownPreset);
1216
1203
  const AVAILABLE_OPTIONS = [];
1217
1204
  function fillAvailableOptions() {
1218
1205
  const { presets } = getPluginConfig();
@@ -1235,6 +1222,12 @@ const index = {
1235
1222
  fillAvailableOptions();
1236
1223
  },
1237
1224
  async register(app) {
1225
+ app.registerPlugin({
1226
+ id: PLUGIN_ID,
1227
+ isReady: true,
1228
+ name: "CKEditor",
1229
+ apis: exports
1230
+ });
1238
1231
  app.customFields.register({
1239
1232
  name: "CKEditor",
1240
1233
  type: "richtext",
@@ -1249,7 +1242,7 @@ const index = {
1249
1242
  defaultMessage: "The advanced rich text editor. (Community Edition)"
1250
1243
  },
1251
1244
  components: {
1252
- Input: async () => import("./Field-C5uO1-1c.mjs").then((module) => ({
1245
+ Input: async () => import("./Field-C2N3FIDl.mjs").then((module) => ({
1253
1246
  default: module.Field
1254
1247
  }))
1255
1248
  },