56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Controller } from "react-hook-form";
|
|
import CKEditor from "@ckeditor/ckeditor5-react";
|
|
import * as ClassicEditor from "ckeditor5-mathtype/build/ckeditor";
|
|
|
|
import { useFormProvider } from '../FormContext'
|
|
|
|
const toolbarOptions = [
|
|
"bold",
|
|
"italic",
|
|
"blockQuote",
|
|
"numberedList",
|
|
"bulletedList",
|
|
"imageUpload",
|
|
"insertTable",
|
|
"tableColumn",
|
|
"tableRow",
|
|
"mergeTableCells",
|
|
"|",
|
|
"MathType",
|
|
"ChemType",
|
|
"|",
|
|
"undo",
|
|
"redo",
|
|
];
|
|
|
|
type Props = {
|
|
name: string
|
|
defaultValue: string
|
|
}
|
|
|
|
export const TextEditor: FC<Props> = ({ name, defaultValue }) => {
|
|
const { hooks: { control } } = useFormProvider()
|
|
|
|
return (
|
|
<Controller
|
|
control={control}
|
|
name={name}
|
|
defaultValue={defaultValue}
|
|
render={({ onChange, value }) => (
|
|
<CKEditor
|
|
editor={ClassicEditor}
|
|
data={value}
|
|
config={{
|
|
toolbar: toolbarOptions,
|
|
ckfinder: {
|
|
uploadUrl: `${process.env.REACT_APP_BACKEND_URL}/uploads`,
|
|
},
|
|
}}
|
|
onChange={(_: any, editor: any) => onChange(editor.getData())}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
};
|