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"