Update to Strapi

Added new plugin
Added new RichText field that is easier to mod

config/ckeditor.txt

@@ -0,0 +1,169 @@
+globalThis.CKEditorConfig = {
+
+    /* By default configs and theme
+    objects will be spread with
+    default configs and theme
+    these two properties specified below
+    allow you to redefine
+    default objects completely: */
+
+    //configsOverwrite:true,
+    //themeOverwrite:true,
+
+    /* Here you can redefine default configs
+    or add completely new ones.
+    Each config includes: 
+    "styles", "field" and "editorConfig" properties.
+    Property "field" is required. */
+
+    configs:{
+        toolbar:{
+            // styles:``,
+            // field:{},
+            // editorConfig:{}
+        },
+        custom:{
+            
+            /* Styles for this specific editor.
+            This will be passed into the editor's parent container. */
+
+            styles:`
+            //     --ck-focus-ring:3px dashed #5CB176;
+
+            //     .ck.ck-content.ck-editor__editable {
+            //       &.ck-focused:not(.ck-editor__nested-editable) {
+            //         border: var(--ck-focus-ring) !important;
+            //       }
+            //     }
+            //     .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
+            //       min-height: 400px;
+            //       max-height: 400px;
+            //     }
+            //     .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
+            //       min-height: 400px;
+            //       max-height: 1700px;
+            //     }
+            `,
+
+            /* Custom field option */
+            field: {
+                key: "custom",
+                value: "custom",
+                metadatas: {
+                  intlLabel: {
+                    id: "ckeditor5.preset.custom.label",
+                    defaultMessage: "Custom version",
+                  },
+                },
+            },
+            /* CKEditor configuration */
+            editorConfig:{
+                /* All available built-in plugins
+                you can find in admin/src/components/Input/CKEditor/configs/base.js */
+                plugins: [
+                    CKEditor5.autoformat.Autoformat,
+                    CKEditor5.basicStyles.Bold,
+                    CKEditor5.basicStyles.Italic,
+                    CKEditor5.essentials.Essentials,
+                    CKEditor5.heading.Heading,
+                    CKEditor5.image.Image,
+                    CKEditor5.image.ImageCaption,
+                    CKEditor5.image.ImageStyle,
+                    CKEditor5.image.ImageToolbar,
+                    CKEditor5.image.ImageUpload,
+                    CKEditor5.indent.Indent,
+                    CKEditor5.link.Link,
+                    CKEditor5.list.List,
+                    CKEditor5.paragraph.Paragraph,
+                    CKEditor5.pasteFromOffice.PasteFromOffice,
+                    CKEditor5.sourceEditing.SourceEditing,
+                    CKEditor5.table.Table,
+                    CKEditor5.table.TableToolbar,
+                    CKEditor5.table.TableColumnResize,
+                    CKEditor5.table.TableCaption,
+                    CKEditor5.strapiPlugins.StrapiMediaLib,
+                    CKEditor5.strapiPlugins.StrapiUploadAdapter,
+                  ],
+
+                  /* By default, for plugin's UI will use
+                  the language defined in this file
+                  or the preferred language from strapi's user config
+                  and 'en' as a fallback.
+                  language.ui -> preferred language -> 'en' */
+
+                  /* For content it will use language based on i18n (if! ignorei18n)
+                  or language.content defined here
+                  and it will use UI language as a fallback.
+                  ignorei18n ? language.content : i18n; -> language.ui */
+
+                  language:{
+                    // ignorei18n: true,
+                    // ui:'he',
+                    // content:'he'
+                  },
+                  toolbar: [
+                    'heading',
+                    '|',
+                    'bold', 'italic', 'link', 'bulletedList', 'numberedList',
+                    '|',
+                    'uploadImage', 'strapiMediaLib', 'insertTable',
+                    '|',
+                    'sourceEditing',
+                    '|',
+                    'undo', 'redo'
+                  ],
+                  link : {
+                    addTargetToExternalLinks: true,
+                    decorators: [
+                        {
+                          mode: 'manual',
+                          label: 'External Link',
+                          attributes: {
+                              target: '_blank',
+                          }
+                        }
+                    ]
+                  },
+                  heading: {
+                    options: [
+                      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+                      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+                      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+                      { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+                      { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+                    ]
+                  },
+                  image: {
+                    toolbar: [
+                      'imageStyle:inline',
+                      'imageStyle:block',
+                      'imageStyle:side',
+                      '|',
+                      'toggleImageCaption',
+                      'imageTextAlternative'
+                    ]
+                  },
+                  table: {
+                    contentToolbar: [
+                      'tableColumn',
+                      'tableRow',
+                      'mergeTableCells',
+                      '|',
+                      'toggleTableCaption'
+                    ]
+                  }
+                  
+            }
+        }
+    },
+
+    /* Here you can customize the plugin's theme.
+    This will be passed as "createGlobalStyle". */
+    theme:{
+        // common:``,
+        // light:``,
+        // dark:``,
+        // additional:``
+    }
+
+}

config/plugins.js

@@ -1,5 +1,7 @@
 module.exports = () => {
     return {
-        ckeditor: true
+        ckeditor5: {
+            enabled: true,
+          },
     }
 }

package.json

@@ -10,7 +10,7 @@
     "strapi": "strapi"
   },
   "dependencies": {
-    "@_sh/strapi-plugin-ckeditor": "^1.1.0",
+    "@_sh/strapi-plugin-ckeditor": "^2.0.4",
     "@strapi/plugin-documentation": "^4.10.5",
     "@strapi/plugin-i18n": "4.10.5",
     "@strapi/plugin-users-permissions": "4.10.5",
@@ -19,7 +19,8 @@
     "mysql": "^2.18.1",
     "strapi-plugin-local-image-sharp": "^1.6.0",
     "strapi-plugin-menus": "^0.3.2",
-    "strapi-plugin-navigation": "^2.0.13"
+    "strapi-plugin-navigation": "^2.0.13",
+    "strapi-plugin-responsive-image": "^1.1.0"
   },
   "author": {
     "name": "A Strapi developer"

src/api/article/content-types/article/schema.json

@@ -56,6 +56,13 @@
     "FeaturedImageCaption": {
       "type": "string",
       "required": true
+    },
+    "FullBody": {
+      "type": "customField",
+      "options": {
+        "preset": "custom"
+      },
+      "customField": "plugin::ckeditor5.CKEditor"
     }
   }
 }

