@_sh/strapi-plugin-ckeditor 2.1.2 → 3.0.0

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

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

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

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

@@ -1,167 +0,0 @@
-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" },
-    { name: "ShowBlocks", module: "ckeditor5-show-blocks" }
-  ];
-
-  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" */ `@ckeditor/ckeditor5-font/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

@@ -1,119 +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 { 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 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);
-
-  const GlobalStyling = getGlobalStyling();
-  
-  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) => {
-              
-              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/styling.js

@@ -1,24 +0,0 @@
-import baseTheme from "./theme";
-import { createGlobalStyle } from "styled-components";
-
-const getSystemColorScheme= () =>
-  window.matchMedia &&
-  window.matchMedia("(prefers-color-scheme: dark)").matches ?
-  "dark" : "light";
-
-export const getGlobalStyling = () => {
-
-  const { theme: userTheme, themeOverwrite: overwrite } = globalThis.CKEditorConfig || {};
-
-  const profileTheme = localStorage.getItem("STRAPI_THEME");
-
-  const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
-
-  const theme = overwrite ? userTheme : { ...baseTheme, ...userTheme};
-
-  return createGlobalStyle`
-       ${theme.common}
-       ${theme[variant]}
-       ${theme.additional}
-   `;
-}

package/admin/src/components/Input/CKEditor/theme/additional.js

@@ -1,187 +0,0 @@
-import { css } from "styled-components";
-
-export const additional = css`
-
-/* --- expanding --- */
-
-.ck.ck-editor__main .ck-blurred {
-    max-height: 200px;
-  }
-.ck.ck-editor__main .ck-focused {
-  	max-height: 700px;
-  }
-
-/* --- color-grid --- */
-
-.ck.ck-color-ui-dropdown {
-	--ck-color-grid-tile-size: 22px !important;
-}
-.ck.ck-color-grid__tile{
-	width:auto;
-}
-.ck.ck-color-ui-dropdown .ck-color-grid {
-	grid-gap: 2px;
-}
-.ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
-	border-radius: 2px;
-}
-.ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled),
-.ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) {
-	z-index: 1;
-	transform: scale(1.1);
-	border-radius: 2px;
-}
-
-/* ---- Style feature config ------------------------------------------------------ */
-
-:root {
-	--ck-georgia-serif-font-stack: Georgia,Times,Times New Roman,serif;
-}
-
-.ck-content h1.document-title {
-	font-family: var(--ck-georgia-serif-font-stack);
-	font-size: 50px;
-	font-weight: bold;
-	border: 0;
-}
-
-.ck-content h2.document-subtitle {
-	font-family: var(--ck-georgia-serif-font-stack);
-	font-size: 20px;
-	font-weight: bold;
-	color: #d1d1d1;
-	letter-spacing: 10px;
-}
-
-.ck-content p.callout {
-	--border-color: #e91e1e;
-	padding: 1.2em 2em;
-	border: 1px solid var(--border-color);
-	border-left: 10px solid var(--border-color);
-	background: #fff9fb;
-	border-radius: 5px;
-	margin: 1.5em 2em;
-	box-shadow: 5px 5px 0 #ffe6ef;
-}
-
-.ck-content blockquote.side-quote {
-	font-family: var(--ck-georgia-serif-font-stack);
-	font-style: normal;
-	float: right;
-	width: 35%;
-	position: relative;
-	border: 0;
-	overflow: visible;
-	z-index: 1;
-	margin-left: 1em;
-}
-
-.ck-content blockquote.side-quote::before {
-	content: "“";
-	position: absolute;
-	top: -37px;
-	left: -10px;
-	display: block;
-	font-size: 200px;
-	color: #e7e7e7;
-	z-index: -1;
-	line-height: 1;
-}
-
-.ck-content blockquote.side-quote p {
-	font-size: 2em;
-	line-height: 1;
-}
-
-.ck-content blockquote.side-quote p:last-child:not(:first-child) {
-	font-size: 1.3em;
-	text-align: right;
-	color: #555;
-}
-
-.ck-content span.needs-clarification {
-	outline: 1px dashed #c8a24b;
-	background: #ffe19c;
-	border-radius: 2px;
-	position: relative;
-}
-
-.ck-content span.needs-clarification::after {
-	content: "?";
-	display: inline-block;
-	color: #fff;
-	background: #3b3b3b;
-	font-size: 12px;
-	vertical-align: super;
-	width: 12px;
-	height: 12px;
-	line-height: 12px;
-	border-radius: 10px;
-	text-align: center;
-	position: absolute;
-	right: -6px;
-	top: -6px;
-	font-weight: bold;
-	letter-spacing: initial;
-}
-
-.ck-content span.wide-spacing {
-	letter-spacing: 0.3em;
-}
-
-.ck-content span.small-caps {
-	font-variant: small-caps;
-}
-
-.ck-content span.spoiler {
-	background: #000;
-	color: #000;
-}
-
-.ck-content span.spoiler:hover {
-	background: #000;
-	color: #fff;
-}
-
-.ck-content pre.stylish-code {
-	border-color: transparent;
-	margin-left: 2em;
-	margin-right: 2em;
-	border-radius: 10px;
-}
-
-.ck-content pre.stylish-code::before {
-	content: "";
-	display: block;
-	height: 13px;
-	background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
-	margin-bottom: 8px;
-	background-repeat: no-repeat;
-}
-
-.ck-content pre.stylish-code-dark,
-.ck-content pre.stylish-code-bright {
-	padding: 1em;
-}
-
-.ck-content pre.stylish-code-dark {
-	background: #272822;
-	box-shadow: 5px 5px 0 #0000001f;
-	color: white;
-}
-
-.ck-content pre.stylish-code-dark code {
-	color: white;
-}
-
-.ck-content pre.stylish-code-bright {
-	background: #dddfe0;
-	color: #000;
-	box-shadow: 5px 5px 0 #b3b3b3;
-}
-
-.ck-content pre.stylish-code-bright code {
-	color: #222;
-}
-
-` 

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

@@ -1,48 +0,0 @@
-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";
-import { Stack } from "@strapi/design-system";
-
-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/utils/pluginId.js

@@ -1,5 +0,0 @@
-const pluginPkg = require('../../../package.json');
-
-const pluginId = pluginPkg.strapi.name || pluginPkg.name.replace(/^(@_sh\/strapi-)plugin-/i, '');
-
-module.exports = pluginId;