@_sh/strapi-plugin-ckeditor 4.0.11 → 5.0.1

package/README.md

@@ -1,40 +1,41 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/ckeditor5_2_0.png" width="700" />
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-head.png"/>
 </p>
 
-<h1 align="center">CKEditor 5 for Strapi</h1>
+<h1 align="center">Strapi ➕ CKEditor</h1>
 
-<p align="center">Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)</p>
+<p align="center">Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community edition)</p>
 
 ## 👋 Get Started
 
-* [Features](#features)
-* [Installation](#installation)
-* [Usage](#usage)
-* [Configuration](#configuration)
-* [Contributing](#contributing)
-* [Migration](#migration)
-* [Requirements](#requirements)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [Contributing](#contributing)
+- [Migration](#migration)
+- [Requirements](#requirements)
 
 ## <a id="features"></a>✨ Features
 
-* **Media library integration**
-* **Responsive images support**
-* **Strapi theme switching support**
-* **Supports custom styles for the editor**
-* **Supports i18n and different UI translations**
-* **Allows custom editor configrations**
-* **Plugins extensibility**
+- **Extensive configuration**
+- **Media Library integration**
+- **Dark theme support**
+- **Fullscreen expansion**
+- **Responsive images support**
+- **Automatic UI translations**
+- **i18n support**
+- **Self-Hosted**
 
 <p align="right">
     <a href="https://www.buymeacoffee.com/nshenderov" target="_blank">
-        <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;max-width: 217px !important;" >
+        <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px; width: 217px;" >
     </a>
 </p>
 
-
 ## <a id="installation"></a>🔧 Installation
 
+**Strapi v5:**
 
 Add the package to your Strapi application:
 
@@ -42,683 +43,695 @@ Add the package to your Strapi application:
 yarn add @_sh/strapi-plugin-ckeditor
 ```
 
-For Strapi v4:
-```bash
-yarn add @_sh/strapi-plugin-ckeditor@strapi-v4-latest
-```
-
 Then, build the app:
 
 ```bash
 yarn build
 ```
 
+**Strapi v4:**
+
+Version 3 of the plugin will remain available for Strapi v4 until March 2026.
+Refer to the [**v3 installation guide**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/3.x.x/README.md#installation)
+for setup instructions.
+
+> Note: Version 3 receives only essential bug fixes. The configuration process and available
+> features in version 3 differ significantly from the latest plugin versions.
+
 ## <a id="usage"></a>✍️ Usage
 
+The field can be found in the Content-Type Builder under the `CUSTOM` tab:
+
 <p align="center">
-  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide.gif" width="700" />
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-usage-guide-2.png" width="700" />
 </p>
 
+**Presets**
+
+A preset is a set of settings that define the editor's features and appearance. You
+can specify a dedicated preset for each field. The available presets can be customized through the
+[configuration](#configuration).
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-usage-guide-3.png" width="700" />
+</p>
+
+The plugin provides two presets out of the box: `Default HTML editor` and `Default Markdown editor`,
+each has different output format: HTML and Markdown, respectively. Both presets include
+an extensive set of non-premium CKEditor plugins.
+
 <details>
-  <summary><b>Default preset:</b></summary>
-  
+  <summary>Default HTML editor:</summary>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-html-dark.png" width="700" />
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-html-light.png" width="700" />
+</p>
+
 <p align="center">
-  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/default-preset.gif" width="700" />
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-html-light-full.png" width="700" />
 </p>
 
 </details>
 
-## <a id="configuration"></a>⚙️ Configuration
+<details>
+  <summary>Default Markdown editor:</summary>
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-mrk-dark.png" width="700" />
+</p>
 
-> 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) 
->
-> 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)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-mrk-light.png" width="700" />
+</p>
 
-The plugin configuration should be defined in `your-app/config/ckeditor.js` or in `ckeditor.ts` if you are using TypeScript in your project.
+</details>
 
-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.
+**Responsive images**
 
-The plugin exposes all default CKEditor packages to the global variable `SH_CKE`.
+The plugin generates `srcset` attribute for inserted images if the image has any `formats` other than `thumbnail`.
 
-The config file must define a function called `CKEConfig` that returns the configuration object.
+**UI language**: If you don't specify the UI language in the editor configuration, the plugin will
+default to the Strapi admin's preferred language. If no preference is set, English will be used as a fallback.
 
-The structure of the configuration object is as follows:
+**Content language**: i18n for the editor's content language can be enabled by checking the
+`Enable localization for this field` option in the Advanced Settings tab.
 
-```js
-{
-    dontMergePresets:bool,
-    dontMergeTheme:bool,
-    presets:{
-        default:{
-            field:{...},
-            styles:string,
-            editorConfig:{...},
-        },
-        ...
-    },
-    theme:{
-        common:string,
-        light:string,
-        dark:string,
-        additional:string,
-    }
-}
-```
+> 💡 It is important to use the content styles on the publishing side of your application. Otherwise, the content will look different in the editor and for your end users. [Follow the documentation](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/css.html#styling-the-published-content).
 
-Every preset in the `presets` object contains three properties:
+## <a id="configuration"></a>⚙️ Configuration
 
-1. `field (object)` Registers this configuration version in the Admin panel.
-2. `styles (string)` Styles applied to the editor in this version.
-3. `editorConfig (object)` The CKEditor configuration.
+The plugin configuration must be defined on the front-end. The plugin provides a `setPluginConfig`
+function, which accepts a plugin configuration (`PluginConfig`) that can include an array of presets
+and a theme object:
 
-The `theme` object is used to modify the default global theme of the plugin.
-It contains four properties:
+```ts
+import { setPluginConfig } from '@_sh/strapi-plugin-ckeditor';
 
-1. `common (string)` Styles applied to the editor to ensure proper appearance of the input.
-2. `light (string)` Styles applied to the editor when Strapi is in light mode.
-3. `dark (string)` Styles applied to the editor when Strapi is in dark mode.
-4. `additional (string)` Additional styles to further enhance the editors appearance.
+function setPluginConfig(pluginConfig: {
+  presets: Preset[] | undefined;
+  theme: Theme | undefined;
+}): void;
+```
 
-By default, everything defined in the user’s configuration is merged with the
-default configuration object. These two properties allow you to prevent
-this behavior:
+**Key points:**
 
-1. `dontMergePresets (bool)`
-2. `dontMergeTheme (bool)`
+- The function must be invoked before the admin panel's bootstrap lifecycle function. The general recommendation is to call it inside the admin panel's register lifecycle function.
+- Provided properties will overwrite the default configuration values.
+- The configuration becomes immutable after the first invocation, preventing further modifications.
 
-Since Strapi uses i18n for translation, the `ignorei18n` property is added to the
-`editorConfig.language` object. This property allows you to manually set the
-content language, bypassing i18n. The language object looks like this:
+**Plugin configuration object** includes optional `presets` and `theme` properties:
 
-```js
-language:{
-    ignorei18n (bool),
-    ui (string),
-    content (string)
-}
+```ts
+type PluginConfig = {
+  /**
+   * Presets are sets of settings that define the editor's features and appearance.
+   */
+  presets?: Preset[];
+  /**
+   * Styles applied globally to every editor instance.
+   */
+  theme?: Theme;
+};
+```
+
+`presets` is an array of objects of type `Preset`. Each preset includes the following properties:
+
+```ts
+type Preset = {
+  /**
+   * Preset name, displayed in the schema.
+   */
+  name: string;
+  /**
+   * Preset description, displayed in the Content-Type Builder.
+   */
+  description: string;
+  /**
+   * CKEditor configuration object.
+   *
+   * @see {@link https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html | CKEditor documentation}
+   */
+  editorConfig: EditorConfig;
+  /**
+   * Additional styles applied to the editor instance after the theme styles.
+   */
+  styles?: EditorStyles;
+};
+```
+
+`theme` object defines a plugin CSS styles applied to every editor instance. It includes the
+following properties:
+
+```ts
+/**
+ * The `common` styles are applied first, followed by `light` or `dark` styles
+ * according to user preferences, and finally `additional` styles.
+ */
+type Theme = {
+  /**
+   * Core styles.
+   */
+  common?: EditorStyles;
+  /**
+   * Styles applied in light mode.
+   */
+  light?: EditorStyles;
+  /**
+   * Styles applied in dark mode.
+   */
+  dark?: EditorStyles;
+  /**
+   * Additional styles that complement the theme.
+   */
+  additional?: EditorStyles;
+};
 ```
-The language determination follows this logic:
 
-- Plugin UI language:
-`language.ui || strapi admin preferred language || 'en'`
+```ts
+/**
+ * Represents styles that can be applied to an editor instance.
+ * Can be a plain CSS string or an array of interpolations for dynamic styling.
+ */
+export type EditorStyles = string | Interpolation<object>[];
+```
 
-- Content language:
-`(ignorei18n ? language.content : i18n) || language.ui`
+**Default presets and theme**
 
-### Configuration examples
+To simplify the process of defining a new preset, the plugin exports default presets and
+a default theme, which can be used as a base in custom configurations:
 
-Adding a new preset:
+```ts
+import {
+  defaultTheme,
+  defaultHtmlPreset,
+  defaultMarkdownPreset,
+} from '@_sh/strapi-plugin-ckeditor';
+```
 
-<details>
-   <summary><b>ckeditor.js</b></summary>
+**Integration with Strapi's Media Library**
 
-```js
-const CKEConfig = () => ({
-    presets: {
-        markdown:{
-          field: {
-              key: "markdown",
-              value: "markdown",
-              metadatas: {
-                intlLabel: {
-                  id: "ckeditor.preset.markdown.label",
-                  defaultMessage: "Markdown output",
-                },
-              },
-          },
-          editorConfig:{
-              placeholder: 'Markdown editor',
-              plugins: [
-                  globalThis.SH_CKE.Essentials,
-                  globalThis.SH_CKE.Autoformat,
-                  globalThis.SH_CKE.BlockQuote,
-                  globalThis.SH_CKE.Bold,
-                  globalThis.SH_CKE.Heading,
-                  globalThis.SH_CKE.Image,
-                  globalThis.SH_CKE.ImageCaption,
-                  globalThis.SH_CKE.ImageStyle,
-                  globalThis.SH_CKE.ImageToolbar,
-                  globalThis.SH_CKE.ImageUpload, 
-                  globalThis.SH_CKE.Indent,
-                  globalThis.SH_CKE.Italic,
-                  globalThis.SH_CKE.Link,
-                  globalThis.SH_CKE.List,
-                  globalThis.SH_CKE.MediaEmbed,
-                  globalThis.SH_CKE.Paragraph,
-                  globalThis.SH_CKE.Table,
-                  globalThis.SH_CKE.TableToolbar,
-                  globalThis.SH_CKE.SourceEditing, 
-                  globalThis.SH_CKE.StrapiMediaLib,
-                  globalThis.SH_CKE.StrapiUploadAdapter,
-                  globalThis.SH_CKE.Markdown,
-                  globalThis.SH_CKE.Code, 
-                  globalThis.SH_CKE.CodeBlock,
-                  globalThis.SH_CKE.TodoList,
-                  globalThis.SH_CKE.Strikethrough,
-                  globalThis.SH_CKE.HorizontalLine
-              ],
-              toolbar: {
-                  items: [
-                      'heading',
-                      '|',
-                      'bold',
-                      'italic',
-                      'strikethrough',
-                      'link',
-                      '|',
-                      'bulletedList',
-                      'numberedList',
-                      'todoList',
-                      '|',
-                      'code',
-                      'codeBlock',
-                      '|',
-                      'uploadImage',
-                      'strapiMediaLib',
-                      'blockQuote',
-                      'horizontalLine',
-                      '-',
-                      'sourceEditing',
-                      '|',
-                      'outdent',
-                      'indent',
-                      '|',
-                      'undo',
-                      'redo'
-                  ],
-                  shouldNotGroupWhenFull: true
-              },
-              image: {
-                  toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
-              },
-              codeBlock: {
-                  languages: [
-                      { language: 'css', label: 'CSS' },
-                      { language: 'html', label: 'HTML' },
-                      { language: 'javascript', label: 'JavaScript' },
-                      { language: 'php', label: 'PHP' }
-                  ]
-              },
-          }
-        },
-    }
-})
+To integrate CKEditor with the Strapi's Media Library, the plugin provides two CKEditor plugins
+that can be included in your presets without additional configuration:
+
+```ts
+import { StrapiMediaLib, StrapiUploadAdapter } from '@_sh/strapi-plugin-ckeditor';
 ```
 
-</details>
+**Available type definitions**
 
----
+The following type definitions are available for use:
 
-Changing toolbar buttons, modifying the plugin list, adding styles to the default preset:
+```ts
+import type {
+  PluginConfig,
+  Preset,
+  EditorConfig,
+  Theme,
+  EditorStyles,
+} from '@_sh/strapi-plugin-ckeditor';
+```
 
 <details>
-   <summary><b>ckeditor.js</b></summary>
-
-```js
-const CKEConfig = () => ({
-    presets:{
-        default:{
-            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;
-                }
-            `,
-            editorConfig:{
-                plugins: [
-                    globalThis.SH_CKE.Bold,
-                    globalThis.SH_CKE.Italic,
-                    globalThis.SH_CKE.Essentials,
-                    globalThis.SH_CKE.Heading,
-                    globalThis.SH_CKE.Image,
-                    globalThis.SH_CKE.ImageCaption,
-                    globalThis.SH_CKE.ImageStyle,
-                    globalThis.SH_CKE.ImageToolbar,
-                    globalThis.SH_CKE.Link,
-                    globalThis.SH_CKE.List,
-                    globalThis.SH_CKE.Paragraph,
-                    globalThis.SH_CKE.StrapiMediaLib,
-                    globalThis.SH_CKE.StrapiUploadAdapter,
-                ],
-                toolbar: [
-                    'heading',
-                    '|',
-                    'bold', 'italic', 'link', 'bulletedList', 'numberedList',
-                    '|',
-                    'strapiMediaLib', 'insertTable',
-                    '|',
-                    'undo', 'redo'
-                ]
-            }
-        }
-    }
-})
+  <summary>Type definitions</summary>
+
+```ts
+/**
+ * Plugin configuration object.
+ */
+export type PluginConfig = {
+  /**
+   * Presets are sets of settings that define the editor's features and appearance.
+   */
+  presets?: Preset[];
+  /**
+   * Styles applied globally to every editor instance.
+   */
+  theme?: Theme;
+};
 ```
 
-</details>
+```ts
+/**
+ * Preset is a set of settings that define the editor's features and appearance.
+ */
+export type Preset = {
+  /**
+   * Preset name, displayed in the schema.
+   */
+  name: string;
+  /**
+   * Preset description, displayed in the Content-Type Builder.
+   */
+  description: string;
+  /**
+   * Additional styles applied to the editor instance after the theme styles.
+   */
+  styles?: EditorStyles;
+  /**
+   * CKEditor configuration object.
+   *
+   * @see {@link https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html | CKEditor documentation}
+   */
+  editorConfig: EditorConfig;
+};
+```
 
----
+```ts
+/**
+ * CKEditor configuration object.
+ *
+ * @see {@link https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html | CKEditor documentation}
+ */
+export type EditorConfig = CKE5EditorConfig;
+```
 
-> 📂 Default preset: [**admin/src/components/Input/presets/default.js**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/presets/default.js)
->
-> 📂 Default theme: [**admin/src/components/Input/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/theme)
+```ts
+/**
+ * Styles applied globally to every editor instance.
+ *
+ * @remarks
+ *
+ * The `common` styles are applied first, followed by `light` or `dark` styles
+ * according to the preferences, and finally `additional` styles.
+ */
+export type Theme = {
+  /**
+   * Core styles.
+   */
+  common?: EditorStyles;
+  /**
+   * Styles applied in light mode.
+   */
+  light?: EditorStyles;
+  /**
+   * Styles applied in dark mode.
+   */
+  dark?: EditorStyles;
+  /**
+   * Additional styles that complement the theme.
+   */
+  additional?: EditorStyles;
+};
+```
 
-### Adding plugins
+```ts
+/**
+ * Represents styles that can be applied to an editor instance.
+ * Can be a plain CSS string or an array of interpolations for dynamic styling.
+ */
+export type EditorStyles = string | Interpolation<object>[];
+```
 
-Your plugin must be available in the `global` object.
+</details>
 
-**Example of adding the Timestamp plugin:**
+### Configuration examples:
 
-1. Create the plugin:
+<details>
+  <summary>Adding a new preset [JS]</summary>
 
 ```js
-// your-app/src/admin/timestamp.js
-
-class Timestamp extends globalThis.SH_CKE.Plugin {
-    init() {
-        const editor = this.editor;
-        // The button must be registered among the UI components of the editor
-        // to be displayed in the toolbar.
-        editor.ui.componentFactory.add( 'timestamp', () => {
-            // The button will be an instance of ButtonView.
-            const button = new globalThis.SH_CKE.ButtonView();
-
-            button.set( {
-                label: 'Timestamp',
-                withText: true
-            } );
-
-            // Execute a callback function when the button is clicked.
-            button.on( 'execute', () => {
-                const now = new Date();
-
-                // Change the model using the model writer.
-                editor.model.change( writer => {
-
-                    // Insert the text at the user's current position.
-                    editor.model.insertContent( writer.createText( now.toString() ) );
-                } );
-            } );
-
-            return button;
-        } );
-    }
-}
-
-globalThis.Timestamp = Timestamp;
-```
+// src/admin/app.js
+
+import {
+  Bold,
+  Italic,
+  Essentials,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Link,
+  List,
+  Paragraph,
+} from 'ckeditor5';
+
+import { setPluginConfig, StrapiMediaLib, StrapiUploadAdapter } from '@_sh/strapi-plugin-ckeditor';
+
+const myCustomPreset = {
+  name: 'myCustomPreset',
+  description: 'myCustomPreset description',
+  editorConfig: {
+    licenseKey: 'GPL',
+    plugins: [
+      Bold,
+      Italic,
+      Essentials,
+      Heading,
+      Image,
+      ImageCaption,
+      ImageStyle,
+      ImageToolbar,
+      ImageUpload,
+      Link,
+      List,
+      Paragraph,
+      StrapiMediaLib,
+      StrapiUploadAdapter,
+    ],
+    toolbar: [
+      'heading',
+      '|',
+      'bold',
+      'italic',
+      'link',
+      'bulletedList',
+      'numberedList',
+      '|',
+      'strapiMediaLib',
+      '|',
+      'undo',
+      'redo',
+    ],
+  },
+};
 
-2. Import the plugin:
+const myConfig = {
+  /**
+   * Note: Since the provided `presets` include only `myCustomPreset`
+   * this configuration will overwrite default presets.
+   */
+  presets: [myCustomPreset],
+};
 
-```js
-// your-app/src/admin/app.js
+export default {
+  register() {
+    setPluginConfig(myConfig);
+  },
+};
+```
 
-import './timestamp.js'
+</details>
 
-const config = {};
+<details>
+  <summary>Adding a new preset [TS]</summary>
+
+```ts
+// src/admin/app.tsx
+
+import {
+  Bold,
+  Italic,
+  Essentials,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Link,
+  List,
+  Paragraph,
+} from 'ckeditor5';
+
+import {
+  type PluginConfig,
+  type Preset,
+  setPluginConfig,
+  StrapiMediaLib,
+  StrapiUploadAdapter,
+} from '@_sh/strapi-plugin-ckeditor';
+
+const myCustomPreset: Preset = {
+  name: 'myCustomPreset',
+  description: 'myCustomPreset description',
+  editorConfig: {
+    licenseKey: 'GPL',
+    plugins: [
+      Bold,
+      Italic,
+      Essentials,
+      Heading,
+      Image,
+      ImageCaption,
+      ImageStyle,
+      ImageToolbar,
+      ImageUpload,
+      Link,
+      List,
+      Paragraph,
+      StrapiMediaLib,
+      StrapiUploadAdapter,
+    ],
+    toolbar: [
+      'heading',
+      '|',
+      'bold',
+      'italic',
+      'link',
+      'bulletedList',
+      'numberedList',
+      '|',
+      'strapiMediaLib',
+      '|',
+      'undo',
+      'redo',
+    ],
+  },
+};
 
-const bootstrap = (app) => {};
+const myConfig: PluginConfig = {
+  /**
+   * Note that since provided `presets` includes only `myCustomPreset`
+   * this configuration will overwrite default presets.
+   */
+  presets: [myCustomPreset],
+};
 
 export default {
-  config,
-  bootstrap,
+  register() {
+    setPluginConfig(myConfig);
+  },
 };
-
 ```
 
-3. Add the new plugin to your preset:
+</details>
 
 <details>
-  <summary><b>ckeditor.js</b></summary>
+  <summary>Default presets modification [TS]</summary>
+
+```ts
+// src/admin/app.tsx
+
+import { css } from 'styled-components';
+
+import {
+  type PluginConfig,
+  type Preset,
+  setPluginConfig,
+  defaultHtmlPreset,
+  defaultMarkdownPreset,
+} from '@_sh/strapi-plugin-ckeditor';
+
+const defaultHtml: Preset = {
+  ...defaultHtmlPreset,
+  description: 'Modified default HTML editor',
+  styles: `
+    .ck { 
+      color: red; 
+    }
+  `,
+  editorConfig: {
+    ...defaultHtmlPreset.editorConfig,
+    placeholder: 'Modified default HTML editor',
+    toolbar: [
+      'heading',
+      '|',
+      'bold',
+      'italic',
+      'link',
+      'bulletedList',
+      'numberedList',
+      '|',
+      'strapiMediaLib',
+      'insertTable',
+      '|',
+      'undo',
+      'redo',
+    ],
+  },
+};
 
-```js
-// your-app/config/ckeditor.js
-
-const CKEConfig = () => ({
-    presets: {
-        myCustomPreset:{
-            field: {
-                key: "myCustomPreset",
-                value: "myCustomPreset",
-                metadatas: {
-                    intlLabel: {
-                    id: "ckeditor5.preset.myCustomPreset.label",
-                    defaultMessage: "My custom preset",
-                    },
-                },
-            },
-            editorConfig:{
-                plugins: [
-                    globalThis.Timestamp,
-                    globalThis.SH_CKE.Autoformat,
-                    globalThis.SH_CKE.Bold,
-                    globalThis.SH_CKE.Italic,
-                    globalThis.SH_CKE.Essentials,
-                    globalThis.SH_CKE.Heading,
-                    globalThis.SH_CKE.Image,
-                    globalThis.SH_CKE.ImageCaption,
-                    globalThis.SH_CKE.ImageStyle,
-                    globalThis.SH_CKE.ImageToolbar,
-                    globalThis.SH_CKE.ImageUpload,
-                    globalThis.SH_CKE.Indent,
-                    globalThis.SH_CKE.Link,
-                    globalThis.SH_CKE.List,
-                    globalThis.SH_CKE.Paragraph,
-                    globalThis.SH_CKE.PasteFromOffice,
-                    globalThis.SH_CKE.Table,
-                    globalThis.SH_CKE.TableToolbar,
-                    globalThis.SH_CKE.TableColumnResize,
-                    globalThis.SH_CKE.TableCaption,
-                    globalThis.SH_CKE.StrapiMediaLib,
-                    globalThis.SH_CKE.StrapiUploadAdapter,
-                ],
-                toolbar: [
-                    'timestamp',
-                    'heading',
-                    '|',
-                    'bold', 'italic', 'link', 'bulletedList', 'numberedList',
-                    '|',
-                    'strapiMediaLib', 'insertTable',
-                    '|',
-                    'undo', 'redo'
-                ],
-                
-                // ...
-            }
-        },
-  }
-})
+const defaultMarkdown: Preset = {
+  ...defaultMarkdownPreset,
+  description: 'Modified default Markdown editor',
+  styles: css`
+    .ck {
+      --ck-editor-max-width: 1500px;
+      --ck-editor-min-height: 700px;
+      --ck-editor-max-height: 700px;
+    }
+
+    .ck.ck-editor__main {
+      border: 3px dashed ${({ theme }) => theme.colors.warning500};
+    }
+  `,
+};
+
+const myConfig: PluginConfig = {
+  presets: [defaultHtml, defaultMarkdown],
+};
+
+export default {
+  register() {
+    setPluginConfig(myConfig);
+  },
+};
 ```
 
-</details>  
+</details>
 
+<details>
+  <summary>Modifying theme [TS]</summary>
+
+```ts
+// src/admin/app.tsx
+
+import { css } from 'styled-components';
+
+import { type PluginConfig, setPluginConfig, defaultTheme } from '@_sh/strapi-plugin-ckeditor';
+
+const myConfig: PluginConfig = {
+  theme: {
+    ...defaultTheme,
+    additional: css`
+      .ck {
+        --ck-editor-max-width: 1500px;
+        --ck-editor-min-height: 700px;
+        --ck-editor-max-height: 700px;
+      }
+
+      .ck.ck-editor__main {
+        border: 3px dashed ${({ theme }) => theme.colors.warning500};
+      }
+    `,
+  },
+};
 
-4. Then rebuild the application:
-```bash
-yarn build
+export default {
+  register() {
+    setPluginConfig(myConfig);
+  },
+};
 ```
 
-**💡 Alternatively, you can define your plugin like this:**
+</details>
 
 <details>
-  <summary><b>ckeditor.js</b></summary>
+  <summary>Adding Timestamp plugin [JS]</summary>
 
-```js
-const CKEConfig = () => {
-  class Timestamp extends globalThis.SH_CKE.Plugin {
-    init() {
-      const editor = this.editor;
-      // The button must be registered among the UI components of the editor
-      // to be displayed in the toolbar.
-      editor.ui.componentFactory.add("timestamp", () => {
-        // The button will be an instance of ButtonView.
-        const button = new globalThis.SH_CKE.ButtonView();
-
-        button.set({
-          label: "Timestamp",
-          withText: true,
-        });
+```ts
+// src/admin/app.js
 
-        // Execute a callback function when the button is clicked.
-        button.on("execute", () => {
-          const now = new Date();
+import { Plugin, ButtonView } from 'ckeditor5';
 
-          // Change the model using the model writer.
-          editor.model.change((writer) => {
-            // Insert the text at the user's current position.
-            editor.model.insertContent(writer.createText(now.toString()));
-          });
-        });
+import { setPluginConfig, defaultHtmlPreset } from '@_sh/strapi-plugin-ckeditor';
 
-        return button;
+class Timestamp extends Plugin {
+  init() {
+    const editor = this.editor;
+    editor.ui.componentFactory.add('timestamp', () => {
+      const button = new ButtonView();
+      button.set({
+        label: 'timestamp',
+        withText: true,
       });
-    }
-  }
-
-  return {
-    presets: {
-        myCustomPreset:{
-          field: {
-            key: "myCustomPreset",
-            value: "myCustomPreset",
-            metadatas: {
-              intlLabel: {
-                id: "ckeditor5.preset.myCustomPreset.label",
-                defaultMessage: "My custom preset",
-              },
-            },
-          },
-            editorConfig:{
-                plugins: [
-                    Timestamp,
-                    globalThis.SH_CKE.Autoformat,
-                    globalThis.SH_CKE.Bold,
-                    globalThis.SH_CKE.Italic,
-                    globalThis.SH_CKE.Essentials,
-                    globalThis.SH_CKE.Heading,
-                    globalThis.SH_CKE.Image,
-                    globalThis.SH_CKE.ImageCaption,
-                    globalThis.SH_CKE.ImageStyle,
-                    globalThis.SH_CKE.ImageToolbar,
-                    globalThis.SH_CKE.ImageUpload,
-                    globalThis.SH_CKE.Indent,
-                    globalThis.SH_CKE.Link,
-                    globalThis.SH_CKE.List,
-                    globalThis.SH_CKE.Paragraph,
-                    globalThis.SH_CKE.PasteFromOffice,
-                    globalThis.SH_CKE.Table,
-                    globalThis.SH_CKE.TableToolbar,
-                    globalThis.SH_CKE.TableColumnResize,
-                    globalThis.SH_CKE.TableCaption,
-                    globalThis.SH_CKE.StrapiMediaLib,
-                    globalThis.SH_CKE.StrapiUploadAdapter,
-                ],
-                toolbar: [
-                    'timestamp',
-                    'heading',
-                    '|',
-                    'bold', 'italic', 'link', 'bulletedList', 'numberedList',
-                    '|',
-                    'strapiMediaLib', 'insertTable',
-                    '|',
-                    'undo', 'redo'
-                ],
-                
-                ...
-            }
-        },
+      button.on('execute', () => {
+        const now = new Date();
+        editor.model.change(writer => {
+          editor.model.insertContent(writer.createText(now.toString()));
+        });
+      });
+      return button;
+    });
   }
 }
+
+export default {
+  register() {
+    defaultHtmlPreset.editorConfig.plugins.push(Timestamp);
+    defaultHtmlPreset.editorConfig.toolbar.unshift('timestamp');
+    setPluginConfig({ presets: [defaultHtmlPreset] });
+  },
+};
 ```
 
-</details>  
+</details>
 
+<br />
 
+📂 Default HTML preset: [**admin/src/config/htmlPreset.ts**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/config/htmlPreset.ts)
 
-## <a id="contributing"></a>🛠 Contributing
+📂 Default Markdown preset: [**admin/src/config/markdownPreset.ts**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/config/markdownPreset.ts)
 
+📂 Default theme: [**admin/src/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/theme)
 
-This section explains how to set up your environment if you want to contribute to this package.
+> 📌 It is highly recommended to explore [**the official CKEditor5 documentation**](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html).
 
-[Strapi Plugin SDK docs](https://docs.strapi.io/dev-docs/plugins/development/create-a-plugin#linking-the-plugin-to-your-project)
+> 💡 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 documentation for details.**](https://docs.strapi.io/dev-docs/configurations/middlewares#security)
 
-Clone the repository:
+## <a id="contributing"></a>🛠 Contributing
 
-```bash
-git clone https://github.com/nshenderov/strapi-plugin-ckeditor.git ./strapi-plugin-ckeditor
-```
-Navigate to the downloaded folder:
+Feel free to [fork the repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo)
+and open a pull request, any help is appreciated.
 
-```bash
-cd ./strapi-plugin-ckeditor
-```
+Follow these steps to set up a plugin development environment:
+
+1. Clone the repository.
 
-Install dependencies:
+2. Read [the Strapi Plugin SDK documentation](https://docs.strapi.io/dev-docs/plugins/development/create-a-plugin#linking-the-plugin-to-your-project).
+
+3. Navigate to the cloned plugin folder and install dependencies, run:
 
 ```bash
 yarn install
 ```
 
-Link the plugin to your project:
+4. Link the plugin to your project:
 
-In the plugin directory, run:
-```bash
-yarn watch:link
-```
+   - In the plugin folder, run:
 
-Open new terminal window and in your project directory, run:
-```bash
-yarn dlx yalc add --link @_sh/strapi-plugin-ckeditor && yarn install
-```
+   ```bash
+   yarn watch:link
+   ```
+
+   - Open a new terminal, navigate to your Strapi project directory, and run:
+
+   ```bash
+   yarn dlx yalc add --link @_sh/strapi-plugin-ckeditor && yarn install
+   ```
 
-Rebuild the project and start the server:
+5. Rebuild the project and start the server:
 
 ```bash
 yarn build
 yarn develop
 ```
 
-
 ## <a id="migration"></a>✈️ Migration
 
-### From v3 to v4
-
-- The new version introduces support for Strapi v5 and is incompatible with Strapi v4. You will need to update your Strapi project to version 5 before upgrading.
-
-- The plugin development process has changed. Please refer to the updated contribution guide for more information.
-
-### From v2 to v3
-
-- The default editor configurations (toolbar, toolbarBalloon, blockBalloon) have been removed and now there is only one preset by default. You will need to update your fields in the Content-Type Builder.
-
-- Config file extension has changed from `.txt` to `.js` or `.ts`
-- Configuration object properties have been renamed:
-    - `configsOverwrite` -> `dontMergePresets`
-    - `themeOverwrite` -> `dontMergeTheme`
-    - `configs` -> `presets`
-- From v3 instead of globalThis.CKEditorConfig = {..}, the config file must define a function called CKEConfig that returns the configuration object.
-
-Example of the new configuration file:
-
-<details>
-   <summary><b>ckeditor.js</b></summary>
-
-```js
-const CKEConfig = () => ({
-    presets:{
-        myCustomPreset:{
-            field: {
-                key: "myCustomPreset",
-                value: "myCustomPreset",
-                metadatas: {
-                    intlLabel: {
-                        id: "ckeditor5.preset.myCustomPreset.label",
-                        defaultMessage: "My custom preset",
-                    },
-                },
-            },
-            editorConfig:{
-                plugins: [
-                    globalThis.SH_CKE.Autoformat,
-                    globalThis.SH_CKE.Bold,
-                    globalThis.SH_CKE.Italic,
-                    globalThis.SH_CKE.Essentials,
-                    globalThis.SH_CKE.Heading,
-                    globalThis.SH_CKE.Image,
-                    globalThis.SH_CKE.ImageCaption,
-                    globalThis.SH_CKE.ImageStyle,
-                    globalThis.SH_CKE.ImageToolbar,
-                    globalThis.SH_CKE.ImageUpload,
-                    globalThis.SH_CKE.Indent,
-                    globalThis.SH_CKE.Link,
-                    globalThis.SH_CKE.List,
-                    globalThis.SH_CKE.Paragraph,
-                    globalThis.SH_CKE.PasteFromOffice,
-                    globalThis.SH_CKE.Table,
-                    globalThis.SH_CKE.TableToolbar,
-                    globalThis.SH_CKE.TableColumnResize,
-                    globalThis.SH_CKE.TableCaption,
-                    globalThis.SH_CKE.StrapiMediaLib,
-                    globalThis.SH_CKE.StrapiUploadAdapter,
-                ],
-                toolbar: [
-                    'heading',
-                    '|',
-                    'bold', 'italic', 'link', 'bulletedList', 'numberedList',
-                    '|',
-                    'strapiMediaLib', 'insertTable',
-                    '|',
-                    'undo', 'redo'
-                ],
-                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'
-                    ]
-                }
-            }
-        }
-    }
-})
-```
-
-</details>
-
-### From v1 to v2
-
-- You will need to update Strapi to version v4.4.x for plugin v2.0.x, or to v4.13.0+ for v2.1.x.
-
-- Starting with v2, the plugin uses the Custom Field API, so you'll need to manually update your schema.
-
-- The plugin configuration should be defined in /config/ckeditor.txt from v2 onward. [Please refer to the v2 configuration guide for details.](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/e782475f54b8a50a04f55275c89ef5bf61a15745/README.md?plain=1#L54)
+To upgrade to the latest version, follow the dedicated [migration guide](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/MIGRATION.md)
+for detailed instructions.
 
 ## <a id="requirements"></a>⚠️ Requirements
 
-
-**v4.x.x**
+**v5.x.x**
 
 Strapi **>= 5.0.0**
 
-Node **>= 18.0.0 <= 20.x.x**
+Node **>= 18.0.0 <= 22.x.x**
 
-___
+---
 
 **v3.x.x**
 
 Strapi **>= 4.13.0 < 5.0.0**
 
-Node **>= 18.0.0 <= 20.x.x**
+Node **>= 18.0.0 <= 20.x.x**