Skip to content

Commit 3af9e92

Browse files
DaneEverittDaneEveritt
committed
Codemirror cleanup
1 parent 80e0857 commit 3af9e92

File tree

7 files changed

+157
-123
lines changed

7 files changed

+157
-123
lines changed

‎resources/scripts/components/elements/CodemirrorEditor.tsx‎

Lines changed: 30 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,12 @@ import tw from 'twin.macro';
55
import modes, { Mode } from '@/modes';
66

77
require('codemirror/lib/codemirror.css');
8-
9-
// Themes
108
require('codemirror/theme/ayu-mirage.css');
11-
12-
// Addons
139
require('codemirror/addon/edit/closebrackets');
1410
require('codemirror/addon/edit/closetag');
1511
require('codemirror/addon/edit/matchbrackets');
1612
require('codemirror/addon/edit/matchtags');
1713
require('codemirror/addon/edit/trailingspace');
18-
1914
require('codemirror/addon/fold/foldcode');
2015
require('codemirror/addon/fold/foldgutter.css');
2116
require('codemirror/addon/fold/foldgutter');
@@ -24,33 +19,27 @@ require('codemirror/addon/fold/comment-fold');
2419
require('codemirror/addon/fold/indent-fold');
2520
require('codemirror/addon/fold/markdown-fold');
2621
require('codemirror/addon/fold/xml-fold');
27-
2822
require('codemirror/addon/hint/css-hint');
2923
require('codemirror/addon/hint/html-hint');
3024
require('codemirror/addon/hint/javascript-hint');
3125
require('codemirror/addon/hint/show-hint.css');
3226
require('codemirror/addon/hint/show-hint');
3327
require('codemirror/addon/hint/sql-hint');
3428
require('codemirror/addon/hint/xml-hint');
35-
3629
require('codemirror/addon/mode/simple');
37-
3830
require('codemirror/addon/dialog/dialog.css');
3931
require('codemirror/addon/dialog/dialog');
40-
4132
require('codemirror/addon/scroll/annotatescrollbar');
4233
require('codemirror/addon/scroll/scrollpastend');
4334
require('codemirror/addon/scroll/simplescrollbars.css');
4435
require('codemirror/addon/scroll/simplescrollbars');
45-
4636
require('codemirror/addon/search/jump-to-line');
4737
require('codemirror/addon/search/match-highlighter');
4838
require('codemirror/addon/search/matchesonscrollbar.css');
4939
require('codemirror/addon/search/matchesonscrollbar');
5040
require('codemirror/addon/search/search');
5141
require('codemirror/addon/search/searchcursor');
5242

53-
// Modes
5443
require('codemirror/mode/brainfuck/brainfuck');
5544
require('codemirror/mode/clike/clike');
5645
require('codemirror/mode/css/css');
@@ -126,48 +115,64 @@ export interface Props {
126115
onContentSaved: () => void;
127116
}
128117

118+
const findModeByFilename = (filename: string) => {
119+
for (let i = 0; i < modes.length; i++) {
120+
const info = modes[i];
121+
122+
if (info.file && info.file.test(filename)) {
123+
return info;
124+
}
125+
}
126+
127+
const dot = filename.lastIndexOf('.');
128+
const ext = dot > -1 && filename.substring(dot + 1, filename.length);
129+
130+
if (ext) {
131+
for (let i = 0; i < modes.length; i++) {
132+
const info = modes[i];
133+
if (info.ext) {
134+
for (let j = 0; j < info.ext.length; j++) {
135+
if (info.ext[j] === ext) {
136+
return info;
137+
}
138+
}
139+
}
140+
}
141+
}
142+
143+
return undefined;
144+
};
145+
129146
export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
130147
const [ editor, setEditor ] = useState<CodeMirror.Editor>();
131148

132149
const ref = useCallback((node) => {
133-
if (!node) {
134-
return;
135-
}
150+
if (!node) return;
136151

137152
const e = CodeMirror.fromTextArea(node, {
138153
mode: 'text/plain',
139154
theme: 'ayu-mirage',
140-
141155
indentUnit: 4,
142156
smartIndent: true,
143157
tabSize: 4,
144-
indentWithTabs: true,
145-
158+
indentWithTabs: false,
146159
lineWrapping: true,
147160
lineNumbers: true,
148-
149161
foldGutter: true,
150162
fixedGutter: true,
151-
152163
scrollbarStyle: 'overlay',
153164
coverGutterNextToScrollbar: false,
154-
155165
readOnly: false,
156-
157166
showCursorWhenSelecting: false,
158-
159167
autofocus: false,
160-
161168
spellcheck: true,
162169
autocorrect: false,
163170
autocapitalize: false,
164171
lint: false,
165-
166172
// This property is actually used, the d.ts file for CodeMirror is incorrect.
167173
// @ts-ignore
168174
autoCloseBrackets: true,
169175
matchBrackets: true,
170-
171176
gutters: [ 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ],
172177
});
173178

@@ -179,35 +184,6 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
179184
return;
180185
}
181186

182-
const findModeByFilename = (filename: string): Mode|undefined => {
183-
for (let i = 0; i < modes.length; i++) {
184-
const info = modes[i];
185-
186-
if (info.file && info.file.test(filename)) {
187-
return info;
188-
}
189-
}
190-
191-
const dot = filename.lastIndexOf('.');
192-
const ext = dot > -1 && filename.substring(dot + 1, filename.length);
193-
194-
if (ext) {
195-
for (let i = 0; i < modes.length; i++) {
196-
const info = modes[i];
197-
198-
if (info.ext) {
199-
for (let j = 0; j < info.ext.length; j++) {
200-
if (info.ext[j] === ext) {
201-
return info;
202-
}
203-
}
204-
}
205-
}
206-
}
207-
208-
return undefined;
209-
};
210-
211187
onModeChanged(findModeByFilename(filename)?.mime || 'text/plain');
212188
}, [ filename ]);
213189

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,6 @@ export default () => {
8282
);
8383
}
8484

