@_sh/strapi-plugin-ckeditor 1.1.2 → 2.0.0

package/admin/src/components/Input/CKEditor/configs/blockBaloon.js

@@ -0,0 +1,25 @@
+import { blockBaloonEditorConfig } from "./base";
+
+export const blockBaloonEditor = {
+  blockBaloon: {
+    styles: `
+          .ck-content{
+            border-radius:4px !important;
+          }
+          .ck-sticky-panel{
+            display:none !important;
+          }
+        `,
+    field: {
+      key: "blockBaloon",
+      value: "blockBaloon",
+      metadatas: {
+        intlLabel: {
+          id: "ckeditor.preset.blockBaloon.label",
+          defaultMessage: "Block baloon version",
+        },
+      },
+    },
+    editorConfig: blockBaloonEditorConfig,
+  },
+};

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

@@ -0,0 +1,11 @@
+import { toolbarEditor } from './toolbar';
+import { toolbarBaloonEditor } from './toolbarBaloon';
+import { blockBaloonEditor } from './blockBaloon';
+
+const baseConfigs = {
+    ...toolbarEditor,
+    ...toolbarBaloonEditor,
+    ...blockBaloonEditor
+}
+
+export default baseConfigs;

package/admin/src/components/Input/CKEditor/configs/toolbar.js

@@ -0,0 +1,17 @@
+import { toolbarEditorConfig } from "./base";
+
+export const toolbarEditor = {
+  toolbar: {
+    field: {
+      key: "toolbar",
+      value: "toolbar",
+      metadatas: {
+        intlLabel: {
+          id: "ckeditor.preset.toolbar.label",
+          defaultMessage: "Toolbar version",
+        },
+      },
+    },
+    editorConfig: toolbarEditorConfig,
+  },
+};

package/admin/src/components/Input/CKEditor/configs/toolbarBaloon.js

@@ -0,0 +1,17 @@
+import { toolbarBaloonEditorConfig } from "./base";
+
+export const toolbarBaloonEditor = {
+  toolbarBaloon: {
+    field: {
+      key: "toolbarBaloon",
+      value: "toolbarBaloon",
+      metadatas: {
+        intlLabel: {
+          id: "ckeditor.preset.toolbarBaloon.label",
+          defaultMessage: "Toolbar baloon version",
+        },
+      },
+    },
+    editorConfig: toolbarBaloonEditorConfig,
+  },
+};

package/admin/src/components/Input/CKEditor/configuration.js

