Codemirror cleanup
This commit is contained in:
Dane Everitt
parent
80e08572d6
commit
3af9e92603
7 changed files with 157 additions and 123 deletions
|
|
@ -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,60 +115,7 @@ export interface Props {
|
|||
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 => {
|
||||
const findModeByFilename = (filename: string) => {
|
||||
for (let i = 0; i < modes.length; i++) {
|
||||
const info = modes[i];
|
||||
|
||||
|
|
@ -194,7 +130,6 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
|
|||
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) {
|
||||
|
|
@ -206,7 +141,48 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
|
|||
}
|
||||
|
||||
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;
|
||||
|
||||
const e = CodeMirror.fromTextArea(node, {
|
||||
mode: 'text/plain',
|
||||
theme: 'ayu-mirage',
|
||||
indentUnit: 4,
|
||||
smartIndent: true,
|
||||
tabSize: 4,
|
||||
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' ],
|
||||
});
|
||||
|
||||
setEditor(e);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (filename === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
onModeChanged(findModeByFilename(filename)?.mime || 'text/plain');
|
||||
}, [ filename ]);
|
||||
|
|
|
|||
|
|
@ -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' ?
|
||||
|
|
|
|||
13
resources/scripts/modes.d.ts
vendored
13
resources/scripts/modes.d.ts
vendored
|
|
@ -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;
|
||||
|
|
@ -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
122
resources/scripts/modes.ts
Normal 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;
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue