@_sh/strapi-plugin-ckeditor 1.1.2 → 2.0.0

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";
-
-const name = pluginPkg.strapi.name;
-
-export default {
-  register(app) {
-    app.addFields({ type: "wysiwyg", Component: Wysiwyg });
-    app.registerPlugin({
-      id: pluginId,
-      isReady: true,
-      name,
-    });
-  },
-  bootstrap(app) {
-  },
-};
+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";
+
+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",
+           }),
+         }),
+       },
+     });
+   }
+ };
+ 

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,50 +1,86 @@
-{
-  "name": "@_sh/strapi-plugin-ckeditor",
-  "version": "1.1.2",
-  "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
-  "private": false,
-  "keywords": [
-    "strapi",
-    "ckeditor",
-    "ckeditor5",
-    "ckeditor 5",
-    "wysiwyg",
-    "rich text",
-    "editor"
-  ],
-  "strapi": {
-    "icon": "edit",
-    "name": "ckeditor",
-    "displayName": "CKEditor 5",
-    "description": "Replaces the default Strapi WYSIWYG editor with a customized buil of CKEditor 5 packed with useful plugins.",
-    "kind": "plugin"
-  },
-  "files": [
-    "admin",
-    "server",
-    "strapi-admin.js",
-    "strapi-server.js"
-  ],
-  "dependencies": {
-    "@ckeditor/ckeditor5-react": "5.0.2"
-  },
-  "peerDependencies": {
-    "@strapi/strapi": "^4.0.0"
-  },
-  "author": {
-    "name": "nshenderov"
-  },
-  "homepage": "https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: no tests specified\" && exit 1"
-  },
-  "engines": {
-    "node": ">=14.x.x <=16.x.x",
-    "npm": ">=6.0.0"
-  },
-  "license": "MIT"
-}
+{
+  "name": "@_sh/strapi-plugin-ckeditor",
+  "version": "2.0.0",
+  "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
+  "private": false,
+  "keywords": [
+    "strapi",
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "wysiwyg",
+    "rich text",
+    "editor"
+  ],
+  "strapi": {
+    "name": "ckeditor5",
+    "displayName": "CKEditor 5",
+    "description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
+    "kind": "plugin"
+  },
+  "files": [
+    "admin",
+    "server",
+    "strapi-admin.js",
+    "strapi-server.js"
+  ],
+  "dependencies": {
+    "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.4.0"
+  },
+  "author": {
+    "name": "nshenderov"
+  },
+  "homepage": "https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no tests specified\" && exit 1"
+  },
+  "engines": {
+    "node": ">=14.19.1 <=18.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/server/controllers/config.js

@@ -1,15 +1,17 @@
-'use strict';
-
-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);
-    }
-    
-  },
+'use strict';
+
+const pluginId = require("../../admin/src/utils/pluginId");
+
+module.exports = {
+
+  getUploadConfig: async (ctx) => {
+    const uploadConfig = await strapi.plugin(pluginId).service('config').getUploadConfig('upload').getSettings();
+    ctx.send(uploadConfig);
+  },
+
+  getCKEditorConfig: async (ctx) => {
+    const config = await strapi.plugin(pluginId).service('config').getCKEditorConfig();
+    ctx.type = 'text/javascript';
+    ctx.send(config);
+  }
 };

package/server/controllers/index.js

@@ -1,7 +1,7 @@
-'use strict';
-
-const config = require('./config');
-
-module.exports = {
-  config
-};
+'use strict';
+
+const config = require('./config');
+
+module.exports = {
+  config
+};

package/server/index.js

@@ -1,25 +1,13 @@
-'use strict';
-
-const register = require('./register');
-const bootstrap = require('./bootstrap');
-const destroy = require('./destroy');
-const config = require('./config');
-const contentTypes = require('./content-types');
-const controllers = require('./controllers');
-const routes = require('./routes');
-const middlewares = require('./middlewares');
-const policies = require('./policies');
-const services = require('./services');
-
-module.exports = {
-  register,
-  bootstrap,
-  destroy,
-  config,
-  controllers,
-  routes,
-  services,
-  contentTypes,
-  policies,
-  middlewares,
-};
+'use strict';
+
+const register = require('./register');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const services = require('./services');
+
+module.exports = {
+  register,
+  controllers,
+  routes,
+  services
+};