@@ -0,0 +1,166 @@
+import { auth, request } from "@strapi/helper-plugin";
+import cloneDeep from 'lodash/cloneDeep';
+
+import baseConfigs from "./configs";
+import pluginId from "../../../utils/pluginId";
+
+const importLang = async (config, language) => {
+  
+  if (!language) return;
+
+  const { plugins: configPlugins = [] } = config;
+
+  const configPluginNames = [...configPlugins.map((p) => p.pluginName)];
+
+  const plugins = [
+    { name: "DocumentList", module: "ckeditor5-list" },
+    { name: "TextPartLanguage", module: "ckeditor5-language" },
+    { name: "Alignment", module: "ckeditor5-alignment" },
+    { name: "Autosave", module: "ckeditor5-autosave" },
+    { name: "BlockQuote", module: "ckeditor5-block-quote" },
+    { name: "CodeBlock", module: "ckeditor5-code-block" },
+    { name: "Heading", module: "ckeditor5-heading" },
+    { name: "HtmlEmbed", module: "ckeditor5-html-embed" },
+    { name: "GeneralHtmlSupport", module: "ckeditor5-html-support" },
+    { name: "HorizontalLine", module: "ckeditor5-horizontal-line" },
+    { name: "MediaEmbed", module: "ckeditor5-media-embed" },
+    { name: "Image", module: "ckeditor5-image" },
+    { name: "Indent", module: "ckeditor5-indent" },
+    { name: "Link", module: "ckeditor5-link" },
+    { name: "RemoveFormat", module: "ckeditor5-remove-format" },
+    { name: "Table", module: "ckeditor5-table" },
+    { name: "WordCount", module: "ckeditor5-word-count" },
+    { name: "FindAndReplace", module: "ckeditor5-find-and-replace" },
+    { name: "SpecialCharacters", module: "ckeditor5-special-characters" },
+    { name: "PageBreak", module: "ckeditor5-page-break" },
+    { name: "SourceEditing", module: "ckeditor5-source-editing" },
+    { name: "Highlight", module: "ckeditor5-highlight" },
+    { name: "Style", module: "ckeditor5-style" },
+  ];
+
+  const basicStylesPlugin = [
+    "Bold",
+    "Code",
+    "Italic",
+    "Strikethrough",
+    "Subscript",
+    "Superscript",
+    "Underline",
+  ];
+
+  const fontPlugin = ["FontBackgroundColor", "FontColor", "FontFamily", "FontSize"];
+
+  const listPlugin = ["List", "DocumentList"];
+
+  await Promise.all(
+    plugins
+      .filter(({ name }) => configPluginNames.includes(name))
+      .map(
+        async ({ module }) =>
+          await import(
+            /* webpackMode: "lazy-once" */ `@ckeditor/${module}/build/translations/${language}.js`
+          ).catch(() => null)
+      )
+  );
+
+  if (configPluginNames.some((p) => basicStylesPlugin.includes(p)))
+    await import(
+      /* webpackMode: "lazy-once" */ `@ckeditor/ckeditor5-basic-styles/build/translations/${language}.js`
+    ).catch(() => null);
+  if (configPluginNames.some((p) => listPlugin.includes(p)))
+    await import(
+      /* webpackMode: "lazy-once" */ `@ckeditor/ckeditor5-list/build/translations/${language}.js`
+    ).catch(() => null);
+  if (configPluginNames.some((p) => fontPlugin.includes(p)))
+    await import(
+      /* webpackMode: "lazy-once" */ `@_sh/ckeditor5-font-with-picker/build/translations/${language}.js`
+    ).catch(() => null);
+};
+
+const setLanguage = async (config) => {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const params = Object.fromEntries(urlSearchParams.entries());
+  const languageContent = params["plugins[i18n][locale]"];
+
+  const preferedLanguage = auth.getUserInfo().preferedLanguage;
+
+  const { ui = preferedLanguage || 'en', content, textPartLanguage, ignorei18n } = config.language || {};
+
+  if (languageContent) {
+    const locale = languageContent.split("-")[0];
+
+    config.language = {
+      ui: typeof config.language === "string" ? config.language : ui,
+      content: ignorei18n ? content : locale,
+      textPartLanguage: textPartLanguage,
+    };
+
+    await importLang(config, config.language.ui);
+    await importLang(config, config.language.content);
+  } else if (typeof config.language === "object") {
+    await importLang(config, config.language.ui);
+    await importLang(config, config.language.content);
+  } else if (typeof config.language === "string") {
+    await importLang(config, config.language);
+  } else {
+    config.language = preferedLanguage;
+    await importLang(config, preferedLanguage);
+  }
+};
+
+const getCurrentConfig = (presetName) => {
+  const { configs: userConfigs, configsOverwrite: overwrite } = globalThis.CKEditorConfig || {};
+
+  let configs;
+
+  if (overwrite) {
+    configs = userConfigs;
+  } else {
+    configs = baseConfigs;
+    if (userConfigs) {
+      Object.keys(userConfigs).map(cfgName=>{
+        if(baseConfigs.hasOwnProperty(cfgName)){
+          configs[cfgName].fields = { ...baseConfigs[cfgName].field, ...userConfigs[cfgName].field };
+          configs[cfgName].styles = userConfigs[cfgName].styles || baseConfigs[cfgName].styles;
+          configs[cfgName].editorConfig = { ...baseConfigs[cfgName].editorConfig, ...userConfigs[cfgName].editorConfig };
+        } else { configs[cfgName] = userConfigs[cfgName] }
+      })
+    }
+  }
+
+  const clonedConfig = cloneDeep(configs[presetName]);
+
+  return clonedConfig;
+};
+
+const setPlugins = (config, { responsiveDimensions }, toggleMediaLib) => {
+  const configPluginNames = config.editorConfig?.plugins ? [ ...config.editorConfig.plugins.map((p) => p.pluginName)] : [];
+
+  if (configPluginNames.includes("StrapiMediaLib")) {
+    config.editorConfig.strapiMediaLib = { toggle: toggleMediaLib };
+  }
+  if (configPluginNames.includes("StrapiUploadAdapter")) {
+    config.editorConfig.strapiUploadAdapter = {
+      uploadUrl: `${strapi.backendURL}/upload`,
+      headers: { Authorization: "Bearer " + auth.getToken() },
+      backendUrl: strapi.backendURL,
+      responsive: responsiveDimensions,
+    };
+  }
+  if (configPluginNames.includes("WordCount")) {
+    config.editorConfig.WordCountPlugin = true;
+  }
+};
+const requestConfig = (key) => request(`/${pluginId}/config/${key}`, { method: "GET" });
+
+export const getConfiguration = async (presetName, toggleMediaLib) => {
+  const currentConfig = getCurrentConfig(presetName);
+
+  const uploadPluginConfig = await requestConfig("upload");
+
+  setPlugins(currentConfig, uploadPluginConfig, toggleMediaLib);
+
+  await setLanguage(currentConfig.editorConfig);
+
+  return { currentConfig, uploadPluginConfig };
+};

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { CKEditor } from "@ckeditor/ckeditor5-react";
+import { Box, Loader } from '@strapi/design-system';
+
+import {getConfiguration} from "./configuration";
+import {getGlobalStyling} from "./styling";
+import MediaLib from "../MediaLib";
+
+import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
+import ckeditor5EditorClassicDll from "@ckeditor/ckeditor5-editor-classic/build/editor-classic.js";
+
+const GlobalStyling = getGlobalStyling();
+
+const Wrapper = styled("div")`${({ editorStyles }) => editorStyles}`;
+
+const Editor = ({ onChange, name, value, disabled, preset, maxLength }) => {
+
+  const [ editorInstance, setEditorInstance ] = useState(false);
+  
+  const [mediaLibVisible, setMediaLibVisible] = useState(false);
+  
+  const [uploadPluginConfig, setUploadPluginConfig] = useState(null);
+  
+  const [config, setConfig] = useState(null);
+
+  const [lengthMax, setLengthMax] = useState(false);
+
+  const wordCounter = useRef(null);
+  
+  const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
+
+  const handleCounter = (number) => number > maxLength ? setLengthMax(true) : setLengthMax(false);
+  
+  useEffect(() => {
+    (async () => {
+      const {currentConfig, uploadPluginConfig} = await getConfiguration(preset, handleToggleMediaLib);
+      setConfig(currentConfig);
+      setUploadPluginConfig(uploadPluginConfig);
+    })();
+  }, []);
+
+  return (
+    <>
+    {config && <GlobalStyling />}
+    <Wrapper editorStyles={config?.styles} >
+      {!config &&
+      <LoaderBox hasRadius background="neutral100">
+        <Loader>Loading...</Loader>
+      </LoaderBox>}
+      {config &&
+          <CKEditor
+            editor={window.CKEditor5.editorClassic.ClassicEditor}
+            config={config?.editorConfig}
+            disabled={disabled}
+            data={value || ""}
+            onReady={(editor) => {
+              editor.setData(value || "");
+              
+              if(config.editorConfig.WordCountPlugin){
+                const wordCountPlugin = editor.plugins.get( 'WordCount' );
+                wordCountPlugin.on( 'update', ( evt, stats ) =>handleCounter(stats.characters));
+                const wordCountWrapper = wordCounter.current;
+                wordCountWrapper?.appendChild( wordCountPlugin.wordCountContainer );
+              }
+
+              if(editor.plugins.has( 'ImageUploadEditing' )){
+                editor.plugins.get( 'ImageUploadEditing' ).on( 'uploadComplete', ( evt, { data, imageElement } ) =>    
+                  editor.model.change( writer => writer.setAttribute( 'alt', data.alt, imageElement ) ) ); 
+              }
+            
+              setEditorInstance( editor );
+            }}
+            onChange={(event, editor) => {
+              const data = editor.getData();
+              onChange({ target: { name, value: data } });
+            }}
+          />
+      }
+      {config && config.editorConfig.WordCountPlugin && 
+          <CounterLoaderBox 
+            color={lengthMax?"danger500":"neutral400"} 
+            ref={wordCounter}>
+              {!editorInstance && <Loader small>Loading...</Loader>}
+          </CounterLoaderBox>
+      }
+      {uploadPluginConfig && <MediaLib isOpen={mediaLibVisible} onToggle={handleToggleMediaLib} editor={editorInstance} uploadConfig={uploadPluginConfig} />}
+    </Wrapper>
+    </>
+  );
+};
+
+Editor.defaultProps = {
+  value: "",
+  disabled: false,
+};
+
+Editor.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+const CounterLoaderBox = styled(Box)`
+  display:flex;
+  width: 100%;
+  justify-content: flex-end;
+  align-items: center;
+  `
+const LoaderBox = styled(Box)`
+  display:flex;
+  height: 200px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  `
+
+export default Editor;

