Skip to content

Commit 6606eb1

Browse files
DaneEverittDaneEveritt
committed
Switch to ace editor and improve build process for it
1 parent 487128d commit 6606eb1

File tree

5 files changed

+122
-52
lines changed

5 files changed

+122
-52
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "pterodactyl-panel",
33
"dependencies": {
44
"axios": "^0.18.0",
5-
"codeflask": "^1.4.0",
5+
"brace": "^0.11.1",
66
"date-fns": "^1.29.0",
77
"feather-icons": "^4.10.0",
88
"jquery": "^3.3.1",
@@ -23,6 +23,7 @@
2323
"@babel/core": "^7.2.2",
2424
"@babel/plugin-proposal-class-properties": "^7.3.0",
2525
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
26+
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
2627
"@babel/preset-env": "^7.3.1",
2728
"@types/feather-icons": "^4.7.0",
2829
"@types/lodash": "^4.14.119",

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

Lines changed: 107 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,20 @@
66
<Icon name="x" aria-label="Close modal" role="button"/>
77
</div>
88
<MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
9-
<div id="editor" class="h-full"></div>
9+
<div id="editor"></div>
10+
<div class="flex mt-4 bg-white rounded p-2">
11+
<div class="flex-1">
12+
<select v-on:change="updateFileLanguage">
13+
<option v-for="item in supportedTypes" :value="item.type">{{ item.name }}</option>
14+
</select>
15+
</div>
16+
<button class="btn btn-secondary btn-sm" v-on:click="isVisible = false">
17+
Cancel
18+
</button>
19+
<button class="ml-2 btn btn-primary btn-sm">
20+
Save
21+
</button>
22+
</div>
1023
</div>
1124
</div>
1225
</transition>
@@ -18,19 +31,47 @@
1831
import MessageBox from "@/components/MessageBox.vue";
1932
import {ApplicationState} from '@/store/types';
2033
import {mapState} from "vuex";
21-
// @ts-ignore
22-
import CodeFlask from "codeflask";
34+
import * as Ace from 'brace';
35+
36+
interface Data {
37+
error: string | null,
38+
editor: Ace.Editor | null,
39+
isVisible: boolean,
40+
isLoading: boolean,
41+
supportedTypes: {type: string, name: string}[],
42+
}
2343
2444
export default Vue.extend({
2545
name: 'NewFileModal',
2646
2747
components: {Icon, MessageBox},
2848
29-
data: function (): { error: string | null, isVisible: boolean, isLoading: boolean } {
49+
data: function (): Data {
3050
return {
3151
error: null,
52+
editor: null,
3253
isVisible: false,
3354
isLoading: false,
55+
supportedTypes: [
56+
{type: 'dockerfile', name: 'Docker'},
57+
{type: 'golang', name: 'Go'},
58+
{type: 'html', name: 'HTML'},
59+
{type: 'java', name: 'Java'},
60+
{type: 'javascript', name: 'Javascript'},
61+
{type: 'json', name: 'JSON'},
62+
{type: 'kotlin', name: 'Kotlin'},
63+
{type: 'lua', name: 'Lua'},
64+
{type: 'markdown', name: 'Markdown'},
65+
{type: 'plain_text', name: 'Text'},
66+
{type: 'php', name: 'PHP'},
67+
{type: 'properties', name: 'Properties'},
68+
{type: 'python', name: 'Python'},
69+
{type: 'ruby', name: 'Ruby'},
70+
{type: 'sh', name: 'Shell'},
71+
{type: 'sql', name: 'SQL'},
72+
{type: 'xml', name: 'XML'},
73+
{type: 'yaml', name: 'YAML'},
74+
],
3475
};
3576
},
3677
@@ -43,26 +84,79 @@
4384
this.isVisible = true;
4485
4586
this.$nextTick(() => {
46-
const flask = new CodeFlask('#editor', {
47-
language: 'js',
48-
lineNumbers: true,
49-
});
50-
51-
flask.updateCode('');
52-
})
87+
this.editor = Ace.edit('editor');
88+
this.loadDependencies()
89+
.then(() => this.loadLanguages())
90+
.then(() => this.configureEditor());
91+
});
5392
});
5493
},
5594
5695
methods: {
5796
submit: function () {
5897
5998
},
99+
100+
updateFileLanguage: function (e: MouseEvent) {
101+
if (!this.editor) {
102+
return;
103+
}
104+
105+
this.editor.getSession().setMode(`ace/mode/${(<HTMLSelectElement>e.target).value}`);
106+
},
107+
108+
loadLanguages: function (): Promise<any[]> {
109+
return Promise.all(
110+
this.supportedTypes.map(o => import(
111+
/* webpackChunkName: "ace_editor" */
112+
/* webpackMode: "lazy-once" */
113+
/* webpackInclude: /(dockerfile|golang|html|java|javascript|json|kotlin|lua|markdown|plain_text|php|properties|python|ruby|sh|sql|xml|yaml).js$/ */
114+
`brace/mode/${o.type}`
115+
))
116+
);
117+
},
118+
119+
loadDependencies: function (): Promise<any[]> {
120+
return Promise.all([
121+
// @ts-ignore
122+
import(/* webpackChunkName: "ace_editor" */ 'brace/ext/whitespace'),
123+
// @ts-ignore
124+
import(/* webpackChunkName: "ace_editor" */ 'brace/ext/modelist'),
125+
// @ts-ignore
126+
import(/* webpackChunkName: "ace_editor" */ 'brace/theme/chrome'),
127+
]);
128+
},
129+
130+
configureEditor: function () {
131+
if (!this.editor) {
132+
return;
133+
}
134+
135+
// const modelist = Ace.acequire('brace/ext/whitespace');
136+
const whitespace = Ace.acequire('ace/ext/whitespace');
137+
138+
this.editor.setTheme('ace/theme/chrome');
139+
this.editor.setOptions({
140+
fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
141+
});
142+
this.editor.getSession().setUseWrapMode(true);
143+
this.editor.setShowPrintMargin(true);
144+
145+
whitespace.commands.forEach((c: Ace.EditorCommand) => {
146+
this.editor!.commands.addCommand(c);
147+
});
148+
whitespace.detectIndentation(this.editor.session);
149+
}
60150
}
61151
})
62152
</script>
63153

