rich-text-box.tsx

gistfile1.txt

import { Box } from "@chakra-ui/react";
import * as React from "react";

const RichTextBox = ({ richText }: { richText: string }) => {
  return (
    <Box
      minHeight="300px"
      border="1px"
      borderColor="gray.200"
      padding="8"
      sx={{
        a: { textDecoration: "underline" },
        h1: { fontSize: "2xl" },
        h2: { fontSize: "xl" },
        h3: { fontSize: "lg" },
        "ol, ul, .ql-editor": {
          counterReset:
            "list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
        },
        "ol, ul": { paddingLeft: "1.5em" },
        "ol > li, ul > li": {
          listStyleType: "none",
        },
        "ul > li::before": { content: '"\\2022"' },
        'ul[data-checked="true"], ul[data-checked="false"]': {
          pointerEvents: "none",
        },
        'ul[data-checked="true"] > li *, ul[data-checked="false"] > li *': {
          pointerEvents: "all",
        },
        'ul[data-checked="true"] > li::before, ul[data-checked="false"] > li::before':
          {
            color: "#777",
            cursor: "pointer",
            pointerEvents: "all",
          },
        'ul[data-checked="true"] > li::before': {
          content: '"\\2611"',
        },
        'ul[data-checked="false"] > li::before': {
          content: '"\\2610"',
        },
        "li::before": {
          display: "inline-block",
          whiteSpace: "nowrap",
          width: "1.2em",
        },
        "li:not(.ql-direction-rtl)::before": {
          marginLeft: "-1.5em",
          marginRight: "0.3em",
          textAlign: "right",
        },
        "li.ql-direction-rtl::before": {
          marginLeft: "0.3em",
          marginRight: "-1.5em",
        },
        "ol li:not(.ql-direction-rtl), ul li:not(.ql-direction-rtl)": {
          paddingLeft: "1.5em",
        },
        "ol li.ql-direction-rtl, ul li.ql-direction-rtl": {
          paddingRight: "1.5em",
        },
        "ol li": {
          counterReset:
            "list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
          counterIncrement: "list-0",
        },
        "ol li:before": {
          content: 'counter(list-0, decimal) ". "',
        },
        "ol li.ql-indent-1": {
          counterIncrement: "list-1",
          counterReset:
            "list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
        },
        "ol li.ql-indent-1:before": {
          content: 'counter(list-1, lower-alpha) ". "',
        },
        "ol li.ql-indent-2": {
          counterIncrement: "list-2",
          counterReset: "list-3 list-4 list-5 list-6 list-7 list-8 list-9",
        },
        "ol li.ql-indent-2:before": {
          content: 'counter(list-2, lower-roman) ". "',
        },
        "ol li.ql-indent-3": {
          counterIncrement: "list-3",
          counterReset: "list-4 list-5 list-6 list-7 list-8 list-9",
        },
        "ol li.ql-indent-3:before": {
          content: 'counter(list-3, decimal) ". "',
        },
        "ol li.ql-indent-4": {
          counterIncrement: "list-4",
          counterReset: "list-5 list-6 list-7 list-8 list-9",
        },
        "ol li.ql-indent-4:before": {
          content: 'counter(list-4, lower-alpha) ". "',
        },
        "ol li.ql-indent-5": {
          counterIncrement: "list-5",
          counterReset: "list-6 list-7 list-8 list-9",
        },
        "ol li.ql-indent-5:before": {
          content: 'counter(list-5, lower-roman) ". "',
        },
        "ol li.ql-indent-6": {
          counterIncrement: "list-6",
          counterReset: "list-7 list-8 list-9",
        },
        "ol li.ql-indent-6:before": {
          content: 'counter(list-6, decimal) ". "',
        },
        "ol li.ql-indent-7": {
          counterIncrement: "list-7",
          counterReset: "list-8 list-9",
        },
        "ol li.ql-indent-7:before": {
          content: 'counter(list-7, lower-alpha) ". "',
        },
        "ol li.ql-indent-8": {
          counterIncrement: "list-8",
          counterReset: "list-9",
        },
        "ol li.ql-indent-8:before": {
          content: 'counter(list-8, lower-roman) ". "',
        },
        "ol li.ql-indent-9": { counterIncrement: "list-9" },
        "ol li.ql-indent-9:before": {
          content: 'counter(list-9, decimal) ". "',
        },
        ".ql-indent-1:not(.ql-direction-rtl)": {
          paddingLeft: "3em",
        },
        "li.ql-indent-1:not(.ql-direction-rtl)": {
          paddingLeft: "4.5em",
        },
        ".ql-indent-1.ql-direction-rtl.ql-align-right": {
          paddingRight: "3em",
        },
        "li.ql-indent-1.ql-direction-rtl.ql-align-right": {
          paddingRight: "4.5em",
        },
        ".ql-indent-2:not(.ql-direction-rtl)": {
          paddingLeft: "6em",
        },
        "li.ql-indent-2:not(.ql-direction-rtl)": {
          paddingLeft: "7.5em",
        },
        ".ql-indent-2.ql-direction-rtl.ql-align-right": {
          paddingRight: "6em",
        },
        "li.ql-indent-2.ql-direction-rtl.ql-align-right": {
          paddingRight: "7.5em",
        },
        ".ql-indent-3:not(.ql-direction-rtl)": {
          paddingLeft: "9em",
        },
        "li.ql-indent-3:not(.ql-direction-rtl)": {
          paddingLeft: "10.5em",
        },
        ".ql-indent-3.ql-direction-rtl.ql-align-right": {
          paddingRight: "9em",
        },
        "li.ql-indent-3.ql-direction-rtl.ql-align-right": {
          paddingRight: "10.5em",
        },
        ".ql-indent-4:not(.ql-direction-rtl)": {
          paddingLeft: "12em",
        },
        "li.ql-indent-4:not(.ql-direction-rtl)": {
          paddingLeft: "13.5em",
        },
        ".ql-indent-4.ql-direction-rtl.ql-align-right": {
          paddingRight: "12em",
        },
        "li.ql-indent-4.ql-direction-rtl.ql-align-right": {
          paddingRight: "13.5em",
        },
        ".ql-indent-5:not(.ql-direction-rtl)": {
          paddingLeft: "15em",
        },
        "li.ql-indent-5:not(.ql-direction-rtl)": {
          paddingLeft: "16.5em",
        },
        ".ql-indent-5.ql-direction-rtl.ql-align-right": {
          paddingRight: "15em",
        },
        "li.ql-indent-5.ql-direction-rtl.ql-align-right": {
          paddingRight: "16.5em",
        },
        ".ql-indent-6:not(.ql-direction-rtl)": {
          paddingLeft: "18em",
        },
        "li.ql-indent-6:not(.ql-direction-rtl)": {
          paddingLeft: "19.5em",
        },
        ".ql-indent-6.ql-direction-rtl.ql-align-right": {
          paddingRight: "18em",
        },
        "li.ql-indent-6.ql-direction-rtl.ql-align-right": {
          paddingRight: "19.5em",
        },
        ".ql-indent-7:not(.ql-direction-rtl)": {
          paddingLeft: "21em",
        },
        "li.ql-indent-7:not(.ql-direction-rtl)": {
          paddingLeft: "22.5em",
        },
        ".ql-indent-7.ql-direction-rtl.ql-align-right": {
          paddingRight: "21em",
        },
        "li.ql-indent-7.ql-direction-rtl.ql-align-right": {
          paddingRight: "22.5em",
        },
        ".ql-indent-8:not(.ql-direction-rtl)": {
          paddingLeft: "24em",
        },
        "li.ql-indent-8:not(.ql-direction-rtl)": {
          paddingLeft: "25.5em",
        },
        ".ql-indent-8.ql-direction-rtl.ql-align-right": {
          paddingRight: "24em",
        },
        "li.ql-indent-8.ql-direction-rtl.ql-align-right": {
          paddingRight: "25.5em",
        },
        ".ql-indent-9:not(.ql-direction-rtl)": {
          paddingLeft: "27em",
        },
        "li.ql-indent-9:not(.ql-direction-rtl)": {
          paddingLeft: "28.5em",
        },
        ".ql-indent-9.ql-direction-rtl.ql-align-right": {
          paddingRight: "27em",
        },
        "li.ql-indent-9.ql-direction-rtl.ql-align-right": {
          paddingRight: "28.5em",
        },
      }}
      dangerouslySetInnerHTML={{ __html: richText }}
    />
  );
};

export default RichTextBox;