diff --git a/resources/scripts/components/elements/CodemirrorEditor.tsx b/resources/scripts/components/elements/CodemirrorEditor.tsx index efe3f1571..50b5449c5 100644 --- a/resources/scripts/components/elements/CodemirrorEditor.tsx +++ b/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(); const ref = useCallback((node) => { - if (!node) { - return; - } + if (!node) 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 ]); diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx index 9171b76af..5d8102728 100644 --- a/resources/scripts/components/server/files/FileEditContainer.tsx +++ b/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(); - } - return ( @@ -127,7 +122,11 @@ export default () => {
{action === 'edit' ? diff --git a/resources/scripts/modes.d.ts b/resources/scripts/modes.d.ts deleted file mode 100644 index 8044aa973..000000000 --- a/resources/scripts/modes.d.ts +++ /dev/null @@ -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; diff --git a/resources/scripts/modes.js b/resources/scripts/modes.js deleted file mode 100644 index 9a04dd396..000000000 --- a/resources/scripts/modes.js +++ /dev/null @@ -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" ] }, -]; diff --git a/resources/scripts/modes.ts b/resources/scripts/modes.ts new file mode 100644 index 000000000..815eae45c --- /dev/null +++ b/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; diff --git a/webpack.config.js b/webpack.config.js index b1276732c..492c74bf9 100644 --- a/webpack.config.js +++ b/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: { diff --git a/yarn.lock b/yarn.lock index 8677d4fee..25272d135 100644 --- a/yarn.lock +++ b/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"