Release v1.1.0

ckeditor · Dec 2, 2024 · 5a3276c · 5a3276c
1 parent 76741c5
commit 5a3276c
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.1.0 (December 2, 2024)
+
+We are happy to announce the release of CKEditor 5 Official Integration v1.1.0.
+
+### Release highlights
+
+In this release, we updated the CKEditor 5 version to [v44.0.0](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md#4400-december-2-2024), which introduces high impact updates. Starting from the plugin version 1.1.0, the custom field will require passing a valid license key.
+
+### BREAKING CHANGES ℹ️
+
+* **CKEditor 5 custom field now requires the license key**. CKEditor 5 now requires a valid license key, which can be retrieved from [Customer Portal](https://portal.ckeditor.com/). You can sign up for a [commitment-free trial](https://portal.ckeditor.com/checkout?plan=free) and get instant access to your key. 
+
 ## 1.0.2 (September 20, 2024)
 
 ### Release highlights

diff --git a/README.md b/README.md
@@ -22,6 +22,9 @@ This is an official plugin, provided to you by the [CKEditor team](https://ckedi
 
 ## <a id="installation"></a>🔧 Installation
 
+> [!IMPORTANT]  
+> Before installation, make sure that you own a **valid CKEditor 5 license key**. Start a [commitment-free trial](https://portal.ckeditor.com/checkout?plan=free) to get instant access to the license key. You can also refer to our [license key and activation guide](https://ckeditor.com/docs//ckeditor5/latest/getting-started/licensing/license-key-and-activation.html) to learn more.
+
 Inside your Strapi app, add the package:
 
 With `npm`:
@@ -36,7 +39,7 @@ With `yarn`:
 yarn add @ckeditor/strapi-plugin-ckeditor
 ```
 
-Then, add the Content Security Policy configuration to allow loading CKEditor 5 from https://cdn.ckeditor.com origin, by adding the rule to `config/middlewares.ts` in your Strapi project root:
+Then, add the Content Security Policy configuration to allow loading CKEditor 5 from https://cdn.ckeditor.com origin and sending the editor usage information to https://proxy-event.ckeditor.com, by adding the rule to `config/middlewares.ts` in your Strapi project root:
 
 ```js
 export default [
@@ -47,7 +50,8 @@ export default [
       contentSecurityPolicy: {
         useDefaults: true,
         directives: {
-          'script-src': ['https://cdn.ckeditor.com']
+          'script-src': ['https://cdn.ckeditor.com'],
+          'connect-src': ['https://proxy-event.ckeditor.com']
         },
       },
     },

diff --git a/admin/src/components/CKEditorInput/Configurator.js b/admin/src/components/CKEditorInput/Configurator.js
@@ -1,4 +1,5 @@
 import { StrapiMediaLib } from "./plugins/StrapiMediaLib";
+import { StrapiEditorUsageDataPlugin } from "./plugins/StrapiEditorUsageData";
 
 import MaximumLength from "../../vendor/ckeditor5-maximum-length/index";
 import "../../vendor/ckeditor5-maximum-length/index-editor.css";
@@ -77,7 +78,8 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = {
       TableColumnResize,
       TableCaption,
       WordCount,
-      StrapiMediaLib
+      StrapiMediaLib,
+      StrapiEditorUsageDataPlugin
     ],
     toolbar: [
       'undo', 'redo',
@@ -158,7 +160,8 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = {
       TableColumnResize,
       TableCaption,
       WordCount,
-      StrapiMediaLib
+      StrapiMediaLib,
+      StrapiEditorUsageDataPlugin
     ],
     toolbar: [
         'undo', 'redo',
@@ -264,7 +267,8 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = {
       TableCaption,
       WordCount,
       Highlight,
-      StrapiMediaLib
+      StrapiMediaLib,
+      StrapiEditorUsageDataPlugin
     ],
     toolbar: {
       items: [
@@ -408,6 +412,9 @@ export default class Configurator {
 
     const maxLength = this.fieldConfig.maxLength;
     const outputOption = this.fieldConfig.options.output;
+    const licenseKey = this.fieldConfig.licenseKey;
+
+    config.licenseKey = licenseKey;
 
     if ( outputOption === 'Markdown' ) {
       config.plugins.push( Markdown );

diff --git a/admin/src/components/CKEditorInput/index.jsx b/admin/src/components/CKEditorInput/index.jsx
@@ -31,8 +31,8 @@ const CKEditorInput = ( props ) => {
   const { onChange, value } = useField( name );
   const [ editorInstance, setEditorInstance ] = useState(false);
   const { formatMessage } = useIntl();
-  const { maxLengthCharacters:maxLength , ...options } = attribute.options;
-  const configurator = new Configurator( { options, maxLength } );
+  const { maxLengthCharacters:maxLength, licenseKey, ...options } = attribute.options;
+  const configurator = new Configurator( { options, maxLength, licenseKey } );
   const editorConfig = configurator.getEditorConfig();
 
   const wordCounter = useRef( null );
@@ -119,4 +119,4 @@ CKEditorInput.propTypes = {
   required: PropTypes.bool
 };
 
-export default CKEditorInput;
+export { CKEditorInput };
diff --git a/admin/src/components/CKEditorInput/plugins/StrapiEditorUsageData.js b/admin/src/components/CKEditorInput/plugins/StrapiEditorUsageData.js
@@ -0,0 +1,9 @@
+import { createIntegrationUsageDataPlugin } from '@ckeditor/ckeditor5-integrations-common';
+import * as pkg from '../../../../../package.json'
+
+export const StrapiEditorUsageDataPlugin = createIntegrationUsageDataPlugin(
+	'strapi',
+	{
+		version: pkg.version,
+	}
+);
diff --git a/admin/src/components/CKEditorProvider/index.jsx b/admin/src/components/CKEditorProvider/index.jsx
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { memo, useEffect } from 'react';
+import { useCKEditorCloud } from '@ckeditor/ckeditor5-react';
 
 const CKEditorProvider = ( {
   attribute,
@@ -9,85 +10,41 @@ const CKEditorProvider = ( {
   description = null,
   error = null,
   intlLabel } ) => {
-  const [ importedEditor, setImportedEditor ] = useState( null );
 
+  // Clean up CDN scripts after unmounting the component.
   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' );
+      const assets = document.querySelectorAll( '[data-injected-by="ckeditor-integration"]' );
 
-      if ( CDNScript ) {
-        CDNScript.remove();
-      }
+      assets.forEach( asset => asset.remove() );
 
-      window.CKEditorCDNLoaded = false;
+      window.CKEDITOR_VERSION = null;
     }
-  }, [] );
+  }, [] )
 
-  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' );
+  const cloud = useCKEditorCloud( {
+    version: '44.0.0',
+    plugins: {
+      CKEditorInput: async () => ( await import('../CKEditorInput') ).CKEditorInput
+    }
+  } );
 
-  script.src = "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.umd.js";
-  script.async = true;
-  script.id = 'ckeditor5-cdn-script'
+  if ( cloud.status !== 'success' ) {
+    return null;
+  }
 
-  document.body.appendChild( script );
+  return (
+    <cloud.loadedPlugins.CKEditorInput
+      attribute={ attribute }
+      name={ name }
+      disabled={ disabled }
+      labelAction={ labelAction }
+      required={ required }
+      description={ description }
+      error={ error }
+      intlLabel={ intlLabel }
+    />
+  )
 }
 
-export default CKEditorProvider;
+export default memo( CKEditorProvider );
diff --git a/admin/src/index.jsx b/admin/src/index.jsx
@@ -39,6 +39,18 @@ export default {
       },
       options: {
         base: [
+          {
+            intlLabel: {
+              id: 'ckeditor.licenseKey.label',
+              defaultMessage: 'License key',
+            },
+            description: {
+              id: 'ckeditor.licenseKey.description',
+              defaultMessage: "Don't have a license key? Visit https://portal.ckeditor.com/checkout?plan=free to receive it.",
+            },
+            name: 'options.licenseKey',
+            type: 'text',
+          },
           {
             intlLabel: {
               id: 'ckeditor.preset.label',
@@ -155,6 +167,10 @@ export default {
             id: 'ckeditor.preset.error.required',
             defaultMessage: 'Editor preset is required',
           } ),
+          licenseKey: yup.string().required( {
+            id: 'ckeditor.licenseKey.error.required',
+            defaultMessage: 'Editor license key is required. Visit https://portal.ckeditor.com/checkout?plan=free to receive it.',
+          } ),
         } ),
       },
     } );

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/strapi-plugin-ckeditor",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "CKEditor 5 - Official Integration for Strapi",
   "strapi": {
     "name": "ckeditor",
@@ -37,6 +37,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ckeditor/ckeditor5-react": "^9.1.0"
+    "@ckeditor/ckeditor5-react": "^9.3.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2,17 +2,17 @@
 # yarn lockfile v1
 
 
-"@ckeditor/ckeditor5-integrations-common@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-integrations-common/-/ckeditor5-integrations-common-1.0.0.tgz#f2f73509d029398929ee30da3ae23329de5a796a"
-  integrity sha512-HLToIJ7FAtKX0tu9GaGb1d39Kx0i0TFelAj2pQPiwPU/6DLgM5gi+m0WCZub+syruSonmZPONtWrrZZdUoDB/g==
-
-"@ckeditor/ckeditor5-react@^9.1.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-9.1.0.tgz#fc645a055a5c84acb41c55f0c4bffab45221d2ca"
-  integrity sha512-48Y8Ffe21H3+3GOvjTtSITYJdeX4BINxCHyXp5zNvhTtyAyahMwG6jCgdZl1D3lwXxSq9R0/yCDHPWeMk9KOHQ==
+"@ckeditor/ckeditor5-integrations-common@^2.1.0":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-integrations-common/-/ckeditor5-integrations-common-2.2.2.tgz#c494b51ad0736d087a7bc13ec634e2d66db42d5b"
+  integrity sha512-SKGBBrwFFmSEZawR8P9tHGRq/l2OoqoJxy9f7j0HbDGEwIpSOsCSgH0xudD6lcEbWG4QWrCS28p5n8lgPA5elQ==
+
+"@ckeditor/ckeditor5-react@^9.3.0":
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-9.3.1.tgz#5ed94789eb5d26bf8d185185c7dfcc57f2bfb97d"
+  integrity sha512-2lc1ICGCOZ0loC6DeMFwhkhrodLYUsOnC2wdgMiaXnEWRI/fU0SWBAoLbsMH7i6zpq29s+ZWMEImRVbly8SmEA==
   dependencies:
-    "@ckeditor/ckeditor5-integrations-common" "^1.0.0"
+    "@ckeditor/ckeditor5-integrations-common" "^2.1.0"
     prop-types "^15.7.2"
 
 "js-tokens@^3.0.0 || ^4.0.0":