@_sh/strapi-plugin-ckeditor 1.0.7 → 1.1.0

package/README.md

@@ -18,12 +18,13 @@
 ## <a id="features"></a>✨ Features
 
 * **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.
+* **Font color picker:** choose color for font styling that's not defined in default 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.
+* **Language support:** you can set the preferred language for the UI or the content in the configuration, by default it will use the language defined in the user profile if that language [is supported](https://github.com/nshenderov/strapi-plugin-ckeditor/tree/master/admin/src/components/CKEditor/build/translations).
 
 ## <a id="installation"></a>🔧 Installation
 
@@ -62,23 +63,129 @@ or
 yarn build
 ```
 
+> 💡 `sizes` and `loading` attributes for image can be set in source mode.
+> If you use default upload provider and you want prefix img url with api path you need to add `baseURL` in `api.js` file `(config/api.js)`
+
+
 ## <a id="configuration"></a>⚙️ Configuration
 CKEditor config should be defined in `config.editor` field.
 
 Learn more about configuration from [official documentation](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html).
 
+<details>
+  <summary>(spoiler) <b>Built in plugins:</b> </summary>
+
+```js
+plugins: [
+StrapiUploadAdapter,
+Alignment,
+Autoformat,
+AutoImage,
+AutoLink,
+Autosave,
+BlockQuote,
+Bold,
+Code,
+CodeBlock,
+DataFilter,
+DataSchema,
+Essentials,
+FindAndReplace,
+FontBackgroundColor,
+FontColor,
+FontFamily,
+FontSize,
+GeneralHtmlSupport,
+Heading,
+HeadingButtonsUI,
+ParagraphButtonUI,
+Highlight,
+HorizontalLine,
+HtmlComment,
+HtmlEmbed,
+Image,
+ImageCaption,
+ImageInsert,
+ImageResize,
+ImageStyle,
+ImageToolbar,
+ImageUpload,
+Indent,
+IndentBlock,
+Italic,
+Link,
+LinkImage,
+List,
+ListProperties,
+MediaEmbed,
+MediaEmbedToolbar,
+Mention,
+PageBreak,
+Paragraph,
+PasteFromOffice,
+RemoveFormat,
+SourceEditing,
+SpecialCharacters,
+SpecialCharactersArrows,
+SpecialCharactersCurrency,
+SpecialCharactersEssentials,
+SpecialCharactersLatin,
+SpecialCharactersMathematical,
+SpecialCharactersText,
+StandardEditingMode,
+Strikethrough,
+Subscript,
+Superscript,
+Table,
+TableCaption,
+TableCellProperties,
+TableProperties,
+TableToolbar,
+TextPartLanguage,
+TextTransformation,
+TodoList,
+Underline,
+WordCount,
+Markdown,
+StrapiMediaLib,
+FullScreen
+] 
+
+```
+
+</details>
+
 **Default configuration:**
 ```js
 // plugins.js
 module.exports = () => {
-   return {
+  return {
     ckeditor: {
      enabled: true,
      config:{
         plugin:{
-          styles:` // styles applied to editor container `
+          // disable data-theme tag setting // 
+          // setAttribute:false,
+
+          // disable strapi theme, will use default ckeditor theme //
+          // strapiTheme:false,
+          
+          // styles applied to editor container (global scope) //
+          // styles:`
+          // :root{
+          //   --ck-color-focus-border:red;
+          //   --ck-color-text:red;
+          // }
+          // `
         },
         editor:{ // editor default config
+
+          // https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html
+          // if you need markdown support and output set: removePlugins: [''],
+          // default is 
+          removePlugins: ['Markdown'],
+
+          // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html
           toolbar: {
             items: [
               'paragraph',
@@ -126,6 +233,7 @@ module.exports = () => {
               'redo'
             ]
           },
+          // https://ckeditor.com/docs/ckeditor5/latest/features/font.html
           fontSize: {
             options: [
                 9,
@@ -137,10 +245,6 @@ module.exports = () => {
                 21,
                 27,
                 35,
-                "tiny",
-                "small",
-                "big",
-                "huge"
             ],
             supportAllValues: false
           },
@@ -167,7 +271,9 @@ module.exports = () => {
             columns: 5,
             documentColors: 10,
           },
-          language: 'en',
+          // https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
+          // default language: 'en',
+          // https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
           image: {
             resizeUnit: "%",
             resizeOptions: [ {
@@ -200,6 +306,7 @@ module.exports = () => {
               'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original'
             ]
           },
+          // https://ckeditor.com/docs/ckeditor5/latest/features/table.html
           table: {
             contentToolbar: [
               'tableColumn',
@@ -210,6 +317,7 @@ module.exports = () => {
               'toggleTableCaption'
             ]
           },
+          // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html
           heading: {
             options: [
               { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
@@ -217,45 +325,45 @@ module.exports = () => {
               { 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' },
-              { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
-              { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' },
-              {
-                  model: 'h1b',
-                  view: {name: 'h1', classes: 'ck-heading_h1_b'}, title: 'H1 (border)', class: 'ck-heading_heading1', converterPriority: 'high'
-              },
-              {
-                model: 'h2b',
-                view: {name: 'h2', classes: 'ck-heading_h2_b'}, title: 'H2 (border)', class: 'ck-heading_heading2', converterPriority: 'high'
-              },
-              {
-              model: 'h3b',
-              view: {name: 'h3', classes: 'ck-heading_h3_b'}, title: 'H3 (border)', class: 'ck-heading_heading3', converterPriority: 'high'
-              }
             ]
-          }
+          },
+          // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html
+          htmlSupport: {
+            allow: [
+                {
+                  name: 'img',
+                  attributes: {
+                      sizes:true,
+                      loading:true,
+                  }
+                },
+            ]
+          },
         }
       }
     }
-    }
+  }
 }
 ```
 ## <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.
+If you want to customize editor styles you should define styles in `config.plugin.styles` field.
 
 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).
 
-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']`
+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']` you cand disable it by `setAttribute:false`
+
+If you want default ckeditor theme you can set `strapiTheme:false`
 
-[More info about theming](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html)
+More [info about ckeditor theming](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html)
 
-[**👔 Default styles**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditor/styles.js#L3-L517)
+[**👔 Default styles**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditor/styles.js)
 
-[**🎨 Default colour variables**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditor/theme-colors.css#L105-L333)
+[**🎨 Default theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditor/theme.js)
 
 **Example of customization:**
 ```js
 // plugins.js
-const defStyles = require('./styles.js')
+const styles = require('./styles.js')
 
 module.exports = () => {
     return {
@@ -263,10 +371,31 @@ module.exports = () => {
           enabled: true,
           config:{
              plugin:{
-                // styles applied to editor container
+                // disable data-theme tag setting // 
+                // setAttribute:false,
+
+                // disable strapi theme, will use default ckeditor theme //
+                // strapiTheme:false,
+          
+                // styles applied to editor container, e.g:
                 styles:`
-                ${defStyles()}
-                --ck-color-editor-base-text:red;
+                ${styles()}
+                .ck-editor__styled__container{
+                  background:red;
+                }
+                html[data-theme='light'] {
+                --ck-scroll-track-background:red;
+                --ck-scroll-thumb-background:red;
+                --ck-scroll-thumb-border-color:red;
+                --ck-scroll-thumb-hover-background:red;
+                --ck-scroll-thumb-active-background:red;
+                --ck-color-base-border: red;
+                --ck-color-base-background:red;
+                --ck-custom-background: red;
+                --ck-custom-foreground: red;
+                --ck-custom-border: red;
+                --ck-custom-white: red;
+                }
                 `
              },
              // editor default config
@@ -279,17 +408,21 @@ module.exports = () => {
 }
 
 // styles.js
-const defStyles = () =>`
-
-        ### All default styles ###
-    `
-module.exports = defStyles;
+const styles = () =>`
+  .ck.ck-editor__main .ck-blurred{
+    max-height: 200px;
+  }
+  .ck.ck-editor__main .ck-focused{
+    max-height: 500px;
+  }        
+`
+module.exports = styles;
 ```
 
 ## <a id="requirements"></a>⚠️ Requirements
 Strapi **v4**
 
-Tested on **v4.18 - 4.19**
+Tested on **v4.18 - 4.1.11**
 
 ## <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