@_sh/strapi-plugin-ckeditor 3.0.2 → 4.0.1

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

@@ -1,230 +0,0 @@
-import { css } from 'styled-components';
-
-export const common = css`
-  .ck {
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
-    --ck-color-mention-text: hsl(341, 100%, 30%);
-    --ck-color-table-caption-background: hsl(0, 0%, 97%);
-    --ck-color-table-caption-text: hsl(0, 0%, 20%);
-    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
-    --ck-highlight-marker-green: hsl(120, 93%, 68%);
-    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
-    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
-    --ck-highlight-pen-green: hsl(112, 100%, 27%);
-    --ck-highlight-pen-red: hsl(0, 85%, 49%);
-    --ck-image-style-spacing: 1.5em;
-    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
-    --ck-todo-list-checkmark-size: 16px;
-  }
-
-  .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
-    top: 64px !important;
-  }
-  .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
-    border-radius: 4px;
-  }
-
-  .ck-editor__main {
-    --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);
-
-    * {
-      font: revert;
-      margin: revert;
-    }
-
-    h1 {
-      font-size: 2.3em;
-    }
-
-    h2 {
-      font-size: 1.84em;
-    }
-
-    h3 {
-      font-size: 1.48em;
-    }
-
-    h4 {
-      font-size: 1.22em;
-    }
-
-    h5 {
-      font-size: 1.06em;
-    }
-
-    h6 {
-      font-size: 1em;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      line-height: 1.2em;
-      padding-top: 0.8em;
-      margin-bottom: 0.4em;
-    }
-
-    blockquote,
-    ol,
-    p,
-    ul {
-      font-size: 1em;
-      line-height: 1.6em;
-      padding-top: 0.2em;
-      margin-bottom: var(--ck-spacing-large);
-    }
-
-    figcaption {
-      background-color: var(--ck-color-image-caption-background);
-      caption-side: bottom;
-      color: var(--ck-color-image-caption-text);
-      display: table-caption;
-      font-size: 0.75em;
-      outline-offset: -1px;
-      padding: 0.6em;
-      word-break: break-word;
-    }
-
-    a {
-      text-decoration: none;
-      color: #1b3af2;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    .table {
-      margin: 0;
-    }
-
-    ul.todo-list {
-      list-style: none;
-      margin: revert;
-      color: revert;
-      font-family: revert;
-      margin-left: 2rem;
-    }
-
-    ul,
-    ol {
-      list-style: initial;
-      margin-left: 2rem;
-    }
-
-    ol {
-      list-style: decimal;
-    }
-
-    sub {
-      vertical-align: sub;
-    }
-
-    sup {
-      vertical-align: super;
-    }
-
-    .ck.ck-content.ck-editor__editable {
-      line-height: initial;
-      min-height: 12.5rem;
-      border-bottom-left-radius: 0.25rem;
-      border-bottom-right-radius: 0.25rem;
-      transition-property: border-color, box-shadow, max-height;
-      transition-timing-function: ease-in-out;
-      transition-duration: 0.5s;
-      &.ck-focused:not(.ck-editor__nested-editable) {
-        border: 1px solid var(--ck-color-base-border);
-        /* border: var(--ck-focus-ring); */
-        box-shadow: none;
-        transition-property: border-color, box-shadow, max-height;
-        transition-timing-function: ease-in-out;
-        transition-duration: 0.5s;
-      }
-    }
-
-    .ck-focused,
-    .ck-blurred {
-      overflow-y: auto;
-      overflow-x: hidden;
-      transition: max-height 0.5s ease-in-out;
-      ::-webkit-scrollbar {
-        width: 7px;
-      }
-      ::-webkit-scrollbar-track {
-        background: var(--ck-scroll-track-background);
-        border: none;
-      }
-      ::-webkit-scrollbar-thumb {
-        transition: background 2s;
-        background: var(--ck-scroll-thumb-background);
-        border: 1px solid var(--ck-scroll-thumb-border-color);
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        transition: background 2s;
-        background: var(--ck-scroll-thumb-hover-background);
-      }
-      ::-webkit-scrollbar-thumb:active {
-        background: var(--ck-scroll-thumb-active-background);
-      }
-    }
-  }
-
-  .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;
-    box-shadow: none !important;
-  }
-
-  .ck .ck-block-toolbar-button {
-    min-width: 0 !important;
-    min-height: 0 !important;
-    width: 20px !important;
-    height: 25px !important;
-    margin-left: -2px !important ;
-
-    & svg {
-      color: var(--ck-color-text) !important;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .ck-word-count {
-    margin-top: 0.3rem;
-    display: flex;
-    justify-content: end;
-    gap: 0.3rem;
-    font-size: 0.7rem;
-    font-weight: 500;
-    text-transform: lowercase;
-    /* color: #b3b3c4; */
-  }
-
-  .ck[dir='rtl'] {
-    .ck-block-toolbar-button {
-      margin-left: 2px !important ;
-    }
-    & + div {
-      justify-content: flex-start;
-      & > .ck-word-count {
-        & > div:first-child {
-          order: 2;
-        }
-        & > div:last-child {
-          order: 1;
-        }
-      }
-    }
-  }
-`;

