Merge pull request pterodactyl#2338 from pterodactyl/feature/codemirror

Replace Ace Editor with CodeMirror

Author: DaneEveritt

package.json

@@ -5,9 +5,8 @@
         "@fortawesome/free-solid-svg-icons": "^5.9.0",
         "@fortawesome/react-fontawesome": "0.1.4",
         "axios": "^0.19.2",
-        "ayu-ace": "^2.0.4",
-        "brace": "^0.11.1",
         "chart.js": "^2.8.0",
+        "codemirror": "^5.57.0",
         "date-fns": "^2.14.0",
         "debounce": "^1.2.0",
         "deepmerge": "^4.2.2",
@@ -57,6 +56,7 @@
         "@babel/preset-typescript": "^7.7.4",
         "@babel/runtime": "^7.7.5",
         "@types/chart.js": "^2.8.5",
+        "@types/codemirror": "^0.0.98",
         "@types/debounce": "^1.2.0",
         "@types/events": "^3.0.0",
         "@types/node": "^12.6.9",

resources/scripts/components/elements/AceEditor.tsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import CodeMirror from 'codemirror';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import modes, { Mode } from '@/modes';
+
+require('codemirror/lib/codemirror.css');
+
+// Themes
+require('codemirror/theme/ayu-mirage.css');
+
+// Addons
+require('codemirror/addon/edit/closebrackets');
+require('codemirror/addon/edit/closetag');
+require('codemirror/addon/edit/matchbrackets');
+require('codemirror/addon/edit/matchtags');
+require('codemirror/addon/edit/trailingspace');
+
+require('codemirror/addon/fold/foldcode');
+require('codemirror/addon/fold/foldgutter.css');
+require('codemirror/addon/fold/foldgutter');
+require('codemirror/addon/fold/brace-fold');
+require('codemirror/addon/fold/comment-fold');
+require('codemirror/addon/fold/indent-fold');
+require('codemirror/addon/fold/markdown-fold');
+require('codemirror/addon/fold/xml-fold');
+
+require('codemirror/addon/hint/css-hint');
+require('codemirror/addon/hint/html-hint');
+require('codemirror/addon/hint/javascript-hint');
+require('codemirror/addon/hint/show-hint.css');
+require('codemirror/addon/hint/show-hint');
+require('codemirror/addon/hint/sql-hint');
+require('codemirror/addon/hint/xml-hint');
+
+require('codemirror/addon/mode/simple');
+
+require('codemirror/addon/dialog/dialog.css');
+require('codemirror/addon/dialog/dialog');
+
+require('codemirror/addon/scroll/annotatescrollbar');
+require('codemirror/addon/scroll/scrollpastend');
+require('codemirror/addon/scroll/simplescrollbars.css');
+require('codemirror/addon/scroll/simplescrollbars');
+
+require('codemirror/addon/search/jump-to-line');
+require('codemirror/addon/search/match-highlighter');
+require('codemirror/addon/search/matchesonscrollbar.css');
+require('codemirror/addon/search/matchesonscrollbar');
+require('codemirror/addon/search/search');
+require('codemirror/addon/search/searchcursor');
+
+// Modes
+require('codemirror/mode/brainfuck/brainfuck');
+require('codemirror/mode/clike/clike');
+require('codemirror/mode/css/css');
+require('codemirror/mode/dart/dart');
+require('codemirror/mode/diff/diff');
+require('codemirror/mode/dockerfile/dockerfile');
+require('codemirror/mode/erlang/erlang');
+require('codemirror/mode/gfm/gfm');
+require('codemirror/mode/go/go');
+require('codemirror/mode/handlebars/handlebars');
+require('codemirror/mode/htmlembedded/htmlembedded');
+require('codemirror/mode/htmlmixed/htmlmixed');
+require('codemirror/mode/http/http');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/mode/jsx/jsx');
+require('codemirror/mode/julia/julia');
+require('codemirror/mode/lua/lua');
+require('codemirror/mode/markdown/markdown');
+require('codemirror/mode/nginx/nginx');
+require('codemirror/mode/perl/perl');
+require('codemirror/mode/php/php');
+require('codemirror/mode/properties/properties');
+require('codemirror/mode/protobuf/protobuf');
+require('codemirror/mode/pug/pug');
+require('codemirror/mode/python/python');
+require('codemirror/mode/rpm/rpm');
+require('codemirror/mode/ruby/ruby');
+require('codemirror/mode/rust/rust');
+require('codemirror/mode/sass/sass');
+require('codemirror/mode/shell/shell');
+require('codemirror/mode/smarty/smarty');
+require('codemirror/mode/sql/sql');
+require('codemirror/mode/swift/swift');
+require('codemirror/mode/toml/toml');
+require('codemirror/mode/twig/twig');
+require('codemirror/mode/vue/vue');
+require('codemirror/mode/xml/xml');
+require('codemirror/mode/yaml/yaml');
+
+const EditorContainer = styled.div`
+    min-height: 16rem;
+    height: calc(100vh - 20rem);
+    ${tw`relative`};
+
+    > div {
+        ${tw`rounded h-full`};
+    }
+
+    .CodeMirror {
+        font-size: 12px;
+        line-height: 1.375rem;
+    }
+
+    .CodeMirror-linenumber {
+        padding: 1px 12px 0 12px !important;
+    }
+
+    .CodeMirror-foldmarker {
+        color: #CBCCC6;
+        text-shadow: none;
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+    }
+`;
+
+export interface Props {
+    style?: React.CSSProperties;
+    initialContent?: string;
+    mode: string;
+    filename?: string;
+    onModeChanged: (mode: string) => void;
+    fetchContent: (callback: () => Promise<string>) => void;
+    onContentSaved: () => void;
+}
+
+export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
+    const [ editor, setEditor ] = useState<CodeMirror.Editor>();
+
+    const ref = useCallback((node) => {
+        if (!node) {
+            return;
+        }
+
+        const e = CodeMirror.fromTextArea(node, {
+            mode: 'text/plain',
+            theme: 'ayu-mirage',
+
+            indentUnit: 4,
+            smartIndent: true,
+            tabSize: 4,
+            indentWithTabs: true,
+
+            lineWrapping: true,
+            lineNumbers: true,
+
+            foldGutter: true,
+            fixedGutter: true,
+
+            scrollbarStyle: 'overlay',
+            coverGutterNextToScrollbar: false,
+
+            readOnly: false,
+
+            showCursorWhenSelecting: false,
+
+            autofocus: false,
+
+            spellcheck: true,
+            autocorrect: false,
+            autocapitalize: false,
+            lint: false,
+
+            // This property is actually used, the d.ts file for CodeMirror is incorrect.
+            // @ts-ignore
+            autoCloseBrackets: true,
+            matchBrackets: true,
+
+            gutters: [ 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ],
+        });
+
+        setEditor(e);
+    }, []);
+
+    useEffect(() => {
+        if (filename === undefined) {
+            return;
+        }
+
+        const findModeByFilename = (filename: string): Mode|undefined => {
+            for (let i = 0; i < modes.length; i++) {
+                const info = modes[i];
+
+                if (info.file && info.file.test(filename)) {
+                    return info;
+                }
+            }
+
+            const dot = filename.lastIndexOf('.');
+            const ext = dot > -1 && filename.substring(dot + 1, filename.length);
+
+            if (ext) {
+                for (let i = 0; i < modes.length; i++) {
+                    const info = modes[i];
+
+                    if (info.ext) {
+                        for (let j = 0; j < info.ext.length; j++) {
+                            if (info.ext[j] === ext) {
+                                return info;
+                            }
+                        }
+                    }
+                }
+            }
+
+            return undefined;
+        };
+
+        onModeChanged(findModeByFilename(filename)?.mime || 'text/plain');
+    }, [ filename ]);
+
+    useEffect(() => {
+        editor && editor.setOption('mode', mode);
+    }, [ editor, mode ]);
+
+    useEffect(() => {
+        editor && editor.setValue(initialContent || '');
+    }, [ editor, initialContent ]);
+
+    useEffect(() => {
+        if (!editor) {
+            fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
+            return;
+        }
+
+        editor.addKeyMap({
+            'Ctrl-S': () => onContentSaved(),
+            'Cmd-S': () => onContentSaved(),
+        });
+
+        fetchContent(() => Promise.resolve(editor.getValue()));
+    }, [ editor, fetchContent, onContentSaved ]);
+
+    return (
+        <EditorContainer style={style}>
+            <textarea ref={ref}/>
+        </EditorContainer>
+    );
+};

