StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace Ace editor with CodeMirror

Browse source
This commit is contained in:
Matthew Penner 2020-09-13 17:17:40 -06:00
parent 79f616f791
commit 9d7f4f954e
7 changed files with 325 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

15
resources/scripts/components/server/files/FileEditContainer.tsx
View file

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