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 uninstall  @ckeditor/ckeditor5-react

npm uninstall  @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 uninstall react-simplemde-editor

npm i prism-react-renderer

import { Highlight, themes } from "prism-react-renderer";
import { Card, CardBody, Col } from "reactstrap";
import CommonHeader from "../../../../Common/CommonHeader";
import { cssData } from "../../../../Data/Editor/EditorData";
import { CSSModeHeading } from "../../../../utils/Constant";

const CssMode = () => {
  return (
    <Col xl={6}>
      <Card>
        <CommonHeader title={CSSModeHeading} />
        <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 uninstall prism-react-renderer