From 9ae95efe176b3ea92472ccbc16c1c034da135e90 Mon Sep 17 00:00:00 2001 From: molvqingtai Date: Sat, 14 Oct 2023 14:02:54 +0800 Subject: [PATCH] chore(markdown): add breaks and trim --- package.json | 1 + pnpm-lock.yaml | 89 ++++++++++++++++++++++++++++++++++ src/App.tsx | 23 --------- src/components/ui/Markdown.tsx | 3 +- src/domain/MessageInput.ts | 25 +--------- src/views/Footer/index.tsx | 8 ++- 6 files changed, 97 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index fda3e29..9450d4c 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "react-markdown": "^8.0.7", "react-nice-avatar": "^1.4.1", "react-use": "^17.4.0", + "remark-breaks": "^4.0.0", "remark-gfm": "^3.0.1", "remesh": "^4.2.0", "remesh-logger": "^4.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee14f84..96e8478 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ dependencies: react-use: specifier: ^17.4.0 version: 17.4.0(react-dom@18.2.0)(react@18.2.0) + remark-breaks: + specifier: ^4.0.0 + version: 4.0.0 remark-gfm: specifier: ^3.0.1 version: 3.0.1 @@ -1559,6 +1562,12 @@ packages: '@types/unist': 2.0.7 dev: false + /@types/mdast@4.0.1: + resolution: {integrity: sha512-IlKct1rUTJ1T81d8OHzyop15kGv9A/ff7Gz7IJgrk6jDb4Udw77pCJ+vq8oxZf4Ghpm+616+i1s/LNg/Vh7d+g==} + dependencies: + '@types/unist': 2.0.7 + dev: false + /@types/minimatch@3.0.5: resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} dev: true @@ -1604,6 +1613,10 @@ packages: resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==} dev: false + /@types/unist@3.0.0: + resolution: {integrity: sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==} + dev: false + /@types/webextension-polyfill@0.10.1: resolution: {integrity: sha512-Sdg+E2F5JUbhkE1qX15QUxpyhfMFKRGJqND9nb1C0gNN4NR7kCV31/1GvNbg6Xe+m/JElJ9/lG5kepMzjGPuQw==} dev: true @@ -2967,6 +2980,12 @@ packages: engines: {node: '>=6'} dev: false + /devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + dependencies: + dequal: 2.0.3 + dev: false + /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} @@ -5146,6 +5165,15 @@ packages: unist-util-visit-parents: 5.1.3 dev: false + /mdast-util-find-and-replace@3.0.1: + resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==} + dependencies: + '@types/mdast': 4.0.1 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + dev: false + /mdast-util-from-markdown@1.3.1: resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==} dependencies: @@ -5221,6 +5249,13 @@ packages: - supports-color dev: false + /mdast-util-newline-to-break@2.0.0: + resolution: {integrity: sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==} + dependencies: + '@types/mdast': 4.0.1 + mdast-util-find-and-replace: 3.0.1 + dev: false + /mdast-util-phrasing@3.0.1: resolution: {integrity: sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==} dependencies: @@ -6685,6 +6720,14 @@ packages: commander: 2.20.3 dev: true + /remark-breaks@4.0.0: + resolution: {integrity: sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==} + dependencies: + '@types/mdast': 4.0.1 + mdast-util-newline-to-break: 2.0.0 + unified: 11.0.3 + dev: false + /remark-gfm@3.0.1: resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==} dependencies: @@ -7819,6 +7862,18 @@ packages: vfile: 5.3.7 dev: false + /unified@11.0.3: + resolution: {integrity: sha512-jlCV402P+YDcFcB2VcN/n8JasOddqIiaxv118wNBoZXEhOn+lYG7BR4Bfg2BwxvlK58dwbuH2w7GX2esAjL6Mg==} + dependencies: + '@types/unist': 3.0.0 + bail: 2.0.2 + devlop: 1.1.0 + extend: 3.0.2 + is-plain-obj: 4.1.0 + trough: 2.1.0 + vfile: 6.0.1 + dev: false + /unique-string@3.0.0: resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==} engines: {node: '>=12'} @@ -7836,6 +7891,12 @@ packages: '@types/unist': 2.0.7 dev: false + /unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + dependencies: + '@types/unist': 3.0.0 + dev: false + /unist-util-position@4.0.4: resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==} dependencies: @@ -7848,6 +7909,12 @@ packages: '@types/unist': 2.0.7 dev: false + /unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + dependencies: + '@types/unist': 3.0.0 + dev: false + /unist-util-visit-parents@5.1.3: resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} dependencies: @@ -7855,6 +7922,13 @@ packages: unist-util-is: 5.2.1 dev: false + /unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + dependencies: + '@types/unist': 3.0.0 + unist-util-is: 6.0.0 + dev: false + /unist-util-visit@4.1.2: resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} dependencies: @@ -8019,6 +8093,13 @@ packages: unist-util-stringify-position: 3.0.3 dev: false + /vfile-message@4.0.2: + resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} + dependencies: + '@types/unist': 3.0.0 + unist-util-stringify-position: 4.0.0 + dev: false + /vfile@5.3.7: resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==} dependencies: @@ -8028,6 +8109,14 @@ packages: vfile-message: 3.1.4 dev: false + /vfile@6.0.1: + resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} + dependencies: + '@types/unist': 3.0.0 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.2 + dev: false + /vite@4.4.3(@types/node@20.4.2): resolution: {integrity: sha512-IMnXQXXWgLi5brBQx/4WzDxdzW0X3pjO4nqFJAuNvwKtxzAmPzFE1wszW3VDpAGQJm3RZkm/brzRdyGsnwgJIA==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/App.tsx b/src/App.tsx index 98be01a..9b57422 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,28 +14,5 @@ export default function App() { - - // <> - //
- //
{ - // setOpen((open) => !open) - // setOpenedOnce(true) - // }} - // > - // - //
- //
- // {openedOnce && ( - //
- // - //
- // )} - // ) } diff --git a/src/components/ui/Markdown.tsx b/src/components/ui/Markdown.tsx index 7075d36..07a78e2 100644 --- a/src/components/ui/Markdown.tsx +++ b/src/components/ui/Markdown.tsx @@ -1,6 +1,7 @@ import { type FC } from 'react' import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' +import remarkBreaks from 'remark-breaks' import { cn } from '@/utils' export interface MarkdownProps { @@ -57,7 +58,7 @@ const Markdown: FC = ({ children = '', className }) => { ) } }} - remarkPlugins={[remarkGfm]} + remarkPlugins={[remarkGfm, remarkBreaks]} className={cn(className, 'prose prose-sm prose-slate')} > {children} diff --git a/src/domain/MessageInput.ts b/src/domain/MessageInput.ts index ba9477c..d983b42 100644 --- a/src/domain/MessageInput.ts +++ b/src/domain/MessageInput.ts @@ -12,25 +12,6 @@ const MessageInputDomain = Remesh.domain({ const MessageQuery = MessageInputModule.query.ValueQuery - const PreviewState = domain.state({ - name: 'MessageInput.PreviewState', - default: false - }) - - const PreviewQuery = domain.query({ - name: 'MessageInput.PreviewQuery', - impl: ({ get }) => { - return get(PreviewState()) - } - }) - - const PreviewCommand = domain.command({ - name: 'MessageInput.PreviewCommand', - impl: (_, value: boolean) => { - return PreviewState().new(value) - } - }) - const EnterEvent = domain.event({ name: 'MessageInput.EnterEvent', impl: ({ get }) => { @@ -54,14 +35,12 @@ const MessageInputDomain = Remesh.domain({ return { query: { - MessageQuery, - PreviewQuery + MessageQuery }, command: { ...MessageInputModule.command, EnterCommand, - ClearCommand, - PreviewCommand + ClearCommand }, event: { ...MessageInputModule.event, diff --git a/src/views/Footer/index.tsx b/src/views/Footer/index.tsx index b1d490e..4f6c1a6 100644 --- a/src/views/Footer/index.tsx +++ b/src/views/Footer/index.tsx @@ -11,8 +11,7 @@ const Footer: FC = () => { const send = useRemeshSend() const messageListDomain = useRemeshDomain(MessageListDomain()) const messageInputDomain = useRemeshDomain(MessageInputDomain()) - const text = useRemeshQuery(messageInputDomain.query.MessageQuery()) - const isPreview = useRemeshQuery(messageInputDomain.query.PreviewQuery()) + const messageText = useRemeshQuery(messageInputDomain.query.MessageQuery()) const handleInput = (value: string) => { send(messageInputDomain.command.InputCommand(value)) @@ -21,7 +20,7 @@ const Footer: FC = () => { const message = { username: '墨绿青苔', avatar: 'https://avatars.githubusercontent.com/u/10251037?v=4', - body: text, + body: messageText.trim(), date: Date.now(), likeChecked: false, likeCount: 0, @@ -37,8 +36,7 @@ const Footer: FC = () => { return (