Codemirror cleanup

resources/scripts/components/elements/CodemirrorEditor.tsx

@@ -5,17 +5,12 @@ 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');
@@ -24,7 +19,6 @@ 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');
@@ -32,17 +26,13 @@ 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');
@@ -50,7 +40,6 @@ 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');
@@ -126,48 +115,64 @@ export interface Props {
     onContentSaved: () => void;
 }
 
+const findModeByFilename = (filename: string) => {
+    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;
+};
+
 export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
     const [ editor, setEditor ] = useState<CodeMirror.Editor>();
 
     const ref = useCallback((node) => {
-        if (!node) {
+        if (!node) return;
-            return;
-        }
 
         const e = CodeMirror.fromTextArea(node, {
             mode: 'text/plain',
             theme: 'ayu-mirage',
-
             indentUnit: 4,
             smartIndent: true,
             tabSize: 4,
-            indentWithTabs: true,
+            indentWithTabs: false,
-
             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' ],
         });
 
@@ -179,35 +184,6 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
             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 ]);
 

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

@@ -82,11 +82,6 @@ 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`}/>
@@ -127,7 +122,11 @@ 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)}>
-                        {actualModes}
+                        {modes.map(mode => (
+                            <option key={`${mode.name}_${mode.mime}`} value={mode.mime}>
+                                {mode.name}
+                            </option>
+                        ))}
                     </Select>
                 </div>
                 {action === 'edit' ?

resources/scripts/modes.d.ts

@@ -1,13 +0,0 @@
-export interface Mode {
-    name: string,
-    mime: string,
-    mimes?: string[],
-    mode: string,
-    ext: string[],
-    alias?: string[],
-    file?: RegExp,
-}
-
-declare const modes: Mode[];
-
-export default modes;

resources/scripts/modes.js

@@ -1,39 +0,0 @@
-// This file must be plain Javascript since we're using it within Webpack.
-module.exports = [
-    { name: "C", mime: "text/x-csrc", mode: "clike", ext: [ "c", "h", "ino" ] },
-    { name: "C++", mime: "text/x-c++src", mode: "clike", ext: [ "cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx" ], alias: [ "cpp" ] },
-    { name: "C#", mime: "text/x-csharp", mode: "clike", ext: [ "cs" ], alias: [ "csharp", "cs" ] },
-    { name: "CSS", mime: "text/css", mode: "css", ext: [ "css" ] },
-    { name: "CQL", mime: "text/x-cassandra", mode: "sql", ext: [ "cql" ] },
-    { name: "Diff", mime: "text/x-diff", mode: "diff", ext: [ "diff", "patch" ] },
-    { name: "Dockerfile", mime: "text/x-dockerfile", mode: "dockerfile", file: /^Dockerfile$/ },
-    { name: "Git Markdown", mime: "text/x-gfm", mode: "gfm", file: /^(readme|contributing|history|license).md$/i },
-    { name: "Golang", mime: "text/x-go", mode: "go", ext: [ "go" ] },
-    { name: "HTML", mime: "text/html", mode: "htmlmixed", ext: [ "html", "htm", "handlebars", "hbs" ], alias: [ "xhtml" ] },
-    { name: "HTTP", mime: "message/http", mode: "http" },
-    { name: "JavaScript", mime: "text/javascript", mimes: [ "text/javascript", "text/ecmascript", "application/javascript", "application/x-javascript", "application/ecmascript" ], mode: "javascript", ext: [ "js" ], alias: [ "ecmascript", "js", "node" ] },
-    { name: "JSON", mime: "application/json", mimes: [ "application/json", "application/x-json" ], mode: "javascript", ext: [ "json", "map" ], alias: [ "json5" ] },
-    { name: "Lua", mime: "text/x-lua", mode: "lua", ext: [ "lua" ] },
-    { name: "Markdown", mime: "text/x-markdown", mode: "markdown", ext: [ "markdown", "md", "mkd" ] },
-    { name: "MariaDB", mime: "text/x-mariadb", mode: "sql" },
-    { name: "MS SQL", mime: "text/x-mssql", mode: "sql" },
-    { name: "MySQL", mime: "text/x-mysql", mode: "sql" },
-    { name: "Nginx", mime: "text/x-nginx-conf", mode: "nginx", file: /nginx.*\.conf$/i },
-    { name: "PHP", mime: "text/x-php", mimes: [ "text/x-php", "application/x-httpd-php", "application/x-httpd-php-open" ], mode: "php", ext: [ "php", "php3", "php4", "php5", "php7", "phtml" ] },
-    { name: "Plain Text", mime: "text/plain", mode: "null", ext: [ "txt", "text", "conf", "def", "list", "log" ] },
-    { name: "PostgreSQL", mime: "text/x-pgsql", mode: "sql" },
-    { name: "Properties", mime: "text/x-properties", mode: "properties", ext: [ "properties", "ini", "in" ], alias: [ "ini", "properties" ] },
-    { name: "Python", mime: "text/x-python", mode: "python", ext: [ "BUILD", "bzl", "py", "pyw" ], file: /^(BUCK|BUILD)$/ },
-    { name: "Ruby", mime: "text/x-ruby", mode: "ruby", ext: [ "rb" ], alias: [ "jruby", "macruby", "rake", "rb", "rbx" ] },
-    { name: "Rust", mime: "text/x-rustsrc", mode: "rust", ext: [ "rs" ] },
-    { name: "Sass", mime: "text/x-sass", mode: "sass", ext: [ "sass" ] },
-    { name: "SCSS", mime: "text/x-scss", mode: "css", ext: [ "scss" ] },
-    { name: "Shell", mime: "text/x-sh", mimes: [ "text/x-sh", "application/x-sh" ], mode: "shell", ext: [ "sh", "ksh", "bash" ], alias: [ "bash", "sh", "zsh" ], file: /^PKGBUILD$/ },
-    { name: "SQL", mime: "text/x-sql", mode: "sql", ext: [ "sql" ] },
-    { name: "SQLite", mime: "text/x-sqlite", mode: "sql" },
-    { name: "TOML", mime: "text/x-toml", mode: "toml", ext: [ "toml" ] },
-    { name: "TypeScript", mime: "application/typescript", mode: "javascript", ext: [ "ts" ], alias: [ "ts" ] },
-    { name: "Vue", mime: "script/x-vue", mimes: [ "script/x-vue", "text/x-vue" ], mode: "vue", ext: [ "vue" ] },
-    { name: "XML", mime: "application/xml", mimes: [ "application/xml", "text/xml" ], mode: "xml", ext: [ "xml", "xsl", "xsd", "svg" ], alias: [ "rss", "wsdl", "xsd" ] },
-    { name: "YAML", mime: "text/x-yaml", mimes: [ "text/x-yaml", "text/yaml" ], mode: "yaml", ext: [ "yaml", "yml" ], alias: [ "yml" ] },
-];

resources/scripts/modes.ts

@@ -0,0 +1,122 @@
+export interface Mode {
+    name: string,
+    mime: string,
+    mimes?: string[],
+    mode: string,
+    ext?: string[],
+    alias?: string[],
+    file?: RegExp,
+}
+
+const modes: Mode[] = [
+    { name: 'C', mime: 'text/x-csrc', mode: 'clike', ext: [ 'c', 'h', 'ino' ] },
+    {
+        name: 'C++',
+        mime: 'text/x-c++src',
+        mode: 'clike',
+        ext: [ 'cpp', 'c++', 'cc', 'cxx', 'hpp', 'h++', 'hh', 'hxx' ],
+        alias: [ 'cpp' ],
+    },
+    { name: 'C#', mime: 'text/x-csharp', mode: 'clike', ext: [ 'cs' ], alias: [ 'csharp', 'cs' ] },
+    { name: 'CSS', mime: 'text/css', mode: 'css', ext: [ 'css' ] },
+    { name: 'CQL', mime: 'text/x-cassandra', mode: 'sql', ext: [ 'cql' ] },
+    { name: 'Diff', mime: 'text/x-diff', mode: 'diff', ext: [ 'diff', 'patch' ] },
+    { name: 'Dockerfile', mime: 'text/x-dockerfile', mode: 'dockerfile', file: /^Dockerfile$/ },
+    { name: 'Git Markdown', mime: 'text/x-gfm', mode: 'gfm', file: /^(readme|contributing|history|license).md$/i },
+    { name: 'Golang', mime: 'text/x-go', mode: 'go', ext: [ 'go' ] },
+    {
+        name: 'HTML',
+        mime: 'text/html',
+        mode: 'htmlmixed',
+        ext: [ 'html', 'htm', 'handlebars', 'hbs' ],
+        alias: [ 'xhtml' ],
+    },
+    { name: 'HTTP', mime: 'message/http', mode: 'http' },
+    {
+        name: 'JavaScript',
+        mime: 'text/javascript',
+        mimes: [ 'text/javascript', 'text/ecmascript', 'application/javascript', 'application/x-javascript', 'application/ecmascript' ],
+        mode: 'javascript',
+        ext: [ 'js' ],
+        alias: [ 'ecmascript', 'js', 'node' ],
+    },
+    {
+        name: 'JSON',
+        mime: 'application/json',
+        mimes: [ 'application/json', 'application/x-json' ],
+        mode: 'javascript',
+        ext: [ 'json', 'map' ],
+        alias: [ 'json5' ],
+    },
+    { name: 'Lua', mime: 'text/x-lua', mode: 'lua', ext: [ 'lua' ] },
+    { name: 'Markdown', mime: 'text/x-markdown', mode: 'markdown', ext: [ 'markdown', 'md', 'mkd' ] },
+    { name: 'MariaDB', mime: 'text/x-mariadb', mode: 'sql' },
+    { name: 'MS SQL', mime: 'text/x-mssql', mode: 'sql' },
+    { name: 'MySQL', mime: 'text/x-mysql', mode: 'sql' },
+    { name: 'Nginx', mime: 'text/x-nginx-conf', mode: 'nginx', file: /nginx.*\.conf$/i },
+    {
+        name: 'PHP',
+        mime: 'text/x-php',
+        mimes: [ 'text/x-php', 'application/x-httpd-php', 'application/x-httpd-php-open' ],
+        mode: 'php',
+        ext: [ 'php', 'php3', 'php4', 'php5', 'php7', 'phtml' ],
+    },
+    { name: 'Plain Text', mime: 'text/plain', mode: 'null', ext: [ 'txt', 'text', 'conf', 'def', 'list', 'log' ] },
+    { name: 'PostgreSQL', mime: 'text/x-pgsql', mode: 'sql' },
+    {
+        name: 'Properties',
+        mime: 'text/x-properties',
+        mode: 'properties',
+        ext: [ 'properties', 'ini', 'in' ],
+        alias: [ 'ini', 'properties' ],
+    },
+    {
+        name: 'Python',
+        mime: 'text/x-python',
+        mode: 'python',
+        ext: [ 'BUILD', 'bzl', 'py', 'pyw' ],
+        file: /^(BUCK|BUILD)$/,
+    },
+    {
+        name: 'Ruby',
+        mime: 'text/x-ruby',
+        mode: 'ruby',
+        ext: [ 'rb' ],
+        alias: [ 'jruby', 'macruby', 'rake', 'rb', 'rbx' ],
+    },
+    { name: 'Rust', mime: 'text/x-rustsrc', mode: 'rust', ext: [ 'rs' ] },
+    { name: 'Sass', mime: 'text/x-sass', mode: 'sass', ext: [ 'sass' ] },
+    { name: 'SCSS', mime: 'text/x-scss', mode: 'css', ext: [ 'scss' ] },
+    {
+        name: 'Shell',
+        mime: 'text/x-sh',
+        mimes: [ 'text/x-sh', 'application/x-sh' ],
+        mode: 'shell',
+        ext: [ 'sh', 'ksh', 'bash' ],
+        alias: [ 'bash', 'sh', 'zsh' ],
+        file: /^PKGBUILD$/,
+    },
+    { name: 'SQL', mime: 'text/x-sql', mode: 'sql', ext: [ 'sql' ] },
+    { name: 'SQLite', mime: 'text/x-sqlite', mode: 'sql' },
+    { name: 'TOML', mime: 'text/x-toml', mode: 'toml', ext: [ 'toml' ] },
+    { name: 'TypeScript', mime: 'application/typescript', mode: 'javascript', ext: [ 'ts' ], alias: [ 'ts' ] },
+    { name: 'Vue', mime: 'script/x-vue', mimes: [ 'script/x-vue', 'text/x-vue' ], mode: 'vue', ext: [ 'vue' ] },
+    {
+        name: 'XML',
+        mime: 'application/xml',
+        mimes: [ 'application/xml', 'text/xml' ],
+        mode: 'xml',
+        ext: [ 'xml', 'xsl', 'xsd', 'svg' ],
+        alias: [ 'rss', 'wsdl', 'xsd' ],
+    },
+    {
+        name: 'YAML',
+        mime: 'text/x-yaml',
+        mimes: [ 'text/x-yaml', 'text/yaml' ],
+        mode: 'yaml',
+        ext: [ 'yaml', 'yml' ],
+        alias: [ 'yml' ],
+    },
+];
+
+export default modes;

webpack.config.js

@@ -1,12 +1,10 @@
 const path = require('path');
-const webpack = require('webpack');
 const AssetsManifestPlugin = require('webpack-assets-manifest');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const isProduction = process.env.NODE_ENV === 'production';
-const modes = Object.keys(require('./resources/scripts/modes'));
 
 module.exports = {
     cache: true,
@@ -74,7 +72,6 @@ module.exports = {
         moment: 'moment',
     },
     plugins: [
-        new webpack.ContextReplacementPlugin(/brace[/\\](mode|worker)/, new RegExp(`^\.\/(${modes.join('|')})$`)),
         new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
         new ForkTsCheckerWebpackPlugin(isProduction ? {} : {
             eslint: {

yarn.lock

@@ -1615,10 +1615,6 @@ axios@^0.19.2:
   dependencies:
     follow-redirects "1.5.10"
 
-ayu-ace@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/ayu-ace/-/ayu-ace-2.0.4.tgz#3877d4cbf8668e639de6f67e34c2a88c1589b082"
-
 babel-loader@^8.0.6:
   version "8.0.6"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
@@ -1754,10 +1750,6 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace@^0.11.1:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
-
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"