@_sh/strapi-plugin-ckeditor 2.1.2 → 3.0.0

package/admin/src/{components/Input/CKEditor → Input}/theme/common.js

@@ -1,4 +1,4 @@
-import { css } from "styled-components";
+import { css } from 'styled-components';
 
 export const common = css`
   .ck {
@@ -19,7 +19,6 @@ export const common = css`
     --ck-todo-list-checkmark-size: 16px;
   }
 
-  
   .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
     top: 64px !important;
   }
@@ -28,9 +27,9 @@ export const common = css`
   }
 
   .ck-editor__main {
-    
-    --ck-font-face: "Source Sans Pro", system-ui, Roboto, "Helvetica Neue", "Helvetica", Arial, sans-serif;
-    
+    --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue',
+      'Helvetica', Arial, sans-serif;
+
     color: var(--ck-color-editor-base-text);
     font-family: var(--ck-font-face);
 
@@ -39,7 +38,6 @@ export const common = css`
       margin: revert;
     }
 
-
     h1 {
       font-size: 2.3em;
     }
@@ -71,8 +69,8 @@ export const common = css`
     h5,
     h6 {
       line-height: 1.2em;
-      padding-top: .8em;
-      margin-bottom: .4em
+      padding-top: 0.8em;
+      margin-bottom: 0.4em;
     }
 
     blockquote,
@@ -81,8 +79,8 @@ export const common = css`
     ul {
       font-size: 1em;
       line-height: 1.6em;
-      padding-top: .2em;
-      margin-bottom: var(--ck-spacing-large)
+      padding-top: 0.2em;
+      margin-bottom: var(--ck-spacing-large);
     }
 
     figcaption {
@@ -180,7 +178,7 @@ export const common = css`
     }
   }
 
-  .ck .ck-source-editing-area textarea{
+  .ck .ck-source-editing-area textarea {
     color: var(--ck-color-text);
     background-color: var(--ck-color-base-background);
     border: 1px solid var(--ck-color-base-border) !important;
@@ -193,7 +191,7 @@ export const common = css`
     width: 20px !important;
     height: 25px !important;
     margin-left: -2px !important ;
-    
+
     & svg {
       color: var(--ck-color-text) !important;
       position: absolute;
@@ -213,19 +211,19 @@ export const common = css`
     /* color: #b3b3c4; */
   }
 
-  .ck[dir=rtl]{
+  .ck[dir='rtl'] {
     .ck-block-toolbar-button {
       margin-left: 2px !important ;
     }
-    & + div{
+    & + div {
       justify-content: flex-start;
       & > .ck-word-count {
-          & > div:first-child{
-            order: 2;
-          }
-          & > div:last-child{
-            order: 1;
-          }
+        & > div:first-child {
+          order: 2;
+        }
+        & > div:last-child {
+          order: 1;
+        }
       }
     }
   }

package/admin/src/{components/Input/CKEditor → Input}/theme/dark.js

@@ -1,4 +1,4 @@
-import { css } from "styled-components";
+import { css } from 'styled-components';
 
 export const dark = css`
   :root {
@@ -6,15 +6,12 @@ export const dark = css`
     --ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
     --ck-focus-ring: 1px solid #4945ff !important;
     --ck-color-button-default-hover-background: #262630 !important;
-
-    --ck-powered-by-background: #212134;
-    --ck-powered-by-border-color: #212134;
   }
 
   .ck.ck-powered-by > a > svg > path:first-child {
     fill: rgb(236, 236, 236);
   }
-  
+
   .ck.ck-powered-by > a > svg > path:nth-child(3) {
     fill: rgb(172, 156, 251);
   }
@@ -43,7 +40,8 @@ export const dark = css`
     --ck-color-base-focus: #bbbaf1;
     --ck-color-base-active: #2e2e5c;
     --ck-color-base-active-focus: #28284d;
-    /* -- Overrides generic colors. ------------------------------------------------------------- */
+    
+    /* -- Overrides generic colors. ----------------------------------------- */
 
     --ck-color-base-foreground: var(--ck-custom-background);
     --ck-color-focus-border: #6765bd;
@@ -51,7 +49,7 @@ export const dark = css`
     --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. ---------------------------------------- */
+    /* -- Overrides the default .ck-button class colors. -------------------- */
 
     --ck-color-button-default-background: rgb(33, 33, 52);
 
@@ -77,17 +75,19 @@ export const dark = css`
     --ck-color-button-save: hsl(120, 100%, 46%);
     --ck-color-button-cancel: hsl(15, 100%, 56%);
 
-    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+    /* -- 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. ----------------------------------- */
+    /* -- 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-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. ----------------------------------------- */
+    /* -- Overrides the default .ck-input class colors. --------------------- */
 
     --ck-color-input-background: var(--ck-custom-background);
     --ck-color-input-border: hsl(257, 3%, 43%);
@@ -96,47 +96,54 @@ export const dark = css`
     --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. ---------------------------- */
+    /* -- 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. ------------------------------------------ */
+    /* -- Overrides the default .ck-list class colors. ---------------------- */
 
     --ck-color-list-background: var(--ck-custom-background);
     --ck-color-list-button-hover-background: #121221;
     --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-background-focus: var(
+      --ck-color-base-active-focus
+    );
     --ck-color-list-button-on-text: #ffffff;
 
-    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+    /* -- 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. --------------------------------------- */
+    /* -- 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. --------------------------------------- */
+    /* -- 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. --------------------- */
+    /* -- 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. -------------------- */
+    /* -- 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. ---------------------- */
+    /* -- Overrides the default colors used by the ckeditor5-link package. -- */
 
     --ck-color-link-default: hsl(216, 100%, 75%);
-  }
 
+    --ck-powered-by-background: transparrent;
+    --ck-powered-by-border-color: var(--ck-color-base-background);
+
+    --ck-color-dialog-background: var(--ck-custom-background);
+    --ck-color-dialog-form-header-border: var(--ck-color-base-border);
+  }
 `;

package/admin/src/{components/Input/CKEditor → Input}/theme/light.js

@@ -1,14 +1,11 @@
-import { css } from "styled-components";
+import { css } from 'styled-components';
 
 export const light = css`
   :root {
     --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
     --ck-color-focus-disabled-shadow: #e4e3ff !important;
     --ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
-    --ck-color-button-default-hover-background: #F0F0FF !important;
-
-    --ck-powered-by-background: #ffffff;
-    --ck-powered-by-border-color: #ffffff;
+    --ck-color-button-default-hover-background: #f0f0ff !important;
   }
 
   .ck.ck-powered-by > a > svg > path:first-child {
@@ -37,7 +34,8 @@ export const light = css`
     --ck-color-base-focus: #bbbaf1;
     --ck-color-base-active: #f0f0ff;
     --ck-color-base-active-focus: #e2e2fd;
-    /* -- Overrides generic colors. ------------------------------------------------------------- */
+    
+    /* -- Overrides generic colors. ----------------------------------------- */
 
     --ck-color-base-foreground: var(--ck-custom-background);
 
@@ -47,7 +45,7 @@ export const light = css`
     --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. ---------------------------------------- */
+    /* -- Overrides the default .ck-button class colors. -------------------- */
 
     --ck-color-button-default-background: var(--ck-custom-background);
     --ck-color-button-default-hover-background: #f0f0ff;
@@ -72,17 +70,19 @@ export const light = css`
     --ck-color-button-save: hsl(120, 100%, 46%);
     --ck-color-button-cancel: hsl(15, 100%, 56%);
 
-    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+    /* -- 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. ----------------------------------- */
+    /* -- 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-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. ----------------------------------------- */
+    /* -- Overrides the default .ck-input class colors. --------------------- */
 
     --ck-color-input-background: var(--ck-custom-background);
     --ck-color-input-border: hsl(257, 3%, 43%);
@@ -91,46 +91,54 @@ export const light = css`
     --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. ---------------------------- */
+    /* -- 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. ------------------------------------------ */
+    /* -- 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-background-focus: var(
+      --ck-color-base-active-focus
+    );
     --ck-color-list-button-on-text: #271fe2;
 
-    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+    /* -- 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. --------------------------------------- */
+    /* -- 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. --------------------------------------- */
+    /* -- 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. --------------------- */
+    /* -- 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. -------------------- */
+    /* -- 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. ---------------------- */
+    /* -- Overrides the default colors used by the ckeditor5-link package. -- */
 
     --ck-color-link-default: hsl(209, 89%, 33%);
+
+    --ck-powered-by-background: transparrent;
+    --ck-powered-by-border-color: var(--ck-color-base-background);
+
+    --ck-color-dialog-background: var(--ck-custom-background);
+    --ck-color-dialog-form-header-border: var(--ck-color-base-border);
   }
 `;

package/admin/src/index.js

@@ -1,110 +1,80 @@
-import React from "react";
-import * as yup from "yup";
+import React from 'react';
+import * as yup from 'yup';
 
-import baseConfigs from "./components/Input/CKEditor/configs";
-import getEditorConfig from "./utils/getEditorConfig";
-import CKEditorIcon from "./components/CKEditorIcon";
-import pluginId from "./utils/pluginId";
+import './utils/exportToGlobal';
+import { getPresetsOptions } from './utils/getPresetsOptions';
+import pluginId from './pluginId';
+import CKEditorIcon from './CKEditorIcon';
 
 export default {
   async register(app) {
-
-    const {
-      configs: userConfigs = baseConfigs,
-      configsOverwrite: overwrite
-    } = await getEditorConfig() || {};
-
-    const setOptions = () => {
-
-      let configs = {};
-
-      if (overwrite) {
-        configs = userConfigs;
-      } else {
-        configs = baseConfigs;
-        if (userConfigs) {
-          Object.keys(userConfigs).map(cfgName=>{
-            if(baseConfigs.hasOwnProperty(cfgName))
-              configs[cfgName].field = { ...baseConfigs[cfgName].field, ...userConfigs[cfgName].field };
-            else configs[cfgName] = userConfigs[cfgName];
-          })
-        }
-      }
-
-      const options = [...Object.keys(configs).map(configName=>configs[configName].field)];
-
-      return options;
-    }
- 
-     app.customFields.register({
-       name: "CKEditor",
-       type: "richtext",
-       pluginId: pluginId,
-       icon: CKEditorIcon,
-       intlLabel: {
-         id: pluginId + ".label",
-         defaultMessage: "CKEditor 5",
-       },
-       intlDescription: {
-         id: pluginId + ".description",
-         defaultMessage: "The rich text editor for every use case",
-       },
-       components: {
-         Input: async () => import("./components/Input"),
-       },
-       options: {
-         base: [
-           {
-             intlLabel: {
-               id: pluginId + ".preset.label",
-               defaultMessage: "Choose editor version",
-             },
-             description: {
-               id: pluginId + ".preset.description",
-               defaultMessage: " ",
-             },
-             name: "options.preset",
-             type: "select",
-             options: setOptions(),
-           },
-         ],
-         advanced: [
-           {
-             sectionTitle: null,
-             items: [
-               {
-                 name: "required",
-                 type: "checkbox",
-                 intlLabel: {
-                   id: pluginId + ".required.label",
-                   defaultMessage: "Required field",
-                 },
-                 description: {
-                   id: pluginId + "required.description",
-                   defaultMessage:
-                     "You won't be able to create an entry if this field is empty",
-                 },
-               },
-               {
-                 name: "options.maxLengthCharacters",
-                 type: "checkbox-with-number-field",
-                 intlLabel: {
-                   id: pluginId + ".maxLength.label",
-                   defaultMessage: "Maximum length (characters)",
-                 },
-               }
- 
-             ],
-           },
-         ],
-         validator: (args) => ({
-           preset: yup.string().required({
-             id: pluginId + ".preset.error.required",
-             defaultMessage: "Editor preset is required",
-           }),
-         }),
-       },
-     });
-   }
- };
- 
+    app.customFields.register({
+      name: 'CKEditor',
+      type: 'richtext',
+      pluginId: pluginId,
+      icon: CKEditorIcon,
+      intlLabel: {
+        id: pluginId + '.label',
+        defaultMessage: 'CKEditor 5',
+      },
+      intlDescription: {
+        id: pluginId + '.description',
+        defaultMessage: 'The rich text editor for every use case',
+      },
+      components: {
+        Input: async () => import('./Input'),
+      },
+      options: {
+        base: [
+          {
+            intlLabel: {
+              id: pluginId + '.preset.label',
+              defaultMessage: 'Preset',
+            },
+            description: {
+              id: pluginId + '.preset.description',
+              defaultMessage: ' ',
+            },
+            name: 'options.preset',
+            type: 'select',
+            options: await getPresetsOptions(),
+          },
+        ],
+        advanced: [
+          {
+            sectionTitle: null,
+            items: [
+              {
+                name: 'required',
+                type: 'checkbox',
+                intlLabel: {
+                  id: pluginId + '.required.label',
+                  defaultMessage: 'Required field',
+                },
+                description: {
+                  id: pluginId + 'required.description',
+                  defaultMessage:
+                    "You won't be able to create an entry if this field is empty",
+                },
+              },
+              {
+                name: 'options.maxLengthCharacters',
+                type: 'checkbox-with-number-field',
+                intlLabel: {
+                  id: pluginId + '.maxLength.label',
+                  defaultMessage: 'Maximum length (characters)',
+                },
+              },
+            ],
+          },
+        ],
+        validator: (args) => ({
+          preset: yup.string().required({
+            id: pluginId + '.preset.error.required',
+            defaultMessage: 'Editor preset is required',
+          }),
+        }),
+      },
+    });
+  },
+};

package/admin/src/pluginId.js

@@ -0,0 +1,7 @@
+const pluginPkg = require('../../package.json');
+
+const pluginId =
+  pluginPkg.strapi.name ||
+  pluginPkg.name.replace(/^(@_sh\/strapi-)plugin-/i, '');
+
+module.exports = pluginId;

package/admin/src/utils/exportToGlobal.js

@@ -0,0 +1,8 @@
+import * as cke from 'ckeditor5';
+import { StrapiMediaLib, StrapiUploadAdapter } from '../Input/plugins';
+import { materialColors } from '../Input/presets/colors';
+
+globalThis.SH_CKE = cke;
+globalThis.SH_CKE.StrapiMediaLib = StrapiMediaLib;
+globalThis.SH_CKE.StrapiUploadAdapter = StrapiUploadAdapter;
+globalThis.SH_CKE.MaterialColors = materialColors;

package/admin/src/utils/{getEditorConfig.js → getPluginConfig.js}

@@ -1,13 +1,13 @@
-import pluginId from "./pluginId";
+import pluginId from '../pluginId';
 
 const insertConfigScript = () => {
   const url =
-    strapi.backendURL !== "/"
-      ? `${strapi.backendURL}/${pluginId}/ckeditor-config`
-      : `/${pluginId}/ckeditor-config`;
+    strapi.backendURL !== '/'
+      ? `${strapi.backendURL}/${pluginId}/config/ckeditor`
+      : `/${pluginId}/config/ckeditor`;
 
-  var script = document.createElement("script");
-  script.id = "ckeditor-config";
+  var script = document.createElement('script');
+  script.id = 'ckeditor-config';
   script.src = url;
   document.body.appendChild(script);
 };
@@ -15,14 +15,14 @@ const insertConfigScript = () => {
 const waitForConfigToInitialize = async () => {
   return new Promise((resolve) => {
     (function checkConfigLoaded() {
-      if (typeof globalThis.CKEditorConfig !== "undefined") {
-        resolve(globalThis.CKEditorConfig);
+      if (typeof globalThis.SH_CKE_CONFIG !== 'undefined') {
+        resolve(globalThis.SH_CKE_CONFIG);
       } else setTimeout(checkConfigLoaded, 5);
     })();
   });
 };
 
-const getEditorConfig = async () => {
+export const getPluginConfig = async () => {
   // raw config/ckeditor.[js|ts] file
   // Can be used with non-JSON serializable properties
   insertConfigScript();
@@ -31,7 +31,5 @@ const getEditorConfig = async () => {
     return configFromScript;
   }
 
-    return null;
+  return null;
 };
-
-export default getEditorConfig;

package/admin/src/utils/getPresetsOptions.js

@@ -0,0 +1,38 @@
+import basePresets from '../Input/presets';
+import { getPluginConfig } from './getPluginConfig';
+
+const mergePresetsTo = (userPresets, basePresets) => {
+  Object.keys(userPresets).map((presetName) => {
+    if (basePresets.hasOwnProperty(presetName)) {
+      basePresets[presetName].field = {
+        ...basePresets[presetName].field,
+        ...userPresets[presetName].field,
+      };
+      basePresets[presetName].styles =
+        userPresets[presetName].styles || basePresets[presetName].styles;
+      basePresets[presetName].editorConfig = {
+        ...basePresets[presetName].editorConfig,
+        ...userPresets[presetName].editorConfig,
+      };
+    } else {
+      basePresets[presetName] = userPresets[presetName];
+    }
+  });
+};
+
+export const getPresetsOptions = async () => {
+  const { presets: userPresets, dontMergePresets } =
+    (await getPluginConfig()) || {};
+
+  if (!dontMergePresets && userPresets) {
+    mergePresetsTo(userPresets, basePresets);
+  }
+
+  const options = [
+    ...Object.keys(basePresets).map(
+      (presetName) => basePresets[presetName].field
+    ),
+  ];
+
+  return options;
+};