package/admin/src/Input/theme/dark.js

@@ -1,149 +0,0 @@
-import { css } from 'styled-components';
-
-export const dark = css`
-  :root {
-    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
-    --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.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);
-  }
-
-  .ck {
-    --ck-scroll-track-background: #3d3d57;
-    --ck-scroll-thumb-background: #181826;
-    --ck-scroll-thumb-border-color: rgb(70, 70, 70);
-    --ck-scroll-thumb-hover-background: #202033;
-    --ck-scroll-thumb-active-background: #2b2b45;
-
-    --ck-color-editor-base-text: rgb(236, 236, 236);
-    /* Overrides the border radius setting in the theme. */
-    --ck-border-radius: 4px;
-
-    /* Helper variables to avoid duplication in the colors. */
-    --ck-color-base-border: #4a4a6a;
-    --ck-color-base-background: #212134;
-    --ck-custom-background: #181826;
-    --ck-custom-foreground: #26263b;
-    --ck-custom-border: #4a4a6a;
-    --ck-custom-white: hsl(0, 0%, 100%);
-
-    --ck-color-focus-outer-shadow: #212134;
-
-    --ck-color-base-focus: #bbbaf1;
-    --ck-color-base-active: #2e2e5c;
-    --ck-color-base-active-focus: #28284d;
-    
-    /* -- Overrides generic colors. ----------------------------------------- */
-
-    --ck-color-base-foreground: var(--ck-custom-background);
-    --ck-color-focus-border: #6765bd;
-    --ck-color-text: hsl(0, 0%, 93%);
-    --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. -------------------- */
-
-    --ck-color-button-default-background: rgb(33, 33, 52);
-
-    --ck-color-button-default-hover-background: #262630;
-    --ck-color-button-default-active-background: #3c3c47;
-    --ck-color-button-default-active-shadow: #3c3c47;
-    --ck-color-button-default-disabled-background: var(--ck-custom-background);
-
-    --ck-color-button-on-color: #7b79ff;
-    --ck-color-button-on-background: #2b2b36;
-    --ck-color-button-on-hover-background: #30303b;
-    --ck-color-button-on-active-background: #3c3c47;
-    --ck-color-button-on-active-shadow: #3c3c47;
-    --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(255, 4%, 21%);
-    --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. ---------*/
-
-    --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: #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-text: #ffffff;
-
-    /* -- 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: #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. -- */
-
-    --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/Input/theme/index.js

@@ -1,13 +0,0 @@
-import { common } from './common';
-import { light } from './light';
-import { dark } from './dark';
-import { additional } from './additional';
-
-const baseTheme = {
-    common: common,
-    light: light,
-    dark: dark,
-    additional: additional
-}
-
-export default baseTheme;

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

@@ -1,144 +0,0 @@
-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-powered-by > a > svg > path:first-child {
-    fill: #001234;
-  }
-
-  .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%);
-
-    --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,80 +0,0 @@
-import React from 'react';
-import * as yup from 'yup';
-
-import './utils/exportToGlobal';
-import { getPresetsOptions } from './utils/getPresetsOptions';
-import pluginId from './pluginId';
-import CKEditorIcon from './CKEditorIcon';
-
-export default {
-  async register(app) {
-    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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/getPluginConfig.js

@@ -1,35 +0,0 @@
-import pluginId from '../pluginId';
-
-const insertConfigScript = () => {
-  const url =
-    strapi.backendURL !== '/'
-      ? `${strapi.backendURL}/${pluginId}/config/ckeditor`
-      : `/${pluginId}/config/ckeditor`;
-
-  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.SH_CKE_CONFIG !== 'undefined') {
-        resolve(globalThis.SH_CKE_CONFIG);
-      } else setTimeout(checkConfigLoaded, 5);
-    })();
-  });
-};
-
-export const getPluginConfig = 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;
-};