@_sh/strapi-plugin-ckeditor 2.1.3 → 3.0.0

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

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import { ClassicEditor } from 'ckeditor5';
+import { Box, Loader } from '@strapi/design-system';
+import 'ckeditor5/ckeditor5.css';
+
+import { MediaLib } from './MediaLib';
+import { getConfiguredPreset, GlobalStyling } from '../config';
+
+const Wrapper = styled('div')`
+  ${({ styles }) => styles}
+`;
+
+export const Editor = ({
+  onChange,
+  name,
+  value = '',
+  disabled = false,
+  presetName,
+  maxLength,
+}) => {
+  const [editorInstance, setEditorInstance] = useState(false);
+
+  const [mediaLibVisible, setMediaLibVisible] = useState(false);
+
+  const [preset, setPreset] = 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 currentPreset = await getConfiguredPreset(
+        presetName,
+        handleToggleMediaLib
+      );
+      setPreset(currentPreset);
+    })();
+  }, []);
+
+  return (
+    <>
+      {preset && <GlobalStyling />}
+      <Wrapper styles={preset?.styles}>
+        {!preset && (
+          <LoaderBox hasRadius background="neutral100">
+            <Loader>Loading...</Loader>
+          </LoaderBox>
+        )}
+        {preset && (
+          <>
+            <CKEditor
+              editor={ClassicEditor}
+              config={preset.editorConfig}
+              disabled={disabled}
+              data={value}
+              onReady={(editor) => {
+                if (preset.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 } });
+              }}
+            />
+            <MediaLib
+              isOpen={mediaLibVisible}
+              onToggle={handleToggleMediaLib}
+              editor={editorInstance}
+            />
+            {preset.editorConfig.WordCountPlugin && (
+              <CounterLoaderBox
+                color={lengthMax ? 'danger500' : 'neutral400'}
+                ref={wordCounter}
+              >
+                {!editorInstance && <Loader small>Loading...</Loader>}
+              </CounterLoaderBox>
+            )}
+          </>
+        )}
+      </Wrapper>
+    </>
+  );
+};
+
+Editor.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  fieldName: 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;
+`;

package/admin/src/{components/Input/MediaLib/index.js → Input/components/MediaLib.js}

@@ -1,31 +1,31 @@
-import React from "react";
-import { prefixFileUrlWithBackendUrl, useLibrary } from "@strapi/helper-plugin";
-import PropTypes from "prop-types";
+import React from 'react';
+import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
 
-const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsiveDimensions } }) => {
+export const MediaLib = ({ isOpen = false, onToggle = () => {}, editor }) => {
   const { components } = useLibrary();
-  const MediaLibraryDialog = components["media-library"];
+  const MediaLibraryDialog = components['media-library'];
 
   const handleChangeAssets = (assets) => {
-    let newValue = "";
+    let newValue = '';
 
     assets.map(({ name, url, alt, formats, mime, width, height }) => {
-      if (mime.includes("image")) {
-        if (formats && responsiveDimensions) {
-          let set = "";
+      if (mime.includes('image')) {
+        if (formats && globalThis.SH_CKE_UPLOAD_ADAPTER_IS_RESPONSIVE) {
+          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,`));
+          keys.map((k) => (set += prefixFileUrlWithBackendUrl(formats[k].url) +` ${formats[k].width}w,`));
           newValue = `<img src="${prefixFileUrlWithBackendUrl(url)}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
         } else {
           newValue = `<img src="${prefixFileUrlWithBackendUrl(url)}" alt="${alt}" width="${width}" height="${height}" />`;
         }
-      } else if (mime.includes("video")) {
+      } else if (mime.includes('video')) {
         newValue = `
             <video class="video" controls width="500px">
                 <source src="${prefixFileUrlWithBackendUrl(url)}" type="${mime}" />
             </video>`;
       } else {
-        newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}">${name || "Open document"}</a>`;
+        newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}">${name || 'Open document'}</a>`;
       }
     });
 
@@ -44,7 +44,7 @@ const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsi
       mime: f.mime,
       formats: f.formats,
       width: f.width,
-      height: f.height
+      height: f.height,
     }));
 
     handleChangeAssets(formattedFiles);
@@ -54,19 +54,16 @@ const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsi
     return null;
   }
 
-  return <MediaLibraryDialog onClose={onToggle} onSelectAssets={handleSelectAssets} />;
-};
-
-MediaLib.defaultProps = {
-  isOpen: false,
-  onChange: () => {},
-  onToggle: () => {},
+  return (
+    <MediaLibraryDialog
+      onClose={onToggle}
+      onSelectAssets={handleSelectAssets}
+    />
+  );
 };
 
 MediaLib.propTypes = {
   isOpen: PropTypes.bool,
   onChange: PropTypes.func,
   onToggle: PropTypes.func,
-};
-
-export default MediaLib;
+};

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

