Project/projectreact/src/components/editor.js

import { useState } from "react";
import SelectLang from "./select";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-css";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/mode-xml";
import "ace-builds/src-noconflict/mode-sass";
import "ace-builds/src-noconflict/mode-ruby";
import "ace-builds/src-noconflict/mode-markdown";
import "ace-builds/src-noconflict/mode-mysql";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/mode-handlebars";
import "ace-builds/src-noconflict/mode-golang";
import "ace-builds/src-noconflict/mode-csharp";
import "ace-builds/src-noconflict/mode-elixir";
import "ace-builds/src-noconflict/mode-typescript";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";
import { edit } from "ace-builds";

const Editor = ({
  data = { type: "html", text: "", name: "" },
  onChange,
  onDelete,
}) => {
  return (
    <div
      style={{
        display: "inline-block",
        width: "calc(100% / 3)",
        marginBottom: "10px",
      }}
    >
      <SelectLang
        onChange={(type) =>
          onChange({ type, text: data.text, name: data.name })
        }
        value={data.type}
      />{" "}
      <br />
      <div className="input-group ml-4">
        <div className="input-group-prepend">
          <span className="input-group-text" id="basic-addon1">
            Name of file
          </span>
        </div>
        <input
          type="text"
          className="form-control w-25"
          placeholder="Name of file"
          aria-label="Name of file"
          aria-describedby="basic-addon1"
          value={data.name}
          onChange={(e) =>
          onChange({ type: data.type, text: data.text, name: e.target.value })
                    }
            
        />
      </div>
      <button
        type="button"
        className="close mr-4"
        aria-label="Close"
        onClick={onDelete}
      >
        <span className="text-danger" aria-hidden="true">
          &times;
        </span>
      </button>
      <AceEditor
        className="editor"
        value={data.text}
        onChange={(text) =>
          onChange({ type: data.type, text, name: data.name })
        }
        placeholder="Your Code"
        mode={data.type}
        theme="monokai"
        name="blah2"
        fontSize={14}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: false,
          showLineNumbers: true,
          tabSize: 2,
        }}
      />
    </div>
  );
};

export default Editor;