Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to ace editor and improve build process for it

Browse source
This commit is contained in:
Dane Everitt 2019-05-14 18:36:48 -07:00
parent 487128d00f
commit 6606eb1b1b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 122 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -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",

120
resources/assets/scripts/components/server/components/filemanager/modals/NewFileModal.vue
View file

@ -6,7 +6,20 @@
<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 id="editor"></div>
<div class="flex mt-4 bg-white rounded p-2">
<div class="flex-1">
<select v-on:change="updateFileLanguage">
<option v-for="item in supportedTypes" :value="item.type">{{ item.name }}</option>
</select>
</div>
<button class="btn btn-secondary btn-sm" v-on:click="isVisible = false">
Cancel
</button>
<button class="ml-2 btn btn-primary btn-sm">
Save
</button>
</div>
</div>
</div>
</transition>
@ -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/${(<HTMLSelectElement>e.target).value}`);
},
loadLanguages: function (): Promise<any[]> {
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<any[]> {
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);
}
}
})
</script>
<style>
#editor > .codeflask {
@apply .rounded;
#editor {
@apply .h-full .relative;
}
.ace_editor {
@apply .rounded .p-1;
}
</style>

1
tsconfig.json
View file

@ -1,6 +1,7 @@
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"strict": true,
"noImplicitReturns": true,
"moduleResolution": "node",

2
webpack.config.js
View file

@ -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 }]
],
},

48
yarn.lock
View file

@ -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"