Codemirror cleanup

This commit is contained in:
Dane Everitt 2020-09-15 20:53:23 -07:00
parent 80e08572d6
commit 3af9e92603
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 157 additions and 123 deletions

View file

@ -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) {
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 ]);

View file

@ -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' ?

View file

@ -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;

View file

@ -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" ] },
];

122
resources/scripts/modes.ts Normal file
View file

@ -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;

View file

@ -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: {

View file

@ -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"