diff --git a/packages/mini-markdown-material/src/App.css b/packages/mini-markdown-material/src/App.css deleted file mode 100644 index b9d355df2a5956b526c004531b7b0ffe412461e0..0000000000000000000000000000000000000000 --- a/packages/mini-markdown-material/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/packages/mini-markdown-material/src/assets/react.svg b/packages/mini-markdown-material/src/assets/react.svg deleted file mode 100644 index 6c87de9bb3358469122cc991d5cf578927246184..0000000000000000000000000000000000000000 --- a/packages/mini-markdown-material/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/mini-markdown-material/src/components/H2/h2.tsx b/packages/mini-markdown-material/src/components/H2/h2.tsx deleted file mode 100644 index 3cfccc6d18914c45f618495b40e27bbbfe3fc62b..0000000000000000000000000000000000000000 --- a/packages/mini-markdown-material/src/components/H2/h2.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { FC } from 'react' -import styled from 'styled-components' - -const HeadingStyle = styled.h1` - font-size: 1.5em; - text-align: center; - color: palevioletred; -`; - -const Heading: FC<{ - level: number, - children: React.ReactNode -}> = ({ level, children }) => { - switch (level) { - case 1: - return -

# {children}

- - case 2: - return

## {children}

- case 3: - return

### {children}

- case 4: - return

#### {children}

- case 5: - return
##### {children}
- case 6: - return
###### {children}
- default: - return <> - } -} - -export { - Heading -} diff --git a/packages/mini-markdown-material/src/components/Heading/index.tsx b/packages/mini-markdown-material/src/components/Heading/index.tsx index 3cfccc6d18914c45f618495b40e27bbbfe3fc62b..d45eb12b2308103ecb6ce593051ad6c1248e0108 100644 --- a/packages/mini-markdown-material/src/components/Heading/index.tsx +++ b/packages/mini-markdown-material/src/components/Heading/index.tsx @@ -1,36 +1,48 @@ import { FC } from 'react' import styled from 'styled-components' +import { LineWrap } from '../../style/LineWrap' -const HeadingStyle = styled.h1` - font-size: 1.5em; - text-align: center; - color: palevioletred; -`; +/** + * '#' 这个字符，以及后面内容的样式（span包裹） + */ +const HeadingStyle = styled.span` + color: #3f4a54; + font-weight: bold; + .heading-tag { + color: #0000ff; + } +` const Heading: FC<{ - level: number, + level: number children: React.ReactNode }> = ({ level, children }) => { - switch (level) { - case 1: - return -

# {children}

+ // switch (level) { + // case 1: + // return + //

# {children}

+ // + // case 2: + // return

## {children}

+ // case 3: + // return

### {children}

+ // case 4: + // return

#### {children}

+ // case 5: + // return
##### {children}
+ // case 6: + // return
###### {children}
+ // default: + // return <> + // } + return ( + + + {'#'.repeat(level)} - case 2: - return

## {children}

- case 3: - return

### {children}

- case 4: - return

#### {children}

- case 5: - return
##### {children}
- case 6: - return
###### {children}
- default: - return <> - } + {children} + + ) } -export { - Heading -} +export { Heading } diff --git a/packages/mini-markdown-material/src/index.css b/packages/mini-markdown-material/src/index.css deleted file mode 100644 index 6119ad9a8faaa5073a454f67b50fb98a25972fd2..0000000000000000000000000000000000000000 --- a/packages/mini-markdown-material/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/packages/mini-markdown-material/src/main.tsx b/packages/mini-markdown-material/src/main.tsx index bef5202a32cbd0632c43de40f6e908532903fd42..2a6ca91f037d306238282b947fd1897aa88b8cc2 100644 --- a/packages/mini-markdown-material/src/main.tsx +++ b/packages/mini-markdown-material/src/main.tsx @@ -1,10 +1,4 @@ -import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' import App from './App.tsx' -createRoot(document.getElementById('root')!).render( - - - , -) +createRoot(document.getElementById('root')!).render() diff --git a/packages/mini-markdown-material/src/style/LineWrap.tsx b/packages/mini-markdown-material/src/style/LineWrap.tsx new file mode 100644 index 0000000000000000000000000000000000000000..15a5a7ec75c9e3d829f707586b2b2fe4fd03123f --- /dev/null +++ b/packages/mini-markdown-material/src/style/LineWrap.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +/** + * 包裹容器，用于限制每一行内容 + */ +export const LineWrap = styled.div` + width: 100%; + height: 20px; +` \ No newline at end of file diff --git a/packages/mini-markdown-material/tsconfig.app.json b/packages/mini-markdown-material/tsconfig.app.json index 358ca9ba93f089b0133f05933f133a446402eb17..e6d3442e546ce7a1c14ed9bdb35f6287117d554a 100644 --- a/packages/mini-markdown-material/tsconfig.app.json +++ b/packages/mini-markdown-material/tsconfig.app.json @@ -20,7 +20,14 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + + /* alias */ + "baseUrl": "src", + "paths": { + "@/*": ["./*"], + "@": ["./"] + } }, "include": ["src"] } diff --git a/packages/mini-markdown-material/vite.config.ts b/packages/mini-markdown-material/vite.config.ts index 8b0f57b91aeb45c54467e29f983a0893dc83c4d9..5048e18b2ae99da00aef3e14b3dbb62825b58cdc 100644 --- a/packages/mini-markdown-material/vite.config.ts +++ b/packages/mini-markdown-material/vite.config.ts @@ -1,7 +1,12 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +// import { fileURLToPath, URL } from 'node:url' -// https://vite.dev/config/ export default defineConfig({ plugins: [react()], + resolve: { + alias: { + // '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } }) diff --git a/packages/mini-markdown-play/src/App.css b/packages/mini-markdown-play/src/App.css deleted file mode 100644 index b9d355df2a5956b526c004531b7b0ffe412461e0..0000000000000000000000000000000000000000 --- a/packages/mini-markdown-play/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/packages/mini-markdown-play/src/App.tsx b/packages/mini-markdown-play/src/App.tsx index ab772b9fe603b34844dcf154a9dd930b060d9e0c..e07f092ebda64098dd1210cb243a6d7f373d9411 100644 --- a/packages/mini-markdown-play/src/App.tsx +++ b/packages/mini-markdown-play/src/App.tsx @@ -1,26 +1,59 @@ -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' -import { Heading } from '@mini-markdown/material/src/components/Heading/index.tsx' +import { Heading } from '@mini-markdown/material/src/components/Heading/index.tsx'; +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); + // } + }; + return ( - <> -
- - Vite logo - - - React logo - +
+
+ +
+
+ hello
- - hello - - - ) +
+ ); } - - -export default App +export default App; \ No newline at end of file diff --git a/packages/mini-markdown-play/src/index.css b/packages/mini-markdown-play/src/index.css deleted file mode 100644 index 6119ad9a8faaa5073a454f67b50fb98a25972fd2..0000000000000000000000000000000000000000 --- a/packages/mini-markdown-play/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/packages/mini-markdown-play/src/main.tsx b/packages/mini-markdown-play/src/main.tsx index bef5202a32cbd0632c43de40f6e908532903fd42..b0b41769dfd43fa7c294c18e4e2e776db47faabb 100644 --- a/packages/mini-markdown-play/src/main.tsx +++ b/packages/mini-markdown-play/src/main.tsx @@ -1,10 +1,5 @@ -import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' 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/reset.css b/packages/mini-markdown-play/src/reset.css new file mode 100644 index 0000000000000000000000000000000000000000..5b2d803c2323b4384f24383de9f786ab15f6c9e1 --- /dev/null +++ b/packages/mini-markdown-play/src/reset.css @@ -0,0 +1,5 @@ +* { + margin: 0; + padding: 0; + list-style: none; +} \ No newline at end of file diff --git a/packages/mini-markdown-play/tsconfig.app.json b/packages/mini-markdown-play/tsconfig.app.json index 358ca9ba93f089b0133f05933f133a446402eb17..cfb6964812d8026192b3917f0aa341c21a3fcf16 100644 --- a/packages/mini-markdown-play/tsconfig.app.json +++ b/packages/mini-markdown-play/tsconfig.app.json @@ -20,7 +20,7 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, }, "include": ["src"] } diff --git a/packages/mini-markdown-play/vite.config.ts b/packages/mini-markdown-play/vite.config.ts index 8b0f57b91aeb45c54467e29f983a0893dc83c4d9..cbe99720dea33c86ec1ed42f332aba718036ee36 100644 --- a/packages/mini-markdown-play/vite.config.ts +++ b/packages/mini-markdown-play/vite.config.ts @@ -1,7 +1,13 @@ 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))); -// https://vite.dev/config/ export default defineConfig({ plugins: [react()], + resolve: { + // alias: { + // '@src': fileURLToPath(new URL('./src', import.meta.url)) + // } + } })