--

src/store/modules/project.js

@@ -283,7 +283,7 @@ export const projectStore = {
 		copyNode(state, {node, parentNode}) {
 		//	const parentChildren = parentNode.children || parentNode;
 		//	const index = parentChildren.indexOf(node);
-			//parentNode.children.push(node);
+		// 	parentNode.children.push(node);
 		//	parentChildren.push(parentChildren[index]);
 			const child = {
 				name:node.name,

src/themes/light/editor.scss

@@ -121,4 +121,7 @@
 			}
 		}
 	}
+	.full-scrollbar{
+		height: 68vh;
+	}
 }

src/views/Editor/dialogs/DetailsDialog.vue

@@ -3,6 +3,7 @@
 	           :close-on-click-modal="false"
 	           :append-to-body="true"
 	           :show-close="false"
+			   fullscreen
 	           custom-class="details-dialog"
 	>
 		<el-tabs v-model="activeName">

src/views/Editor/dialogs/editors/ProjectEditor.vue

 <template>
 	<div>
-		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
+		<el-scrollbar class="scrollbar full-scrollbar" wrap-class="wrap-x-hidden" view-class="view">
 			<el-form @submit.native.prevent ref="form" :model="options" size="mini" label-position="right"
 			         label-width="150px">
 				<el-form-item prop="pageTitle" :label="$t('Page title')">
@@ -46,7 +46,13 @@
 					</el-select>
 				</el-form-item>
 				<el-form-item prop="tpl" :label="$t('Template')">
-					<el-input type="textarea" v-model="options.tpl" :rows="10"/>
+					<!-- <el-input type="textarea" v-model="options.tpl" :rows="10"/> -->
+					<codemirror ref="codeEditor"
+			            v-model="options.tpl"
+			            :options="cmOptions"
+						@cursorActivity="onCodeChange"
+					>
+					</codemirror>
 				</el-form-item>
 			</el-form>
 		</el-scrollbar>
@@ -59,10 +65,18 @@
 
 <script>
 	import {mapState, mapGetters, mapMutations} from 'vuex';
+	import {codemirror} from "vue-codemirror";
+	import 'codemirror/mode/javascript/javascript.js'
+	import 'codemirror/lib/codemirror.css'
+	import 'codemirror/theme/monokai.css'
+	import 'codemirror/addon/edit/closebrackets.js'
+	import 'codemirror/addon/hint/show-hint.js'
+	import 'codemirror/addon/hint/show-hint.css'
+	import 'codemirror/addon/hint/javascript-hint.js'
 
 	export default {
 		name: "ProjectEditor",
-		components: {},
+		components: {codemirror},
 		data() {
 			const scaleMode = this.$t('scaleMode');
 			const rendererType = this.$t('rendererType');
@@ -70,6 +84,16 @@
 				visible: false,
 				scaleMode,
 				rendererType,
+				cmOptions: {
+					tabSize: 2,
+					mode: 'text/javascript',
+					styleActiveLine: true,
+					theme: 'default',
+					lineNumbers: true,
+					line: true,
+					matchBrackets: true,
+					autoCloseBrackets: true,
+				}
 			}
 		},
 		computed: {
@@ -90,6 +114,10 @@
 			onSave() {
 				this.modifyProject();
 			},
+			onCodeChange(codemirror){
+				//codemirror.showHint();
+				//console.log(code);
+			}
 		}
 	}
 </script>