@_sh/strapi-plugin-ckeditor 1.0.1 → 1.0.4

package/README.md

@@ -1,112 +1,84 @@
-# CKEditor 5 for Strapi 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/ckeditor5.png" alt="CKEditor5-Strapi" width="700" />
+</p>
 
-<img src="./assets/ckeditor1.jpg"/>
-  
-<br/>
-  
-Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins. 
-  
-The plugin works on custom build of ckeditor based on classic editor build.  
-  
-Also, this plugin includes some useful plugins based on those repos so thanks to those guys:  
-https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5  
-https://github.com/leknoppix/ckeditor5-fullscreen  
-https://github.com/gtomato/ckeditor5-strapi-upload-plugin  
-https://github.com/pshurygin/ckeditor5-font-color  
-  
-  
+<h1 align="center">CKEditor 5 for Strapi</h1>
 
-## Plugins
-  
-<br/>
-<img src="./assets/ckeditor-toolbar.jpg" width="900"/>
-<br/>
-  
-- <b>Lots of default plugins:</b>
-  
-    For styling text, images, tables and so on.
-<br/>
-<br/>
- 
-<img src="./assets/ckeditor-tables.jpg" width="900"/>
-  
-<img src="./assets/ckeditor-d-2.jpg" width="900"/>
-  
-<br/>
- 
-- <b>Fullscreen mode</b>
-  
+<p align="center">Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.</p>
 
-- <b>Font color picker:</b>
-  
-    Gives you ability to choose colors for font styling that's not defined in config from the color palette.
- 
-<br/>
- 
- 
-<img src="./assets/ckeditor-fontcolor1.jpg" width="200"/>
-<img src="./assets/ckeditor-fontcolor3.jpg" width="200"/>
-  
- 
-- <b>Upload udapter:</b>
-  
-    For upload images to your library when you drop an image into the editor.
+## 👋 Get Started
 
