From 70ea63ce3b6744289ef3b629544d310fc78711ba Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Mon, 13 Jan 2025 12:02:00 +0100
Subject: [PATCH] Improve cloud injector error reporting.

---
 demos/cdn-react/App.tsx                       |  23 ++--
 .../CKEditorCloudLocalPluginDemo.tsx          |  62 +++++++++++
 demos/cdn-react/local-plugin.umd.js           | 100 ++++++++++++++++++
 src/cloud/useCKEditorCloud.tsx                |  10 ++
 src/hooks/useAsyncCallback.ts                 |   2 -
 5 files changed, 184 insertions(+), 13 deletions(-)
 create mode 100644 demos/cdn-react/CKEditorCloudLocalPluginDemo.tsx
 create mode 100644 demos/cdn-react/local-plugin.umd.js

diff --git a/demos/cdn-react/App.tsx b/demos/cdn-react/App.tsx
index 41dd333..daa261d 100644
--- a/demos/cdn-react/App.tsx
+++ b/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
diff --git a/demos/cdn-react/CKEditorCloudLocalPluginDemo.tsx b/demos/cdn-react/CKEditorCloudLocalPluginDemo.tsx
new file mode 100644
index 0000000..9220229
--- /dev/null
+++ b/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 }
+		/>
+	);
+};
diff --git a/demos/cdn-react/local-plugin.umd.js b/demos/cdn-react/local-plugin.umd.js
new file mode 100644
index 0000000..9a18d80
--- /dev/null
+++ b/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;
+		} );
+	}
+};
+
diff --git a/src/cloud/useCKEditorCloud.tsx b/src/cloud/useCKEditorCloud.tsx
index 76b2928..1df7573 100644
--- a/src/cloud/useCKEditorCloud.tsx
+++ b/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;
 }
 
diff --git a/src/hooks/useAsyncCallback.ts b/src/hooks/useAsyncCallback.ts
index f7cd392..7aec0ee 100644
--- a/src/hooks/useAsyncCallback.ts
+++ b/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( {