FieldRichText.jsx

import React from "react";
import SunEditor from 'suneditor-react';
import {
    align,
    font,
    fontColor,
    fontSize,
    formatBlock,
    hiliteColor,
    horizontalRule,
    lineHeight,
    list,
    paragraphStyle,
    table,
    template,
    textStyle,
    image,
    link
} from "suneditor/src/plugins";

import 'suneditor/dist/css/suneditor.min.css';
import './styles.scss';

export default function FieldRichText(props) {

    const { height, value, onChange } = props;

    return (
        <SunEditor
            setAllPlugins={false}
            showToolbar={true}
            autoFocus={true}
            lang="en"
            setOptions={{
                showPathLabel: false,
                minHeight: "50vh",
                maxHeight: "50vh",
                height: height,
                placeholder: "Enter your text here!!!",
                plugins: [
                    align,
                    font,
                    fontColor,
                    fontSize,
                    formatBlock,
                    hiliteColor,
                    horizontalRule,
                    lineHeight,
                    list,
                    paragraphStyle,
                    table,
                    template,
                    textStyle,
                    image,
                    link
                ],
                buttonList: [
                    ["undo", "redo"],
                    [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                    ["font", "fontSize", "formatBlock"],
                    ["paragraphStyle"],
                    [
                        "bold",
                        "underline",
                        "italic",
                        "strike",
                        "subscript",
                        "superscript"
                    ],
                    ["fontColor", "hiliteColor", 'textStyle'],
                    ["removeFormat"],
                    "/", // Line break
                    ["outdent", "indent"],
                    ["align", "horizontalRule", "list", "lineHeight"],
                    ["table", "link", "image"],
                    ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
                    ['-right', ':r-More Rich-default.more_plus', 'table', 'math', 'imageGallery'],
                    ['-right', 'image', 'video', 'audio', 'link'],
                ],
                formats: ["p", "div", "h1", "h2", "h3", "h4", "h5", "h6"],
                font: [
                    "Arial",
                    "Calibri",
                    "Comic Sans",
                    "Courier",
                    "Garamond",
                    "Georgia",
                    "Impact",
                    "Lucida Console",
                    "Palatino Linotype",
                    "Segoe UI",
                    "Tahoma",
                    "Times New Roman",
                    "Trebuchet MS"
                ]
            }}
            setContents={value}
            onChange={onChange}
            {...props}
        />
    );
}