fix: words get cut off (#30, #35)

package-lock.json

@@ -29,6 +29,7 @@
         "rehype-highlight": "^6.0.0",
         "rehype-katex": "^6.0.2",
         "rehype-raw": "^6.1.1",
+        "remark-breaks": "^3.0.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
         "uuid": "^9.0.0",
@@ -7824,6 +7825,16 @@
         "unified": "^10.0.0"
       }
     },
+    "node_modules/remark-breaks": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/remark-breaks/-/remark-breaks-3.0.2.tgz",
+      "integrity": "sha512-x96YDJ9X+Ry0/JNZFKfr1hpcAKvGYWfUTszxY9RbxKEqq6uzPPoLCuHdZsLPZZUdAv3nCROyc7FPrQLWr2rxyw==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/remark-gfm/-/remark-gfm-3.0.1.tgz",

package.json

@@ -42,6 +42,7 @@
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.2",
     "rehype-raw": "^6.1.1",
+    "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "uuid": "^9.0.0",

src/components/MarkdownRender/markdown-without-katex.jsx

@@ -2,6 +2,7 @@ import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
 import CopyButton from '../CopyButton'
 import { useRef } from 'react'
 import PropTypes from 'prop-types'
@@ -34,7 +35,7 @@ export function MarkdownRender(props) {
   return (
     <div dir="auto">
       <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
+        remarkPlugins={[remarkGfm, remarkBreaks]}
         rehypePlugins={[
           rehypeRaw,
           [

src/components/MarkdownRender/markdown.jsx

@@ -5,6 +5,7 @@ import rehypeHighlight from 'rehype-highlight'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
 import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
 import CopyButton from '../CopyButton'
 import { useRef } from 'react'
 import PropTypes from 'prop-types'
@@ -37,7 +38,7 @@ export function MarkdownRender(props) {
   return (
     <div dir="auto">
       <ReactMarkdown
-        remarkPlugins={[remarkMath, remarkGfm]}
+        remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
         rehypePlugins={[
           rehypeKatex,
           rehypeRaw,