package/admin/src/components/Input/CKEditor/plugins/StrapiMediaLib.js

@@ -0,0 +1,43 @@
+const Plugin = window.CKEditor5.core.Plugin;
+const ButtonView = window.CKEditor5.ui.ButtonView;
+const mediaLibIcon = '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+  '<path fill-rule="evenodd" clip-rule="evenodd" d="M4.3.6a.9.9 0 100 1.8h15.311a.9.9 0 100-1.8H4.301zm17.1 3.7A1.6 1.6' +
+  ' 0 0123 5.9v15.5a1.6 1.6 0 01-1.6 1.6H2.6A1.601 1.601 0 011 21.4V8 5.915C1 5.03 1.716 4.3 2.6' +
+  ' 4.3h18.8zM5.032 19.18h14.336l-3.136-3.205-1.792 1.831-4.032-4.12-5.376 5.494zm13.44-8.697c0 ' +
+  '1.282-.985 2.289-2.24 2.289-1.254 0-2.24-1.007-2.24-2.29 0-1.281.986-2.288 2.24-2.288 1.255 0 2.24 1.007 2.24 2.289z">' +
+  '</path></svg>'
+
+export default class StrapiMediaLib extends Plugin {
+
+  /**
+   * Strapi function used to show media library modal.
+   * Should be provided via connect method before using toggle method.
+   *
+   * @type {function|null}
+   */
+  strapiToggle = null;
+
+  static get pluginName() {
+    return 'StrapiMediaLib'
+  }
+
+  init() {
+    const editor = this.editor;
+    const config = editor.config.get('strapiMediaLib');
+    editor.ui.componentFactory.add('strapiMediaLib', () => {
+
+      const button = new ButtonView();
+
+      button.set({
+        label: "Media Library",
+        icon: mediaLibIcon,
+        tooltip: true
+      });
+
+      button.on('execute', config.toggle.bind(this));
+
+      return button;
+    });
+  }
+
+}

