Replace Ace editor with CodeMirror
This commit is contained in:
Matthew Penner
parent
79f616f791
commit
9d7f4f954e
7 changed files with 325 additions and 118 deletions
|
|
@ -1,84 +0,0 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import ace, { Editor } from 'brace';
|
||||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import modes from '@/modes';
|
||||
|
||||
// @ts-ignore
|
||||
require('brace/ext/modelist');
|
||||
require('ayu-ace/mirage');
|
||||
|
||||
const EditorContainer = styled.div`
|
||||
min-height: 16rem;
|
||||
height: calc(100vh - 20rem);
|
||||
${tw`relative`};
|
||||
|
||||
#editor {
|
||||
${tw`rounded h-full`};
|
||||
}
|
||||
`;
|
||||
|
||||
Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
|
||||
const modelist = ace.acequire('ace/ext/modelist');
|
||||
|
||||
export interface Props {
|
||||
style?: React.CSSProperties;
|
||||
initialContent?: string;
|
||||
mode: string;
|
||||
filename?: string;
|
||||
onModeChanged: (mode: string) => void;
|
||||
fetchContent: (callback: () => Promise<string>) => void;
|
||||
onContentSaved: () => void;
|
||||
}
|
||||
|
||||
export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
|
||||
const [ editor, setEditor ] = useState<Editor>();
|
||||
const ref = useCallback(node => {
|
||||
if (node) setEditor(ace.edit('editor'));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (modelist && filename) {
|
||||
onModeChanged(modelist.getModeForPath(filename).mode.replace(/^ace\/mode\//, ''));
|
||||
}
|
||||
}, [ filename ]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.session.setMode(`ace/mode/${mode}`);
|
||||
}, [ editor, mode ]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.session.setValue(initialContent || '');
|
||||
}, [ editor, initialContent ]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor) {
|
||||
fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
|
||||
return;
|
||||
}
|
||||
|
||||
editor.setTheme('ace/theme/ayu-mirage');
|
||||
|
||||
editor.$blockScrolling = Infinity;
|
||||
editor.container.style.lineHeight = '1.375rem';
|
||||
editor.container.style.fontWeight = '500';
|
||||
editor.renderer.updateFontSize();
|
||||
editor.renderer.setShowPrintMargin(false);
|
||||
editor.session.setTabSize(4);
|
||||
editor.session.setUseSoftTabs(true);
|
||||
|
||||
editor.commands.addCommand({
|
||||
name: 'Save',
|
||||
bindKey: { win: 'Ctrl-s', mac: 'Command-s' },
|
||||
exec: () => onContentSaved(),
|
||||
});
|
||||
|
||||
fetchContent(() => Promise.resolve(editor.session.getValue()));
|
||||
}, [ editor, fetchContent, onContentSaved ]);
|
||||
|
||||
return (
|
||||
<EditorContainer style={style}>
|
||||
<div id={'editor'} ref={ref}/>
|
||||
</EditorContainer>
|
||||
);
|
||||
};
|
||||
241
resources/scripts/components/elements/CodemirrorEditor.tsx
Normal file
241
resources/scripts/components/elements/CodemirrorEditor.tsx
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import CodeMirror from 'codemirror';
|
||||
import styled from 'styled-components/macro';
|
||||
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');
|
||||
require('codemirror/addon/fold/brace-fold');
|
||||
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');
|
||||
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');
|
||||
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');
|
||||
require('codemirror/mode/dart/dart');
|
||||
require('codemirror/mode/diff/diff');
|
||||
require('codemirror/mode/dockerfile/dockerfile');
|
||||
require('codemirror/mode/erlang/erlang');
|
||||
require('codemirror/mode/gfm/gfm');
|
||||
require('codemirror/mode/go/go');
|
||||
require('codemirror/mode/handlebars/handlebars');
|
||||
require('codemirror/mode/htmlembedded/htmlembedded');
|
||||
require('codemirror/mode/htmlmixed/htmlmixed');
|
||||
require('codemirror/mode/http/http');
|
||||
require('codemirror/mode/javascript/javascript');
|
||||
require('codemirror/mode/jsx/jsx');
|
||||
require('codemirror/mode/julia/julia');
|
||||
require('codemirror/mode/lua/lua');
|
||||
require('codemirror/mode/markdown/markdown');
|
||||
require('codemirror/mode/nginx/nginx');
|
||||
require('codemirror/mode/perl/perl');
|
||||
require('codemirror/mode/php/php');
|
||||
require('codemirror/mode/properties/properties');
|
||||
require('codemirror/mode/protobuf/protobuf');
|
||||
require('codemirror/mode/pug/pug');
|
||||
require('codemirror/mode/python/python');
|
||||
require('codemirror/mode/rpm/rpm');
|
||||
require('codemirror/mode/ruby/ruby');
|
||||
require('codemirror/mode/rust/rust');
|
||||
require('codemirror/mode/sass/sass');
|
||||
require('codemirror/mode/shell/shell');
|
||||
require('codemirror/mode/smarty/smarty');
|
||||
require('codemirror/mode/sql/sql');
|
||||
require('codemirror/mode/swift/swift');
|
||||
require('codemirror/mode/toml/toml');
|
||||
require('codemirror/mode/twig/twig');
|
||||
require('codemirror/mode/vue/vue');
|
||||
require('codemirror/mode/xml/xml');
|
||||
require('codemirror/mode/yaml/yaml');
|
||||
|
||||
const EditorContainer = styled.div`
|
||||
min-height: 16rem;
|
||||
height: calc(100vh - 20rem);
|
||||
${tw`relative`};
|
||||
|
||||
> div {
|
||||
${tw`rounded h-full`};
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
font-size: 12px;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
padding: 1px 12px 0 12px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-foldmarker {
|
||||
color: #CBCCC6;
|
||||
text-shadow: none;
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export interface Props {
|
||||
style?: React.CSSProperties;
|
||||
initialContent?: string;
|
||||
mode: string;
|
||||
filename?: string;
|
||||
onModeChanged: (mode: string) => void;
|
||||
fetchContent: (callback: () => Promise<string>) => void;
|
||||
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 => {
|
||||
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 ]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.setOption('mode', mode);
|
||||
}, [ editor, mode ]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.setValue(initialContent || '');
|
||||
}, [ editor, initialContent ]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor) {
|
||||
fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
|
||||
return;
|
||||
}
|
||||
|
||||
editor.addKeyMap({
|
||||
'Ctrl-S': () => onContentSaved(),
|
||||
'Cmd-S': () => onContentSaved(),
|
||||
});
|
||||
|
||||
fetchContent(() => Promise.resolve(editor.getValue()));
|
||||
}, [ editor, fetchContent, onContentSaved ]);
|
||||
|
||||
return (
|
||||
<EditorContainer style={style}>
|
||||
<textarea ref={ref}/>
|
||||
</EditorContainer>
|
||||
);
|
||||
};
|
||||
|
|
@ -17,7 +17,7 @@ import modes from '@/modes';
|
|||
import useFlash from '@/plugins/useFlash';
|
||||
import { ServerContext } from '@/state/server';
|
||||
|
||||
const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
|
||||
const LazyCodemirrorEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/CodemirrorEditor'));
|
||||
|
||||
export default () => {
|
||||
const [ error, setError ] = useState('');
|
||||
|
|
@ -25,7 +25,7 @@ export default () => {
|
|||
const [ loading, setLoading ] = useState(action === 'edit');
|
||||
const [ content, setContent ] = useState('');
|
||||
const [ modalVisible, setModalVisible ] = useState(false);
|
||||
const [ mode, setMode ] = useState('plain_text');
|
||||
const [ mode, setMode ] = useState('text/plain');
|
||||
|
||||
const history = useHistory();
|
||||
const { hash } = useLocation();
|
||||
|
|
@ -82,6 +82,11 @@ 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`}/>
|
||||
|
|
@ -108,7 +113,7 @@ export default () => {
|
|||
/>
|
||||
<div css={tw`relative`}>
|
||||
<SpinnerOverlay visible={loading}/>
|
||||
<LazyAceEditor
|
||||
<LazyCodemirrorEditor
|
||||
mode={mode}
|
||||
filename={hash.replace(/^#/, '')}
|
||||
onModeChanged={setMode}
|
||||
|
|
@ -122,9 +127,7 @@ 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)}>
|
||||
{Object.keys(modes).map(key => (
|
||||
<option key={key} value={key}>{modes[key]}</option>
|
||||
))}
|
||||
{actualModes}
|
||||
</Select>
|
||||
</div>
|
||||
{action === 'edit' ?
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue