From 6606eb1b1b5c38f1cc10cbe09817f2c738049374 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Tue, 14 May 2019 18:36:48 -0700 Subject: [PATCH] Switch to ace editor and improve build process for it --- package.json | 3 +- .../filemanager/modals/NewFileModal.vue | 120 ++++++++++++++++-- tsconfig.json | 1 + webpack.config.js | 2 + yarn.lock | 48 ++----- 5 files changed, 122 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 0ffdf88fe..144807864 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "pterodactyl-panel", "dependencies": { "axios": "^0.18.0", - "codeflask": "^1.4.0", + "brace": "^0.11.1", "date-fns": "^1.29.0", "feather-icons": "^4.10.0", "jquery": "^3.3.1", @@ -23,6 +23,7 @@ "@babel/core": "^7.2.2", "@babel/plugin-proposal-class-properties": "^7.3.0", "@babel/plugin-proposal-object-rest-spread": "^7.3.1", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.3.1", "@types/feather-icons": "^4.7.0", "@types/lodash": "^4.14.119", diff --git a/resources/assets/scripts/components/server/components/filemanager/modals/NewFileModal.vue b/resources/assets/scripts/components/server/components/filemanager/modals/NewFileModal.vue index 7fd77337a..d8b277f38 100644 --- a/resources/assets/scripts/components/server/components/filemanager/modals/NewFileModal.vue +++ b/resources/assets/scripts/components/server/components/filemanager/modals/NewFileModal.vue @@ -6,7 +6,20 @@ -
+
+
+
+ +
+ + +
@@ -18,19 +31,47 @@ import MessageBox from "@/components/MessageBox.vue"; import {ApplicationState} from '@/store/types'; import {mapState} from "vuex"; - // @ts-ignore - import CodeFlask from "codeflask"; + import * as Ace from 'brace'; + + interface Data { + error: string | null, + editor: Ace.Editor | null, + isVisible: boolean, + isLoading: boolean, + supportedTypes: {type: string, name: string}[], + } export default Vue.extend({ name: 'NewFileModal', components: {Icon, MessageBox}, - data: function (): { error: string | null, isVisible: boolean, isLoading: boolean } { + data: function (): Data { return { error: null, + editor: null, isVisible: false, isLoading: false, + supportedTypes: [ + {type: 'dockerfile', name: 'Docker'}, + {type: 'golang', name: 'Go'}, + {type: 'html', name: 'HTML'}, + {type: 'java', name: 'Java'}, + {type: 'javascript', name: 'Javascript'}, + {type: 'json', name: 'JSON'}, + {type: 'kotlin', name: 'Kotlin'}, + {type: 'lua', name: 'Lua'}, + {type: 'markdown', name: 'Markdown'}, + {type: 'plain_text', name: 'Text'}, + {type: 'php', name: 'PHP'}, + {type: 'properties', name: 'Properties'}, + {type: 'python', name: 'Python'}, + {type: 'ruby', name: 'Ruby'}, + {type: 'sh', name: 'Shell'}, + {type: 'sql', name: 'SQL'}, + {type: 'xml', name: 'XML'}, + {type: 'yaml', name: 'YAML'}, + ], }; }, @@ -43,13 +84,11 @@ this.isVisible = true; this.$nextTick(() => { - const flask = new CodeFlask('#editor', { - language: 'js', - lineNumbers: true, - }); - - flask.updateCode(''); - }) + this.editor = Ace.edit('editor'); + this.loadDependencies() + .then(() => this.loadLanguages()) + .then(() => this.configureEditor()); + }); }); }, @@ -57,12 +96,67 @@ submit: function () { }, + + updateFileLanguage: function (e: MouseEvent) { + if (!this.editor) { + return; + } + + this.editor.getSession().setMode(`ace/mode/${(e.target).value}`); + }, + + loadLanguages: function (): Promise { + return Promise.all( + this.supportedTypes.map(o => import( + /* webpackChunkName: "ace_editor" */ + /* webpackMode: "lazy-once" */ + /* webpackInclude: /(dockerfile|golang|html|java|javascript|json|kotlin|lua|markdown|plain_text|php|properties|python|ruby|sh|sql|xml|yaml).js$/ */ + `brace/mode/${o.type}` + )) + ); + }, + + loadDependencies: function (): Promise { + return Promise.all([ + // @ts-ignore + import(/* webpackChunkName: "ace_editor" */ 'brace/ext/whitespace'), + // @ts-ignore + import(/* webpackChunkName: "ace_editor" */ 'brace/ext/modelist'), + // @ts-ignore + import(/* webpackChunkName: "ace_editor" */ 'brace/theme/chrome'), + ]); + }, + + configureEditor: function () { + if (!this.editor) { + return; + } + + // const modelist = Ace.acequire('brace/ext/whitespace'); + const whitespace = Ace.acequire('ace/ext/whitespace'); + + this.editor.setTheme('ace/theme/chrome'); + this.editor.setOptions({ + fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace', + }); + this.editor.getSession().setUseWrapMode(true); + this.editor.setShowPrintMargin(true); + + whitespace.commands.forEach((c: Ace.EditorCommand) => { + this.editor!.commands.addCommand(c); + }); + whitespace.detectIndentation(this.editor.session); + } } }) diff --git a/tsconfig.json b/tsconfig.json index b15575b75..329e77649 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "target": "es6", + "module": "esnext", "strict": true, "noImplicitReturns": true, "moduleResolution": "node", diff --git a/webpack.config.js b/webpack.config.js index c7a8ef03a..c1937ea07 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -69,6 +69,7 @@ const typescriptLoaders = [ presets: ['@babel/preset-env'], plugins: [ '@babel/plugin-proposal-class-properties', + '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-proposal-object-rest-spread', { 'useBuiltIns': true }] ], }, @@ -136,6 +137,7 @@ module.exports = { presets: ['@babel/preset-env'], plugins: [ '@babel/plugin-proposal-class-properties', + '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-proposal-object-rest-spread', { 'useBuiltIns': true }] ], }, diff --git a/yarn.lock b/yarn.lock index 55b9742da..d6635c180 100644 --- a/yarn.lock +++ b/yarn.lock @@ -330,6 +330,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-dynamic-import@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612" + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-json-strings@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470" @@ -1432,6 +1438,10 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" +brace@^0.11.1: + version "0.11.1" + resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58" + braces@^2.3.0, braces@^2.3.1, braces@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729" @@ -1822,14 +1832,6 @@ 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" @@ -1884,12 +1886,6 @@ 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" @@ -2468,10 +2464,6 @@ 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" @@ -3274,12 +3266,6 @@ 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" @@ -5656,12 +5642,6 @@ 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" @@ -6180,10 +6160,6 @@ 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" @@ -6755,10 +6731,6 @@ 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"