package/admin/src/components/Input/CKEditor/plugins/StrapiUploadAdapter.js

@@ -0,0 +1,203 @@
+const Plugin = window.CKEditor5.core.Plugin;
+const FileRepository = window.CKEditor5.upload.FileRepository;
+
+/**
+ * Similar to Simple upload adapter but customized for Strapi.
+ * Inspired by https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-upload/src/adapters/simpleuploadadapter.js
+ */
+export default class StrapiUploadAdapter extends Plugin {
+  /**
+   * @inheritDoc
+   */
+  static get requires() {
+    return [FileRepository];
+  }
+
+  /**
+   * @inheritDoc
+   */
+  static get pluginName() {
+    return "StrapiUploadAdapter";
+  }
+
+  /**
+   * @inheritDoc
+   */
+  init() {
+    
+    // backendUrl
+    // uploadUrl
+    // headers
+    // responsive
+
+    const options = this.editor.config.get("strapiUploadAdapter");
+
+    if (!options) {
+      return;
+    }
+
+    if (!options.uploadUrl) {
+      console.warn(
+        'strapi-upload-adapter-missing-uploadUrl: Missing the "uploadUrl" property in the "strapiUploadAdapter" editor configuration.'
+      );
+
+      return;
+    }
+
+    this.editor.plugins.get(FileRepository).createUploadAdapter = (loader) => {
+      return new Adapter(loader, options);
+    };
+  }
+}
+
+/**
+ * Upload adapter.
+ *
+ * @private
+ */
+class Adapter {
+  /**
+   * Creates a new adapter instance.
+   */
+  constructor(loader, options) {
+    /**
+     * FileLoader instance to use during the upload.
+     *
+     */
+    this.loader = loader;
+
+    /**
+     * The configuration of the adapter.
+     *
+     */
+    this.options = options;
+  }
+
+  /**
+   * Starts the upload process.
+   *
+   * @returns {Promise}
+   */
+  upload() {
+    return this.loader.file.then(
+      (file) =>
+        new Promise((resolve, reject) => {
+          this._initRequest();
+          this._initListeners(resolve, reject, file);
+          this._sendRequest(file);
+        })
+    );
+  }
+
+  /**
+   * Aborts the upload process.
+   *
+   * @returns {Promise}
+   */
+  abort() {
+    if (this.xhr) {
+      this.xhr.abort();
+    }
+  }
+
+  /**
+   * Initializes the `XMLHttpRequest` object using the URL specified as
+   * `strapiUpload.uploadUrl` in the editor's
+   * configuration.
+   *
+   * @private
+   */
+  _initRequest() {
+    const xhr = (this.xhr = new XMLHttpRequest());
+
+    xhr.open("POST", this.options.uploadUrl, true);
+    xhr.responseType = "json";
+  }
+
+  /**
+   * Initializes XMLHttpRequest listeners
+   *
+   * @private
+   * @param {Function} resolve Callback function to be called when the request is successful.
+   * @param {Function} reject Callback function to be called when the request cannot be completed.
+   * @param {File} file Native File object.
+   */
+  _initListeners(resolve, reject, file) {
+    const xhr = this.xhr;
+    const loader = this.loader;
+    const genericErrorText = `Couldn't upload file: ${file.name}.`;
+
+    xhr.addEventListener("error", () => reject(genericErrorText));
+    xhr.addEventListener("abort", () => reject());
+    xhr.addEventListener("load", () => {
+      const response = xhr.response;
+
+      if (!Array.isArray(response) || response.error || response.length !== 1) {
+        return reject(
+          response && response.error && response.error.message
+            ? response.error.message
+            : genericErrorText
+        );
+      }
+
+      
+      const { backendUrl, responsive } = this.options || {};
+      
+      if (response[0].formats && responsive) {
+        const { name, url, alternativeText, formats } = response[0];
+        let urls = { default: backendUrl + url };
+        let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
+        keys.map((k) => (urls[formats[k].width] = backendUrl + formats[k].url));
+        resolve({ alt: alternativeText || name, urls: urls });
+      } else {
+        resolve(
+          response[0].url
+            ? {
+                alt: response[0].alternativeText || response[0].name,
+                urls: { default: backendUrl + response[0].url },
+              }
+            : null
+        );
+      }
+    });
+
+    // Upload progress when it is supported.
+    /* istanbul ignore else */
+    if (xhr.upload) {
+      xhr.upload.addEventListener("progress", (evt) => {
+        if (evt.lengthComputable) {
+          loader.uploadTotal = evt.total;
+          loader.uploaded = evt.loaded;
+        }
+      });
+    }
+  }
+
+  /**
+   * Prepares the data and sends the request.
+   *
+   * @private
+   * @param {File} file File instance to be uploaded.
+   */
+  _sendRequest(file) {
+    // Set headers if specified.
+    const headers = this.options.headers || {};
+
+    // Use the withCredentials flag if specified.
+    const withCredentials = this.options.withCredentials || false;
+
+    for (const headerName of Object.keys(headers)) {
+      this.xhr.setRequestHeader(headerName, headers[headerName]);
+    }
+
+    this.xhr.withCredentials = withCredentials;
+
+    // Prepare the form data.
+    const data = new FormData();
+
+    data.append("files", file);
+
+    // Send the request.
+    this.xhr.send(data);
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default as StrapiMediaLib } from './StrapiMediaLib';
+export { default as StrapiUploadAdapter } from './StrapiUploadAdapter';

package/admin/src/components/Input/CKEditor/styling.js

@@ -0,0 +1,16 @@
+import baseTheme from "./theme";
+import { createGlobalStyle } from "styled-components";
+
+export const getGlobalStyling = () => {
+    
+  const variant = localStorage.getItem("STRAPI_THEME") || "light";
+  const { theme: userTheme, themeOverwrite: overwrite } = globalThis.CKEditorConfig || {};
+
+  const theme = overwrite ? userTheme : { ...baseTheme, ...userTheme};
+
+  return createGlobalStyle`
+       ${theme.common}
+       ${theme[variant]}
+       ${theme.additional}
+   `;
+}