Rich Text Editor in Reactjs

In the provided code, we have implemented a text editor using the react-draft-wysiwyg library in a React functional component named TextEditor. The editor allows users to input and format text, and the content is managed using the Editor component from the library. The entered text is then converted to Markdown format when the form is submitted.

import { useState } from 'react';
import { convertToRaw } from 'draft-js';
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToMarkdown from 'draftjs-to-markdown';

function TextEditor() {
  const [text, setText] = useState("")

  const handleChange = (editorState) => {
    setText(editorState)
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(draftToMarkdown(convertToRaw(text.getCurrentContent())))
  }

  return (
    <div>
      <form onSubmit={(e) => { handleSubmit(e) }}>
        <Editor
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={handleChange}
        />
        <input type="submit" name="save" value="Save" />
      </form>
    </div>
  );
}

export default TextEditor;

For further details about the methods and properties used in the react-draft-wysiwyg library, you can refer to the official documentation here.