npm i @ckeditor/ckeditor5-react

npm i @ckeditor/ckeditor5-build-classic

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Editor = () => {
  const InnerText: string = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vulputate urna, sed dignissim arcu. Aliquam at ligula imperdiet, faucibus ante a, interdum enim. Sed in mauris a lectus lobortis condimentum. Sed in nunc magna. Quisque massa urna, cursus vitae commodo eget, rhoncus nec erat. Sed sapien turpis, elementum sit amet elit vitae, elementum gravida eros. In ornare tempus nibh ut lobortis. Nam venenatis justo ex, vitae vulputate neque laoreet a.</p>";
  
    return (
      <Card>
        <CardBody>
          <CKEditor editor={ClassicEditor} data={InnerText} />
        </CardBody>
      </Card>
    );
  };

Remove package from project

npm remove  @ckeditor/ckeditor5-react

npm remove  @ckeditor/ckeditor5-build-classic

npm i react-simplemde-editor

import { SimpleMdeReact } from "react-simplemde-editor";

const MdeExampleOne = () => {
  const MdeEditorText = `Enter text in the area on the left. For more info, click the ? (help) icon in the menu.`;
  
    return (
      <Card>
        <CardBody>
          <SimpleMdeReact id="editor_container" value={MdeEditorText} options={{ autofocus: true, spellChecker: false }} />
        </CardBody>
      </Card>
    );
  };

Remove package from project

npm remove react-simplemde-editor

npm i prism-react-renderer

import { Highlight, themes } from "prism-react-renderer";
import { Card, CardBody, Col } from "reactstrap";
import { CssData } from "../../../../Data/MiscellaneousData/EditorsData";
import CommonCardHeader from "../../../../Utils/CommonComponents/CommonCardHeader";
import { CssModeTitle } from "../../../../Utils/Constants";

export default function CssMode() {
  return (
    <Col xl={6}>
      <Card>
        <CommonCardHeader headClass="pb-0" 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>
  );
}

Remove package from project

npm remove prism-react-renderer