Top

Editors


Simple

npm i react-quill-new
import ReactQuill from "react-quill-new";

const MdeExampleOne = () => {
  const [value, setValue] = useState(MdeEditorText);
  
    return (
      <Card>
        <CardBody>
          <ReactQuill value={value} onChange={setValue} />
        </CardBody>
      </Card>
    );
  };

Remove package from project

npm remove react-quill-new
ace-code

npm i prism-react-renderer
import { Highlight, themes } from "prism-react-renderer";
import { Card, CardBody, Col } from "reactstrap";
import { CssModeTitle } from "../../../../Constants/Constants";
import { CssData } from "../../../../Data/Miscellaneous/Editor";
import CommonCardHeader from "../../../CommonComponents/CommonCardHeader/CommonCardHeader";

const CssMode = () => {
  return (
    <Col xl="6">
      <Card>
        <CommonCardHeader title={CssModeTitle} />
        <CardBody>
          <Highlight theme={themes.vsDark} code={CssData} language="css">
            {({ style, tokens, getLineProps, getTokenProps }) => (
              <pre style={style}>
                {tokens.map((line, i) => (
                  <div key={i} {...getLineProps({ line })}>
                    {line.map((token, key) => (
                      <span key={key} {...getTokenProps({ token })} />
                    ))}
                  </div>
                ))}
              </pre>
            )}
          </Highlight>
        </CardBody>
      </Card>
    </Col>
  );
};
export default CssMode;

Remove package from project

npm remove prism-react-renderer