first
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
// It is required to load react-ace first.
|
||||
// eslint-disable-next-line simple-import-sort/imports
|
||||
import AceEditor from 'react-ace';
|
||||
|
||||
import 'ace-builds/src-noconflict/mode-css';
|
||||
import 'ace-builds/src-noconflict/mode-javascript';
|
||||
import 'ace-builds/src-noconflict/snippets/css';
|
||||
import 'ace-builds/src-noconflict/snippets/javascript';
|
||||
import 'ace-builds/src-noconflict/snippets/text';
|
||||
import 'ace-builds/src-noconflict/ext-language_tools';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
import { Component } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Component Class
|
||||
*/
|
||||
export default class CodeEditor extends Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
|
||||
this.state = {
|
||||
codePlaceholder: this.props.codePlaceholder,
|
||||
};
|
||||
|
||||
this.maybeRemovePlaceholder = this.maybeRemovePlaceholder.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.maybeRemovePlaceholder();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove placeholder after first change.
|
||||
*/
|
||||
maybeRemovePlaceholder() {
|
||||
const { value } = this.props;
|
||||
|
||||
const { codePlaceholder } = this.state;
|
||||
|
||||
if (value && codePlaceholder) {
|
||||
this.setState({ codePlaceholder: '' });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, onChange, mode, maxLines, minLines } = this.props;
|
||||
|
||||
const { codePlaceholder } = this.state;
|
||||
|
||||
return (
|
||||
<AceEditor
|
||||
className="vpf-component-code-editor"
|
||||
theme="textmate"
|
||||
onLoad={(editor) => {
|
||||
editor.renderer.setScrollMargin(16, 16, 16, 16);
|
||||
editor.renderer.setPadding(16);
|
||||
}}
|
||||
fontSize={12}
|
||||
showPrintMargin
|
||||
showGutter
|
||||
highlightActiveLine={false}
|
||||
width="100%"
|
||||
setOptions={{
|
||||
enableBasicAutocompletion: true,
|
||||
enableLiveAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
showLineNumbers: true,
|
||||
printMargin: false,
|
||||
tabSize: 2,
|
||||
}}
|
||||
editorProps={{
|
||||
$blockScrolling: Infinity,
|
||||
}}
|
||||
value={value || codePlaceholder}
|
||||
onChange={(val) => {
|
||||
onChange(val === codePlaceholder ? '' : val);
|
||||
|
||||
this.maybeRemovePlaceholder();
|
||||
}}
|
||||
mode={mode}
|
||||
maxLines={maxLines}
|
||||
minLines={minLines}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@@ -0,0 +1,37 @@
|
||||
@import "../../variables";
|
||||
|
||||
.vpf-component-code-editor {
|
||||
&.ace_editor {
|
||||
width: 100%;
|
||||
line-height: 1.45;
|
||||
background-color: $light-gray-100;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px $light-gray-400;
|
||||
|
||||
.ace_gutter {
|
||||
background-color: $light-gray-400;
|
||||
}
|
||||
|
||||
.ace_gutter-cell {
|
||||
background-color: $light-gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.ace_tooltip {
|
||||
padding: 6px 10px;
|
||||
background: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 5%);
|
||||
}
|
||||
|
||||
.ace_hidden-cursors {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vpf-control-pre-custom-css {
|
||||
padding: 20px;
|
||||
background-color: $light-gray-400;
|
||||
}
|
Reference in New Issue
Block a user