@@ -0,0 +1,2 @@
+export { getConfiguredPreset } from './presets';
+export { GlobalStyling } from './styling';

package/admin/src/Input/config/language.js

@@ -0,0 +1,45 @@
+import { auth } from '@strapi/helper-plugin';
+
+const importLang = async (config, language) => {
+  const translations = await import(
+    /* webpackMode: "lazy-once" */ `ckeditor5/translations/${language}.js`
+  ).catch((e) => console.log(e));
+  
+  config.translations = translations.default;
+};
+
+const detecti18n = () => {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const params = Object.fromEntries(urlSearchParams.entries());
+  const i18n = params['plugins[i18n][locale]'];
+  return i18n && i18n.split('-')[0];
+};
+
+export const setLanguage = async (config) => {
+  const i18nLang = detecti18n();
+  const preferedLanguage = auth.getUserInfo().preferedLanguage || 'en';
+
+  const {
+    ui = preferedLanguage,
+    content,
+    textPartLanguage,
+    ignorei18n,
+  } = config.language || {};
+
+  if (i18nLang) {
+    config.language = {
+      ui: typeof config.language === 'string' ? config.language : ui,
+      content: ignorei18n ? content : i18nLang,
+      textPartLanguage: textPartLanguage,
+    };
+  }
+
+  if (!config.language) {
+    config.language = preferedLanguage;
+  }
+
+  await importLang(
+    config,
+    typeof config.language === 'string' ? config.language : config.language.ui
+  );
+};

package/admin/src/Input/config/plugins.js

@@ -0,0 +1,24 @@
+import { auth } from '@strapi/helper-plugin';
+
+export const setPlugins = (config, toggleMediaLib) => {
+  const presetPluginNames = config?.plugins
+    ? [...config.plugins.map((p) => p.pluginName)]
+    : [];
+
+  if (presetPluginNames.includes('StrapiMediaLib')) {
+    config.strapiMediaLib = { toggle: toggleMediaLib };
+  }
+
+  if (presetPluginNames.includes('StrapiUploadAdapter')) {
+    config.strapiUploadAdapter = {
+      uploadUrl: `${strapi.backendURL}/upload`,
+      headers: { Authorization: 'Bearer ' + auth.getToken() },
+      backendUrl: strapi.backendURL,
+      responsive: globalThis.SH_CKE_UPLOAD_ADAPTER_IS_RESPONSIVE,
+    };
+  }
+
+  if (presetPluginNames.includes('WordCount')) {
+    config.WordCountPlugin = true;
+  }
+};

package/admin/src/Input/config/presets.js

@@ -0,0 +1,18 @@
+import basePresets from '../presets';
+import { setPlugins } from './plugins';
+import { setLanguage } from './language';
+
+export const getConfiguredPreset = async (presetName, toggleMediaLib) => {
+  const { presets: userPresets, dontMergePresets } =
+    globalThis.SH_CKE_CONFIG || {};
+
+  const preset = dontMergePresets
+    ? userPresets[presetName]
+    : basePresets[presetName];
+
+  setPlugins(preset.editorConfig, toggleMediaLib);
+
+  await setLanguage(preset.editorConfig);
+
+  return preset;
+};

package/admin/src/Input/config/styling.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import baseTheme from '../theme';
+
+const GlobalStyle = createGlobalStyle`
+  ${({ theme }) => theme.common}
+  ${({ theme, variant }) => theme[variant]}
+  ${({ theme }) => theme.additional}
+`;
+
+const getSystemColorScheme = () =>
+  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+
+export const GlobalStyling = () => {
+  const { theme: userTheme, dontMergeTheme } = globalThis.SH_CKE_CONFIG || {};
+
+  const profileTheme = localStorage.getItem('STRAPI_THEME');
+
+  const variant =
+    profileTheme && profileTheme !== 'system'
+      ? profileTheme
+      : getSystemColorScheme();
+
+  const theme = dontMergeTheme ? userTheme : { ...baseTheme, ...userTheme };
+
+  return <GlobalStyle theme={theme} variant={variant} />;
+};

