Add very basic working example of inline file editor

Author: DaneEveritt

package.json

@@ -2,6 +2,7 @@
     "name": "pterodactyl-panel",
     "dependencies": {
         "axios": "^0.18.0",
+        "codeflask": "^1.4.0",
         "date-fns": "^1.29.0",
         "feather-icons": "^4.10.0",
         "jquery": "^3.3.1",

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;

tailwind.js

@@ -643,6 +643,15 @@ module.exports = {
     */
 
     margin: {
+        'n-12': '-3rem',
+        'n-10': '-2.5rem',
+        'n-8': '-2rem',
+        'n-6': '-1.5rem',
+        'n-4': '-1rem',
+        'n-3': '-0.75rem',
+        'n-2': '-0.5rem',
+        'n-1': '-0.25rem',
+        'n-px': '-1px',
         'auto': 'auto',
         'px': '1px',
         '0': '0',

yarn.lock

@@ -1822,6 +1822,14 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1876,6 +1884,12 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codeflask@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/codeflask/-/codeflask-1.4.0.tgz#71a349368cb6ba3d12f5da286ed4f39627a62c62"
+  dependencies:
+    prismjs "^1.14.0"
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2454,6 +2468,10 @@ del@^3.0.0:
     pify "^3.0.0"
     rimraf "^2.2.8"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3256,6 +3274,12 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -5632,6 +5656,12 @@ pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
 
+prismjs@^1.14.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.16.0.tgz#406eb2c8aacb0f5f0f1167930cb83835d10a4308"
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -6150,6 +6180,10 @@ select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
 selfsigned@^1.9.1:
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
@@ -6721,6 +6755,10 @@ timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"