@_sh/strapi-plugin-ckeditor 1.1.3 → 2.0.1

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

@@ -0,0 +1,135 @@
+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 .ck-color-picker-save {
+      & > svg {
+        stroke: #7b79ff !important;
+      }
+    }
+  }
+
+  .ck {
+    --ck-scroll-track-background: rgb(242, 242, 242);
+    --ck-scroll-thumb-background: rgb(236, 236, 236);
+    --ck-scroll-thumb-border-color: #cdcdf8;
+    --ck-scroll-thumb-hover-background: #f0f0ff;
+    --ck-scroll-thumb-active-background: #d9d8ff;
+
+    --ck-color-editor-base-text: #001234;
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-color-base-border: #dcdce4;
+    --ck-color-base-background: #ffffff;
+    --ck-custom-background: #ffffff;
+    --ck-custom-foreground: #dedede;
+    --ck-custom-border: #dcdce4;
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    --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: rgb(73, 69, 255);
+
+    --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: #f6f6f9;
+    --ck-color-button-default-active-shadow: #dedefb;
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-color: rgb(73, 69, 255);
+    --ck-color-button-on-background: #f0f0ff;
+    --ck-color-button-on-hover-background: #e6e9fc;
+    --ck-color-button-on-active-background: #f6f6f9;
+    --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%);
+  }
+`;

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

@@ -0,0 +1,79 @@
+import React from "react";
+import { prefixFileUrlWithBackendUrl, useLibrary } from "@strapi/helper-plugin";
+import PropTypes from "prop-types";
+
+const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsiveDimensions } }) => {
+  const { components } = useLibrary();
+  const MediaLibraryDialog = components["media-library"];
+
+  const handleChangeAssets = (assets) => {
+    let newValue = "";
+
+    assets.map(({name, url, alt, formats, mime}) => {
+
+      if (mime.includes("image")) {
+
+          if (formats && responsiveDimensions) {
+            let set = "";
+            let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width );
+            keys.map((k) => set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`);
+            newValue += `<img src="${url}" alt="${alt}" width="${formats[keys[keys.length-1]].width}px" srcset="${set}" />`;
+          } else {
+            newValue += `<img src="${url}" alt="${alt}" />`;
+          }
+
+      } else if (mime.includes("application/pdf")) {
+
+          newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}" download="${name}">${name || 'Download PDF'}</a>`;
+
+      }
+      // Handle videos and other type of files by adding some code
+    });
+
+    const viewFragment = editor.data.processor.toView( newValue );
+    const modelFragment = editor.data.toModel( viewFragment );
+    editor.model.insertContent( modelFragment );
+
+    onToggle();
+  };
+
+  const handleSelectAssets = (files) => {
+    const formattedFiles = files.map((f) => ({
+      name: f.name,
+      alt: f.alternativeText || f.name,
+      url: prefixFileUrlWithBackendUrl(f.url),
+      mime: f.mime,
+      formats: f.formats
+    }));
+
+    handleChangeAssets(formattedFiles);
+  };
+
+
+  
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <MediaLibraryDialog
+      onClose={onToggle}
+      onSelectAssets={handleSelectAssets}
+    />
+  );
+};
+
+MediaLib.defaultProps = {
+  isOpen: false,
+  onChange: () => {},
+  onToggle: () => {},
+};
+
+MediaLib.propTypes = {
+  isOpen: PropTypes.bool,
+  onChange: PropTypes.func,
+  onToggle: PropTypes.func,
+};
+
+export default MediaLib;

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

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {default as CKEditor} from "./CKEditor";
+import { useIntl } from "react-intl";
+import { Field, FieldHint, FieldError, FieldLabel } from "@strapi/design-system/Field";
+import { Stack } from "@strapi/design-system/Stack";
+
+const Wysiwyg = ({ name, attribute, onChange, value, intlLabel, labelAction, disabled, error, description, required }) => {
+  const { formatMessage } = useIntl();
+  const { preset, maxLengthCharacters, ...options } = attribute.options;
+  
+  return (
+    <Field name={name} id={name} error={error} hint={description && formatMessage(description)}>
+      <Stack spacing={1}>
+        <FieldLabel action={labelAction} required={required}>
+          {formatMessage(intlLabel)}
+        </FieldLabel>
+          <CKEditor disabled={disabled} name={name} onChange={onChange} value={value} preset={preset} maxLength={maxLengthCharacters}/>
+        <FieldHint />
+        <FieldError />
+      </Stack>
+    </Field>
+  );
+};
+
+
+Wysiwyg.defaultProps = {
+  description: null,
+  disabled: false,
+  error: null,
+  labelAction: null,
+  required: false,
+  value: "",
+};
+
+Wysiwyg.propTypes = {
+  intlLabel: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  attribute: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.object,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  labelAction: PropTypes.object,
+  required: PropTypes.bool,
+  value: PropTypes.string,
+};
+export default Wysiwyg;

