Add very basic working example of inline file editor

resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue

@@ -36,7 +36,7 @@
                     </div>
                     <div>
                         <p class="text-xs text-neutral-800 mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
-                        <p class="text-xs"><code>{{response.secret}}</code></p>
+                        <p class="text-xs"><code class="clean">{{response.secret}}</code></p>
                     </div>
                 </div>
                 <div class="flex-none w-full sm:w-1/2">

resources/assets/scripts/components/server/components/filemanager/modals/NewFileModal.vue

@@ -1,20 +1,30 @@
 <template>
-    <Modal :show="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
-        <MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
-    </Modal>
+    <transition name="modal">
+        <div class="modal-mask" v-show="isVisible">
+            <div class="modal-container full-screen" @click.stop>
+                <div class="modal-close-icon" v-on:click="isVisible = false">
+                    <Icon name="x" aria-label="Close modal" role="button"/>
+                </div>
+                <MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
+                <div id="editor" class="h-full"></div>
+            </div>
+        </div>
+    </transition>
 </template>
 
 <script lang="ts">
     import Vue from 'vue';
+    import Icon from "@/components/core/Icon.vue";
     import MessageBox from "@/components/MessageBox.vue";
-    import Modal from "@/components/core/Modal.vue";
     import {ApplicationState} from '@/store/types';
     import {mapState} from "vuex";
+    // @ts-ignore
+    import CodeFlask from "codeflask";
 
     export default Vue.extend({
         name: 'NewFileModal',
 
-        components: {MessageBox, Modal},
+        components: {Icon, MessageBox},
 
         data: function (): { error: string | null, isVisible: boolean, isLoading: boolean } {
             return {
@@ -31,6 +41,15 @@
         mounted: function () {
             window.events.$on('server:files:open-new-file-modal', () => {
                 this.isVisible = true;
+
+                this.$nextTick(() => {
+                    const flask = new CodeFlask('#editor', {
+                        language: 'js',
+                        lineNumbers: true,
+                    });
+
+                    flask.updateCode('');
+                })
             });
         },
 
@@ -41,3 +60,9 @@
         }
     })
 </script>
+
+<style>
+    #editor > .codeflask {
+        @apply .rounded;
+    }
+</style>

resources/assets/styles/components/miscellaneous.css

@@ -1,4 +1,4 @@
-code {
+code.clean {
     @apply .font-mono .px-2 .py-1;
     background-color: #eef1f6;
     color: #596981;