dext5editor-react/samples/component-events/src/DEXT5Editor.jsx

React component for DEXT5 Editor

/* eslint-disable react/prop-types */

import * as React from 'react';
import { DEXT5Editor } from 'dext5editor-react';
/**
 * `DEXT5Editor` component accepts handlers for all component events, e.g. `creationComplete` -> `onCreationComplete`.
 *
 * `DEXT5Editor` component ensures referential equality between renders for event handlers.
 * This means that first value of an event handler will be memoized and used through the lifecycle of `DEXT5Editor` component.
 */
function DEXT5EditorCmp( { pushEvent, uniqueName } ) {
	const handleBeforeLoad = () => {
		pushEvent( 'beforeLoad', '--' );
		console.log( {
			eventName: 'handleBeforeLoad',
			componentName: uniqueName
		});
	};

	const handleNamespaceLoaded = () => {
		pushEvent( 'namespaceLoaded', '--' );
		console.log( {
			eventName: 'handleNamespaceLoaded',
			componentName: uniqueName
		});
	};

	const handleLoaded = (eventParams) => {
		pushEvent( 'loaded', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleLoaded',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	const handleCreationComplete = (eventParams) => {
		pushEvent( 'creationComplete', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleCreationComplete',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};
	
	const handleDestroy = (eventParams) => {
		pushEvent( 'destroy', uniqueName );
		console.log( {
			eventName: 'handleDestroy',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	return (
		<DEXT5Editor
			debug={true}
			id={uniqueName}
			
			config={{ DevelopLangage:'NONE' }}
			initData="<p>Hello <strong>DEXT5 Editor</strong> world!</p>"

			componentUrl="/dext5editor/js/dext5editor.js"

			onBeforeLoad={handleBeforeLoad}
			onNamespaceLoaded={handleNamespaceLoaded}
			onLoaded={handleLoaded}
			
			onCreationComplete={handleCreationComplete}
 			onDestroy={handleDestroy}
		/>
	);
}

export default DEXT5EditorCmp;