64154
<style>
65-
#editor > .codeflask {
66-
@apply .rounded;
155+
#editor {
156+
@apply .h-full .relative;
157+
}
158+
159+
.ace_editor {
160+
@apply .rounded .p-1;
67161
}
68162
</style>

‎tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"compilerOptions": {
33
"target": "es6",
4+
"module": "esnext",
45
"strict": true,
56
"noImplicitReturns": true,
67
"moduleResolution": "node",

‎webpack.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const typescriptLoaders = [
6969
presets: ['@babel/preset-env'],
7070
plugins: [
7171
'@babel/plugin-proposal-class-properties',
72+
'@babel/plugin-syntax-dynamic-import',
7273
['@babel/plugin-proposal-object-rest-spread', { 'useBuiltIns': true }]
7374
],
7475
},
@@ -136,6 +137,7 @@ module.exports = {
136137
presets: ['@babel/preset-env'],
137138
plugins: [
138139
'@babel/plugin-proposal-class-properties',
140+
'@babel/plugin-syntax-dynamic-import',
139141
['@babel/plugin-proposal-object-rest-spread', { 'useBuiltIns': true }]
140142
],
141143
},

‎yarn.lock‎

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,12 @@
330330
dependencies:
331331
"@babel/helper-plugin-utils" "^7.0.0"
332332

333+
"@babel/plugin-syntax-dynamic-import@^7.2.0":
334+
version "7.2.0"
335+
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
336+
dependencies:
337+
"@babel/helper-plugin-utils" "^7.0.0"
338+
333339
"@babel/plugin-syntax-json-strings@^7.2.0":
334340
version "7.2.0"
335341
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:
14321438
balanced-match "^1.0.0"
14331439
concat-map "0.0.1"
14341440

1441+
brace@^0.11.1:
1442+
version "0.11.1"
1443+
resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
1444+
14351445
braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
14361446
version "2.3.2"
14371447
resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -1822,14 +1832,6 @@ cli-width@^2.0.0:
18221832
version "2.2.0"
18231833
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
18241834

1825-
clipboard@^2.0.0:
1826-
version "2.0.4"
1827-
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
1828-
dependencies:
1829-
good-listener "^1.2.2"
1830-
select "^1.1.2"
1831-
tiny-emitter "^2.0.0"
1832-
18331835
cliui@^2.1.0:
18341836
version "2.1.0"
18351837
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1884,12 +1886,6 @@ code-point-at@^1.0.0:
18841886
version "1.1.0"
18851887
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
18861888

1887-
codeflask@^1.4.0:
1888-
version "1.4.0"
1889-
resolved "https://registry.yarnpkg.com/codeflask/-/codeflask-1.4.0.tgz#71a349368cb6ba3d12f5da286ed4f39627a62c62"
1890-
dependencies:
1891-
prismjs "^1.14.0"
1892-
18931889
collection-visit@^1.0.0:
18941890
version "1.0.0"
18951891
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2468,10 +2464,6 @@ del@^3.0.0:
24682464
pify "^3.0.0"
24692465
rimraf "^2.2.8"
24702466

2471-
delegate@^3.1.2:
2472-
version "3.2.0"
2473-
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
2474-
24752467
delegates@^1.0.0:
24762468
version "1.0.0"
24772469
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3274,12 +3266,6 @@ globby@^6.1.0:
32743266
pify "^2.0.0"
32753267
pinkie-promise "^2.0.0"
32763268

3277-
good-listener@^1.2.2:
3278-
version "1.2.2"
3279-
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
3280-
dependencies:
3281-
delegate "^3.1.2"
3282-
32833269
graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
32843270
version "4.1.11"
32853271
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -5656,12 +5642,6 @@ pretty-hrtime@^1.0.3:
56565642
version "1.0.3"
56575643
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
56585644

5659-
prismjs@^1.14.0:
5660-
version "1.16.0"
5661-
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.16.0.tgz#406eb2c8aacb0f5f0f1167930cb83835d10a4308"
5662-
optionalDependencies:
5663-
clipboard "^2.0.0"
5664-
56655645
private@^0.1.6:
56665646
version "0.1.8"
56675647
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -6180,10 +6160,6 @@ select-hose@^2.0.0:
61806160
version "2.0.0"
61816161
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
61826162

6183-
select@^1.1.2:
6184-
version "1.1.2"
6185-
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
6186-
61876163
selfsigned@^1.9.1:
61886164
version "1.10.4"
61896165
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
@@ -6755,10 +6731,6 @@ timsort@^0.3.0:
67556731
version "0.3.0"
67566732
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
67576733

6758-
tiny-emitter@^2.0.0:
6759-
version "2.1.0"
6760-
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
6761-
67626734
tmp@^0.0.33:
67636735
version "0.0.33"
67646736
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

0 commit comments

Comments
 (0)