Move the file selector out of the editor itself; closes pterodactyl#2147

Author: DaneEveritt

resources/scripts/components/elements/AceEditor.tsx

@@ -2,8 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import ace, { Editor } from 'brace';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
-import Select from '@/components/elements/Select';
-// @ts-ignore
 import modes from '@/modes';
 
 // @ts-ignore
@@ -21,42 +19,38 @@ const EditorContainer = styled.div`
 `;
 
 Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
+const modelist = ace.acequire('ace/ext/modelist');
 
 export interface Props {
     style?: React.CSSProperties;
     initialContent?: string;
-    initialModePath?: string;
+    mode: string;
+    filename?: string;
+    onModeChanged: (mode: string) => void;
     fetchContent: (callback: () => Promise<string>) => void;
     onContentSaved: (content: string) => void;
 }
 
-export default ({ style, initialContent, initialModePath, fetchContent, onContentSaved }: Props) => {
-    const [ mode, setMode ] = useState('ace/mode/plain_text');
-
+export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
     const [ editor, setEditor ] = useState<Editor>();
     const ref = useCallback(node => {
-        if (node) {
-            setEditor(ace.edit('editor'));
-        }
+        if (node) setEditor(ace.edit('editor'));
     }, []);
 
     useEffect(() => {
-        editor && editor.session.setMode(mode);
+        if (modelist && filename) {
+            onModeChanged(modelist.getModeForPath(filename).mode.replace(/^ace\/mode\//, ''));
+        }
+    }, [ filename ]);
+
+    useEffect(() => {
+        editor && editor.session.setMode(`ace/mode/${mode}`);
     }, [ editor, mode ]);
 
     useEffect(() => {
         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 ]);
-
     useEffect(() => {
         if (!editor) {
             fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
@@ -85,20 +79,6 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
     return (
         <EditorContainer style={style}>
             <div id={'editor'} ref={ref}/>
-            <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()}
-                        onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
-                    >
-                        {
-                            Object.keys(modes).map(key => (
-                                <option key={key} value={key}>{(modes as { [k: string]: string })[key]}</option>
-                            ))
-                        }
-                    </Select>
-                </div>
-            </div>
         </EditorContainer>
     );
 };

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -1,8 +1,5 @@
 import React, { lazy, useEffect, useState } from 'react';
-import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
-import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import saveFileContents from '@/api/server/files/saveFileContents';
@@ -15,6 +12,10 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import Select from '@/components/elements/Select';
+import modes from '@/modes';
+import useServer from '@/plugins/useServer';
+import useFlash from '@/plugins/useFlash';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
@@ -24,12 +25,13 @@ export default () => {
     const [ loading, setLoading ] = useState(action === 'edit');
     const [ content, setContent ] = useState('');
     const [ modalVisible, setModalVisible ] = useState(false);
+    const [ mode, setMode ] = useState('plain_text');
 
     const history = useHistory();
     const { hash } = useLocation();
 
-    const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
-    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { id, uuid } = useServer();
+    const { addError, clearFlashes } = useFlash();
 
     let fetchFileContent: null | (() => Promise<string>) = null;
 
@@ -75,10 +77,7 @@ export default () => {
 
     if (error) {
         return (
-            <ServerError
-                message={error}
-                onBack={() => history.goBack()}
-            />
+            <ServerError message={error} onBack={() => history.goBack()}/>
         );
     }
 
@@ -109,15 +108,24 @@ export default () => {
             <div css={tw`relative`}>
                 <SpinnerOverlay visible={loading}/>
                 <LazyAceEditor
-                    initialModePath={hash.replace(/^#/, '') || 'plain_text'}
+                    mode={mode}
+                    filename={hash.replace(/^#/, '')}
+                    onModeChanged={setMode}
                     initialContent={content}
                     fetchContent={value => {
                         fetchFileContent = value;
                     }}
-                    onContentSaved={() => save()}
+                    onContentSaved={save}
                 />
             </div>
             <div css={tw`flex justify-end mt-4`}>
+                <div css={tw`rounded bg-neutral-900 mr-4`}>
+                    <Select value={mode} onChange={e => setMode(e.currentTarget.value)}>
+                        {Object.keys(modes).map(key => (
+                            <option key={key} value={key}>{modes[key]}</option>
+                        ))}
+                    </Select>
+                </div>
                 {action === 'edit' ?
                     <Can action={'file.update'}>
                         <Button onClick={() => save()}>

resources/scripts/modes.d.ts

@@ -0,0 +1,3 @@
+declare const modes: Record<string, string>;
+
+export default modes;

resources/scripts/modes.js

@@ -1,3 +1,4 @@
+// This file must be plain Javascript since we're using it within Webpack.
 module.exports = {
     assembly_x86: 'Assembly (x86)',
     c_cpp: 'C++',