149 lines
3.1 KiB
TypeScript
149 lines
3.1 KiB
TypeScript
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;
|