inital commit

node_modules/jodit-react/examples/components/Form.tsx

@@ -0,0 +1,148 @@
+import React, { type ChangeEvent, useCallback, useState } from 'react';
+
+import JoditEditor, { Jodit } from '../../src/';
+import './Form.css';
+import type { IJodit } from 'jodit/types/types/jodit';
+
+/**
+ * @param {Jodit} jodit
+ */
+function preparePaste(jodit: IJodit) {
+	jodit.e.on(
+		'paste',
+		e => {
+			if (confirm('Change pasted content?')) {
+				jodit.e.stopPropagation('paste');
+				jodit.s.insertHTML(
+					Jodit.modules.Helpers.getDataTransfer(e)!
+						.getData(Jodit.constants.TEXT_HTML)
+						?.replace(/a/g, 'b') ?? ''
+				);
+				return false;
+			}
+		},
+		{ top: true }
+	);
+}
+Jodit.plugins.add('preparePaste', preparePaste);
+
+const Form = () => {
+	const [isSource, setSource] = useState(false);
+
+	const [config, setConfig] = useState({
+		toolbarAdaptive: false,
+		readonly: false,
+		toolbar: true
+	});
+
+	const [textAreaValue, setTextAreaValue] = useState('Test');
+
+	const [inputValue, setInputValue] = useState('');
+
+	const [spin, setSpin] = useState(1);
+
+	const toggleToolbar = useCallback(
+		() =>
+			setConfig(config => ({
+				...config,
+				toolbar: !config.toolbar
+			})),
+		[]
+	);
+
+	const toggleReadOnly = useCallback(
+		() =>
+			setConfig(config => ({
+				...config,
+				readonly: !config.readonly
+			})),
+		[]
+	);
+
+	const handleBlurAreaChange = useCallback(
+		(textAreaValue: string, event: MouseEvent) => {
+			console.log('handleBlurAreaChange', textAreaValue, event);
+		},
+		[]
+	);
+
+	const handleWYSIWYGChange = useCallback((newTextAreaValue: string) => {
+		console.log('handleWYSIWYGChange', newTextAreaValue);
+
+		setTextAreaValue(newTextAreaValue);
+		setInputValue(newTextAreaValue);
+
+		return setTextAreaValue(() => newTextAreaValue);
+	}, []);
+
+	const handleNativeTextAreaChange = useCallback((e: ChangeEvent) => {
+		const value = (e.target as HTMLTextAreaElement).value;
+		console.log('handleNativeTextAreaChange', value);
+		setTextAreaValue(value);
+		setInputValue(value);
+	}, []);
+
+	const handleInputChange = useCallback(
+		(e: ChangeEvent) => {
+			const { value } = e.target as HTMLInputElement;
+			setInputValue(value);
+			handleWYSIWYGChange(value);
+		},
+		[handleWYSIWYGChange]
+	);
+
+	const handleSpin = useCallback(() => setSpin(spin => ++spin), []);
+
+	const onSourceChange = useCallback((e: ChangeEvent) => {
+		setSource((e.target as HTMLInputElement).checked);
+	}, []);
+
+	return (
+		<div>
+			<label>
+				<input
+					type="checkbox"
+					onChange={onSourceChange}
+					checked={isSource}
+				/>{' '}
+				Source
+			</label>
+
+			{!isSource ? (
+				<JoditEditor
+					config={config}
+					onChange={handleWYSIWYGChange}
+					onBlur={handleBlurAreaChange}
+					value={textAreaValue}
+				/>
+			) : (
+				<textarea
+					className={'simple-textarea'}
+					onChange={handleNativeTextAreaChange}
+					value={textAreaValue}
+				/>
+			)}
+
+			<input
+				onChange={handleInputChange}
+				placeholder={'enter some text'}
+				type={'text'}
+				value={inputValue}
+			/>
+
+			<button onClick={toggleReadOnly} type={'button'}>
+				{'Toggle Read-Only'}
+			</button>
+
+			<button onClick={toggleToolbar} type={'button'}>
+				{'Toggle Toolbar'}
+			</button>
+
+			<button type={'button'} onClick={handleSpin}>
+				{`Spin ${spin}`}
+			</button>
+		</div>
+	);
+};
+
+export default Form;