@_sh/strapi-plugin-ckeditor 2.0.3 → 2.0.4

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

@@ -1,119 +1,119 @@
-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) => {
-              
-              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;
+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) => {
+              
+              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

@@ -1,43 +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;
-    });
-  }
-
-}
+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;
+    });
+  }
+
+}