gaoyunchuan/wxmp
1
0
Fork 0
mirror of https://github.com/jaywcjlove/wxmp.git synced 2026-01-12 08:18:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add editor theme switch.

Browse Source
This commit is contained in:
jaywcjlove
2022-09-02 17:06:30 +08:00
parent cbaad4e0fc
commit e9b3b60f6d
7 changed files with 127 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/home/index.tsx
View File

@@ -1,26 +1,31 @@
import MarkdownEditor, { getCommands } from '@uiw/react-markdown-editor';
import { useContext } from 'react';
import { EditorView } from "@codemirror/view";
import styled from 'styled-components';
import data from '../../../README.md';
import { Preview } from './Preview';
import { copy } from './copy'
import { copy } from './copy';
import { theme as themeCommand } from './theme';
import { Context, themes } from '../../store/context';
import data from '../../../README.md';
const Warpper = styled.div`
height: calc(100vh - 2.9rem);
height: calc(100vh - 2.8rem);
`;
export const HomePage = () => {
const commands = getCommands();
const commands = [...getCommands(), themeCommand];
const { theme } = useContext(Context);
return (
<Warpper>
<MarkdownEditor
value={data.source}
toolbars={commands}
theme={themes[theme]}
toolbarsMode={[copy, 'preview', 'fullscreen']}
extensions={[EditorView.lineWrapping]}
renderPreview={Preview}
visible={true}
height="calc(100vh - 5.0rem)"
height="calc(100vh - 4.9rem)"
/>
</Warpper>
);