Improved loading editor from CDN.

Author: Mgsy

admin/src/components/CKEditorInput/index.js

@@ -14,18 +14,19 @@ const { ClassicEditor } = window.CKEDITOR;
 
 import sanitize from './utils/utils';
 
-const CKEditorInput = ({
-  attribute,
-  onChange,
-  name,
-  value,
-  disabled,
-  labelAction,
-  intlLabel,
-  required,
-  description,
-  error
-}) => {
+const CKEditorInput = ( props ) => {
+  const {
+    attribute,
+    onChange,
+    name,
+    value,
+    disabled,
+    labelAction,
+    intlLabel,
+    required,
+    description,
+    error
+  } = props;
   const [ editorInstance, setEditorInstance ] = useState(false);
   const { formatMessage } = useIntl();
   const { maxLengthCharacters:maxLength , ...options } = attribute.options;

admin/src/components/CKEditorProvider/index.js

@@ -0,0 +1,98 @@
+import { useState, useEffect } from 'react';
+
+const CKEditorProvider = ( {
+    attribute,
+    onChange,
+    name,
+    value,
+    disabled = false,
+    labelAction = null,
+    intlLabel,
+    required = false,
+    description = null,
+    error = null
+  } ) => {
+  const [ importedEditor, setImportedEditor ] = useState( null );
+
+  useEffect( () => {
+    const importEditor = async () => {
+      const module = await import( '../CKEditorInput' );
+      const CKEditorInput = module.default;
+
+      setImportedEditor(<CKEditorInput
+        attribute={ attribute }
+        onChange={ onChange }
+        name={ name }
+        value={ value }
+        disabled={ disabled }
+        labelAction={ labelAction }
+        required={ required }
+        description={ description }
+        error={ error }
+        intlLabel={ intlLabel }
+        /> );
+    };
+
+    const injectAssetsFromCDN = setInterval( () => {
+      const CDNScript = document.querySelector( '#ckeditor5-cdn-script' );
+      const CDNStyles = document.querySelector( '#ckeditor5-cdn-styles' );
+
+      if ( !CDNStyles ) {
+        _injectStylesFromCDN();
+      }
+
+      if ( window.CKEDITOR ) {
+        window.CKEditorCDNLoaded = true;
+
+        importEditor();
+
+        clearInterval( injectAssetsFromCDN );
+
+        return;
+      }
+
+      if ( !CDNScript ) {
+        _injectScriptFromCDN();
+
+      }
+    }, 100 )
+
+    return () => {
+      const CDNScript = document.querySelector( '#ckeditor5-cdn-script' );
+
+      if ( CDNScript ) {
+        CDNScript.remove();
+      }
+
+      window.CKEditorCDNLoaded = false;
+    }
+  }, [] );
+
+  return (
+    <>
+      { window.CKEditorCDNLoaded && importedEditor }
+    </>
+  )
+}
+
+function _injectStylesFromCDN() {
+  const link = document.createElement( 'link' );
+
+  link.rel = 'stylesheet';
+  link.href = 'https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css';
+  link.id = 'ckeditor5-cdn-styles';
+
+  document.head.appendChild( link );
+}
+
+function _injectScriptFromCDN() {
+  const script = document.createElement( 'script' );
+
+  script.src = "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.umd.js";
+  script.async = true;
+  script.id = 'ckeditor5-cdn-script'
+
+  document.body.appendChild( script );
+}
+
+export default CKEditorProvider;

admin/src/index.js

@@ -15,9 +15,6 @@ const IconBox = styled( Flex )`
   }
 `;
 
-// Inject CKEditor 5 and stylesheet from CDN
-injectAssetsFromCDN();
-
 export default {
   register( app ) {
     app.customFields.register( {
@@ -40,7 +37,7 @@ export default {
         defaultMessage: 'The rich text editor for every use case'
       },
       components: {
-        Input: async () => import( './components/CKEditorInput' ),
+        Input: async () => import( './components/CKEditorProvider' ),
       },
       options: {
         base: [
@@ -186,21 +183,3 @@ export default {
     return Promise.resolve( importedTrads );
   },
 };
-
-function injectAssetsFromCDN() {
-  if ( !document.querySelector( '#ckeditor5-cdn-script' ) ) {
-    const script = document.createElement( 'script' );
-    const link = document.createElement( 'link' );
-
-    script.src = "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.umd.js";
-    script.async = true;
-    script.id = 'ckeditor5-cdn-script'
-
-    link.rel = 'stylesheet';
-    link.href = 'https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css';
-    link.id = 'ckeditor5-cdn-styles';
-
-    document.body.appendChild( script );
-    document.head.appendChild( link );
-  }
-}