diff --git a/package.json b/package.json index cd9d6fa..3cb4b9c 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,19 @@ "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.9", + "@uiw/codemirror-theme-abcdef": "^4.11.6", + "@uiw/codemirror-theme-androidstudio": "^4.11.6", + "@uiw/codemirror-theme-atomone": "^4.11.6", + "@uiw/codemirror-theme-bbedit": "^4.11.6", + "@uiw/codemirror-theme-bespin": "^4.11.6", + "@uiw/codemirror-theme-darcula": "^4.11.6", + "@uiw/codemirror-theme-dracula": "^4.11.6", + "@uiw/codemirror-theme-duotone": "^4.11.6", + "@uiw/codemirror-theme-eclipse": "^4.11.6", + "@uiw/codemirror-theme-github": "^4.11.6", + "@uiw/codemirror-theme-okaidia": "^4.11.6", + "@uiw/codemirror-theme-sublime": "^4.11.6", + "@uiw/codemirror-theme-xcode": "^4.11.6", "@uiw/react-back-to-top": "^1.2.0", "@uiw/react-github-corners": "^1.5.15", "@uiw/react-markdown-editor": "^5.3.2", diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 10a6278..b8df9fb 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -31,6 +31,7 @@ const Title = styled.h1` margin: 0; display: flex; align-items: center; + user-select: none; sup { color: var(--color-fg-subtle); margin-left: 0.4rem; @@ -38,6 +39,8 @@ const Title = styled.h1` border-radius: 0.1rem; padding: 0 0.2rem; font-weight: normal; + font-size: 0.1rem; + letter-spacing: -0.1rem; } `; @@ -46,7 +49,7 @@ const Section = styled.section` align-items: center; gap: 0.8rem; dark-mode { - font-size: 1.4rem; + font-size: 1.2rem; } a svg { display: block; @@ -67,7 +70,7 @@ export function Layout() {
- +
diff --git a/src/index.tsx b/src/index.tsx index 6eff618..909d2d4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,6 +5,7 @@ import BackToUp from '@uiw/react-back-to-top'; import { Toaster } from 'react-hot-toast'; import { createGlobalStyle } from 'styled-components'; import App from './App'; +import { Provider } from './store/context'; export const GlobalStyle = createGlobalStyle` [data-color-mode*='dark'], [data-color-mode*='dark'] body { @@ -56,6 +57,8 @@ root.render( Top - + + + , ); diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 2618290..626cf5f 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -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 ( ); diff --git a/src/pages/home/theme.tsx b/src/pages/home/theme.tsx new file mode 100644 index 0000000..597079d --- /dev/null +++ b/src/pages/home/theme.tsx @@ -0,0 +1,45 @@ +import React, { useContext } from 'react'; +import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor'; +import styled from 'styled-components'; +import { Context } from '../../store/context'; + +const Select = styled.select` + max-width: 3rem; +`; + +const ThemeView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => { + const { theme, setTheme } = useContext(Context); + const handleChange = (ev: React.ChangeEvent) => setTheme(ev.target.value as any) + return ( + + ); +}; + +export const theme: ICommand = { + name: 'theme', + keyCommand: 'theme', + button: (command, props, opts) => , + icon: ( + + + + + ), +}; \ No newline at end of file diff --git a/src/store/context.tsx b/src/store/context.tsx new file mode 100644 index 0000000..59ef522 --- /dev/null +++ b/src/store/context.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { abcdef } from '@uiw/codemirror-theme-abcdef'; +import { androidstudio } from '@uiw/codemirror-theme-androidstudio'; +import { atomone } from '@uiw/codemirror-theme-atomone'; +import { bbedit } from '@uiw/codemirror-theme-bbedit'; +import { bespin } from '@uiw/codemirror-theme-bespin'; +import { darcula } from '@uiw/codemirror-theme-darcula'; +import { dracula } from '@uiw/codemirror-theme-dracula'; +import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone'; +import { eclipse } from '@uiw/codemirror-theme-eclipse'; +import { githubLight, githubDark } from '@uiw/codemirror-theme-github'; +import { okaidia } from '@uiw/codemirror-theme-okaidia'; +import { sublime } from '@uiw/codemirror-theme-sublime'; +import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode'; + +export const themes = { abcdef, androidstudio, atomone, bbedit, bespin, darcula, dracula, duotoneLight, duotoneDark, eclipse, + githubLight, githubDark, okaidia, sublime, xcodeLight, xcodeDark +} + +export type ThemeValue = keyof typeof themes; + +export interface CreateContext { + css: string; + setCss: React.Dispatch>; + theme: ThemeValue; + setTheme: React.Dispatch>; +} + +export const Context = React.createContext({ + css: "", + setCss: () => {}, + theme: 'githubLight', + setTheme: () => {}, +}); + +export const Provider: React.FC = ({ children }) => { + const [css, setCss] = React.useState(""); + const [theme, setTheme] = React.useState("githubLight"); + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/utils/markdownToHTML.ts b/src/utils/markdownToHTML.ts index 89268dc..490ac3b 100644 --- a/src/utils/markdownToHTML.ts +++ b/src/utils/markdownToHTML.ts @@ -27,7 +27,6 @@ export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLO }); // @ts-ignore const data = cssdata(ast.children.head); - console.log(data) const processor = unified() .use(remarkParse) .use(remarkGfm)