forked from Alex/Pterodactyl-Panel
Switch to ace editor and improve build process for it
This commit is contained in:
Dane Everitt
parent
487128d00f
commit
6606eb1b1b
@ -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",
|
||||
|
||||
@ -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,6 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"noImplicitReturns": true,
|
||||
"moduleResolution": "node",
|
||||
|
||||
@ -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
48
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user