@_sh/strapi-plugin-ckeditor 2.0.1 → 2.0.3

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="assets/ckeditor5_2_0.png" width="700" />
+  <img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/ckeditor5_2_0.png" width="700" />
 </p>
 
 <h1 align="center">CKEditor 5 for Strapi</h1>
@@ -61,9 +61,9 @@ It's highly recommended to explore [**the official ckeditor documentation**](htt
 
 Content from ckeditor.txt will be passed into a script tag through the initialization process.
 
-> 📂 Default configs: [**admin/src/components/Input/CKEditor/configs**](admin/src/components/Input/CKEditor/configs)
+> 📂 Default configs: [**admin/src/components/Input/CKEditor/configs**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/configs)
 
-> 📂 Default theme: [**admin/src/components/Input/CKEditor/theme**](admin/src/components/Input/CKEditor/theme)
+> 📂 Default theme: [**admin/src/components/Input/CKEditor/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/theme)
 
 **ckeditor.txt example:**
 
@@ -167,8 +167,8 @@ globalThis.CKEditorConfig = {
 
                   language:{
                     // ignorei18n: true,
-                    ui:'he',
-                    content:'he'
+                    // ui:'he',
+                    // content:'he'
                   },
                   toolbar: [
                     'heading',
@@ -235,7 +235,7 @@ module.exports = ({ env }) => ({
 });
 ```
 
-> In order to display some content from an external source on your `admin` side you should configure your middlewares.js [**check docs about this**](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html)
+> In order to display some content from an external source on your `admin` side you should configure your middlewares.js [**check the docs about this**](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html)
 
 ## How to add plugins
 
@@ -252,7 +252,7 @@ or
 npm install @ckeditor/ckeditor5-markdown-gfm
 ```
 
-* your-app/src/armin/**app.js**
+* your-app/src/admin/**app.js**
 
 ```js
 import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
@@ -378,8 +378,7 @@ yarn build
 ## <a id="contributing"></a>🛠 Contributing
 ___
 
-<details>
-  <summary><b>This section covers the way how to configure your environment if you want to contribute to this package.</b> </summary>
+This section covers the way how to configure your environment if you want to contribute to this package.
   
 ### Setting up the environment
 
@@ -433,11 +432,6 @@ yarn build
 yarn develop
 ```
 
-</details>
-
-
-
-
 ## <a id="requirements"></a>⚠️ Requirements
 ___
 Strapi **v4.4.0+**

package/admin/src/components/Input/CKEditor/index.js

@@ -54,9 +54,8 @@ const Editor = ({ onChange, name, value, disabled, preset, maxLength }) => {
             editor={window.CKEditor5.editorClassic.ClassicEditor}
             config={config?.editorConfig}
             disabled={disabled}
-            data={value || ""}
+            data={value}
             onReady={(editor) => {
-              editor.setData(value || "");
               
               if(config.editorConfig.WordCountPlugin){
                 const wordCountPlugin = editor.plugins.get( 'WordCount' );

package/admin/src/components/Input/CKEditor/theme/additional.js

@@ -11,6 +11,52 @@ export const additional = css`
   	max-height: 700px;
   }
 
+/* --- color-grid --- */
+
+.ck.ck-color-ui-dropdown {
+	--ck-color-grid-tile-size: 22px !important;
+}
+.ck.ck-color-grid__tile{
+	width:auto;
+}
+.ck.ck-color-ui-dropdown .ck-color-grid {
+	grid-gap: 2px;
+}
+.ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
+	border-radius: 2px;
+}
+.ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled),
+.ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) {
+	z-index: 1;
+	transform: scale(1.1);
+	border-radius: 2px;
+}
+
+/* --- color-picker --- */
+
+.ck[dir=rtl] .ck-color-input{
+  margin: 0 8px 8px 0 !important;
+  padding: 3px 5px 0 0 !important;
+}
+
+.ck .ck-color-input{
+  margin: 0 0 8px 8px ;
+  padding: 3px 0 0 6px;
+  border-radius:2px ;
+  font-size:.77rem !important;
+  width: 58px !important;
+}
+.ck .ck-color-picker{
+  margin: 0 3px 8px 3px;
+  border-radius:2px !important;
+  width: 27px !important;
+}
+.ck .ck-color-picker-save{
+  margin: 0 0 8px 0;
+  border-radius:2px !important;
+  width:27px !important;
+}
+
 
 /* ---- Style feature config ------------------------------------------------------ */
 

package/admin/src/components/Input/CKEditor/theme/common.js

@@ -217,10 +217,6 @@ export const common = css`
     .ck-block-toolbar-button {
       margin-left: 2px !important ;
     }
-    .ck-color-input{
-      margin: 0 8px 8px 0 !important;
-      padding: 3px 5px 0 0 !important;
-    }
     & + div{
       justify-content: flex-start;
       & > .ck-word-count {
@@ -233,45 +229,4 @@ export const common = css`
       }
     }
   }
-
-
-  .ck .ck-color-input{
-    margin: 0 0 8px 8px !important;
-    padding: 3px 0 0 5px !important;
-    border-radius:0px !important;
-    width: 115px !important;
-    z-index: 1;
-  }
-
-  .ck .ck-color-picker{
-    margin: 0 3px 8px 3px !important;
-    border-radius:0px !important;
-    width: 80px !important;
-  }
-
-  .ck .ck-color-picker-save{
-    margin: 0 0 8px 0 !important;
-    border-radius:0px !important;
-    width: 50px !important;
-  }
-
-
-  .ck.ck-color-ui-dropdown {
-	--ck-color-grid-tile-size: 20px;
-  }
-
-  .ck.ck-color-ui-dropdown .ck-color-grid {
-  	grid-gap: 1px;
-  }
-
-  .ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
-  	border-radius: 0;
-  }
-
-  .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled),
-  .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) {
-  	z-index: 1;
-  	transform: scale(1.3);
-  }
-
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
   "private": false,
   "keywords": [