Break up editor correctly

resources/scripts/components/elements/AceEditor.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useState, lazy } from 'react';
+import useRouter from 'use-react-router';
+import { ServerContext } from '@/state/server';
+import ace, { Editor } from 'brace';
+import getFileContents from '@/api/server/files/getFileContents';
+import styled from 'styled-components';
+
+// @ts-ignore
+require('brace/ext/modelist');
+require('ayu-ace/mirage');
+
+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',
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    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;
+    fetchContent: (callback: () => Promise<string>) => void;
+    onContentSaved: (content: string) => void;
+}
+
+export default ({ fetchContent, onContentSaved }: Props) => {
+    const { location: { hash } } = useRouter();
+    const [ content, setContent ] = useState('');
+    const [ mode, setMode ] = useState('plain_text');
+    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(() => {
+        getFileContents(uuid, hash.replace(/^#/, ''))
+            .then(setContent)
+            .catch(error => console.error(error));
+    }, [ 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(() => {
+        editor && editor.session.setValue(content);
+    }, [ editor, content ]);
+
+    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 (
+        <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'}
+                        defaultValue={mode}
+                        onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
+                    >
+                        {
+                            Object.keys(modes).map(key => (
+                                <option key={key} value={key}>{modes[key]}</option>
+                            ))
+                        }
+                    </select>
+                </div>
+            </div>
+        </EditorContainer>
+    );
+};

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

@@ -1,129 +1,23 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import useRouter from 'use-react-router';
+import React, { lazy } from 'react';
 import { ServerContext } from '@/state/server';
-import getFileContents from '@/api/server/files/getFileContents';
-import ace, { Editor } from 'brace';
-import styled from 'styled-components';
 
-// @ts-ignore
-require('brace/ext/modelist');
-require('ayu-ace/mirage');
-
-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',
-    // eslint-disable-next-line @typescript-eslint/camelcase
-    plain_text: 'Plaintext',
-    toml: 'TOML',
-    typescript: 'Typescript',
-    xml: 'XML',
-    yaml: 'YAML',
-};
-
-Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
+const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
 export default () => {
-    const { location: { hash } } = useRouter();
-    const [ content, setContent ] = useState('');
-    const [ mode, setMode ] = useState('plain_text');
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
 
-    const [ editor, setEditor ] = useState<Editor>();
-    const ref = useCallback(node => {
-        if (node) {
-            setEditor(ace.edit('editor'));
-        }
-    }, []);
+    let ref: null| (() => Promise<string>) = null;
 
-    useEffect(() => {
-        getFileContents(uuid, hash.replace(/^#/, ''))
-            .then(setContent)
-            .catch(error => console.error(error));
-    }, [ 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(() => {
-        editor && editor.session.setValue(content);
-    }, [ editor, content ]);
-
-    useEffect(() => {
-        if (!editor) {
-            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 ]);
+    setTimeout(() => ref && ref().then(console.log), 5000);
 
     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'}
-                            defaultValue={mode}
-                            onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
-                        >
-                            {
-                                Object.keys(modes).map(key => (
-                                    <option key={key} value={key}>{modes[key]}</option>
-                                ))
-                            }
-                        </select>
-                    </div>
-                </div>
-            </EditorContainer>
+            <LazyAceEditor
+                fetchContent={value => {
+                    ref = value;
+                }}
+                onContentSaved={() => null}
+            />
         </div>
     );
 };

resources/scripts/routers/ServerRouter.tsx

@@ -11,10 +11,7 @@ import DatabasesContainer from '@/components/server/databases/DatabasesContainer
 import FileManagerContainer from '@/components/server/files/FileManagerContainer';
 import { CSSTransition } from 'react-transition-group';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
-
-const LazyFileEditContainer = lazy<React.ComponentType<RouteComponentProps<any>>>(
-    () => import(/* webpackChunkName: "editor" */'@/components/server/files/FileEditContainer')
-);
+import FileEditContainer from '@/components/server/files/FileEditContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -25,7 +22,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
         getServer(match.params.id);
     }
 
-    useEffect(() => () => clearServerState(), []);
+    useEffect(() => () => clearServerState(), [ clearServerState ]);
 
     return (
         <React.Fragment>
@@ -59,7 +56,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                         path={`${match.path}/files/edit`}
                                         render={props => (
                                             <SuspenseSpinner>
-                                                <LazyFileEditContainer {...props}/>
+                                                <FileEditContainer {...props as any}/>
                                             </SuspenseSpinner>
                                         )}
                                         exact