misc_pterodactyl-panel/resources/scripts/components/elements/AceEditor.tsx

129 lines
3.7 KiB
TypeScript
Raw Normal View History

2020-07-05 00:57:24 +00:00
import React, { useCallback, useEffect, useState } from 'react';
2019-10-19 22:31:02 +00:00
import ace, { Editor } from 'brace';
2020-07-03 21:19:05 +00:00
import styled from 'styled-components/macro';
2020-07-05 00:57:24 +00:00
import tw from 'twin.macro';
import Select from '@/components/elements/Select';
2019-10-19 22:31:02 +00:00
// @ts-ignore
require('brace/ext/modelist');
require('ayu-ace/mirage');
const EditorContainer = styled.div`
min-height: 16rem;
2020-07-05 00:57:24 +00:00
height: calc(100vh - 20rem);
2019-10-19 22:31:02 +00:00
${tw`relative`};
#editor {
${tw`rounded h-full`};
}
`;
const modes: { [k: string]: string } = {
assembly_x86: 'Assembly (x86)',
c_cpp: 'C++',
coffee: 'Coffeescript',
css: 'CSS',
dockerfile: 'Dockerfile',
golang: 'Go',
html: 'HTML',
ini: 'Ini',
java: 'Java',
javascript: 'Javascript',
json: 'JSON',
kotlin: 'Kotlin',
lua: 'Luascript',
perl: 'Perl',
php: 'PHP',
properties: 'Properties',
python: 'Python',
ruby: 'Ruby',
plain_text: 'Plaintext',
toml: 'TOML',
typescript: 'Typescript',
xml: 'XML',
yaml: 'YAML',
};
Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
export interface Props {
style?: React.CSSProperties;
2019-10-20 00:35:01 +00:00
initialContent?: string;
initialModePath?: string;
2019-10-19 22:31:02 +00:00
fetchContent: (callback: () => Promise<string>) => void;
onContentSaved: (content: string) => void;
}
2019-10-20 00:35:01 +00:00
export default ({ style, initialContent, initialModePath, fetchContent, onContentSaved }: Props) => {
2019-12-22 00:38:40 +00:00
const [ mode, setMode ] = useState('ace/mode/plain_text');
2019-10-19 22:31:02 +00:00
const [ editor, setEditor ] = useState<Editor>();
const ref = useCallback(node => {
if (node) {
setEditor(ace.edit('editor'));
}
}, []);
useEffect(() => {
editor && editor.session.setMode(mode);
2020-07-05 00:57:24 +00:00
}, [ editor, mode ]);
2019-10-19 22:31:02 +00:00
useEffect(() => {
2019-10-20 00:35:01 +00:00
editor && editor.session.setValue(initialContent || '');
}, [ editor, initialContent ]);
useEffect(() => {
if (initialModePath) {
const modelist = ace.acequire('ace/ext/modelist');
if (modelist) {
setMode(modelist.getModeForPath(initialModePath).mode);
}
}
}, [ initialModePath ]);
2019-10-19 22:31:02 +00:00
useEffect(() => {
if (!editor) {
fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
return;
}
editor.setTheme('ace/theme/ayu-mirage');
editor.$blockScrolling = Infinity;
editor.container.style.lineHeight = '1.375rem';
editor.container.style.fontWeight = '500';
editor.renderer.updateFontSize();
editor.renderer.setShowPrintMargin(false);
editor.session.setTabSize(4);
editor.session.setUseSoftTabs(true);
editor.commands.addCommand({
name: 'Save',
bindKey: { win: 'Ctrl-s', mac: 'Command-s' },
exec: (editor: Editor) => onContentSaved(editor.session.getValue()),
});
fetchContent(() => Promise.resolve(editor.session.getValue()));
}, [ editor, fetchContent, onContentSaved ]);
return (
2019-10-20 00:35:01 +00:00
<EditorContainer style={style}>
2019-10-19 22:31:02 +00:00
<div id={'editor'} ref={ref}/>
2020-07-05 00:57:24 +00:00
<div css={tw`absolute right-0 bottom-0 z-50`}>
<div css={tw`m-3 rounded bg-neutral-900 border border-black`}>
<Select
value={mode.split('/').pop()}
2019-10-19 22:31:02 +00:00
onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
>
{
Object.keys(modes).map(key => (
<option key={key} value={key}>{modes[key]}</option>
))
}
2020-07-05 00:57:24 +00:00
</Select>
2019-10-19 22:31:02 +00:00
</div>
</div>
</EditorContainer>
);
};