@_sh/strapi-plugin-ckeditor 3.0.2 → 4.0.1

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

@@ -1,133 +0,0 @@
-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/Input/components/MediaLib.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-
-export const MediaLib = ({ isOpen = false, onToggle = () => {}, editor }) => {
-  const { components } = useLibrary();
-  const MediaLibraryDialog = components['media-library'];
-
-  const handleChangeAssets = (assets) => {
-    let newValue = '';
-
-    assets.map(({ name, url, alt, formats, mime, width, height }) => {
-      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,`));
-          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')) {
-        newValue = `
-            <video class="video" controls width="500px">
-                <source src="${prefixFileUrlWithBackendUrl(url)}" type="${mime}" />
-            </video>`;
-      } else {
-        newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}">${name || 'Open document'}</a>`;
-      }
-    });
-
-    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,
-      width: f.width,
-      height: f.height,
-    }));
-
-    handleChangeAssets(formattedFiles);
-  };
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <MediaLibraryDialog
-      onClose={onToggle}
-      onSelectAssets={handleSelectAssets}
-    />
-  );
-};
-
-MediaLib.propTypes = {
-  isOpen: PropTypes.bool,
-  onChange: PropTypes.func,
-  onToggle: PropTypes.func,
-};

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

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

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

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

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

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

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

@@ -1,67 +0,0 @@
-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/Input/plugins/StrapiMediaLib.js

@@ -1,41 +0,0 @@
-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>';
-
-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/Input/plugins/StrapiUploadAdapter.js

@@ -1,186 +0,0 @@
-import { Plugin, FileRepository } from 'ckeditor5';
-
-export default class StrapiUploadAdapter extends Plugin {
-  static get requires() {
-    return [FileRepository];
-  }
-
-  static get pluginName() {
-    return 'StrapiUploadAdapter';
-  }
-
-  init() {
-    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 || {};
-      const { name, url, alternativeText, formats, provider } = response[0];
-      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)
-        );
-        resolve({ alt: alternativeText || name, urls: urls });
-      } else {
-        resolve(
-          url
-            ? {
-                alt: alternativeText || name,
-                urls: { default: defaultUrl },
-              }
-            : null
-        );
-      }
-    });
-
-    // Upload progress when it is supported.
-    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/Input/plugins/index.js

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