project-codepen/src/components/Editor.js

import AceEditor from "react-ace";
import "ace-builds/webpack-resolver";
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/ext-language_tools";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-tomorrow";
import "ace-builds/src-noconflict/theme-kuroir";
import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/theme-textmate";
import "ace-builds/src-noconflict/theme-terminal";
import "ace-builds/src-noconflict/theme-solarized_dark";
import "ace-builds/src-noconflict/theme-solarized_light";
import { SelectMode } from "../helpers/SelectMode";
import { SelectTheme } from "../helpers/SelectTheme";
import { SelectFontSize } from "../helpers/SelectFontSize";
import "./Editor.css";

export const Editor = ({
  data = { type: "", name: "", text: "", index: "" },
  onChange,
  theme,
  font,
}) => {
  const changeTheme = (theme) => onChange({ theme });

  const changeFont = (font) => onChange({ font });
  return (
    <div className="all_editors">
      {"Mode: "}
      <SelectMode
        onChange={(type) =>
          onChange({ type, text: data.text, name: data.name })
        }
        value={data.type}
      />
      <br />
      {"Theme: "}
      <SelectTheme onChange={changeTheme} value={data.theme} />
      <br />
      {"FontSize: "}
      <SelectFontSize onChange={changeFont} value={data.font} />
      <br />
      {"Name of editor: "}
      <input
        placeholder="Enter a name for your editor"
        type="text"
        value={data.name}
        onChange={(e) =>
          onChange({ type: data.type, text: data.text, name: e.target.value })
        }
      />
      <AceEditor
        className="editor"
        value={data.text}
        onChange={(text) =>
          onChange({ type: data.type, text, name: data.name })
        }
        placeholder="Your Code"
        mode={data.type}
        name={data.name}
        theme={theme}
        fontSize={Number(font)}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          showLineNumbers: true,
          tabSize: 2,
        }}
      />
    </div>
  );
};