chore(markdown): add breaks and trim

2023-10-14 14:02:54 +08:00 · 2023-10-14 14:02:54 +08:00 · 9ae95efe17
commit 9ae95efe17
parent 437a6d82d6
6 changed files with 97 additions and 52 deletions
--- 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",
--- 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}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -14,28 +14,5 @@ export default function App() {
      </AppContainer>
      <AppButton></AppButton>
    </>
-
-    // <>
-    //   <div className="fixed left-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em">
-    //     <div
-    //       className="flex justify-center items-center w-10 h-10 rounded-full shadow cursor-pointer bg-blue-400 hover:bg-blue-600"
-    //       onClick={() => {
-    //         setOpen((open) => !open)
-    //         setOpenedOnce(true)
-    //       }}
-    //     >
-    //       <IconPower />
-    //     </div>
-    //   </div>
-    //   {openedOnce && (
-    //     <div
-    //       className={`fixed top-0 right-0 h-full w-1/4 z-50 bg-white drop-shadow-xl transition-transform ${
-    //         open ? 'translate-x-0' : 'translate-x-full'
-    //       }`}
-    //     >
-    //       <Sidebar></Sidebar>
-    //     </div>
-    //   )}
-    // </>
  )
 }
--- 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<MarkdownProps> = ({ children = '', className }) => {
          )
        }
      }}
-      remarkPlugins={[remarkGfm]}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
      className={cn(className, 'prose prose-sm prose-slate')}
    >
      {children}
--- 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,
--- 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 (
    <div className="grid gap-y-2 px-4 pb-4">
      <MessageInput
-        value={text}
-        preview={isPreview}
+        value={messageText}
        onEnter={handleSend}
        onInput={handleInput}
        maxLength={MESSAGE_MAX_LENGTH}