- 
-- <b>Strapi media library button</b>
+* [Features](#features)
+* [Installation](#installation)
+* [Configuration](#configuration)
+* [Theme customization](#themecustomization)
+* [Requirements](#requirements)
+* [Thanks](#thanks)
 
-  
-- <b>Also supports strapi theme swithing</b>
+## <a id="features"></a>✨ Features
+This plugin works on custom build of CKEditor 5 packed with useful plugins.
+* **Lots of default plugins:** for styling text, images, tables and so on.
+* **Font color picker:** choose colors for font styling that's not defined in config from the color palette.
+* **Upload adapter for Strapi:** for upload images to your library when you drop an image into the editor.
+* **Fullscreen mode button.**
+* **Strapi media library button.**
+* **Supports strapi theme swithing.**
+* **Supports responsive images:** plugin adds srcset attribute to images based on their `formats` if responsive enable in strapi settings.
 
-- <b>Supports responsive images - plugin adds srcset attribute to images based on their "formats"</b>
+## <a id="installation"></a>🔧 Installation
 
+Inside your Strapi app, add the package:
 
-## How to install
-Install the dependency via npm
-```
+With `npm`:
+```bash
 npm install @_sh/strapi-plugin-ckeditor
 ```
-or yarn
-```
+With `yarn`:
+```bash
 yarn add @_sh/strapi-plugin-ckeditor
 ```
-In ./config/plugins.js file add
-```
+
+In `config/plugins.js` file add:
+```js
 ckeditor: true
 ```
-Then run build
+
+If you do not yet have this file, then create and add:
+```js
+module.exports = () => {
+    return {
+        ckeditor: true
+    }
+}
 ```
+
+Then run build:
+```bash
 npm run build
 ```
+
 or
-```
+```bash
 yarn build
 ```
 
-## How to customize  
-  
-Via config in plugins.js
-  
-  Ckeditor settings should be defined in <b>config.editor</b> field
-    
-  Read more about configuration https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html
-    
+## <a id="configuration"></a>🔧 Configuration
+CKEditor config should be defined in `config.editor` field.
 
-<details>
-  <summary><b>Default config</b></summary>
-  
-  
-  ```javascript
+Learn more about configuration from [official documentation](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html).
 
-  ckeditor: {
-      enabled: true,
-      config:{
+**Default configuration:**
+```js
+// plugins.js
+module.exports = () => {
+   return {
+    ckeditor: {
+     enabled: true,
+     config:{
         plugin:{
-       // styles applies to editor container
-          styles:``
+          styles:` // styles applied to editor container `
         },
-       // editor default config 
-        editor:{
+        editor:{ // editor default config
           toolbar: {
             items: [
               'paragraph',
@@ -276,706 +248,66 @@ Via config in plugins.js
         }
       }
     }
-  ```
-  
-</details>
-<br/>
-
-If you want to customize editor styles you should define styles in <b>config.plugin.styles</b> field it will replace default styles applied to the editor
- 
-Since Strapi resets css styles, it needs some styles to revert back, those styles defined below also check https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
- 
-Also for theme colors switching this plugin uses css variables depending on html data-theme attribute, e.g. html[data-theme='light'] or html[data-theme='dark']
-  
-More info about theming https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html
- 
- 
-<details>
-  <summary><b>Example of default colour variables for the light theme</b></summary>
-
-  ```css
-  html[data-theme='light'] {
---ck-color-editor-base-text:#1A1A1A;
-/* Overrides the border radius setting in the theme. */
---ck-border-radius: 4px;
-
-/* Helper variables to avoid duplication in the colors. */
---ck-color-base-border: #EAEAEF;
---ck-color-base-background:#ffffff;
---ck-custom-background: #ffffff;
---ck-custom-foreground: #dedede;
---ck-custom-border: #EAEAEF;
---ck-custom-white: hsl(0, 0%, 100%);
-
---ck-color-focus-outer-shadow:#F0F0FF;
-
---ck-color-base-focus: 	 	#bbbaf1;
---ck-color-base-active: 	    #F0F0FF;
---ck-color-base-active-focus:  #e2e2fd;
-/* -- Overrides generic colors. ------------------------------------------------------------- */
-
---ck-color-base-foreground: var(--ck-custom-background);
---ck-color-focus-border: #4945FF;
---ck-color-text: #32324D;
---ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
---ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
-
-/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
-
---ck-color-button-default-background: var(--ck-custom-background);
---ck-color-button-default-hover-background: #F0F0FF;
---ck-color-button-default-active-background: #dedefb;
---ck-color-button-default-active-shadow: #dedefb;
---ck-color-button-default-disabled-background: var(--ck-custom-background);
-
---ck-color-button-on-background: #F0F0FF;
---ck-color-button-on-hover-background: #dbdbff;
---ck-color-button-on-active-background: #cdcdf8;
---ck-color-button-on-active-shadow: #cdcdf8;
---ck-color-button-on-disabled-background: var(--ck-custom-foreground);
-
---ck-color-button-action-background: hsl(168, 76%, 42%);
---ck-color-button-action-hover-background: hsl(168, 76%, 38%);
---ck-color-button-action-active-background: hsl(168, 76%, 36%);
---ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
---ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
---ck-color-button-action-text: var(--ck-custom-white);
-
---ck-color-button-save: hsl(120, 100%, 46%);
---ck-color-button-cancel: hsl(15, 100%, 56%);
-
-/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
-
---ck-color-dropdown-panel-background: var(--ck-custom-background);
---ck-color-dropdown-panel-border: var(--ck-custom-foreground);
-
-/* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
-
---ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
---ck-color-split-button-hover-border: var(--ck-custom-foreground);
-
-/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
-
---ck-color-input-background: var(--ck-custom-background);
---ck-color-input-border: hsl(257, 3%, 43%);
---ck-color-input-text: hsl(0, 0%, 98%);
---ck-color-input-disabled-background: hsl(0, 0%, 97%);
---ck-color-input-disabled-border: rgb(214, 214, 214);
---ck-color-input-disabled-text: hsl(0, 0%, 78%);
-
-/* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
-
---ck-color-labeled-field-label-background: var(--ck-custom-background);
-
-/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
-
---ck-color-list-background: var(--ck-custom-background);
---ck-color-list-button-hover-background: #f4f4fb;
---ck-color-list-button-on-background: var(--ck-color-base-active);
---ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
---ck-color-list-button-on-text: #271FE2;
-
-/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
-
---ck-color-panel-background: var(--ck-custom-background);
---ck-color-panel-border: var(--ck-custom-border);
-
-/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
-
---ck-color-toolbar-background: var(--ck-custom-background);
---ck-color-toolbar-border: var(--ck-custom-border);
-
-/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
-
---ck-color-tooltip-background: #3a3955;
---ck-color-tooltip-text: hsl(0, 0%, 93%);
-
-/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
-
---ck-color-image-caption-background: hsl(0, 0%, 97%);
---ck-color-image-caption-text: hsl(0, 0%, 20%);
-
-/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
-
---ck-color-widget-blurred-border: #cfcffa;
---ck-color-widget-hover-border: #c9c9e4;
---ck-color-widget-editable-focus-background: var(--ck-custom-white);
+    }
+}
+```
+## <a id="themecustomization"></a>💅 Theme customization
+If you want to customize editor styles you should define styles in `config.plugin.styles` field it will replace default styles applied to the editor.
 
-/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+Since Strapi resets css styles, it needs some styles to revert back, these styles defined below, also check [official documentation](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html).
 
---ck-color-link-default: hsl(209, 89%, 33%);
+For theme colors switching this plugin uses css variables depending on html data-theme attribute, e.g. `html[data-theme='light']` or `html[data-theme='dark']`
 
-}
-  ```
+[More info about theming](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html)
 
-</details>
+[**👔 Default styles**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditor/styles.js#L3-L517)
 
-<details>
-  <summary><b>Example of customizing</b></summary>
-  
-  
-  
-  ```javascript
-# plugins.js
+[**🎨 Default colour variables**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditor/theme-colors.css#L105-L333)
 
+**Example of customization:**
+```js
+// plugins.js
 const defStyles = require('./styles.js')
 
-  ckeditor: {
-      enabled: true,
-      config:{
-        plugin:{
-       // styles aplyies to editor container
-          styles:`
-          ${defStyles()}
-          --ck-color-editor-base-text:red;
-          `
-        },
-       // editor default config 
-        editor:{
-            //...
-        }
-          
-      }
-    }
-
-# styles.js
-
-    const defStyles = () =>`
-        ### all default styles from spoiler below ###
+module.exports = () => {
+    return {
+        ckeditor: {
+          enabled: true,
+          config:{
+             plugin:{
+                // styles applied to editor container
+                styles:`
+                ${defStyles()}
+                --ck-color-editor-base-text:red;
+                `
+             },
+             // editor default config
+             editor:{
+                 //...
+             }
+         }
+     }
+   }
+}
+
+// styles.js
+const defStyles = () =>`
+
+        ### All default styles ###
     `
-    module.exports = defStyles;
-
-  ```
-  
-</details>
-<details>
-  <summary><b>Default styles</b></summary>
-  
-  
-  
-  ```css
-.ck-editor__main {
-	--ck-font-face:"Source Sans Pro",system-ui,Roboto,"Helvetica Neue","Helvetica",Arial,sans-serif;
-    min-height: ${200 / 16}em;
-	color:var(--ck-color-editor-base-text);
-	font-family:var(--ck-font-face);
-	> div {
-	min-height: ${200 / 16}em;
-	}
-	.ck-editor__editable {
-	line-height: initial;
-	}
-	
-	div, applet, object, iframe, 
-	h1, h2,h3, h4, h5,h6, p, span,
-	pre, a, abbr, acronym,
-	address, big, cite, code, del, dfn, 
-	em, img, ins, kbd, q, s, samp, small, 
-	strike, strong, sub, sup, tt, var, 
-	b, u, i, center, dl, dt, dd, ol, 
-	ul, li, fieldset, form, label, legend, 
-	table, caption, tbody, tfoot, thead, 
-	tr, th, td, article, aside, canvas, 
-	details, embed, figure, figcaption,
-	footer, header, hgroup, menu, nav, output,
-	ruby, section, summary, time, mark, audio, video {
-	font: revert;
-	margin:revert;
-	font-family:revert;
-	}
-	h1, .ck-heading_h1_b {
-	font-size: 2.36em;
-	line-height: 1.33em;
-	padding-top: 1em;
-	margin-bottom: 1.67em;
-	font-weight: 400;
-	}
-	h2, .ck-heading_h2_b {
-	font-size: 1.68em;
-	line-height: 1.68em;
-	padding-top: 0.8em;
-	margin-bottom: 0.4em;
-	padding-bottom: 0.2em;
-	font-weight: 400;
-	}
-	h3, .ck-heading_h3_b{
-	font-size: 1.36em;
-	line-height: 1.5em;
-	padding-top: 0.8em;
-	margin-bottom: 0.2em;
-	font-weight: 400;
-	}
-	h4 {
-	font-size: 1.15em;
-	line-height: 1.4em;
-	padding-top: 0.7em;
-	margin-bottom: 0.1em;
-	font-weight: 400;
-	}
-	p{
-	font-size: 1em;
-	line-height: 1.6em;
-	padding-top: 0.2em;
-	margin-bottom: 0.8em;
-	}
-	.ck-heading_h1_b, h2.ck-heading_h2_b, .ck-heading_h3_b{
-		border-bottom: 1px solid #e9e9e9;
-	}
-    figcaption{
-        background-color: var(--ck-color-image-caption-background);
-        caption-side: bottom;
-        color: var(--ck-color-image-caption-text);
-        display: table-caption;
-        font-size: .75em;
-        outline-offset: -1px;
-        padding: 0.6em;
-        word-break: break-word;
-    }
-        blockquote {}
-    .table {
-        margin: 0;
-    }
-    ul.todo-list {
-        list-style: none;
-        margin:revert;
-        color:revert;
-        font-family:revert;
-        margin-left: 32px;
-    }
-    ul, ol {
-        list-style: initial;
-        margin-left: 32px;
-    }
-    sub{
-        vertical-align: sub
-    }
-    sup{
-        vertical-align: super
-    }
+module.exports = defStyles;
+```
 
-    
-}
+## <a id="requirements"></a>⚠️ Requirements
+Strapi **v4**
 
-/*
- * CKEditor 5 (v34.0.0) content styles.
- * Generated on Wed, 27 Apr 2022 06:51:54 GMT.
- * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
- */
+Tested on **v4.18 - 4.19**
 
-:root {
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
-    --ck-color-mention-text: hsl(341, 100%, 30%);
-    --ck-color-table-caption-background: hsl(0, 0%, 97%);
-    --ck-color-table-caption-text: hsl(0, 0%, 20%);
-    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
-    --ck-highlight-marker-green: hsl(120, 93%, 68%);
-    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
-    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
-    --ck-highlight-pen-green: hsl(112, 100%, 27%);
-    --ck-highlight-pen-red: hsl(0, 85%, 49%);
-    --ck-image-style-spacing: 1.5em;
-    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
-    --ck-todo-list-checkmark-size: 16px;
-}
+## <a id="thanks"></a>👍 This build includes some useful plugins based on these repos so thanks to them:
+https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5
 
-.ck.ck-sticky-panel .ck-sticky-panel__content_sticky{ top:64px }
+https://github.com/leknoppix/ckeditor5-fullscreen
 
-/* ckeditor5-block-quote/theme/blockquote.css */
-.ck-content blockquote {
-    overflow: hidden;
-    padding-right: 1.5em;
-    padding-left: 1.5em;
-    margin-left: 0;
-    margin-right: 0;
-    font-style: italic;
-    border-left: solid 5px hsl(0, 0%, 80%);
-}
-/* ckeditor5-block-quote/theme/blockquote.css */
-.ck-content[dir="rtl"] blockquote {
-    border-left: 0;
-    border-right: solid 5px hsl(0, 0%, 80%);
-}
-/* ckeditor5-basic-styles/theme/code.css */
-.ck-content code {
-    background-color: hsla(0, 0%, 78%, 0.3);
-    padding: .15em;
-    border-radius: 2px;
-}
-/* ckeditor5-font/theme/fontsize.css */
-.ck-content .text-tiny {
-    font-size: .7em;
-}
-/* ckeditor5-font/theme/fontsize.css */
-.ck-content .text-small {
-    font-size: .85em;
-}
-/* ckeditor5-font/theme/fontsize.css */
-.ck-content .text-big {
-    font-size: 1.4em;
-}
-/* ckeditor5-font/theme/fontsize.css */
-.ck-content .text-huge {
-    font-size: 1.8em;
-}
-/* ckeditor5-highlight/theme/highlight.css */
-.ck-content .marker-yellow {
-    background-color: var(--ck-highlight-marker-yellow);
-}
-/* ckeditor5-highlight/theme/highlight.css */
-.ck-content .marker-green {
-    background-color: var(--ck-highlight-marker-green);
-}
-/* ckeditor5-highlight/theme/highlight.css */
-.ck-content .marker-pink {
-    background-color: var(--ck-highlight-marker-pink);
-}
-/* ckeditor5-highlight/theme/highlight.css */
-.ck-content .marker-blue {
-    background-color: var(--ck-highlight-marker-blue);
-}
-/* ckeditor5-highlight/theme/highlight.css */
-.ck-content .pen-red {
-    color: var(--ck-highlight-pen-red);
-    background-color: transparent;
-}
-/* ckeditor5-highlight/theme/highlight.css */
-.ck-content .pen-green {
-    color: var(--ck-highlight-pen-green);
-    background-color: transparent;
-}
-/* ckeditor5-image/theme/image.css */
-.ck-content .image {
-    display: table;
-    clear: both;
-    text-align: center;
-    margin: 0.9em auto;
-    min-width: 50px;
-}
-/* ckeditor5-image/theme/image.css */
-.ck-content .image img {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
-    min-width: 100%;
-}
-/* ckeditor5-image/theme/image.css */
-.ck-content .image-inline {
-    /*
-     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
-     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
-     * This strange behavior does not happen with inline-flex.
-     */
-    display: inline-flex;
-    max-width: 100%;
-    align-items: flex-start;
-}
-/* ckeditor5-image/theme/image.css */
-.ck-content .image-inline picture {
-    display: flex;
-}
-/* ckeditor5-image/theme/image.css */
-.ck-content .image-inline picture,
-.ck-content .image-inline img {
-    flex-grow: 1;
-    flex-shrink: 1;
-    max-width: 100%;
-}
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized {
-    max-width: 100%;
-    display: block;
-    box-sizing: border-box;
-}
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized img {
-    width: 100%;
-}
-/* ckeditor5-image/theme/imageresize.css */
-.ck-content .image.image_resized > figcaption {
-    display: block;
-}
-/* ckeditor5-image/theme/imagecaption.css */
-.ck-content .image > figcaption {
-    display: table-caption;
-    caption-side: bottom;
-    word-break: break-word;
-    color: var(--ck-color-image-caption-text);
-    background-color: var(--ck-color-image-caption-background);
-    padding: .6em;
-    font-size: .75em;
-    outline-offset: -1px;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-block-align-left,
-.ck-content .image-style-block-align-right {
-    max-width: calc(100% - var(--ck-image-style-spacing));
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-left,
-.ck-content .image-style-align-right {
-    clear: none;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-side {
-    float: right;
-    margin-left: var(--ck-image-style-spacing);
-    max-width: 50%;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-left {
-    float: left;
-    margin-right: var(--ck-image-style-spacing);
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-center {
-    margin-left: auto;
-    margin-right: auto;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-align-right {
-    float: right;
-    margin-left: var(--ck-image-style-spacing);
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-block-align-right {
-    margin-right: 0;
-    margin-left: auto;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-style-block-align-left {
-    margin-left: 0;
-    margin-right: auto;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content p + .image-style-align-left,
-.ck-content p + .image-style-align-right,
-.ck-content p + .image-style-side {
-    margin-top: 0;
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-inline.image-style-align-left,
-.ck-content .image-inline.image-style-align-right {
-    margin-top: var(--ck-inline-image-style-spacing);
-    margin-bottom: var(--ck-inline-image-style-spacing);
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-inline.image-style-align-left {
-    margin-right: var(--ck-inline-image-style-spacing);
-}
-/* ckeditor5-image/theme/imagestyle.css */
-.ck-content .image-inline.image-style-align-right {
-    margin-left: var(--ck-inline-image-style-spacing);
-}
-/* ckeditor5-language/theme/language.css */
-.ck-content span[lang] {
-    font-style: italic;
-}
-/* ckeditor5-media-embed/theme/mediaembed.css */
-.ck-content .media {
-    clear: both;
-    margin: 0.9em 0;
-    display: block;
-    min-width: 15em;
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list {
-    list-style: none;
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list li {
-    margin-bottom: 5px;
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list li .todo-list {
-    margin-top: 5px;
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list .todo-list__label > input {
-    -webkit-appearance: none;
-    display: inline-block;
-    position: relative;
-    width: var(--ck-todo-list-checkmark-size);
-    height: var(--ck-todo-list-checkmark-size);
-    vertical-align: middle;
-    border: 0;
-    left: -25px;
-    margin-right: -15px;
-    right: 0;
-    margin-left: 0;
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list .todo-list__label > input::before {
-    display: block;
-    position: absolute;
-    box-sizing: border-box;
-    content: '';
-    width: 100%;
-    height: 100%;
-    border: 1px solid hsl(0, 0%, 20%);
-    border-radius: 2px;
-    transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list .todo-list__label > input::after {
-    display: block;
-    position: absolute;
-    box-sizing: content-box;
-    pointer-events: none;
-    content: '';
-    left: calc( var(--ck-todo-list-checkmark-size) / 3 );
-    top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
-    width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
-    height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
-    border-style: solid;
-    border-color: transparent;
-    border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
-    transform: rotate(45deg);
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list .todo-list__label > input[checked]::before {
-    background: hsl(126, 64%, 41%);
-    border-color: hsl(126, 64%, 41%);
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list .todo-list__label > input[checked]::after {
-    border-color: hsl(0, 0%, 100%);
-}
-/* ckeditor5-list/theme/todolist.css */
-.ck-content .todo-list .todo-list__label .todo-list__label__description {
-    vertical-align: middle;
-}
-/* ckeditor5-page-break/theme/pagebreak.css */
-.ck-content .page-break {
-    position: relative;
-    clear: both;
-    padding: 5px 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-/* ckeditor5-page-break/theme/pagebreak.css */
-.ck-content .page-break::after {
-    content: '';
-    position: absolute;
-    border-bottom: 2px dashed hsl(0, 0%, 77%);
-    width: 100%;
-}
-/* ckeditor5-page-break/theme/pagebreak.css */
-.ck-content .page-break__label {
-    position: relative;
-    z-index: 1;
-    padding: .3em .6em;
-    display: block;
-    text-transform: uppercase;
-    border: 1px solid hsl(0, 0%, 77%);
-    border-radius: 2px;
-    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
-    font-size: 0.75em;
-    font-weight: bold;
-    color: hsl(0, 0%, 20%);
-    background: hsl(0, 0%, 100%);
-    box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-/* ckeditor5-table/theme/tablecaption.css */
-.ck-content .table > figcaption {
-    display: table-caption;
-    caption-side: top;
-    word-break: break-word;
-    text-align: center;
-    color: var(--ck-color-table-caption-text);
-    background-color: var(--ck-color-table-caption-background);
-    padding: .6em;
-    font-size: .75em;
-    outline-offset: -1px;
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table {
-    margin: 0.9em auto;
-    display: table;
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    height: 100%;
-    border: 1px double hsl(0, 0%, 70%);
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table table td,
-.ck-content .table table th {
-    min-width: 2em;
-    padding: .4em;
-    border: 1px solid hsl(0, 0%, 75%);
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content .table table th {
-    font-weight: bold;
-    background: hsla(0, 0%, 0%, 5%);
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content[dir="rtl"] .table th {
-    text-align: right;
-}
-/* ckeditor5-table/theme/table.css */
-.ck-content[dir="ltr"] .table th {
-    text-align: left;
-}
-/* ckeditor5-code-block/theme/codeblock.css */
-.ck-content pre {
-    padding: 1em;
-    color: hsl(0, 0%, 20.8%);
-    background: hsla(0, 0%, 78%, 0.3);
-    border: 1px solid hsl(0, 0%, 77%);
-    border-radius: 2px;
-    text-align: left;
-    direction: ltr;
-    tab-size: 4;
-    white-space: pre-wrap;
-    font-style: normal;
-    min-width: 200px;
-}
-/* ckeditor5-code-block/theme/codeblock.css */
-.ck-content pre code {
-    background: unset;
-    padding: 0;
-    border-radius: 0;
-}
-/* ckeditor5-horizontal-line/theme/horizontalline.css */
-.ck-content hr {
-    margin: 15px 0;
-    height: 4px;
-    background: hsl(0, 0%, 87%);
-    border: 0;
-}
-/* ckeditor5-mention/theme/mention.css */
-.ck-content .mention {
-    background: var(--ck-color-mention-background);
-    color: var(--ck-color-mention-text);
-}
-@media print {
-    /* ckeditor5-page-break/theme/pagebreak.css */
-    .ck-content .page-break {
-        padding: 0;
-    }
-    /* ckeditor5-page-break/theme/pagebreak.css */
-    .ck-content .page-break::after {
-        display: none;
-    }
-}
-  ```
-  
-</details>
- 
-<br/>   
+https://github.com/gtomato/ckeditor5-strapi-upload-plugin
 
-## Requirements
-Strapi v4
-  
-Tested on v4.18
+https://github.com/pshurygin/ckeditor5-font-color

package/admin/src/components/CKEditor/theme-colors.css

@@ -0,0 +1,333 @@
+:root {
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-custom-background: hsl(270, 56%, 37%);
+    --ck-custom-foreground: hsl(255, 3%, 18%);
+    --ck-custom-border: hsl(300, 1%, 22%);
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+    --ck-color-base-foreground: var(--ck-custom-background);
+    --ck-color-focus-border: hsl(208, 90%, 62%);
+    --ck-color-text: hsl(0, 0%, 98%);
+    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+    --ck-color-button-default-background: var(--ck-custom-background);
+    --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
+    --ck-color-button-default-active-background: hsl(270, 2%, 20%);
+    --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-background: var(--ck-custom-foreground);
+    --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
+    --ck-color-button-on-active-background: hsl(255, 4%, 14%);
+    --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+    --ck-color-button-action-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
+    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-text: var(--ck-custom-white);
+
+    --ck-color-button-save: hsl(120, 100%, 46%);
+    --ck-color-button-cancel: hsl(15, 100%, 56%);
+
+    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+    --ck-color-dropdown-panel-background: var(--ck-custom-background);
+    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+
+    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+    --ck-color-input-background: var(--ck-custom-background);
+    --ck-color-input-border: hsl(257, 3%, 43%);
+    --ck-color-input-text: hsl(0, 0%, 98%);
+    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
+    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
+    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
+    --ck-color-list-button-on-background: var(--ck-color-base-active);
+    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+    --ck-color-list-button-on-text: var(--ck-color-base-background);
+
+    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+    --ck-color-tooltip-background: hsl(252, 7%, 14%);
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+    --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+    --ck-color-widget-hover-border: hsl(43, 100%, 68%);
+    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+    --ck-color-link-default: hsl(190, 100%, 75%);
+}
+
+html[data-theme='light'] {
+--ck-color-editor-base-text:#1A1A1A;
+/* Overrides the border radius setting in the theme. */
+--ck-border-radius: 4px;
+
+/* Helper variables to avoid duplication in the colors. */
+--ck-color-base-border: #EAEAEF;
+--ck-color-base-background:#ffffff;
+--ck-custom-background: #ffffff;
+--ck-custom-foreground: #dedede;
+--ck-custom-border: #EAEAEF;
+--ck-custom-white: hsl(0, 0%, 100%);
+
+--ck-color-focus-outer-shadow:#F0F0FF;
+
+--ck-color-base-focus: 	 	#bbbaf1;
+--ck-color-base-active: 	    #F0F0FF;
+--ck-color-base-active-focus:  #e2e2fd;
+/* -- Overrides generic colors. ------------------------------------------------------------- */
+
+--ck-color-base-foreground: var(--ck-custom-background);
+--ck-color-focus-border: #4945FF;
+--ck-color-text: #32324D;
+/* --ck-color-text: hsl(240, 18%, 33%); */
+--ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
+--ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
+
+/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+--ck-color-button-default-background: var(--ck-custom-background);
+--ck-color-button-default-hover-background: #F0F0FF;
+--ck-color-button-default-active-background: #dedefb;
+--ck-color-button-default-active-shadow: #dedefb;
+--ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+--ck-color-button-on-background: #F0F0FF;
+--ck-color-button-on-hover-background: #dbdbff;
+--ck-color-button-on-active-background: #cdcdf8;
+--ck-color-button-on-active-shadow: #cdcdf8;
+--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+--ck-color-button-action-background: hsl(168, 76%, 42%);
+--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+--ck-color-button-action-active-background: hsl(168, 76%, 36%);
+--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+--ck-color-button-action-text: var(--ck-custom-white);
+
+--ck-color-button-save: hsl(120, 100%, 46%);
+--ck-color-button-cancel: hsl(15, 100%, 56%);
+
+/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+--ck-color-dropdown-panel-background: var(--ck-custom-background);
+--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+/* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+
+--ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+--ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+--ck-color-input-background: var(--ck-custom-background);
+--ck-color-input-border: hsl(257, 3%, 43%);
+--ck-color-input-text: hsl(0, 0%, 98%);
+--ck-color-input-disabled-background: hsl(0, 0%, 97%);
+--ck-color-input-disabled-border: rgb(214, 214, 214);
+--ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+/* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+--ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+--ck-color-list-background: var(--ck-custom-background);
+--ck-color-list-button-hover-background: #f4f4fb;
+--ck-color-list-button-on-background: var(--ck-color-base-active);
+--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+--ck-color-list-button-on-text: #271FE2;
+
+/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+--ck-color-panel-background: var(--ck-custom-background);
+--ck-color-panel-border: var(--ck-custom-border);
+
+/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+--ck-color-toolbar-background: var(--ck-custom-background);
+--ck-color-toolbar-border: var(--ck-custom-border);
+
+/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+--ck-color-tooltip-background: #3a3955;
+--ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+--ck-color-image-caption-background: hsl(0, 0%, 97%);
+--ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+--ck-color-widget-blurred-border: #cfcffa;
+--ck-color-widget-hover-border: #c9c9e4;
+--ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+--ck-color-link-default: hsl(209, 89%, 33%);
+
+}
+
+html[data-theme='dark'] {
+ --ck-color-editor-base-text:rgb(236, 236, 236);
+ /* Overrides the border radius setting in the theme. */
+ --ck-border-radius: 4px;
+
+ /* Overrides the default font size in the theme. */
+ /* --ck-font-size-base: 14px; */
+ /* Helper variables to avoid duplication in the colors. */
+ --ck-color-base-border: #4A4A6A;
+ /* --ck-color-base-background:#212134; */
+ /* --ck-color-base-background:#292943; */
+ --ck-color-base-background:#27273e;
+ --ck-custom-background: #212134;
+ --ck-custom-foreground: #26263b;
+ --ck-custom-border: #4A4A6A;
+ --ck-custom-white: hsl(0, 0%, 100%);
+
+--ck-color-focus-outer-shadow:#bbbaf1;
+
+ --ck-color-base-focus: 	 	#bbbaf1;
+ --ck-color-base-active: 	    #8280fc;
+ --ck-color-base-active-focus:  #7B79FF;
+ /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+ --ck-color-base-foreground: var(--ck-custom-background);
+ --ck-color-focus-border: #6765bd;
+ --ck-color-text: hsl(0, 0%, 93%);
+ --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+ --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+ /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+ --ck-color-button-default-background: var(--ck-custom-background);
+ --ck-color-button-default-hover-background: #7B79FF;
+ --ck-color-button-default-active-background: #7B79FF;
+ --ck-color-button-default-active-shadow: #7B79FF;
+ --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+ --ck-color-button-on-background: #7776da;
+ --ck-color-button-on-hover-background: #7B79FF;
+ --ck-color-button-on-active-background: #8280fc;
+ --ck-color-button-on-active-shadow: #807ed3;
+ --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+ --ck-color-button-action-background: hsl(168, 76%, 42%);
+ --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+ --ck-color-button-action-active-background: hsl(168, 76%, 36%);
+ --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+ --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+ --ck-color-button-action-text: var(--ck-custom-white);
+
+ --ck-color-button-save: hsl(120, 100%, 46%);
+ --ck-color-button-cancel: hsl(15, 100%, 56%);
+
+ /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+ --ck-color-dropdown-panel-background: var(--ck-custom-background);
+ --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+ /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+
+ --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+ --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+ /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+ --ck-color-input-background: var(--ck-custom-background);
+ --ck-color-input-border: hsl(257, 3%, 43%);
+ --ck-color-input-text: hsl(0, 0%, 98%);
+ --ck-color-input-disabled-background: hsl(255, 4%, 21%);
+ --ck-color-input-disabled-border: hsl(250, 3%, 38%);
+ --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+ /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+ --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+ /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+ --ck-color-list-background: var(--ck-custom-background);
+ --ck-color-list-button-hover-background: #3d3d56;
+ --ck-color-list-button-on-background: var(--ck-color-base-active);
+ --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+ --ck-color-list-button-on-text: #ffffff;
+
+ /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+ --ck-color-panel-background: var(--ck-custom-background);
+ --ck-color-panel-border: var(--ck-custom-border);
+
+ /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+ --ck-color-toolbar-background: var(--ck-custom-background);
+ --ck-color-toolbar-border: var(--ck-custom-border);
+
+ /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+ --ck-color-tooltip-background: #3a3955;
+ --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+ /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+ --ck-color-image-caption-background: hsl(0, 0%, 97%);
+ --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+ /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+ --ck-color-widget-blurred-border: #7c7c96;
+--ck-color-widget-hover-border: #666687;
+ --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+ /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+ --ck-color-link-default: hsl(216, 100%, 75%);
+}

package/admin/src/index.js

@@ -7,7 +7,6 @@ const name = pluginPkg.strapi.name;
 export default {
   register(app) {
     app.addFields({ type: "wysiwyg", Component: Wysiwyg });
-    console.log(pluginId);
     app.registerPlugin({
       id: pluginId,
       isReady: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
   "private": false,
   "keywords": [