react-text-editor-kit/application/src/components/ViewSourceModel.jsx

React Text Editor Kit is a customizable rich text editor component for React applications. It provides a flexible and easy-to-use interface for users to create and edit content with various formatting options. And also easy to integrate in react applicati

import React from "react";
import Modal from "./Model";
import Styles from "../css/style.module.css";

export default function ViewSourceModal(props) {
  const {
    viewSource,
    setViewSource,
    sourceCode,
    setSourceCode,
    handleSaveSource,
  } = props;

  return (
    <div className={Styles.mlMainContentBox}>
      <Modal
        isOpen={viewSource}
        onClose={() => setViewSource(false)}
        title="Source Code"
        className={Styles.fullScreenModel}
      >
        <textarea
          className={Styles.wysiwygEditorSource}
          value={sourceCode}
          onChange={(e) => setSourceCode(e.target.value)}
        />
        <div className={Styles.reactEditorTextEnd}>
          <button className={Styles.saveButton} onClick={handleSaveSource}>
            Save
          </button>
        </div>
      </Modal>
    </div>
  );
}