resources/scripts/components/elements/CodemirrorEditor.tsx

@@ -17,15 +17,15 @@ import modes from '@/modes';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 
-const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
+const LazyCodemirrorEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/CodemirrorEditor'));
 
 export default () => {
     const [ error, setError ] = useState('');
     const { action } = useParams();
     const [ loading, setLoading ] = useState(action === 'edit');
     const [ content, setContent ] = useState('');
     const [ modalVisible, setModalVisible ] = useState(false);
-    const [ mode, setMode ] = useState('plain_text');
+    const [ mode, setMode ] = useState('text/plain');
 
     const history = useHistory();
     const { hash } = useLocation();
@@ -82,6 +82,11 @@ export default () => {
         );
     }
 
+    const actualModes: React.ReactChild[] = [];
+    for (let i = 0; i < modes.length; i++) {
+        actualModes.push(<option key={modes[i].mime} value={modes[i].mime}>{modes[i].name}</option>);
+    }
+
     return (
         <PageContentBlock>
             <FlashMessageRender byKey={'files:view'} css={tw`mb-4`}/>
@@ -108,7 +113,7 @@ export default () => {
             />
             <div css={tw`relative`}>
                 <SpinnerOverlay visible={loading}/>
-                <LazyAceEditor
+                <LazyCodemirrorEditor
                     mode={mode}
                     filename={hash.replace(/^#/, '')}
                     onModeChanged={setMode}
@@ -122,9 +127,7 @@ export default () => {
             <div css={tw`flex justify-end mt-4`}>
                 <div css={tw`flex-1 sm:flex-none 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>
-                        ))}
+                        {actualModes}
                     </Select>
                 </div>
                 {action === 'edit' ?