123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- 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>
- );
- };
|