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

Improve mode detection for editing a file

Browse source
This commit is contained in:
Dane Everitt 2019-10-19 14:51:10 -07:00
parent 946f2e17df
commit 1d6e037d8a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 26 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
resources/scripts/components/server/files/FileEditContainer.tsx
View file

@ -5,6 +5,10 @@ import getFileContents from '@/api/server/files/getFileContents';
import ace, { Editor } from 'brace'; import ace, { Editor } from 'brace';
import styled from 'styled-components'; import styled from 'styled-components';
// @ts-ignore
require('brace/ext/modelist');
require('ayu-ace/mirage');
const EditorContainer = styled.div` const EditorContainer = styled.div`
min-height: 16rem; min-height: 16rem;
height: calc(100vh - 16rem); height: calc(100vh - 16rem);
@ -36,16 +40,20 @@ const modes: { [k: string]: string } = {
properties: 'Properties', properties: 'Properties',
python: 'Python', python: 'Python',
ruby: 'Ruby', ruby: 'Ruby',
text: 'Plaintext', // eslint-disable-next-line @typescript-eslint/camelcase
plain_text: 'Plaintext',
toml: 'TOML', toml: 'TOML',
typescript: 'Typescript', typescript: 'Typescript',
xml: 'XML', xml: 'XML',
yaml: 'YAML', yaml: 'YAML',
}; };
Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
export default () => { export default () => {
const { location: { hash } } = useRouter(); const { location: { hash } } = useRouter();
const [ content, setContent ] = useState(''); const [ content, setContent ] = useState('');
const [ mode, setMode ] = useState('plain_text');
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [ editor, setEditor ] = useState<Editor>(); const [ editor, setEditor ] = useState<Editor>();
@ -55,18 +63,27 @@ export default () => {
} }
}, []); }, []);
useEffect(() => {
Object.keys(modes).forEach(mode => {
import(/* webpackMode: "lazy-once", webpackChunkName: "ace_mode" */`brace/mode/${mode}`);
});
}, []);
useEffect(() => { useEffect(() => {
getFileContents(uuid, hash.replace(/^#/, '')) getFileContents(uuid, hash.replace(/^#/, ''))
.then(setContent) .then(setContent)
.catch(error => console.error(error)); .catch(error => console.error(error));
}, [ uuid, hash ]); }, [ uuid, hash ]);
useEffect(() => {
if (!hash.length) {
return;
}
const modelist = ace.acequire('ace/ext/modelist');
if (modelist) {
setMode(modelist.getModeForPath(hash.replace(/^#/, '')).mode);
}
}, [hash]);
useEffect(() => {
editor && editor.session.setMode(mode);
}, [editor, mode]);
useEffect(() => { useEffect(() => {
editor && editor.session.setValue(content); editor && editor.session.setValue(content);
}, [ editor, content ]); }, [ editor, content ]);
@ -76,7 +93,6 @@ export default () => {
return; return;
} }
require('ayu-ace/mirage');
editor.setTheme('ace/theme/ayu-mirage'); editor.setTheme('ace/theme/ayu-mirage');
editor.$blockScrolling = Infinity; editor.$blockScrolling = Infinity;
@ -96,11 +112,8 @@ export default () => {
<div className={'m-3 rounded bg-neutral-900 border border-black'}> <div className={'m-3 rounded bg-neutral-900 border border-black'}>
<select <select
className={'input-dark'} className={'input-dark'}
onChange={e => { defaultValue={mode}
if (editor) { onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
editor.session.setMode(`ace/mode/${e.currentTarget.value}`);
}
}}
> >
{ {
Object.keys(modes).map(key => ( Object.keys(modes).map(key => (