src/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-05-20T09:26:46.253Z"
+    "x-generation-date": "2023-08-02T11:17:41.584Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
@@ -39,6 +39,13 @@
     }
   ],
   "components": {
+    "securitySchemes": {
+      "bearerAuth": {
+        "type": "http",
+        "scheme": "bearer",
+        "bearerFormat": "JWT"
+      }
+    },
     "schemas": {
       "Error": {
         "type": "object",
@@ -148,6 +155,9 @@
               },
               "FeaturedImageCaption": {
                 "type": "string"
+              },
+              "FullBody": {
+                "type": "string"
               }
             }
           }
@@ -1299,6 +1309,9 @@
                                       "FeaturedImageCaption": {
                                         "type": "string"
                                       },
+                                      "FullBody": {
+                                        "type": "string"
+                                      },
                                       "createdAt": {
                                         "type": "string",
                                         "format": "date-time"
@@ -1437,6 +1450,9 @@
           "FeaturedImageCaption": {
             "type": "string"
           },
+          "FullBody": {
+            "type": "string"
+          },
           "createdAt": {
             "type": "string",
             "format": "date-time"
@@ -8236,6 +8252,9 @@
                                       "FeaturedImageCaption": {
                                         "type": "string"
                                       },
+                                      "FullBody": {
+                                        "type": "string"
+                                      },
                                       "createdAt": {
                                         "type": "string",
                                         "format": "date-time"
@@ -9530,6 +9549,9 @@
                         "FeaturedImageCaption": {
                           "type": "string"
                         },
+                        "FullBody": {
+                          "type": "string"
+                        },
                         "createdAt": {
                           "type": "string",
                           "format": "date-time"

src/extensions/upload/strapi-server.js

@@ -0,0 +1,7 @@
+const imageManipulation = require("strapi-plugin-responsive-image/server/services/image-manipulation");
+
+module.exports = (plugin) => {
+  plugin.services["image-manipulation"] = imageManipulation;
+
+  return plugin;
+};