+ better code editing

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bridge",
   "productName": "bridge.",
-  "version": "1.0.0",
+  "version": "0.2.0",
   "author": "solvedDev <[email protected]>",
   "description": "An advanced addon editor",
   "license": null,
@@ -75,15 +75,16 @@
     "babili-webpack-plugin": "^0.1.2",
     "cfonts": "^1.1.3",
     "chalk": "^2.1.0",
+    "codemirror": "^5.42.2",
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.4",
     "del": "^3.0.0",
     "devtron": "^1.4.0",
     "electron": "^1.7.5",
+    "electron-builder": "^19.19.1",
     "electron-debug": "^1.4.0",
     "electron-devtools-installer": "^2.2.0",
-    "electron-builder": "^19.19.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.30.1",
@@ -93,6 +94,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "url-loader": "^0.5.9",
+    "vue-codemirror": "^4.0.6",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^13.0.5",
     "vue-style-loader": "^3.0.1",

src/renderer/components/editor_shell/ContentManager.vue

@@ -31,12 +31,12 @@
         },
         data() {
             return {
-                available_height: window.innerHeight - 164
+                available_height: window.innerHeight - 94
             };
         },
         methods: {
             on_resize() {
-                this.available_height = window.innerHeight - 164;
+                this.available_height = window.innerHeight - 94;
             }
         },
         computed: {
@@ -48,10 +48,16 @@
             },
             selected_project() {
                 return this.$store.state.Explorer.project;
+            },
+            footer_visible() {
+                return this.$store.state.Footer.elements.length > 0;
             }
         },
         watch: {
-            
+            footer_visible(new_val) {
+                if(new_val) this.available_height -= 24;
+                else this.available_height += 24;
+            }
         }
     }
 </script>
@@ -64,3 +70,9 @@
         max-height: 100%;
     }
 </style>
+
+<style>
+    .CodeMirror.cm-s-monokai * {
+        background: #303030;
+    }
+</style>

src/renderer/components/editor_shell/FileManager.vue

@@ -4,6 +4,12 @@
             <v-img :src="image" :style="`max-height: ${available_height}px;`"/>
         </v-container>
         <json-editor-main v-else-if="extension == 'json' && false" :compiled="file.compiled" :tab_id="tab_id" :object="json_object" :available_height="available_height" :uuid="use_uuid"></json-editor-main>
+        <codemirror
+            v-else-if="extension == 'json' || extension == 'js'"
+            v-model="text"
+            :options="cm_options"
+            ref="cm"
+        />
         <quill-editor 
             v-else
             :content="text"
@@ -16,6 +22,13 @@
 </template>
 
 <script>
+    //Language
+    import "codemirror/mode/javascript/javascript.js";
+    //Style
+    import "codemirror/lib/codemirror.css";
+    import "codemirror/theme/monokai.css";
+    import "codemirror/theme/xq-light.css";
+
     import QuillEditor from "./QuillEditor";
     import JsonEditorMain from "./JsonEditor/Main";
 
@@ -31,6 +44,14 @@
             tab_id: Number, 
             uuid: String
         },
+        mounted() {
+            if(this.$refs.cm) this.$refs.cm.$el.childNodes[1].style.height = this.available_height + "px";
+        },
+        data() {
+            return {
+                
+            }
+        },
         computed: {
             extension() {
                 if (this.file) return this.file.file.split(".").pop().toLowerCase();
@@ -46,24 +67,41 @@
                     return `data:image/${this.extension};base64,${base64Data}`;
                 }
             },
-            text() {
-                if (this.file) {
-                    try {
-                        return new TextDecoder('utf-8').decode(this.file.content);
-                    } catch(err) {
-                        return this.file.content;
-                    } 
+            text: {
+                get() {
+                    if (this.file) {
+                        try {
+                            return new TextDecoder('utf-8').decode(this.file.content);
+                        } catch(err) {
+                            return this.file.content;
+                        } 
+                    }
+                    return undefined;
+                },
+                set(val) {
+                    this.$store.commit("setTabContent", { tab: this.tab_id, content: val });
                 }
-                return undefined;
             },
             json_object() {
                 try {
                     return JSON.parse(this.text);
                 } catch(e) {
                     return this.text;
                 }
+            },
+
+            cm_options() {
+                return {
+                    lineNumbers: true,
+                    theme: this.$store.state.Appearance.is_dark_mode ? "monokai" : "xq-light",
+                    mode: "text/javascript"
+                };
+            } 
+        },
+        watch: {
+            available_height() {
+                if(this.$refs.cm) this.$refs.cm.$el.childNodes[1].style.height = this.available_height + "px";
             }
         }
     }
-</script>
-
+</script>

src/renderer/components/editor_shell/QuillEditor.vue

@@ -3,7 +3,7 @@
     <div 
         :class="this.$store.state.Appearance.is_dark_mode ? 'dark' : 'light'"
         :id="`quill-editor-${random_id}-${tab_id}`"
-        :style="`height: ${height + 37}px;`"
+        :style="`height: ${height - 10}px;`"
     >
 
     </div>

src/renderer/main.js

@@ -1,18 +1,19 @@
-import Vue from 'vue'
-import Vuetify from 'vuetify'
-import 'vuetify/dist/vuetify.css'
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import 'vuetify/dist/vuetify.css';
+import VueCodeMirror from "vue-codemirror";
+import App from './App';
+import store from './store';
 
-import App from './App'
-import store from './store'
+Vue.use(Vuetify);
+Vue.use(VueCodeMirror);
 
-Vue.use(Vuetify)
-
-if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
-Vue.config.productionTip = false
+if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
+Vue.config.productionTip = false;
 
 /* eslint-disable no-new */
 new Vue({
   components: { App },
   store,
   template: '<App/>'
-}).$mount('#app')
+}).$mount('#app');