From b1dc77e98b12c2f15694132e9103cf90dc8a7738 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sat, 3 Sep 2022 16:40:11 +0800 Subject: [PATCH] feat: add `url` parameter to load `markdown` content. --- README.md | 6 ++--- package.json | 7 +++--- src/index.tsx | 12 ++++++--- src/pages/home/index.tsx | 6 +++-- src/pages/theme/editor.tsx | 5 ++-- src/store/Provider.tsx | 49 ++++++++++++++++++++++++++++++++++++ src/store/context.tsx | 39 ++++------------------------ src/store/getMdSource.ts | 12 +++++++++ src/themes/base.md.css | 2 +- src/themes/default.md.css | 2 +- src/themes/simple.md.css | 2 +- src/themes/underscore.md.css | 2 +- 12 files changed, 92 insertions(+), 52 deletions(-) create mode 100644 src/store/Provider.tsx create mode 100644 src/store/getMdSource.ts diff --git a/README.md b/README.md index 6a0fec1..0c74446 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ - [x] 支持主题选择 & 编辑预览。 - [x] 支持明暗两种主题预览。 - [ ] 支持色盘取色，快速替换文章整体色调 -- [ ] 支持 URL 参数加载 Markdown 内容。 +- [x] 支持 URL 参数加载 Markdown 内容。 - [x] 支持 URL 参数选择预览主题。 ### 支持代码块样式 @@ -116,9 +116,9 @@ https://?md= 加载 Markdown 内容的示例 URL： ``` -https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https%3A%2F%2Fraw.githubusercontent.com%2Fuiwjs%2Freact-markdown-editor%2Fmaster%2FREADME.md +https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md -Markdown URL 地址: https://raw.githubusercontent.com/uiwjs/react-markdown-editor/master/README.md +Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md ``` ## 主题定制 diff --git a/package.json b/package.json index 1ef2b32..381b890 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.9", + "@tanstack/react-query": "^4.2.3", "@uiw/codemirror-theme-abcdef": "^4.11.6", "@uiw/codemirror-theme-androidstudio": "^4.11.6", "@uiw/codemirror-theme-atomone": "^4.11.6", @@ -55,10 +56,10 @@ "@types/react-dom": "^18.0.6", "@types/styled-components": "^5.1.25", "husky": "^8.0.1", - "prettier": "^2.7.1", - "pretty-quick": "~3.1.3", "kkt": "^7.2.0", - "markdown-react-code-preview-loader": "^2.1.2" + "markdown-react-code-preview-loader": "^2.1.2", + "prettier": "^2.7.1", + "pretty-quick": "~3.1.3" }, "eslintConfig": { "extends": [ diff --git a/src/index.tsx b/src/index.tsx index 85f50d6..68e094c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,8 +4,9 @@ import { HashRouter } from 'react-router-dom'; import BackToUp from '@uiw/react-back-to-top'; import { Toaster } from 'react-hot-toast'; import { createGlobalStyle } from 'styled-components'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import App from './App'; -import { Provider } from './store/context'; +import { Provider } from './store/Provider'; export const GlobalStyle = createGlobalStyle` [data-color-mode*='dark'], [data-color-mode*='dark'] body { @@ -52,6 +53,7 @@ export const GlobalStyle = createGlobalStyle` } `; +const queryClient = new QueryClient(); const style: React.CSSProperties = { zIndex: 999 }; const container = document.getElementById('root'); @@ -61,8 +63,10 @@ root.render( Top - - - + + + + + , ); diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 98e0bb9..e20b3e9 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -14,16 +14,18 @@ export const Warpper = styled.div` export const HomePage = () => { const commands = [...getCommands(), themeCommand]; - const { theme, markdown, setMarkdown } = useContext(Context); + const { theme, markdown, isLoading, setMarkdown } = useContext(Context); const themeValue = themes[theme].value; const handleChange = (value: string) => setMarkdown(value); + console.log(isLoading); return ( { const commands = [themeTitle, themeCommand, previousCommand]; - const toolbarsMode: IMarkdownEditor['toolbarsMode'] = [previeTheme, copy, 'preview', 'fullscreen']; - const { theme, css, setCss } = useContext(Context); + const toolbarsMode: IMarkdownEditor['toolbarsMode'] = [previeTheme, copy, 'fullscreen', 'preview']; + const { theme, css, setCss, isLoading } = useContext(Context); const value = themes[theme].value; const handleChange = (value: string) => setCss(value); return ( @@ -21,6 +21,7 @@ export const EditorPage = () => { = ({ children }) => { + const [searchParams, setSearchParams] = useSearchParams(); + const paramPreviewTheme = searchParams.get('theme') as PreviewThemeValue; + const initPreviewTheme = paramPreviewTheme || 'underscore'; + const mdurl = searchParams.get('md'); + const [markdown, setMarkdown] = React.useState(mdurl ? '' : data.source); + const [css, setCss] = React.useState(previewThemes[initPreviewTheme].value); + const [previewTheme, setPreviewTheme] = React.useState(initPreviewTheme); + const [theme, setTheme] = React.useState('default'); + const [isLoading, setIsLoading] = React.useState(true); + const { data: mddata, isLoading: loading } = useMdSource(mdurl); + useEffect(() => { + if (paramPreviewTheme !== previewTheme) { + searchParams.set('theme', previewTheme); + setSearchParams(searchParams); + } + }, [paramPreviewTheme, previewTheme, searchParams, setSearchParams]); + useEffect(() => { + if (mdurl) { + setMarkdown(mddata || ''); + } + }, [mddata, mdurl]); + useEffect(() => setIsLoading(loading), [loading]); + return ( + + {children} + + ); +}; diff --git a/src/store/context.tsx b/src/store/context.tsx index 00fde78..3617719 100644 --- a/src/store/context.tsx +++ b/src/store/context.tsx @@ -1,5 +1,4 @@ -import React, { useEffect } from 'react'; -import { useSearchParams } from 'react-router-dom'; +import React from 'react'; import { defaultTheme } from '@uiw/react-markdown-editor'; import { abcdef } from '@uiw/codemirror-theme-abcdef'; import { androidstudio } from '@uiw/codemirror-theme-androidstudio'; @@ -115,6 +114,8 @@ export type ThemeValue = keyof typeof themes; export type PreviewThemeValue = keyof typeof previewThemes; export interface CreateContext { + isLoading: boolean; + setIsLoading: React.Dispatch>; markdown: string; setMarkdown: React.Dispatch>; css: string; @@ -126,6 +127,8 @@ export interface CreateContext { } export const Context = React.createContext({ + isLoading: true, + setIsLoading: () => {}, markdown: data.source, setMarkdown: () => {}, css: previewThemes['underscore'].value, @@ -135,35 +138,3 @@ export const Context = React.createContext({ theme: 'default', setTheme: () => {}, }); - -export const Provider: React.FC = ({ children }) => { - const [searchParams, setSearchParams] = useSearchParams(); - const paramPreviewTheme = searchParams.get('theme') as PreviewThemeValue; - const initPreviewTheme = paramPreviewTheme || 'underscore'; - const [markdown, setMarkdown] = React.useState(data.source); - const [css, setCss] = React.useState(previewThemes[initPreviewTheme].value); - const [previewTheme, setPreviewTheme] = React.useState(initPreviewTheme); - const [theme, setTheme] = React.useState('default'); - useEffect(() => { - if (paramPreviewTheme !== previewTheme) { - searchParams.set('theme', previewTheme); - setSearchParams(searchParams); - } - }, [paramPreviewTheme, previewTheme, searchParams, setSearchParams]); - return ( - - {children} - - ); -}; diff --git a/src/store/getMdSource.ts b/src/store/getMdSource.ts new file mode 100644 index 0000000..7e6a54f --- /dev/null +++ b/src/store/getMdSource.ts @@ -0,0 +1,12 @@ +import { useQuery } from '@tanstack/react-query'; + +export const useMdSource = (url: string | null) => { + return useQuery(['database-list', url], () => { + if (!url) return Promise.resolve(''); + return fetch(url) + .then((response) => response.text()) + .then((data) => { + return data; + }); + }); +}; diff --git a/src/themes/base.md.css b/src/themes/base.md.css index f0ffaae..fd410bf 100644 --- a/src/themes/base.md.css +++ b/src/themes/base.md.css @@ -103,7 +103,7 @@ th { .code-spans { text-align: left; line-height: 1; - white-space: pre; + white-space: initial; background: rgba(27, 31, 35, 0.05); padding: 0.2em 0.6em; border-radius: 0.6em; diff --git a/src/themes/default.md.css b/src/themes/default.md.css index 8b4fbb5..4011c66 100644 --- a/src/themes/default.md.css +++ b/src/themes/default.md.css @@ -142,7 +142,7 @@ th { .code-spans { text-align: left; line-height: 1; - white-space: pre; + white-space: initial; color: #009874; background: rgba(27, 31, 35, 0.05); padding: 0.2em 0.6em; diff --git a/src/themes/simple.md.css b/src/themes/simple.md.css index d1391cd..855d631 100644 --- a/src/themes/simple.md.css +++ b/src/themes/simple.md.css @@ -142,7 +142,7 @@ th { .code-spans { text-align: left; line-height: 1; - white-space: pre; + white-space: initial; color: #0f4c81; background: rgba(27, 31, 35, 0.05); padding: 0.2em 0.6em; diff --git a/src/themes/underscore.md.css b/src/themes/underscore.md.css index eb32ed4..2b0b564 100644 --- a/src/themes/underscore.md.css +++ b/src/themes/underscore.md.css @@ -139,7 +139,7 @@ th { .code-spans { text-align: left; line-height: 1; - white-space: pre; + white-space: initial; color: #ffb11b; background: rgba(27, 31, 35, 0.05); padding: 0.2em 0.6em;