43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import React, { useEffect, useId, useState } from 'react';
|
|
import {Editor} from "@tinymce/tinymce-react";
|
|
import { tinyKey } from '../config'
|
|
import {useAppSelector} from "../stores/hooks";
|
|
|
|
export const RichTextField = ({ options, field, form, itemRef, showField }) => {
|
|
const [value, setValue] = useState(null);
|
|
const darkMode = useAppSelector((state) => state.style.darkMode);
|
|
|
|
useEffect(() => {
|
|
if (field.value) {
|
|
setValue(field.value);
|
|
}
|
|
}, [field.value]);
|
|
|
|
const handleChange = (value) => {
|
|
form.setFieldValue(field.name, value);
|
|
setValue(value);
|
|
};
|
|
|
|
return (
|
|
<Editor
|
|
onEditorChange={handleChange}
|
|
value={value || ''}
|
|
apiKey={tinyKey}
|
|
init={{
|
|
plugins:
|
|
'advlist autolink lists link image charmap print preview anchor' +
|
|
'searchreplace visualblocks code fullscreen' +
|
|
'insertdatetime media table paste help wordcount',
|
|
toolbar:
|
|
'undo redo | formatselect | ' +
|
|
'bold italic backcolor | alignleft aligncenter ' +
|
|
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
'removeformat | code',
|
|
|
|
content_style: `${darkMode ? 'body { color: #ffffff; }' : ''}`,
|
|
|
|
}}
|
|
/>
|
|
);
|
|
};
|