From 2ab443210fce91dc0b503b36a15fd93f71e87d31 Mon Sep 17 00:00:00 2001 From: xiaotianna <127941140+xiaotianna@users.noreply.github.com> Date: Wed, 22 Jan 2025 21:07:34 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(mini-markdown-editor):=20=E5=9F=BA?= =?UTF-8?q?=E7=A1=80markdown=E5=86=85=E5=AE=B9,=E8=83=BD=E6=AD=A3=E5=B8=B8?= =?UTF-8?q?=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mini-markdown-editor/package.json | 5 +- .../src/assets/images/{blod.svg => bold.svg} | 0 .../src/assets/styles/preview.css | 189 ++++++++++++++++++ .../src/components/Editor/index.tsx | 40 +++- .../src/components/Preview/index.tsx | 27 ++- .../src/components/Status/index.tsx | 10 +- .../src/config/toolbar.tsx | 6 +- .../mini-markdown-editor/src/mock/preview.md | 135 +++++++++++++ .../src/store/editor-content.ts | 16 ++ 9 files changed, 414 insertions(+), 14 deletions(-) rename packages/mini-markdown-editor/src/assets/images/{blod.svg => bold.svg} (100%) create mode 100644 packages/mini-markdown-editor/src/assets/styles/preview.css create mode 100644 packages/mini-markdown-editor/src/mock/preview.md create mode 100644 packages/mini-markdown-editor/src/store/editor-content.ts diff --git a/packages/mini-markdown-editor/package.json b/packages/mini-markdown-editor/package.json index 0bf1dea..4204041 100644 --- a/packages/mini-markdown-editor/package.json +++ b/packages/mini-markdown-editor/package.json @@ -11,11 +11,13 @@ }, "dependencies": { "@arco-design/web-react": "^2.65.0", + "highlight.js": "^11.11.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.17.0", + "@mini-markdown/ast-parser": "workspace:^1.0.0", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", @@ -26,6 +28,7 @@ "styled-components": "^6.1.14", "typescript": "~5.6.2", "typescript-eslint": "^8.18.2", - "vite": "^6.0.5" + "vite": "^6.0.5", + "zustand": "^5.0.3" } } diff --git a/packages/mini-markdown-editor/src/assets/images/blod.svg b/packages/mini-markdown-editor/src/assets/images/bold.svg similarity index 100% rename from packages/mini-markdown-editor/src/assets/images/blod.svg rename to packages/mini-markdown-editor/src/assets/images/bold.svg diff --git a/packages/mini-markdown-editor/src/assets/styles/preview.css b/packages/mini-markdown-editor/src/assets/styles/preview.css new file mode 100644 index 0000000..54614aa --- /dev/null +++ b/packages/mini-markdown-editor/src/assets/styles/preview.css @@ -0,0 +1,189 @@ +.mini-md-h1, +.mini-md-h2, +.mini-md-h3, +.mini-md-h4, +.mini-md-h5, +.mini-md-h6 { + width: 100%; + display: block; + padding: 0 10px; + word-wrap: break-word; + color: #3f4a54; + margin: 0 !important; +} + +.mini-md-h1 { + font-size: 2em; +} + +.mini-md-h2 { + font-size: 1.5em; +} + +.mini-md-h3 { + font-size: 1.25em; +} + +.mini-md-h4 { + font-size: 1em; +} + +.mini-md-h5 { + font-size: 0.875em; +} + +.mini-md-h6 { + font-size: 0.85em; +} + +.mini-md-inline-code { + line-height: 22px; + padding: 2px 4px; + color: #3594f7; + /* #f1f1f1 */ + background-color: rgba(59, 170, 250, 0.1); + border-radius: 4px; +} + +.mini-md-link { + color: #2d8cf0; + text-decoration: none; + transition: color 0.3s; + cursor: pointer; +} + +.mini-md-link:hover { + color: #73d13d; +} + +.mini-md-image { + max-width: 100%; + border: 1px solid #e6e6e6; + border-radius: 3px; + box-sizing: border-box; + margin: 0 auto; + padding: 5px; +} + +.mini-md-hr { + border: none; + border-top: 1px solid #e6e6e6; + height: 1px; + margin: 10px 0; +} + +.mini-md-blockquote { + display: block; + line-height: 2em; + margin: 20px 0; + overflow: auto; + padding: 0 1.2em; + background-color: #ececec; + border-left: 5px solid #35b378; + color: #3f4a54; +} + +.mini-md-table { + width: 50%; + border-collapse: collapse; + margin: 20px 0; +} + +.mini-md-th, +.mini-md-td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} + +.mini-md-th { + background-color: #f2f2f2; +} + +.mini-md-tr:hover { + background-color: #f5f5f5; +} + +.mini-md-ul, +.mini-md-ol { + margin: 0.6em 0; +} + +.mini-md-li::marker { + color: #1456f0; +} + +.mini-md-code-container { + font-size: 12px; + line-height: 1; + margin: 20px 0; + position: relative; +} + +.mini-md-code-container .mini-md-code-header { + background-color: #282c34; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + display: flex; + font-size: 12px; + font-weight: 600; + height: 32px; + justify-content: space-between; + margin-bottom: 0; + width: 100%; +} + +.mini-md-code-header .mini-md-code-icon { + display: flex; + gap: 5px; + margin-left: 12px; +} + +.mini-md-code-header .mini-md-code-icon span { + border-radius: 50%; + display: inline-block; + height: 10px; + margin-top: 10px; + width: 10px; +} + +.mini-md-code-icon span:nth-of-type(1) { + background-color: #ec6a5e; +} + +.mini-md-code-icon span:nth-of-type(2) { + background-color: #f4bf4f; +} + +.mini-md-code-icon span:nth-of-type(3) { + background-color: #61c554; +} + +.mini-md-code-right { + margin-top: 10px; + margin-right: 12px; + color: #a9b7c6; +} + +.mini-md-code-container pre { + margin: 0; +} + +.mini-md-code-container pre code { + background-color: #282c34; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-top-left-radius: 0; + border-top-right-radius: 0; + color: #a9b7c6; + display: block; + font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace; + font-size: 14px; + line-height: 1.6; + overflow: auto; + padding: 1em; +} + +.markdown-editor-preview p { + margin: 0 !important; +} \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/components/Editor/index.tsx b/packages/mini-markdown-editor/src/components/Editor/index.tsx index 709d203..7057caa 100644 --- a/packages/mini-markdown-editor/src/components/Editor/index.tsx +++ b/packages/mini-markdown-editor/src/components/Editor/index.tsx @@ -1,10 +1,42 @@ -import { FC } from "react" +import { useEditorContentStore } from '@/store/editor-content' +import React, { FC } from 'react' +import styled from 'styled-components' + +const ScrollWrapper = styled.div` + width: 100%; + height: 100%; + overflow: auto; + padding: 5px 10px; + .editor-content { + width: 100%; + min-height: 100%; + font-size: 16px; + line-height: 24px; + outline: none; // 移除默认的边框 + } +` const Editor: FC = () => { + const { setContent } = useEditorContentStore() + const handleInput = (e: React.FormEvent) => { + const newContent = (e.currentTarget as HTMLDivElement).innerText + // console.log(newContent); + setContent(newContent) + } + return ( -
-

Editor

-
+ +
+
+ ) } + export default Editor diff --git a/packages/mini-markdown-editor/src/components/Preview/index.tsx b/packages/mini-markdown-editor/src/components/Preview/index.tsx index 24d707c..ed758cd 100644 --- a/packages/mini-markdown-editor/src/components/Preview/index.tsx +++ b/packages/mini-markdown-editor/src/components/Preview/index.tsx @@ -1,10 +1,29 @@ -import { FC } from "react" +import { FC } from 'react' +import { parseMarkdown, transformHtml } from '@mini-markdown/ast-parser' +import '@/assets/styles/preview.css' +import 'highlight.js/styles/atom-one-dark.css' + +import styled from 'styled-components' +import { useEditorContentStore } from '@/store/editor-content' + +const ScrollWrapper = styled.div` + width: 100%; + height: 100%; + overflow: auto; + padding: 10px; +` const Preview: FC = () => { + const { content } = useEditorContentStore() + const ast = parseMarkdown(content) + console.log(ast); + + const node = transformHtml(ast) return ( -
-

Preview

-
+ // className='markdown-editor-preview' 重置样式的节点 + +
+ ) } export default Preview diff --git a/packages/mini-markdown-editor/src/components/Status/index.tsx b/packages/mini-markdown-editor/src/components/Status/index.tsx index 784eadc..3e58944 100644 --- a/packages/mini-markdown-editor/src/components/Status/index.tsx +++ b/packages/mini-markdown-editor/src/components/Status/index.tsx @@ -1,6 +1,7 @@ -import { FC } from 'react' +import { FC, useMemo } from 'react' import styled from 'styled-components' import { Checkbox } from '@arco-design/web-react' +import { useEditorContentStore } from '@/store/editor-content' const StatusWrapper = styled.div` width: 100%; @@ -40,9 +41,14 @@ const StatusWrapper = styled.div` ` const Status: FC = () => { + const { content } = useEditorContentStore() + const contentNum = useMemo(() => { + return content.replace(/[\s\n]/g, '').length + }, [content]) + return ( -
字数: {0}
+
字数: {contentNum}
同步滚动 diff --git a/packages/mini-markdown-editor/src/config/toolbar.tsx b/packages/mini-markdown-editor/src/config/toolbar.tsx index 5f9b3bb..9b75c08 100644 --- a/packages/mini-markdown-editor/src/config/toolbar.tsx +++ b/packages/mini-markdown-editor/src/config/toolbar.tsx @@ -1,6 +1,6 @@ // 工具栏图标 import HeadingIcon from '@/assets/images/heading.svg' -import BlodIcon from '@/assets/images/blod.svg' +import BoldIcon from '@/assets/images/bold.svg' import ItalicIcon from '@/assets/images/italic.svg' import UnderlineIcon from '@/assets/images/underline.svg' import DeleteIcon from '@/assets/images/delete.svg' @@ -30,8 +30,8 @@ export const toolbars = [ list: [] }, { - type: 'blod', - icon: BlodIcon, + type: 'bold', + icon: BoldIcon, title: '加粗' }, { diff --git a/packages/mini-markdown-editor/src/mock/preview.md b/packages/mini-markdown-editor/src/mock/preview.md new file mode 100644 index 0000000..65a762b --- /dev/null +++ b/packages/mini-markdown-editor/src/mock/preview.md @@ -0,0 +1,135 @@ +asdss**--~~_asd_~~--**asd_123_ + +**asd** + +asd`code``code`asd--uder--~~bolang~~ + +--uder--[link](./demo.md) + +--- + +# h1 `code` _bolang_ +## h2 `code` --bolang-- + +> blockquote `code` + +> blockquote `code` +> +> blockquote _bolang_ + +![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png) +![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png) + +- 1 + - asd + - 啊啥的、2 + - 啊啥的、2 + - 啊啥的、asdsa + - 啊啥的、asdsa + - 啊啥的、asdsa + - 啊啥的、asdsa +- 2 + - 2asd + - 啊啥的、3 + - 啊啥的、asdsa +- 3 + +```html + + + + + + Document + + + ${html} + + + +``` +```js +const a = 1; +``` + +

hellored

+ +```python +def hello(): + print('hello') + return +``` + +`