package/admin/src/Input/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import {
+  Field,
+  FieldHint,
+  FieldError,
+  FieldLabel,
+} from '@strapi/design-system';
+import { Stack } from '@strapi/design-system';
+
+import { Editor } from './components/Editor';
+
+const Wysiwyg = React.forwardRef((props, ref) => {
+  const {
+    name,
+    attribute,
+    onChange,
+    value,
+    intlLabel,
+    labelAction,
+    disabled,
+    error,
+    description,
+    required,
+  } = props;
+  const { formatMessage } = useIntl();
+  const { preset, maxLengthCharacters, ...options } = attribute.options;
+
+  return (
+    <Field
+      name={name}
+      id={name}
+      error={error}
+      required={required}
+      hint={description && formatMessage(description)}
+    >
+      <Stack spacing={1}>
+        <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
+        <Editor
+          disabled={disabled}
+          name={name}
+          onChange={onChange}
+          value={value}
+          presetName={preset}
+          maxLength={maxLengthCharacters}
+        />
+        <FieldHint />
+        <FieldError />
+      </Stack>
+    </Field>
+  );
+});
+
+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/{components/Input/CKEditor → Input}/plugins/StrapiMediaLib.js

@@ -1,14 +1,14 @@
-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">' +
+import { Plugin, ButtonView } from 'ckeditor5';
+
+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>'
+  '</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.
@@ -18,20 +18,19 @@ export default class StrapiMediaLib extends Plugin {
   strapiToggle = null;
 
   static get pluginName() {
-    return 'StrapiMediaLib'
+    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",
+        label: 'Media Library',
         icon: mediaLibIcon,
-        tooltip: true
+        tooltip: true,
       });
 
       button.on('execute', config.toggle.bind(this));
@@ -39,5 +38,4 @@ export default class StrapiMediaLib extends Plugin {
       return button;
     });
   }
-
 }

package/admin/src/{components/Input/CKEditor → Input}/plugins/StrapiUploadAdapter.js

@@ -1,35 +1,16 @@
-const Plugin = window.CKEditor5.core.Plugin;
-const FileRepository = window.CKEditor5.upload.FileRepository;
+import { Plugin, FileRepository } from 'ckeditor5';
 
-/**
- * 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";
+    return 'StrapiUploadAdapter';
   }
 
-  /**
-   * @inheritDoc
-   */
   init() {
-    // backendUrl
-    // uploadUrl
-    // headers
-    // responsive
-
-    const options = this.editor.config.get("strapiUploadAdapter");
+    const options = this.editor.config.get('strapiUploadAdapter');
 
     if (!options) {
       return;
@@ -61,13 +42,11 @@ class Adapter {
   constructor(loader, options) {
     /**
      * FileLoader instance to use during the upload.
-     *
      */
     this.loader = loader;
 
     /**
      * The configuration of the adapter.
-     *
      */
     this.options = options;
   }
@@ -109,8 +88,8 @@ class Adapter {
   _initRequest() {
     const xhr = (this.xhr = new XMLHttpRequest());
 
-    xhr.open("POST", this.options.uploadUrl, true);
-    xhr.responseType = "json";
+    xhr.open('POST', this.options.uploadUrl, true);
+    xhr.responseType = 'json';
   }
 
   /**
@@ -126,9 +105,9 @@ class Adapter {
     const loader = this.loader;
     const genericErrorText = `Couldn't upload file: ${file.name}.`;
 
-    xhr.addEventListener("error", () => reject(genericErrorText));
-    xhr.addEventListener("abort", () => reject());
-    xhr.addEventListener("load", () => {
+    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) {
@@ -141,14 +120,18 @@ class Adapter {
 
       const { backendUrl, responsive } = this.options || {};
       const { name, url, alternativeText, formats, provider } = response[0];
-      const defaultUrl = provider !== "local" ? url : backendUrl + url;
+      const defaultUrl = provider !== 'local' ? url : backendUrl + url;
 
       if (formats && responsive) {
         let urls = { default: defaultUrl };
         let keys = Object.keys(formats).sort(
           (a, b) => formats[a].width - formats[b].width
         );
-        keys.map((k) => (urls[formats[k].width] = provider !== 'local' ? url : backendUrl + formats[k].url));
+        keys.map(
+          (k) =>
+            (urls[formats[k].width] =
+              provider !== 'local' ? url : backendUrl + formats[k].url)
+        );
         resolve({ alt: alternativeText || name, urls: urls });
       } else {
         resolve(
@@ -163,9 +146,8 @@ class Adapter {
     });
 
     // Upload progress when it is supported.
-    /* istanbul ignore else */
     if (xhr.upload) {
-      xhr.upload.addEventListener("progress", (evt) => {
+      xhr.upload.addEventListener('progress', (evt) => {
         if (evt.lengthComputable) {
           loader.uploadTotal = evt.total;
           loader.uploaded = evt.loaded;
@@ -196,7 +178,7 @@ class Adapter {
     // Prepare the form data.
     const data = new FormData();
 
-    data.append("files", file);
+    data.append('files', file);
 
     // Send the request.
     this.xhr.send(data);

package/admin/src/{components/Input/CKEditor → Input}/plugins/index.js

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