diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index 2e10efcf..0d0c5ee6 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -12,8 +12,8 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
-const ChunkedConsole = lazy(() => import('@/components/server/Console'));
-const ChunkedStatGraphs = lazy(() => import('@/components/server/StatGraphs'));
+const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
+const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
const [ clicked, setClicked ] = useState(false);
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx
index 681c821b..9119c7af 100644
--- a/resources/scripts/components/server/files/FileEditContainer.tsx
+++ b/resources/scripts/components/server/files/FileEditContainer.tsx
@@ -1,25 +1,115 @@
-import React, { useEffect, useState } from 'react';
+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`
+ 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 [ content, setContent ] = useState('');
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+ const [ editor, setEditor ] = useState
();
+ 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 (
-
+
+
+
+
+
+
+
+