85-
const actualModes: React.ReactChild[] = [];
86-
for (let i = 0; i < modes.length; i++) {
87-
actualModes.push(<option key={modes[i].mime} value={modes[i].mime}>{modes[i].name}</option>);
88-
}
89-
9085
return (
9186
<PageContentBlock>
9287
<FlashMessageRender byKey={'files:view'} css={tw`mb-4`}/>
@@ -127,7 +122,11 @@ export default () => {
127122
<div css={tw`flex justify-end mt-4`}>
128123
<div css={tw`flex-1 sm:flex-none rounded bg-neutral-900 mr-4`}>
129124
<Select value={mode} onChange={e => setMode(e.currentTarget.value)}>
130-
{actualModes}
125+
{modes.map(mode => (
126+
<option key={`${mode.name}_${mode.mime}`} value={mode.mime}>
127+
{mode.name}
128+
</option>
129+
))}
131130
</Select>
132131
</div>
133132
{action === 'edit' ?

‎resources/scripts/modes.d.ts‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎resources/scripts/modes.js‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎resources/scripts/modes.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
export interface Mode {
2+
name: string,
3+
mime: string,
4+
mimes?: string[],
5+
mode: string,
6+
ext?: string[],
7+
alias?: string[],
8+
file?: RegExp,
9+
}
10+
11+
const modes: Mode[] = [
12+
{ name: 'C', mime: 'text/x-csrc', mode: 'clike', ext: [ 'c', 'h', 'ino' ] },
13+
{
14+
name: 'C++',
15+
mime: 'text/x-c++src',
16+
mode: 'clike',
17+
ext: [ 'cpp', 'c++', 'cc', 'cxx', 'hpp', 'h++', 'hh', 'hxx' ],
18+
alias: [ 'cpp' ],
19+
},
20+
{ name: 'C#', mime: 'text/x-csharp', mode: 'clike', ext: [ 'cs' ], alias: [ 'csharp', 'cs' ] },
21+
{ name: 'CSS', mime: 'text/css', mode: 'css', ext: [ 'css' ] },
22+
{ name: 'CQL', mime: 'text/x-cassandra', mode: 'sql', ext: [ 'cql' ] },
23+
{ name: 'Diff', mime: 'text/x-diff', mode: 'diff', ext: [ 'diff', 'patch' ] },
24+
{ name: 'Dockerfile', mime: 'text/x-dockerfile', mode: 'dockerfile', file: /^Dockerfile$/ },
25+
{ name: 'Git Markdown', mime: 'text/x-gfm', mode: 'gfm', file: /^(readme|contributing|history|license).md$/i },
26+
{ name: 'Golang', mime: 'text/x-go', mode: 'go', ext: [ 'go' ] },
27+
{
28+
name: 'HTML',
29+
mime: 'text/html',
30+
mode: 'htmlmixed',
31+
ext: [ 'html', 'htm', 'handlebars', 'hbs' ],
32+
alias: [ 'xhtml' ],
33+
},
34+
{ name: 'HTTP', mime: 'message/http', mode: 'http' },
35+
{
36+
name: 'JavaScript',
37+
mime: 'text/javascript',
38+
mimes: [ 'text/javascript', 'text/ecmascript', 'application/javascript', 'application/x-javascript', 'application/ecmascript' ],
39+
mode: 'javascript',
40+
ext: [ 'js' ],
41+
alias: [ 'ecmascript', 'js', 'node' ],
42+
},
43+
{
44+
name: 'JSON',
45+
mime: 'application/json',
46+
mimes: [ 'application/json', 'application/x-json' ],
47+
mode: 'javascript',
48+
ext: [ 'json', 'map' ],
49+
alias: [ 'json5' ],
50+
},
51+
{ name: 'Lua', mime: 'text/x-lua', mode: 'lua', ext: [ 'lua' ] },
52+
{ name: 'Markdown', mime: 'text/x-markdown', mode: 'markdown', ext: [ 'markdown', 'md', 'mkd' ] },
53+
{ name: 'MariaDB', mime: 'text/x-mariadb', mode: 'sql' },
54+
{ name: 'MS SQL', mime: 'text/x-mssql', mode: 'sql' },
55+
{ name: 'MySQL', mime: 'text/x-mysql', mode: 'sql' },
56+
{ name: 'Nginx', mime: 'text/x-nginx-conf', mode: 'nginx', file: /nginx.*\.conf$/i },
57+
{
58+
name: 'PHP',
59+
mime: 'text/x-php',
60+
mimes: [ 'text/x-php', 'application/x-httpd-php', 'application/x-httpd-php-open' ],
61+
mode: 'php',
62+
ext: [ 'php', 'php3', 'php4', 'php5', 'php7', 'phtml' ],
63+
},
64+
{ name: 'Plain Text', mime: 'text/plain', mode: 'null', ext: [ 'txt', 'text', 'conf', 'def', 'list', 'log' ] },
65+
{ name: 'PostgreSQL', mime: 'text/x-pgsql', mode: 'sql' },
66+
{
67+
name: 'Properties',
68+
mime: 'text/x-properties',
69+
mode: 'properties',
70+
ext: [ 'properties', 'ini', 'in' ],
71+
alias: [ 'ini', 'properties' ],
72+
},
73+
{
74+
name: 'Python',
75+
mime: 'text/x-python',
76+
mode: 'python',
77+
ext: [ 'BUILD', 'bzl', 'py', 'pyw' ],
78+
file: /^(BUCK|BUILD)$/,
79+
},
80+
{
81+
name: 'Ruby',
82+
mime: 'text/x-ruby',
83+
mode: 'ruby',
84+
ext: [ 'rb' ],
85+
alias: [ 'jruby', 'macruby', 'rake', 'rb', 'rbx' ],
86+
},
87+
{ name: 'Rust', mime: 'text/x-rustsrc', mode: 'rust', ext: [ 'rs' ] },
88+
{ name: 'Sass', mime: 'text/x-sass', mode: 'sass', ext: [ 'sass' ] },
89+
{ name: 'SCSS', mime: 'text/x-scss', mode: 'css', ext: [ 'scss' ] },
90+
{
91+
name: 'Shell',
92+
mime: 'text/x-sh',
93+
mimes: [ 'text/x-sh', 'application/x-sh' ],
94+
mode: 'shell',
95+
ext: [ 'sh', 'ksh', 'bash' ],
96+
alias: [ 'bash', 'sh', 'zsh' ],
97+
file: /^PKGBUILD$/,
98+
},
99+
{ name: 'SQL', mime: 'text/x-sql', mode: 'sql', ext: [ 'sql' ] },
100+
{ name: 'SQLite', mime: 'text/x-sqlite', mode: 'sql' },
101+
{ name: 'TOML', mime: 'text/x-toml', mode: 'toml', ext: [ 'toml' ] },
102+
{ name: 'TypeScript', mime: 'application/typescript', mode: 'javascript', ext: [ 'ts' ], alias: [ 'ts' ] },
103+
{ name: 'Vue', mime: 'script/x-vue', mimes: [ 'script/x-vue', 'text/x-vue' ], mode: 'vue', ext: [ 'vue' ] },
104+
{
105+
name: 'XML',
106+
mime: 'application/xml',
107+
mimes: [ 'application/xml', 'text/xml' ],
108+
mode: 'xml',
109+
ext: [ 'xml', 'xsl', 'xsd', 'svg' ],
110+
alias: [ 'rss', 'wsdl', 'xsd' ],
111+
},
112+
{
113+
name: 'YAML',
114+
mime: 'text/x-yaml',
115+
mimes: [ 'text/x-yaml', 'text/yaml' ],
116+
mode: 'yaml',
117+
ext: [ 'yaml', 'yml' ],
118+
alias: [ 'yml' ],
119+
},
120+
];
121+
122+
export default modes;

‎webpack.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
const path = require('path');
2-
const webpack = require('webpack');
32
const AssetsManifestPlugin = require('webpack-assets-manifest');
43
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
54
const TerserPlugin = require('terser-webpack-plugin');
65
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
76

87
const isProduction = process.env.NODE_ENV === 'production';
9-
const modes = Object.keys(require('./resources/scripts/modes'));
108

119
module.exports = {
1210
cache: true,
@@ -74,7 +72,6 @@ module.exports = {
7472
moment: 'moment',
7573
},
7674
plugins: [
77-
new webpack.ContextReplacementPlugin(/brace[/\\](mode|worker)/, new RegExp(`^\.\/(${modes.join('|')})$`)),
7875
new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
7976
new ForkTsCheckerWebpackPlugin(isProduction ? {} : {
8077
eslint: {

0 commit comments

Comments
 (0)