Better expose of errors that happen during injecting of cloud assets.

demos/cdn-react/App.tsx

@@ -9,6 +9,7 @@ import { CKEditorCloudDemo } from './CKEditorCloudDemo.js';
 import { CKEditorCloudPluginsDemo } from './CKEditorCloudPluginsDemo.js';
 import { CKEditorCKBoxCloudDemo } from './CKEditorCKBoxCloudDemo.js';
 import { CKEditorCloudContextDemo } from './CKEditorCloudContextDemo.js';
+import { CKEditorCloudLocalPluginsDemo } from './CKEditorCloudLocalPluginDemo.js';
 
 const EDITOR_CONTENT = `
 	<h2>Sample</h2>
@@ -22,29 +23,29 @@ const EDITOR_CONTENT = `
 	<a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 `;
 
-const DEMOS = [ 'Editor', 'Context', 'CKBox', 'Cloud Plugins' ] as const;
+const EDITOR_CONTENT_ELEMENTS = {
+	Editor: <CKEditorCloudDemo content={ EDITOR_CONTENT } />,
+	Context: <CKEditorCloudContextDemo />,
+	CKBox: <CKEditorCKBoxCloudDemo content={ EDITOR_CONTENT } />,
+	'Cloud Plugins': <CKEditorCloudPluginsDemo content={ EDITOR_CONTENT } />,
+	'Cloud Local Plugins': <CKEditorCloudLocalPluginsDemo content={ EDITOR_CONTENT } />
+};
 
-type Demo = ( typeof DEMOS )[ number ];
+type Demo = keyof typeof EDITOR_CONTENT_ELEMENTS;
 
 export const App = (): ReactNode => {
 	const [ currentDemo, setCurrentDemo ] = useState<Demo>( 'Editor' );
-
-	const content = ( {
-		Editor: <CKEditorCloudDemo content={ EDITOR_CONTENT } />,
-		Context: <CKEditorCloudContextDemo />,
-		CKBox: <CKEditorCKBoxCloudDemo content={ EDITOR_CONTENT } />,
-		'Cloud Plugins': <CKEditorCloudPluginsDemo content={ EDITOR_CONTENT } />
-	} )[ currentDemo ];
+	const content = EDITOR_CONTENT_ELEMENTS[ currentDemo ];
 
 	return (
 		<React.StrictMode>
 			<h1>CKEditor 5 – React Component – CDN demo</h1>
 
 			<div className="buttons" style={ { textAlign: 'center' } }>
-				{ DEMOS.map( demo => (
+				{ Object.keys( EDITOR_CONTENT_ELEMENTS ).map( demo => (
 					<button
 						key={ demo }
-						onClick={ () => setCurrentDemo( demo ) }
+						onClick={ () => setCurrentDemo( demo as Demo ) }
 						disabled={ demo === currentDemo}
 					>
 						{ demo } demo

demos/cdn-react/CKEditorCloudLocalPluginDemo.tsx

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+import React, { type ReactNode } from 'react';
+import type { Plugin } from 'ckeditor5';
+
+import { getCKCdnClassicEditor } from './getCKCdnClassicEditor.js';
+import { CKEditor, useCKEditorCloud } from '../../src/index.js';
+
+type CKEditorCloudLocalPluginsDemoProps = {
+	content: string;
+};
+
+declare global {
+	interface Window {
+		MyLocalPlugin: typeof Plugin;
+	}
+}
+
+export const CKEditorCloudLocalPluginsDemo = ( { content }: CKEditorCloudLocalPluginsDemoProps ): ReactNode => {
+	const cloud = useCKEditorCloud( {
+		version: '43.0.0',
+		plugins: {
+			MyLocalPlugin: [
+				'/demos/cdn-react/local-plugin.umd.js'
+			]
+		}
+	} );
+
+	if ( cloud.status !== 'success' ) {
+		return <div>Loading...</div>;
+	}
+
+	const CKEditorClassic = getCKCdnClassicEditor( {
+		cloud,
+		additionalPlugins: [
+			cloud.loadedPlugins.MyLocalPlugin
+		],
+		overrideConfig: {
+			toolbar: {
+				items: [
+					'highlight',
+					'|', 'undo', 'redo',
+					'|', 'heading',
+					'|', 'bold', 'italic',
+					'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
+					'|', 'bulletedList', 'numberedList', 'outdent', 'indent',
+					'|', 'MathType', 'ChemType'
+				]
+			}
+		}
+	} );
+
+	return (
+		<CKEditor
+			editor={ CKEditorClassic }
+			data={ content }
+		/>
+	);
+};

demos/cdn-react/local-plugin.umd.js

@@ -0,0 +1,100 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* global window */
+
+const { Plugin, Command, ButtonView } = window.CKEDITOR;
+
+class HighlightCommand extends Command {
+	execute() {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		model.change( writer => {
+			const ranges = model.schema.getValidRanges( selection.getRanges(), 'highlight' );
+
+			for ( const range of ranges ) {
+				if ( this.value ) {
+					writer.removeAttribute( 'highlight', range );
+				} else {
+					writer.setAttribute( 'highlight', true, range );
+				}
+			}
+		} );
+	}
+
+	refresh() {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+		const isAllowed = model.schema.checkAttributeInSelection( selection, 'highlight' );
+
+		this.isEnabled = isAllowed;
+		this.value = this.isHighlightedNodeSelected();
+	}
+
+	isHighlightedNodeSelected() {
+		const { model } = this.editor;
+		const { schema } = model;
+		const selection = model.document.selection;
+
+		if ( selection.isCollapsed ) {
+			return selection.hasAttribute( 'highlight' );
+		}
+
+		return selection.getRanges().some( range =>
+			Array
+				.from( range.getItems() )
+				.some( item =>
+					schema.checkAttribute( item, 'highlight' ) &&
+					item.hasAttribute( 'highlight' )
+				)
+		);
+	}
+}
+
+window.MyLocalPlugin = class MyCustomPlugin extends Plugin {
+	static get pluginName() {
+		return 'MyCustomPlugin';
+	}
+
+	init() {
+		const editor = this.editor;
+
+		editor.model.schema.extend( '$text', { allowAttributes: 'highlight' } );
+
+		editor.conversion.attributeToElement( {
+			model: 'highlight',
+			view: {
+				name: 'span',
+				styles: {
+					'background-color': 'yellow'
+				}
+			}
+		} );
+
+		const command = new HighlightCommand( editor );
+
+		editor.commands.add( 'highlight', command );
+
+		editor.ui.componentFactory.add( 'highlight', locale => {
+			const view = new ButtonView( locale );
+
+			view.bind( 'isOn' ).to( command, 'value' );
+			view.set( {
+				label: 'Highlight',
+				withText: true,
+				tooltip: true
+			} );
+
+			view.on( 'execute', () => {
+				editor.execute( 'highlight' );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+};
+

package.json

@@ -67,8 +67,8 @@
     "react17-dom": "npm:react-dom@^17.0.0",
     "react18": "npm:react@^18.0.0",
     "react18-dom": "npm:react-dom@^18.0.0",
-    "react19": "npm:[email protected]-beta-26f2496093-20240514",
-    "react19-dom": "npm:[email protected]-beta-26f2496093-20240514",
+    "react19": "npm:[email protected]",
+    "react19-dom": "npm:[email protected]",
     "semver": "^7.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.3.1",

src/cloud/useCKEditorCloud.tsx

@@ -4,6 +4,7 @@
  */
 
 import {
+	isCKEditorCloudLoaderError,
 	loadCKEditorCloud,
 	type CKEditorCloudConfig,
 	type CKEditorCloudResult
@@ -52,6 +53,15 @@ export default function useCKEditorCloud<Config extends CKEditorCloudConfig>(
 		};
 	}
 
+	// Expose the error in a more user-friendly way.
+	if ( result.status === 'error' ) {
+		if ( isCKEditorCloudLoaderError( result.error ) ) {
+			result.error.dump();
+		} else {
+			console.error( result.error );
+		}
+	}
+
 	return result;
 }
 

src/hooks/useAsyncCallback.ts

@@ -80,8 +80,6 @@ export const useAsyncCallback = <A extends Array<unknown>, R>(
 
 			return result;
 		} catch ( error: any ) {
-			console.error( error );
-
 			// Update the state if the component is still mounted and the execution UUID matches the previous one, otherwise
 			if ( !unmountedRef.current && prevExecutionUIDRef.current === currentExecutionUUID ) {
 				setAsyncState( {

yarn.lock

@@ -7618,7 +7618,7 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-react-dom@^18.0.0:
+react-dom@^18.0.0, "react18-dom@npm:react-dom@^18.0.0":
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -7677,39 +7677,24 @@ react-refresh@^0.14.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-"react18-dom@npm:react-dom@^18.0.0":
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
-
-"react18@npm:react@^18.0.0":
+"react18@npm:react@^18.0.0", react@^18.0.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
-"react19-dom@npm:[email protected]-beta-26f2496093-20240514":
-  version "19.0.0-beta-26f2496093-20240514"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-beta-26f2496093-20240514.tgz#5fe4e829db8d379303057f539900a61ed6ca2615"
-  integrity sha512-UvQ+K1l3DFQ34LDgfFSNuUGi9EC+yfE9tS6MdpNTd5fx7qC7KLfepfC/KpxWMQZ7JfE3axD4ZO6H4cBSpAZpqw==
+"react19-dom@npm:[email protected]":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
   dependencies:
-    scheduler "0.25.0-beta-26f2496093-20240514"
+    scheduler "^0.25.0"
 
-"react19@npm:[email protected]":
-  version "19.0.0-beta-26f2496093-20240514"
-  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-beta-26f2496093-20240514.tgz#3a0d63746b3f9ebd461a0731191bd08047fb1dbb"
-  integrity sha512-ZsU/WjNZ6GfzMWsq2DcGjElpV9it8JmETHm9mAJuOJNhuJcWJxt8ltCJabONFRpDFq1A/DP0d0KFj9CTJVM4VA==
-
-react@^18.0.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
-  dependencies:
-    loose-envify "^1.1.0"
+"react19@npm:[email protected]":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -8042,11 +8027,6 @@ safe-regex-test@^1.0.3:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-[email protected]:
-  version "0.25.0-beta-26f2496093-20240514"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0-beta-26f2496093-20240514.tgz#a3bc0ff694ec6de7a78c1e48e1f8f4a8555bd77d"
-  integrity sha512-vDwOytLHFnA3SW2B1lNcbO+/qKVyLCX+KLpm+tRGNDsXpyxzRgkIaYGWmX+S70AJGchUHCtuqQ50GFeFgDbXUw==
-
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -8070,6 +8050,11 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
 schema-utils@^3.0.0, schema-utils@^3.1.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
@@ -8465,7 +8450,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8479,13 +8464,6 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -9238,16 +9216,7 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-[email protected], wrap-ansi@^6.2.0, wrap-ansi@^7.0.0, wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", [email protected], wrap-ansi@^6.2.0, wrap-ansi@^7.0.0, wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==