RTL for MUI-RTE

import React, { useRef } from "react";

import MUIRichTextEditor, { TMUIRichTextEditorRef } from "mui-rte";
import { convertToRaw } from "draft-js";

import {
  Email,
  FormatTextdirectionLToR,
  FormatTextdirectionRToL,
  FormatAlignCenter,
  FormatAlignRight,
  FormatAlignLeft,
} from "@material-ui/icons";
export default function RichTextEditorField({ setRef, setContent, ...props }) {
  const ref = useRef(TMUIRichTextEditorRef);
  setRef(ref);
  const save = (data) => {
    setContent(JSON.stringify(data));
  };

  const AlignBlock = ({ children, direction, ...props }) => {
    return (
      <div
        style={{
          textAlign: direction,
        }}
      >
        {children}
      </div>
    );
  };
  const DirectionBlock = ({ children, direction, ...props }) => {
    return (
      <div
        style={{
          direction: direction,
        }}
      >
        {children}
      </div>
    );
  };

  return (
    <MUIRichTextEditor
      onSave={save}
      ref={ref}
      label="Votre description..."
      maxLength={2500}
      controls={[
        "title",
        "bold",
        "italic",
        "underline",
        "numberList",
        "bulletList",
        "link",
        "undo",
        "redo",
        "align-left",
        "align-center",
        "align-right",
        "dir-ltr",
        "dir-rtl",
        "save",
      ]}
      customControls={[
        {
          name: "align-right",
          icon: <FormatAlignRight />,
          type: "block",
          blockWrapper: <AlignBlock direction="right" />,
        },
        {
          name: "align-left",
          icon: <FormatAlignLeft />,
          type: "block",
          blockWrapper: <AlignBlock direction="left" />,
        },
        {
          name: "align-center",
          icon: <FormatAlignCenter />,
          type: "block",
          blockWrapper: <AlignBlock direction="center" />,
        },
        {
          name: "dir-ltr",
          icon: <FormatTextdirectionLToR />,
          type: "block",
          blockWrapper: <DirectionBlock direction="ltr" />,
        },
        {
          name: "dir-rtl",
          icon: <FormatTextdirectionRToL />,
          type: "block",
          blockWrapper: <DirectionBlock direction="rtl" />,
        },
      ]}
    />
  );
}