From 52cbace3d331a6e72104b2860951d4be4efd4cfd Mon Sep 17 00:00:00 2001
From: mgsy <kacpertomporowski@gmail.com>
Date: Thu, 19 Sep 2024 11:16:38 +0200
Subject: [PATCH] Improved loading editor from CDN.

---
 admin/src/components/CKEditorInput/index.jsx  | 20 ++--
 .../src/components/CKEditorProvider/index.jsx | 93 +++++++++++++++++++
 admin/src/index.jsx                           | 23 +----
 3 files changed, 104 insertions(+), 32 deletions(-)
 create mode 100644 admin/src/components/CKEditorProvider/index.jsx

diff --git a/admin/src/components/CKEditorInput/index.jsx b/admin/src/components/CKEditorInput/index.jsx
index ad90000..f7aa50b 100644
--- a/admin/src/components/CKEditorInput/index.jsx
+++ b/admin/src/components/CKEditorInput/index.jsx
@@ -18,16 +18,16 @@ import { useField } from '@strapi/strapi/admin';
 const strapiTheme = localStorage.getItem( 'STRAPI_THEME' ) || 'light';
 const GlobalStyling = getGlobalStyling( strapiTheme );
 
-const CKEditorInput = ({
-  attribute,
-  name,
-  disabled = false,
-  labelAction = null,
-  required = false,
-  description = null,
-  error = null,
-  intlLabel
-}) => {
+const CKEditorInput = ( props ) => {
+  const {
+    attribute,
+    name,
+    disabled,
+    labelAction,
+    required,
+    description,
+    error,
+    intlLabel } = props;
   const { onChange, value } = useField( name );
   const [ editorInstance, setEditorInstance ] = useState(false);
   const { formatMessage } = useIntl();
diff --git a/admin/src/components/CKEditorProvider/index.jsx b/admin/src/components/CKEditorProvider/index.jsx
new file mode 100644
index 0000000..c29b8d3
--- /dev/null
+++ b/admin/src/components/CKEditorProvider/index.jsx
@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+
+const CKEditorProvider = ( {
+  attribute,
+  name,
+  disabled = false,
+  labelAction = null,
+  required = false,
+  description = null,
+  error = null,
+  intlLabel } ) => {
+  const [ importedEditor, setImportedEditor ] = useState( null );
+
+  useEffect( () => {
+    const importEditor = async () => {
+      const module = await import( '../CKEditorInput' );
+      const CKEditorInput = module.default;
+
+      setImportedEditor(<CKEditorInput
+        attribute={ attribute }
+        name={ name }
+        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;
diff --git a/admin/src/index.jsx b/admin/src/index.jsx
index 7ba49b1..6cb30a7 100644
--- a/admin/src/index.jsx
+++ b/admin/src/index.jsx
@@ -13,9 +13,6 @@ const IconBox = styled( Flex )`
   }
 `;
 
-// Inject CKEditor 5 and stylesheet from CDN
-injectAssetsFromCDN();
-
 export default {
   register( app ) {
     app.customFields.register( {
@@ -38,7 +35,7 @@ export default {
         defaultMessage: 'The rich text editor for every use case'
       },
       components: {
-        Input: async () => await import( './components/CKEditorInput' )
+        Input: async () => await import( './components/CKEditorProvider' )
       },
       options: {
         base: [
@@ -184,21 +181,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 );
-  }
-}