raonkeditor-react/samples/component/src/App.jsx

React component for RAON K Editor

import * as React from 'react';
import { RaonkEditor } from 'raonkeditor-react';
import Sidebar from './Sidebar';

const { version, useReducer } = React;

/**
 * `App` component manages state of underlying `RaonkEditor` and `Sidebar` components.
 *
 * `RaonkEditor` component memoizes certain props and it will ignore any new values. For instance, this is true for `config` and `runtimes.
 * In order to force new `config` or `runtimes` values, use keyed component.
 * This way `RaonkEditor` component is re-mounted and new instance of component is created.
 */
function App() {
	const [ { config, mode, readOnly, runtimes, id }, dispatch ] =
		useReducer( reducer, {
			config: getConfig(),
			mode: 'edit',
			readOnly: false,
			runtimes: 'html5',
			id: getUniqueName()
	} );

	const handleRuntimesChange = evt => {
		const value = evt.currentTarget.value;
		dispatch( { type: 'runtimes', payload: value } );
	};

	const handleModeChange = evt => {
		const value = evt.currentTarget.value;
		dispatch( { type: 'mode', payload: value } );
	};
	const handleReadOnlyChange = evt => {
		const checked = evt.currentTarget.checked;
		dispatch( { type: 'readOnly', payload: checked } );
	};

	return (
		<div>
			<section className="container">
				<Sidebar
					runtimes={runtimes}
					mode={mode}
					readOnly={readOnly}

					onRuntimesChange={handleRuntimesChange}
					onModeChange={handleModeChange}
					onReadOnlyChange={handleReadOnlyChange}
				/>
				<div className="paper flex-grow-3">
					<RaonkEditor
						key={id}
						
						debug={true}
						id={id}
						mode={mode}
						readOnly={readOnly}
						config={config}
						componentUrl="/raonkeditor/js/raonkeditor.js"
						runtimes={runtimes}
					/>
				</div>
			</section>
			<footer>{`Running React v${ version }`}</footer>
		</div>
	);
}

function reducer( state, action ) {
	switch ( action.type ) {
		case 'runtimes':
			return action.payload === state.runtimes ?
				state :
				{
					...state,
					config: getConfig( ),
					runtimes: action.payload,
					id: getUniqueName()
				};
		case 'mode':
			return {
				...state,
				mode: action.payload
			};
		case 'readOnly':
			return {
				...state,
				readOnly: action.payload
			};
		default:
			return state;
	}
}

function getConfig( ) {
	return {
		...{ Lang: 'ko-kr', Width: '100%', Height: '250px', DevelopLangage: 'NONE' }
	};
}

function getUniqueName() {
	return Math.random()
		.toString( 36 )
		.replace( /[^a-z]+/g, '' )
		.substr( 0, 5 );
}

export default App;