@_sh/strapi-plugin-ckeditor 3.0.5 → 3.0.7

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/README.md CHANGED
@@ -34,26 +34,16 @@
34
34
 
35
35
 
36
36
  ## <a id="installation"></a>🔧 Installation
37
- ___
37
+
38
38
 
39
39
  Add the package to your Strapi application:
40
40
 
41
41
  ```bash
42
- npm install @_sh/strapi-plugin-ckeditor
42
+ yarn add @_sh/strapi-plugin-ckeditor@strapi-v4-latest
43
43
  ```
44
44
 
45
- or
46
-
47
- ```bash
48
- yarn add @_sh/strapi-plugin-ckeditor
49
- ```
45
+ Then, build the app:
50
46
 
51
- Then build the app:
52
- ```bash
53
- npm run build
54
- ```
55
-
56
- or
57
47
  ```bash
58
48
  yarn build
59
49
  ```
@@ -74,21 +64,19 @@ yarn build
74
64
  </details>
75
65
 
76
66
  ## <a id="configuration"></a>⚙️ Configuration
77
- ___
67
+
78
68
 
79
69
  > It is highly recommended to explore [**the official CKEditor5 documentation**](https://ckeditor.com/docs/ckeditor5/latest/features/index.html) and [**the Strapi Custom Field API**](https://docs.strapi.io/developer-docs/latest/development/custom-fields.html#registering-a-custom-field-on-the-server)
80
70
  >
81
71
  > To display content from external sources, such as images or videos, in your admin panel, you need to configure your `middlewares.js` file. [**Check the official documentation for details.**](https://docs.strapi.io/dev-docs/configurations/middlewares#security)
82
72
 
83
- The plugin configuration should be defined in `your-app/config/ckeditor.js|ts`
84
-
85
- By default, the plugin provides one preset, which can be modified in the config file.
73
+ The plugin configuration should be defined in `your-app/config/ckeditor.js` or in `ckeditor.ts` if you are using TypeScript in your project.
86
74
 
87
- You can also add new presets in the config file.
75
+ By default, the plugin provides one default preset that can be modified in the config file, and you can expand the preset set as needed.
88
76
 
89
- The plugin exposes all CKEditor packages to the global variable SH_CKE.
77
+ The plugin exposes all default CKEditor packages to the global variable `SH_CKE`.
90
78
 
91
- The config file must define a function called CKEConfig that returns the configuration object.
79
+ The config file must define a function called `CKEConfig` that returns the configuration object.
92
80
 
93
81
  The structure of the configuration object is as follows:
94
82
 
@@ -103,7 +91,7 @@ The structure of the configuration object is as follows:
103
91
  editorConfig:{...},
104
92
  },
105
93
  ...
106
- }
94
+ },
107
95
  theme:{
108
96
  common:string,
109
97
  light:string,
@@ -148,100 +136,116 @@ language:{
148
136
  The language determination follows this logic:
149
137
 
150
138
  - Plugin UI language:
151
- `language.ui -> preferred language -> 'en'`
139
+ `language.ui || strapi admin preferred language || 'en'`
152
140
 
153
141
  - Content language:
154
- `ignorei18n ? language.content : i18n -> language.ui`
142
+ `(ignorei18n ? language.content : i18n) || language.ui`
143
+
144
+ ### Configuration examples
155
145
 
156
- **Example of adding a new editor configuration:**
146
+ Adding a new preset:
157
147
 
158
148
  <details>
159
149
  <summary><b>ckeditor.js</b></summary>
160
150
 
161
151
  ```js
162
152
  const CKEConfig = () => ({
163
- presets:{
164
- myCustomPreset:{
165
- field: {
166
- key: "myCustomPreset",
167
- value: "myCustomPreset",
168
- metadatas: {
169
- intlLabel: {
170
- id: "ckeditor5.preset.myCustomPreset.label",
171
- defaultMessage: "My custom preset",
172
- },
173
- },
174
- },
175
- editorConfig:{
176
- plugins: [
177
- SH_CKE.Autoformat,
178
- SH_CKE.Bold,
179
- SH_CKE.Italic,
180
- SH_CKE.Essentials,
181
- SH_CKE.Heading,
182
- SH_CKE.Image,
183
- SH_CKE.ImageCaption,
184
- SH_CKE.ImageStyle,
185
- SH_CKE.ImageToolbar,
186
- SH_CKE.ImageUpload,
187
- SH_CKE.Indent,
188
- SH_CKE.Link,
189
- SH_CKE.List,
190
- SH_CKE.Paragraph,
191
- SH_CKE.PasteFromOffice,
192
- SH_CKE.Table,
193
- SH_CKE.TableToolbar,
194
- SH_CKE.TableColumnResize,
195
- SH_CKE.TableCaption,
196
- SH_CKE.StrapiMediaLib,
197
- SH_CKE.StrapiUploadAdapter,
198
- ],
199
- toolbar: [
200
- 'heading',
201
- '|',
202
- 'bold', 'italic', 'link', 'bulletedList', 'numberedList',
203
- '|',
204
- 'strapiMediaLib', 'insertTable',
205
- '|',
206
- 'undo', 'redo'
207
- ],
208
- heading: {
209
- options: [
210
- { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
211
- { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
212
- { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
213
- { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
214
- { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
215
- ]
216
- },
217
- image: {
218
- toolbar: [
219
- 'imageStyle:inline',
220
- 'imageStyle:block',
221
- 'imageStyle:side',
222
- '|',
223
- 'toggleImageCaption',
224
- 'imageTextAlternative'
225
- ]
153
+ presets: {
154
+ markdown:{
155
+ field: {
156
+ key: "markdown",
157
+ value: "markdown",
158
+ metadatas: {
159
+ intlLabel: {
160
+ id: "ckeditor.preset.markdown.label",
161
+ defaultMessage: "Markdown output",
226
162
  },
227
- table: {
228
- contentToolbar: [
229
- 'tableColumn',
230
- 'tableRow',
231
- 'mergeTableCells',
232
- '|',
233
- 'toggleTableCaption'
234
- ]
235
- }
236
- }
237
- }
163
+ },
164
+ },
165
+ editorConfig:{
166
+ placeholder: 'Markdown editor',
167
+ plugins: [
168
+ globalThis.SH_CKE.Essentials,
169
+ globalThis.SH_CKE.Autoformat,
170
+ globalThis.SH_CKE.BlockQuote,
171
+ globalThis.SH_CKE.Bold,
172
+ globalThis.SH_CKE.Heading,
173
+ globalThis.SH_CKE.Image,
174
+ globalThis.SH_CKE.ImageCaption,
175
+ globalThis.SH_CKE.ImageStyle,
176
+ globalThis.SH_CKE.ImageToolbar,
177
+ globalThis.SH_CKE.ImageUpload,
178
+ globalThis.SH_CKE.Indent,
179
+ globalThis.SH_CKE.Italic,
180
+ globalThis.SH_CKE.Link,
181
+ globalThis.SH_CKE.List,
182
+ globalThis.SH_CKE.MediaEmbed,
183
+ globalThis.SH_CKE.Paragraph,
184
+ globalThis.SH_CKE.Table,
185
+ globalThis.SH_CKE.TableToolbar,
186
+ globalThis.SH_CKE.SourceEditing,
187
+ globalThis.SH_CKE.StrapiMediaLib,
188
+ globalThis.SH_CKE.StrapiUploadAdapter,
189
+ globalThis.SH_CKE.Markdown,
190
+ globalThis.SH_CKE.Code,
191
+ globalThis.SH_CKE.CodeBlock,
192
+ globalThis.SH_CKE.TodoList,
193
+ globalThis.SH_CKE.Strikethrough,
194
+ globalThis.SH_CKE.HorizontalLine
195
+ ],
196
+ toolbar: {
197
+ items: [
198
+ 'heading',
199
+ '|',
200
+ 'bold',
201
+ 'italic',
202
+ 'strikethrough',
203
+ 'link',
204
+ '|',
205
+ 'bulletedList',
206
+ 'numberedList',
207
+ 'todoList',
208
+ '|',
209
+ 'code',
210
+ 'codeBlock',
211
+ '|',
212
+ 'uploadImage',
213
+ 'strapiMediaLib',
214
+ 'blockQuote',
215
+ 'horizontalLine',
216
+ '-',
217
+ 'sourceEditing',
218
+ '|',
219
+ 'outdent',
220
+ 'indent',
221
+ '|',
222
+ 'undo',
223
+ 'redo'
224
+ ],
225
+ shouldNotGroupWhenFull: true
226
+ },
227
+ image: {
228
+ toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
229
+ },
230
+ codeBlock: {
231
+ languages: [
232
+ { language: 'css', label: 'CSS' },
233
+ { language: 'html', label: 'HTML' },
234
+ { language: 'javascript', label: 'JavaScript' },
235
+ { language: 'php', label: 'PHP' }
236
+ ]
237
+ },
238
+ }
239
+ },
238
240
  }
239
241
  })
240
242
  ```
241
243
 
242
244
  </details>
243
245
 
244
- **Example of changing buttons, modifying the plugin list, and adding styles in the default preset:**
246
+ ---
247
+
248
+ Changing toolbar buttons, modifying the plugin list, adding styles to the default preset:
245
249
 
246
250
  <details>
247
251
  <summary><b>ckeditor.js</b></summary>
@@ -269,19 +273,19 @@ const CKEConfig = () => ({
269
273
  `,
270
274
  editorConfig:{
271
275
  plugins: [
272
- SH_CKE.Bold,
273
- SH_CKE.Italic,
274
- SH_CKE.Essentials,
275
- SH_CKE.Heading,
276
- SH_CKE.Image,
277
- SH_CKE.ImageCaption,
278
- SH_CKE.ImageStyle,
279
- SH_CKE.ImageToolbar,
280
- SH_CKE.Link,
281
- SH_CKE.List,
282
- SH_CKE.Paragraph,
283
- SH_CKE.StrapiMediaLib,
284
- SH_CKE.StrapiUploadAdapter,
276
+ globalThis.SH_CKE.Bold,
277
+ globalThis.SH_CKE.Italic,
278
+ globalThis.SH_CKE.Essentials,
279
+ globalThis.SH_CKE.Heading,
280
+ globalThis.SH_CKE.Image,
281
+ globalThis.SH_CKE.ImageCaption,
282
+ globalThis.SH_CKE.ImageStyle,
283
+ globalThis.SH_CKE.ImageToolbar,
284
+ globalThis.SH_CKE.Link,
285
+ globalThis.SH_CKE.List,
286
+ globalThis.SH_CKE.Paragraph,
287
+ globalThis.SH_CKE.StrapiMediaLib,
288
+ globalThis.SH_CKE.StrapiUploadAdapter,
285
289
  ],
286
290
  toolbar: [
287
291
  'heading',
@@ -300,17 +304,15 @@ const CKEConfig = () => ({
300
304
 
301
305
  </details>
302
306
 
307
+ ---
303
308
 
304
309
  > 📂 Default preset: [**admin/src/Input/presets/default.js**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/3.x.x/admin/src/Input/presets/default.js)
305
310
  >
306
311
  > 📂 Default theme: [**admin/src/Input/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/3.x.x/admin/src/Input/theme)
307
312
 
313
+ ### Adding plugins
308
314
 
309
- ## Adding plugins
310
-
311
- ___
312
-
313
- Your plugin must be available in the `global`.
315
+ Your plugin must be available in the `global` object.
314
316
 
315
317
  **Example of adding the Timestamp plugin:**
316
318
 
@@ -319,14 +321,14 @@ Your plugin must be available in the `global`.
319
321
  ```js
320
322
  // your-app/src/admin/timestamp.js
321
323
 
322
- class Timestamp extends SH_CKE.Plugin {
324
+ class Timestamp extends globalThis.SH_CKE.Plugin {
323
325
  init() {
324
326
  const editor = this.editor;
325
327
  // The button must be registered among the UI components of the editor
326
328
  // to be displayed in the toolbar.
327
329
  editor.ui.componentFactory.add( 'timestamp', () => {
328
330
  // The button will be an instance of ButtonView.
329
- const button = new SH_CKE.ButtonView();
331
+ const button = new globalThis.SH_CKE.ButtonView();
330
332
 
331
333
  button.set( {
332
334
  label: 'Timestamp',
@@ -394,28 +396,28 @@ const CKEConfig = () => ({
394
396
  },
395
397
  editorConfig:{
396
398
  plugins: [
397
- Timestamp,
398
- SH_CKE.Autoformat,
399
- SH_CKE.Bold,
400
- SH_CKE.Italic,
401
- SH_CKE.Essentials,
402
- SH_CKE.Heading,
403
- SH_CKE.Image,
404
- SH_CKE.ImageCaption,
405
- SH_CKE.ImageStyle,
406
- SH_CKE.ImageToolbar,
407
- SH_CKE.ImageUpload,
408
- SH_CKE.Indent,
409
- SH_CKE.Link,
410
- SH_CKE.List,
411
- SH_CKE.Paragraph,
412
- SH_CKE.PasteFromOffice,
413
- SH_CKE.Table,
414
- SH_CKE.TableToolbar,
415
- SH_CKE.TableColumnResize,
416
- SH_CKE.TableCaption,
417
- SH_CKE.StrapiMediaLib,
418
- SH_CKE.StrapiUploadAdapter,
399
+ globalThis.Timestamp,
400
+ globalThis.SH_CKE.Autoformat,
401
+ globalThis.SH_CKE.Bold,
402
+ globalThis.SH_CKE.Italic,
403
+ globalThis.SH_CKE.Essentials,
404
+ globalThis.SH_CKE.Heading,
405
+ globalThis.SH_CKE.Image,
406
+ globalThis.SH_CKE.ImageCaption,
407
+ globalThis.SH_CKE.ImageStyle,
408
+ globalThis.SH_CKE.ImageToolbar,
409
+ globalThis.SH_CKE.ImageUpload,
410
+ globalThis.SH_CKE.Indent,
411
+ globalThis.SH_CKE.Link,
412
+ globalThis.SH_CKE.List,
413
+ globalThis.SH_CKE.Paragraph,
414
+ globalThis.SH_CKE.PasteFromOffice,
415
+ globalThis.SH_CKE.Table,
416
+ globalThis.SH_CKE.TableToolbar,
417
+ globalThis.SH_CKE.TableColumnResize,
418
+ globalThis.SH_CKE.TableCaption,
419
+ globalThis.SH_CKE.StrapiMediaLib,
420
+ globalThis.SH_CKE.StrapiUploadAdapter,
419
421
  ],
420
422
  toolbar: [
421
423
  'timestamp',
@@ -440,30 +442,24 @@ const CKEConfig = () => ({
440
442
 
441
443
  4. Then rebuild the application:
442
444
  ```bash
443
- npm run build
444
- ```
445
-
446
- or
447
- ```bash
448
445
  yarn build
449
446
  ```
450
447
 
451
-
452
- **Alternatively, you can define your plugin like this:**
448
+ **💡 Alternatively, you can define your plugin like this:**
453
449
 
454
450
  <details>
455
451
  <summary><b>ckeditor.js</b></summary>
456
452
 
457
453
  ```js
458
454
  const CKEConfig = () => {
459
- class Timestamp extends SH_CKE.Plugin {
455
+ class Timestamp extends globalThis.SH_CKE.Plugin {
460
456
  init() {
461
457
  const editor = this.editor;
462
458
  // The button must be registered among the UI components of the editor
463
459
  // to be displayed in the toolbar.
464
460
  editor.ui.componentFactory.add("timestamp", () => {
465
461
  // The button will be an instance of ButtonView.
466
- const button = new SH_CKE.ButtonView();
462
+ const button = new globalThis.SH_CKE.ButtonView();
467
463
 
468
464
  button.set({
469
465
  label: "Timestamp",
@@ -502,27 +498,27 @@ const CKEConfig = () => {
502
498
  editorConfig:{
503
499
  plugins: [
504
500
  Timestamp,
505
- SH_CKE.Autoformat,
506
- SH_CKE.Bold,
507
- SH_CKE.Italic,
508
- SH_CKE.Essentials,
509
- SH_CKE.Heading,
510
- SH_CKE.Image,
511
- SH_CKE.ImageCaption,
512
- SH_CKE.ImageStyle,
513
- SH_CKE.ImageToolbar,
514
- SH_CKE.ImageUpload,
515
- SH_CKE.Indent,
516
- SH_CKE.Link,
517
- SH_CKE.List,
518
- SH_CKE.Paragraph,
519
- SH_CKE.PasteFromOffice,
520
- SH_CKE.Table,
521
- SH_CKE.TableToolbar,
522
- SH_CKE.TableColumnResize,
523
- SH_CKE.TableCaption,
524
- SH_CKE.StrapiMediaLib,
525
- SH_CKE.StrapiUploadAdapter,
501
+ globalThis.SH_CKE.Autoformat,
502
+ globalThis.SH_CKE.Bold,
503
+ globalThis.SH_CKE.Italic,
504
+ globalThis.SH_CKE.Essentials,
505
+ globalThis.SH_CKE.Heading,
506
+ globalThis.SH_CKE.Image,
507
+ globalThis.SH_CKE.ImageCaption,
508
+ globalThis.SH_CKE.ImageStyle,
509
+ globalThis.SH_CKE.ImageToolbar,
510
+ globalThis.SH_CKE.ImageUpload,
511
+ globalThis.SH_CKE.Indent,
512
+ globalThis.SH_CKE.Link,
513
+ globalThis.SH_CKE.List,
514
+ globalThis.SH_CKE.Paragraph,
515
+ globalThis.SH_CKE.PasteFromOffice,
516
+ globalThis.SH_CKE.Table,
517
+ globalThis.SH_CKE.TableToolbar,
518
+ globalThis.SH_CKE.TableColumnResize,
519
+ globalThis.SH_CKE.TableCaption,
520
+ globalThis.SH_CKE.StrapiMediaLib,
521
+ globalThis.SH_CKE.StrapiUploadAdapter,
526
522
  ],
527
523
  toolbar: [
528
524
  'timestamp',
@@ -545,6 +541,7 @@ const CKEConfig = () => {
545
541
  </details>
546
542
 
547
543
 
544
+
548
545
  ## <a id="contributing"></a>🛠 Contributing
549
546
  ___
550
547
 
@@ -599,6 +596,7 @@ yarn build
599
596
  yarn develop
600
597
  ```
601
598
 
599
+
602
600
  ## <a id="migration"></a>✈️ Migration
603
601
 
604
602
  ### From v2 to v3
@@ -633,27 +631,27 @@ const CKEConfig = () => ({
633
631
  },
634
632
  editorConfig:{
635
633
  plugins: [
636
- SH_CKE.Autoformat,
637
- SH_CKE.Bold,
638
- SH_CKE.Italic,
639
- SH_CKE.Essentials,
640
- SH_CKE.Heading,
641
- SH_CKE.Image,
642
- SH_CKE.ImageCaption,
643
- SH_CKE.ImageStyle,
644
- SH_CKE.ImageToolbar,
645
- SH_CKE.ImageUpload,
646
- SH_CKE.Indent,
647
- SH_CKE.Link,
648
- SH_CKE.List,
649
- SH_CKE.Paragraph,
650
- SH_CKE.PasteFromOffice,
651
- SH_CKE.Table,
652
- SH_CKE.TableToolbar,
653
- SH_CKE.TableColumnResize,
654
- SH_CKE.TableCaption,
655
- SH_CKE.StrapiMediaLib,
656
- SH_CKE.StrapiUploadAdapter,
634
+ globalThis.SH_CKE.Autoformat,
635
+ globalThis.SH_CKE.Bold,
636
+ globalThis.SH_CKE.Italic,
637
+ globalThis.SH_CKE.Essentials,
638
+ globalThis.SH_CKE.Heading,
639
+ globalThis.SH_CKE.Image,
640
+ globalThis.SH_CKE.ImageCaption,
641
+ globalThis.SH_CKE.ImageStyle,
642
+ globalThis.SH_CKE.ImageToolbar,
643
+ globalThis.SH_CKE.ImageUpload,
644
+ globalThis.SH_CKE.Indent,
645
+ globalThis.SH_CKE.Link,
646
+ globalThis.SH_CKE.List,
647
+ globalThis.SH_CKE.Paragraph,
648
+ globalThis.SH_CKE.PasteFromOffice,
649
+ globalThis.SH_CKE.Table,
650
+ globalThis.SH_CKE.TableToolbar,
651
+ globalThis.SH_CKE.TableColumnResize,
652
+ globalThis.SH_CKE.TableCaption,
653
+ globalThis.SH_CKE.StrapiMediaLib,
654
+ globalThis.SH_CKE.StrapiUploadAdapter,
657
655
  ],
658
656
  toolbar: [
659
657
  'heading',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@_sh/strapi-plugin-ckeditor",
3
- "version": "3.0.5",
3
+ "version": "3.0.7",
4
4
  "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
5
5
  "private": false,
6
6
  "keywords": [
@@ -25,8 +25,8 @@
25
25
  "strapi-server.js"
26
26
  ],
27
27
  "dependencies": {
28
- "ckeditor5": "^43.1.0",
29
- "@ckeditor/ckeditor5-react": "^9.1.0",
28
+ "ckeditor5": "^43.2.0",
29
+ "@ckeditor/ckeditor5-react": "^9.3.1",
30
30
  "@strapi/design-system": "^1.19.0",
31
31
  "prop-types": "^15.8.1",
32
32
  "sanitize-html": "^2.13.0"
@@ -1,25 +1,43 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- const fs = require("fs");
3
+ const fs = require('fs');
4
4
 
5
5
  module.exports = ({ strapi }) => {
6
+ const readConfigFile = () => {
7
+ const appDir = process.cwd();
8
+ const isTSProject = fs.existsSync(`${appDir}/dist`);
9
+ const envName = process.env.NODE_ENV;
10
+
11
+ const cfgDir = isTSProject ? `${appDir}/dist/config` : `${appDir}/config`;
12
+ const cfgFileName = 'ckeditor.js';
13
+
14
+ const envFilePath = `${cfgDir}/env/${envName}/${cfgFileName}`;
15
+ const baseFilePath = `${cfgDir}/${cfgFileName}`;
16
+
17
+ if (fs.existsSync(envFilePath)) {
18
+ return fs.readFileSync(envFilePath, 'utf8');
19
+ } else if (fs.existsSync(baseFilePath)) {
20
+ return fs.readFileSync(baseFilePath, 'utf8');
21
+ } else {
22
+ return null;
23
+ }
24
+ };
25
+
26
+ const trimConfig = (str) => {
27
+ for (const func of ['const CKEConfig', 'function CKEConfig']) {
28
+ const idx = str.indexOf(func);
29
+ if (idx >= 0) {
30
+ return str.substring(idx) + `\nglobalThis.SH_CKE_CONFIG = CKEConfig()`;
31
+ }
32
+ }
33
+ };
34
+
6
35
  return {
7
36
  getConfig() {
8
- const appDir = process.cwd();
9
-
10
- const fileName = "ckeditor";
11
-
12
- for (const ext of ["js", "ts"]) {
13
- const filePath = `${appDir}/config/${fileName}.${ext}`;
14
- if (fs.existsSync(filePath)) {
15
- return (
16
- fs.readFileSync(filePath, "utf8") +
17
- `\nglobalThis.SH_CKE_CONFIG = CKEConfig()`
18
- );
19
- }
20
- }
37
+ const configFileContent = readConfigFile();
38
+ const config = configFileContent && trimConfig(configFileContent);
21
39
 
22
- return `globalThis.SH_CKE_CONFIG = null`;
40
+ return config || `globalThis.SH_CKE_CONFIG = null`;
23
41
  },
24
42
  };
25
43
  };