package/admin/src/index.js

@@ -1,18 +1,110 @@
-import pluginPkg from "../../package.json";
-import Wysiwyg from "./components/Wysiwyg";
-import pluginId from "./pluginId";
+import React from "react";
+import * as yup from "yup";
 
-const name = pluginPkg.strapi.name;
+import baseConfigs from "./components/Input/CKEditor/configs";
+import getEditorConfig from "./utils/getEditorConfig";
+import CKEditorIcon from "./components/CKEditorIcon";
+import pluginId from "./utils/pluginId";
 
 export default {
-  register(app) {
-    app.addFields({ type: "wysiwyg", Component: Wysiwyg });
-    app.registerPlugin({
-      id: pluginId,
-      isReady: true,
-      name,
-    });
-  },
-  bootstrap(app) {
-  },
-};
+  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",
+           }),
+         }),
+       },
+     });
+   }
+ };
+ 

package/admin/src/utils/getEditorConfig.js

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

package/admin/src/utils/pluginId.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "1.1.3",
-  "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
+  "version": "2.0.1",
+  "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
   "private": false,
   "keywords": [
     "strapi",
@@ -13,10 +13,9 @@
     "editor"
   ],
   "strapi": {
-    "icon": "edit",
-    "name": "ckeditor",
+    "name": "ckeditor5",
     "displayName": "CKEditor 5",
-    "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
+    "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
     "kind": "plugin"
   },
   "files": [
@@ -26,10 +25,47 @@
     "strapi-server.js"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-react": "^5.0.2"
+    "ckeditor5": "^36.0.0",
+    "@ckeditor/ckeditor5-react": "^5.0.6",
+    "@ckeditor/ckeditor5-alignment": "^36.0.0",
+    "@ckeditor/ckeditor5-autoformat": "^36.0.0",
+    "@ckeditor/ckeditor5-autosave": "^36.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^36.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^36.0.0",
+    "@ckeditor/ckeditor5-style": "^36.0.0",
+    "@ckeditor/ckeditor5-code-block": "^36.0.0",
+    "@ckeditor/ckeditor5-easy-image": "^36.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^36.0.0",
+    "@ckeditor/ckeditor5-essentials": "^36.0.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^36.0.0",
+    "@ckeditor/ckeditor5-heading": "^36.0.0",
+    "@ckeditor/ckeditor5-highlight": "^36.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^36.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^36.0.0",
+    "@ckeditor/ckeditor5-html-support": "^36.0.0",
+    "@ckeditor/ckeditor5-image": "^36.0.0",
+    "@ckeditor/ckeditor5-indent": "^36.0.0",
+    "@ckeditor/ckeditor5-language": "^36.0.0",
+    "@ckeditor/ckeditor5-link": "^36.0.0",
+    "@ckeditor/ckeditor5-list": "^36.0.0",
+    "@ckeditor/ckeditor5-mention": "^36.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^36.0.0",
+    "@ckeditor/ckeditor5-page-break": "^36.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^36.0.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^36.0.0",
+    "@ckeditor/ckeditor5-remove-format": "^36.0.0",
+    "@ckeditor/ckeditor5-special-characters": "^36.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^36.0.0",
+    "@ckeditor/ckeditor5-table": "^36.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^36.0.0",
+    "@ckeditor/ckeditor5-typing": "^36.0.0",
+    "@ckeditor/ckeditor5-upload": "^36.0.0",
+    "@ckeditor/ckeditor5-word-count": "^36.0.0",
+    "sanitize-html": "^2.8.1",
+    "@_sh/ckeditor5-font-with-picker": "^0.0.1"
   },
   "peerDependencies": {
-    "@strapi/strapi": "^4.0.0"
+    "@strapi/strapi": "^4.4.0"
   },
   "author": {
     "name": "nshenderov"

package/server/controllers/config.js

@@ -1,21 +1,17 @@
 'use strict';
 
+const pluginId = require("../../admin/src/utils/pluginId");
+
 module.exports = {
-  getConfig: async (ctx) => {
-    const { configKey } = ctx.params;
-    if(configKey === 'uploadcfg'){
-      const uploadConfig = await strapi.plugin('ckeditor').service('config').getUploadConfig('upload').getSettings();
-      ctx.send(uploadConfig);
-    }else{
-      const config = await strapi.plugin('ckeditor').service('config').getConfig(configKey);
-      ctx.send(config);
-    }
 
+  getUploadConfig: async (ctx) => {
+    const uploadConfig = await strapi.plugin(pluginId).service('config').getUploadConfig('upload').getSettings();
+    ctx.send(uploadConfig);
   },
 
-  getEditorConfigScript: async (ctx) => {
-    const config = await strapi.plugin('ckeditor').service('config').getEditorConfigScript();
-    ctx.type = 'application/javascript';
+  getCKEditorConfig: async (ctx) => {
+    const config = await strapi.plugin(pluginId).service('config').getCKEditorConfig();
+    ctx.type = 'text/javascript';
     ctx.send(config);
   }
 };

package/server/index.js

@@ -9,5 +9,5 @@ module.exports = {
   register,
   controllers,
   routes,
-  services,
+  services
 };

package/server/register.js

@@ -1,5 +1,11 @@
 'use strict';
 
+const pluginId = require("../admin/src/utils/pluginId");
+
 module.exports = ({ strapi }) => {
-  // registeration phase
+  strapi.customFields.register({
+    name: 'CKEditor',
+    plugin: pluginId,
+    type: 'richtext'
+  })
 };

package/server/routes/index.js

@@ -1,16 +1,15 @@
 module.exports = [
     {
         method: 'GET',
-        path: '/config/:configKey',
-        handler: 'config.getConfig',
-        config: {policies: []},
+        path: '/config/upload',
+        handler: 'config.getUploadConfig',
     },
     {
         method: 'GET',
-        path: '/editor-config-script.js',
-        handler: 'config.getEditorConfigScript',
+        path: '/ckeditor-config',
+        handler: 'config.getCKEditorConfig',
         config: {
-            auth: false // Assume CKEditor config is not sensitive. We can't send a JWT token in a static script tag.
+            auth: false
         },
     }
 ];

package/server/services/config.js

@@ -2,27 +2,19 @@
 
 const fs = require("fs");
 
-/**
- * config.js configuration service
- */
-
 module.exports = ({ strapi }) => {
   return {
-    getConfig(key = 'editor') {
-      return strapi.plugin('ckeditor').config(key) ?? {};
+    getUploadConfig(name) {
+      return strapi.plugin('upload').service(name) ?? {};
     },
-    getEditorConfigScript() {
+    getCKEditorConfig() {
       const appDir = process.cwd();
-      const isTSProject = fs.existsSync(`${appDir}/dist`);
-      const jsDir = isTSProject ? `${appDir}/dist` : appDir;
 
-      const filename = `${jsDir}/config/ckeditor.js`;
+      const filename = `${appDir}/config/ckeditor.txt`;
+      
       return fs.existsSync(filename)
         ? fs.readFileSync(filename)
-        : 'globalThis.ckEditorConfig = null' // empty script tag causes no problems
-    },
-    getUploadConfig(name) {
-      return strapi.plugin('upload').service(name) ?? {};
+        : 'globalThis.CKEditorConfig = null'
     },
   };
 };