1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- 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 "./Editor.css";
- export const Editor = ({ data = { type: "", name: "", text: "", index: "" }, onChange, theme, font }) => {
- return (
- <div className='all_editors'>
- {"Mode: "}
- <SelectMode onChange={type => onChange({ type, text: data.text, name: data.name })} value={data.type} />
- <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>
- );
- };
|