hello

` + +| 姓名 | 年龄 | 地址 | +| ------ | ------- | ------- | +| 张三 | 18 | `北京` | +| 李四 | 20 | `上海` | + +----- + +asdss**asd**asd_123_ + +**asd** + +asd`code``code`asd--uder--~~bolang~~ + +--uder--[link](./demo.md) + +--- + +# h1 `code` _bolang_ +## h2 `code` --bolang-- + +> blockquote `code` + +> blockquote `code` +> +> blockquote _bolang_ + +![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png) +![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png) + +- 1 + - asd + - 啊啥的、2 + - 啊啥的、2 + - 啊啥的、asdsa +- 2 + - 2asd +- 3 + +```html + + + ${html} + + + +``` +```js +const a = 1;asdasdasdsadad +``` + +

hellored

+ +1. aaa + 1. 222 + 2. 333 + 1. 111 +3. bbb + +```python +def hello(): +``` + +`

hello

` + +| 姓名 | 年龄 | 地址 | +| ------ | ------- | ------- | +| 张三 | 18 | 北京 | \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/store/editor-content.ts b/packages/mini-markdown-editor/src/store/editor-content.ts new file mode 100644 index 0000000..6736bba --- /dev/null +++ b/packages/mini-markdown-editor/src/store/editor-content.ts @@ -0,0 +1,16 @@ +import { create } from 'zustand' + +interface EditorContentStoreType { + content: string + setContent: (content: string) => void +} + +// 编辑器内容状态 +const useEditorContentStore = create((set) => ({ + content: '', + setContent: (content: string) => set({ content }), +})) + +export { + useEditorContentStore +} -- Gitee From 7d18f3c47daf0b5d5c97ed5c2dbbf87ea0d45a6a Mon Sep 17 00:00:00 2001 From: xiaotianna <127941140+xiaotianna@users.noreply.github.com> Date: Wed, 22 Jan 2025 21:08:09 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(mini-markdown-material):=20=E7=89=A9?= =?UTF-8?q?=E6=96=99=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mini-markdown-material/src/components/Heading/index.tsx | 3 ++- .../src/{style => components/base}/LineWrap.tsx | 0 2 files changed, 2 insertions(+), 1 deletion(-) rename packages/mini-markdown-material/src/{style => components/base}/LineWrap.tsx (100%) diff --git a/packages/mini-markdown-material/src/components/Heading/index.tsx b/packages/mini-markdown-material/src/components/Heading/index.tsx index e89ba77..7287727 100644 --- a/packages/mini-markdown-material/src/components/Heading/index.tsx +++ b/packages/mini-markdown-material/src/components/Heading/index.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import styled from 'styled-components' -import { LineWrap } from '@/style/LineWrap' +import { LineWrap } from '@/components/base/LineWrap' /** * '#' 这个字符，以及后面内容的样式（span包裹） @@ -8,6 +8,7 @@ import { LineWrap } from '@/style/LineWrap' const HeadingStyle = styled.span` color: #3f4a54; font-weight: bold; + color: #0000ff; .heading-tag { color: #0000ff; } diff --git a/packages/mini-markdown-material/src/style/LineWrap.tsx b/packages/mini-markdown-material/src/components/base/LineWrap.tsx similarity index 100% rename from packages/mini-markdown-material/src/style/LineWrap.tsx rename to packages/mini-markdown-material/src/components/base/LineWrap.tsx -- Gitee From e50e889e3a5b9f4ca0009ef11d8daa1ada0f324b Mon Sep 17 00:00:00 2001 From: xiaotianna <127941140+xiaotianna@users.noreply.github.com> Date: Wed, 22 Jan 2025 21:08:46 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(mini-markdown-play):=20=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B,=20css=E6=A8=A1=E5=9D=97=E5=8C=96?= =?UTF-8?q?=E6=96=B9=E6=A1=88=E8=B0=83=E7=A0=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mini-markdown-play/package.json | 8 ++- packages/mini-markdown-play/postcss.config.js | 6 ++ packages/mini-markdown-play/src/App.tsx | 67 +++---------------- .../mini-markdown-play/src/assets/react.svg | 1 - packages/mini-markdown-play/src/main.tsx | 7 +- .../src/pages/css-in-js.tsx | 44 ++++++++++++ .../mini-markdown-play/src/pages/css-test.tsx | 15 +++++ .../src/pages/module-css.tsx | 23 +++++++ .../src/pages/tailwindcss.tsx | 5 ++ .../src/pages/theme.module.scss | 14 ++++ .../mini-markdown-play/src/pages/ui-test.tsx | 64 ++++++++++++++++++ packages/mini-markdown-play/src/reset.css | 8 ++- .../mini-markdown-play/src/router/index.tsx | 41 ++++++++++++ .../mini-markdown-play/tailwind.config.js | 12 ++++ packages/mini-markdown-play/tsconfig.app.json | 7 ++ packages/mini-markdown-play/vite.config.ts | 7 +- 16 files changed, 265 insertions(+), 64 deletions(-) create mode 100644 packages/mini-markdown-play/postcss.config.js delete mode 100644 packages/mini-markdown-play/src/assets/react.svg create mode 100644 packages/mini-markdown-play/src/pages/css-in-js.tsx create mode 100644 packages/mini-markdown-play/src/pages/css-test.tsx create mode 100644 packages/mini-markdown-play/src/pages/module-css.tsx create mode 100644 packages/mini-markdown-play/src/pages/tailwindcss.tsx create mode 100644 packages/mini-markdown-play/src/pages/theme.module.scss create mode 100644 packages/mini-markdown-play/src/pages/ui-test.tsx create mode 100644 packages/mini-markdown-play/src/router/index.tsx create mode 100644 packages/mini-markdown-play/tailwind.config.js diff --git a/packages/mini-markdown-play/package.json b/packages/mini-markdown-play/package.json index 5d0cb2f..267ae46 100644 --- a/packages/mini-markdown-play/package.json +++ b/packages/mini-markdown-play/package.json @@ -12,17 +12,23 @@ "dependencies": { "@mini-markdown/material": "workspace:^1.0.0", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^7.1.3", + "sass": "^1.83.4", + "styled-components": "^6.1.14" }, "devDependencies": { "@eslint/js": "^9.17.0", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.20", "eslint": "^9.17.0", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", + "postcss": "^8.5.1", + "tailwindcss": "^3.4.17", "typescript": "~5.6.2", "typescript-eslint": "^8.18.2", "vite": "^6.0.5" diff --git a/packages/mini-markdown-play/postcss.config.js b/packages/mini-markdown-play/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/packages/mini-markdown-play/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/mini-markdown-play/src/App.tsx b/packages/mini-markdown-play/src/App.tsx index 9db6bc8..0ed4f80 100644 --- a/packages/mini-markdown-play/src/App.tsx +++ b/packages/mini-markdown-play/src/App.tsx @@ -1,60 +1,15 @@ -// import { Heading } from '@mini-markdown/material/src/components/Heading/index.tsx'; -import { Heading } from '@mini-markdown/material'; -import { useRef } from 'react'; -import ReactDOMServer from 'react-dom/server'; - -function App() { - const editRef = useRef(null); - const handleClick = () => { - if (document.activeElement != editRef.current) { - editRef.current!.focus() - } - const headingHtml = ReactDOMServer.renderToStaticMarkup(hello); - document.execCommand('insertHTML', false, headingHtml); - }; - - const handleInput = (e: React.FormEvent) => { - console.log('input event', e); - // const selection = getSelection(); - // if (selection && selection.rangeCount > 0) - // const range = selection.getRangeAt(0); - // console.log('Current cursor position:', range); - // } - }; +import { useRoutes, NavLink } from 'react-router-dom' +import routes from './router' +export default function App() { + const outlet = useRoutes(routes) return ( -
-
- + <> +
+ 组件库测试 + CSS主题切换方案测试
-
- hello -
-
- ); + {outlet} + + ) } - -export default App; \ No newline at end of file diff --git a/packages/mini-markdown-play/src/assets/react.svg b/packages/mini-markdown-play/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/packages/mini-markdown-play/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/mini-markdown-play/src/main.tsx b/packages/mini-markdown-play/src/main.tsx index b0b4176..feb4dac 100644 --- a/packages/mini-markdown-play/src/main.tsx +++ b/packages/mini-markdown-play/src/main.tsx @@ -1,5 +1,10 @@ import { createRoot } from 'react-dom/client' +import { BrowserRouter } from 'react-router-dom' import App from './App.tsx' import './reset.css' -createRoot(document.getElementById('root')!).render() +createRoot(document.getElementById('root')!).render( + + + +) diff --git a/packages/mini-markdown-play/src/pages/css-in-js.tsx b/packages/mini-markdown-play/src/pages/css-in-js.tsx new file mode 100644 index 0000000..f996f17 --- /dev/null +++ b/packages/mini-markdown-play/src/pages/css-in-js.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react' +import { createGlobalStyle, ThemeProvider } from 'styled-components' + +const theme = { + light: { + backgroundColor: 'white', + textColor: 'black' + }, + dark: { + backgroundColor: 'black', + textColor: 'white' + } +} + +export const GlobalStyle = createGlobalStyle` + body { + background-color: ${(props) => props.theme.backgroundColor}; + color: ${(props) => { + // console.log(props); // 获取到 ThemeProvider 的 theme 对象 + return props.theme.textColor + }}; + transition: 0.5s all; + } +` + +export default function CssInJs() { + const [isDarkMode, setIsDarkMode] = useState(false) + // 取反，等于切换主题样式 + const changeTheme = () => setIsDarkMode(!isDarkMode) + return ( + <> + + + + css-test + + + ) +} diff --git a/packages/mini-markdown-play/src/pages/css-test.tsx b/packages/mini-markdown-play/src/pages/css-test.tsx new file mode 100644 index 0000000..bc4ee93 --- /dev/null +++ b/packages/mini-markdown-play/src/pages/css-test.tsx @@ -0,0 +1,15 @@ +import { NavLink, Outlet } from 'react-router-dom'; +export default function CssTest() { + return ( + <> + +
+ +
+ + ) +} diff --git a/packages/mini-markdown-play/src/pages/module-css.tsx b/packages/mini-markdown-play/src/pages/module-css.tsx new file mode 100644 index 0000000..029b2e1 --- /dev/null +++ b/packages/mini-markdown-play/src/pages/module-css.tsx @@ -0,0 +1,23 @@ +import { useState } from 'react' +import styles from './theme.module.scss' + +export default function ModuleCSS() { + const [isDarkMode, setIsDarkMode] = useState(false) + const changeTheme = () => setIsDarkMode(!isDarkMode) + + return ( +
+ +
css-test
+
+ ) +} diff --git a/packages/mini-markdown-play/src/pages/tailwindcss.tsx b/packages/mini-markdown-play/src/pages/tailwindcss.tsx new file mode 100644 index 0000000..b7b7c6e --- /dev/null +++ b/packages/mini-markdown-play/src/pages/tailwindcss.tsx @@ -0,0 +1,5 @@ +export default function Tailwindcss() { + return ( +
tailwindcss
+ ) +} diff --git a/packages/mini-markdown-play/src/pages/theme.module.scss b/packages/mini-markdown-play/src/pages/theme.module.scss new file mode 100644 index 0000000..21a5aaf --- /dev/null +++ b/packages/mini-markdown-play/src/pages/theme.module.scss @@ -0,0 +1,14 @@ +.light { + background-color: white; + color: black; +} + +.dark { + background-color: black; + color: white; +} + +.container { + min-height: 100vh; + transition: all 0.5s; +} diff --git a/packages/mini-markdown-play/src/pages/ui-test.tsx b/packages/mini-markdown-play/src/pages/ui-test.tsx new file mode 100644 index 0000000..bcb22b9 --- /dev/null +++ b/packages/mini-markdown-play/src/pages/ui-test.tsx @@ -0,0 +1,64 @@ +// import { Heading } from '@mini-markdown/material/src/components/Heading/index.tsx'; +import { Heading } from '@mini-markdown/material'; +import { useRef } from 'react'; +import ReactDOMServer from 'react-dom/server'; + +function App() { + const editRef = useRef(null); + const handleClick = () => { + if (document.activeElement != editRef.current) { + editRef.current!.focus() + } + const headingHtml = ReactDOMServer.renderToStaticMarkup(hello); + document.execCommand('insertHTML', false, headingHtml); + }; + + const handleInput = (e: React.FormEvent) => { + console.log('input event', e); + // const selection = getSelection(); + // if (selection && selection.rangeCount > 0) + // const range = selection.getRangeAt(0); + // console.log('Current cursor position:', range); + // } + }; + + const getText = () => { + console.log(editRef.current?.innerText); + + } + + return ( +
+
+ + +
+
+ hello +
+
+ ); +} + +export default App; \ No newline at end of file diff --git a/packages/mini-markdown-play/src/reset.css b/packages/mini-markdown-play/src/reset.css index 5b2d803..4cffda5 100644 --- a/packages/mini-markdown-play/src/reset.css +++ b/packages/mini-markdown-play/src/reset.css @@ -1,5 +1,11 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; * { margin: 0; padding: 0; - list-style: none; +} + +.active { + color: sandybrown; } \ No newline at end of file diff --git a/packages/mini-markdown-play/src/router/index.tsx b/packages/mini-markdown-play/src/router/index.tsx new file mode 100644 index 0000000..663c271 --- /dev/null +++ b/packages/mini-markdown-play/src/router/index.tsx @@ -0,0 +1,41 @@ +import { RouteObject, Navigate } from 'react-router-dom' +import UITest from '@/pages/ui-test' +import CssTest from '@/pages/css-test' +import CssInJs from '@/pages/css-in-js' +import ModuleCSS from '@/pages/module-css' +import Tailwindcss from '@/pages/tailwindcss' + +const routes: RouteObject[] = [ + { + path: '/', + element: + }, + { + path: '/ui-test', + element: + }, + { + path: '/css-test', + element: , + children: [ + { + index: true, + element: + }, + { + path: 'css-in-js', + element: + }, + { + path: 'module-css', + element: + }, + { + path: 'tailwindcss', + element: + } + ] + } +] + +export default routes \ No newline at end of file diff --git a/packages/mini-markdown-play/tailwind.config.js b/packages/mini-markdown-play/tailwind.config.js new file mode 100644 index 0000000..d37737f --- /dev/null +++ b/packages/mini-markdown-play/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +} + diff --git a/packages/mini-markdown-play/tsconfig.app.json b/packages/mini-markdown-play/tsconfig.app.json index cfb6964..e6d3442 100644 --- a/packages/mini-markdown-play/tsconfig.app.json +++ b/packages/mini-markdown-play/tsconfig.app.json @@ -21,6 +21,13 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true, + + /* alias */ + "baseUrl": "src", + "paths": { + "@/*": ["./*"], + "@": ["./"] + } }, "include": ["src"] } diff --git a/packages/mini-markdown-play/vite.config.ts b/packages/mini-markdown-play/vite.config.ts index cbe9972..38c2f0d 100644 --- a/packages/mini-markdown-play/vite.config.ts +++ b/packages/mini-markdown-play/vite.config.ts @@ -1,13 +1,12 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { fileURLToPath, URL } from 'node:url' -console.log(fileURLToPath(new URL('./src', import.meta.url))); export default defineConfig({ plugins: [react()], resolve: { - // alias: { - // '@src': fileURLToPath(new URL('./src', import.meta.url)) - // } + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } } }) -- Gitee