This commit is contained in:
2024-05-20 15:37:46 +03:00
commit 00b7dbd0b7
10404 changed files with 3285853 additions and 0 deletions

View File

@@ -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}
/>
);
}
}

View File

@@ -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;
}