116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import useRouter from 'use-react-router';
|
|
import { ServerContext } from '@/state/server';
|
|
import getFileContents from '@/api/server/files/getFileContents';
|
|
import ace, { Editor } from 'brace';
|
|
import styled from 'styled-components';
|
|
|
|
const EditorContainer = styled.div`
|
|
min-height: 16rem;
|
|
height: calc(100vh - 16rem);
|
|
${tw`relative`};
|
|
|
|
#editor {
|
|
${tw`rounded h-full`};
|
|
}
|
|
`;
|
|
|
|
const modes: { [k: string]: string } = {
|
|
// eslint-disable-next-line @typescript-eslint/camelcase
|
|
assembly_x86: 'Assembly (x86)',
|
|
// eslint-disable-next-line @typescript-eslint/camelcase
|
|
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',
|
|
text: 'Plaintext',
|
|
toml: 'TOML',
|
|
typescript: 'Typescript',
|
|
xml: 'XML',
|
|
yaml: 'YAML',
|
|
};
|
|
|
|
export default () => {
|
|
const { location: { hash } } = useRouter();
|
|
const [ content, setContent ] = useState('');
|
|
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
|
|
|
const [ editor, setEditor ] = useState<Editor>();
|
|
const ref = useCallback(node => {
|
|
if (node) {
|
|
setEditor(ace.edit('editor'));
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
Object.keys(modes).forEach(mode => {
|
|
import(/* webpackMode: "lazy-once", webpackChunkName: "ace_mode" */`brace/mode/${mode}`);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
getFileContents(uuid, hash.replace(/^#/, ''))
|
|
.then(setContent)
|
|
.catch(error => console.error(error));
|
|
}, [ uuid, hash ]);
|
|
|
|
useEffect(() => {
|
|
editor && editor.session.setValue(content);
|
|
}, [ editor, content ]);
|
|
|
|
useEffect(() => {
|
|
if (!editor) {
|
|
return;
|
|
}
|
|
|
|
require('ayu-ace/mirage');
|
|
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 ]);
|
|
|
|
return (
|
|
<div className={'my-10'}>
|
|
<EditorContainer>
|
|
<div id={'editor'} ref={ref}/>
|
|
<div className={'absolute pin-r pin-t z-50'}>
|
|
<div className={'m-3 rounded bg-neutral-900 border border-black'}>
|
|
<select
|
|
className={'input-dark'}
|
|
onChange={e => {
|
|
if (editor) {
|
|
editor.session.setMode(`ace/mode/${e.currentTarget.value}`);
|
|
}
|
|
}}
|
|
>
|
|
{
|
|
Object.keys(modes).map(key => (
|
|
<option key={key} value={key}>{modes[key]}</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</EditorContainer>
|
|
</div>
|
|
);
|
|
};
|