From 5c0f853929b86a6f4ab6c4b5063fec1e33f1f661 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 26 Jun 2023 00:38:19 +0800
Subject: [PATCH] feat: toc modal in mobile

Signed-off-by: Innei <i@innei.in>
---
 src/atoms/viewport.ts                         |   9 +
 src/components/layout/root/Root.tsx           |   5 +
 src/components/ui/fab/FABContainer.tsx        |   7 +-
 src/components/ui/markdown/Markdown.tsx       |   2 +
 .../ui/markdown/markdown.module.css           |   8 +
 .../ui/markdown/renderers/collapse.module.css |  15 --
 .../ui/markdown/renderers/collapse.tsx        |  20 +-
 src/components/ui/viewport/OnlyMobile.tsx     |  10 +-
 src/components/widgets/toc/TocAside.tsx       |  85 ++++++++
 src/components/widgets/toc/TocFAB.tsx         |  42 ++++
 src/components/widgets/toc/TocItem.tsx        |  30 +--
 .../widgets/toc/{Toc.tsx => TocTree.tsx}      | 184 ++++++------------
 src/components/widgets/toc/index.ts           |   2 +-
 src/constants/dom-id.ts                       |   1 +
 src/styles/tailwindcss.css                    |   4 +
 15 files changed, 252 insertions(+), 172 deletions(-)
 delete mode 100644 src/components/ui/markdown/renderers/collapse.module.css
 create mode 100644 src/components/widgets/toc/TocAside.tsx
 create mode 100644 src/components/widgets/toc/TocFAB.tsx
 rename src/components/widgets/toc/{Toc.tsx => TocTree.tsx} (64%)
 create mode 100644 src/constants/dom-id.ts

diff --git a/src/atoms/viewport.ts b/src/atoms/viewport.ts
index e5e564489d..fa24bc2282 100644
--- a/src/atoms/viewport.ts
+++ b/src/atoms/viewport.ts
@@ -43,3 +43,12 @@ export const useViewport = <T>(
       useCallback((atomValue) => selector(atomValue), []),
     ),
   )
+
+export const useIsMobile = () =>
+  useViewport(
+    useCallback(
+      (v: ExtractAtomValue<typeof viewportAtom>) =>
+        (v.sm || v.md || !v.sm) && !v.lg,
+      [],
+    ),
+  )
diff --git a/src/components/layout/root/Root.tsx b/src/components/layout/root/Root.tsx
index 03027e96c8..1e9b32d880 100644
--- a/src/components/layout/root/Root.tsx
+++ b/src/components/layout/root/Root.tsx
@@ -1,4 +1,6 @@
 import { BackToTopFAB, FABContainer } from '~/components/ui/fab'
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
+import { TocFAB } from '~/components/widgets/toc/TocFAB'
 
 import { Content } from '../content/Content'
 import { Footer } from '../footer'
@@ -13,6 +15,9 @@ export const Root: Component = ({ children }) => {
       <Footer />
       <FABContainer>
         <BackToTopFAB />
+        <OnlyMobile>
+          <TocFAB />
+        </OnlyMobile>
       </FABContainer>
     </>
   )
diff --git a/src/components/ui/fab/FABContainer.tsx b/src/components/ui/fab/FABContainer.tsx
index c22f6e5bcf..b7f2b2ff3d 100644
--- a/src/components/ui/fab/FABContainer.tsx
+++ b/src/components/ui/fab/FABContainer.tsx
@@ -71,11 +71,12 @@ export const FABBase = (
       {show && (
         <motion.button
           aria-label="Floating action button"
-          initial={{ opacity: 0, scale: 0.8 }}
+          initial={{ opacity: 0.3, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.8 }}
+          exit={{ opacity: 0.3, scale: 0.8 }}
           className={clsxm(
-            'mt-2 inline-flex h-10 w-10 items-center justify-center',
+            'mt-2 inline-flex items-center justify-center',
+            'h-12 w-12 text-lg md:h-10 md:w-10 md:text-base',
             'border border-accent transition-all duration-300 hover:opacity-100 focus:opacity-100 focus:outline-none',
             'rounded-xl border border-zinc-400/20 shadow-lg backdrop-blur-lg dark:border-zinc-500/30 dark:bg-zinc-800/80 dark:text-zinc-200',
             'bg-slate-50/80 shadow-lg dark:bg-neutral-900/80',
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
index 1b3e6ea0c5..70cd05a5d9 100644
--- a/src/components/ui/markdown/Markdown.tsx
+++ b/src/components/ui/markdown/Markdown.tsx
@@ -6,6 +6,7 @@ import dynamic from 'next/dynamic'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 import type { FC, PropsWithChildren } from 'react'
 
+import { MAIN_MARKDOWN_ID } from '~/constants/dom-id'
 import { useWrappedElementSize } from '~/providers/shared/WrappedElementProvider'
 import { isDev } from '~/utils/env'
 import { springScrollToElement } from '~/utils/scroller'
@@ -219,6 +220,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
 
     return (
       <As
+        id={MAIN_MARKDOWN_ID}
         style={style}
         {...wrapperProps}
         ref={ref}
diff --git a/src/components/ui/markdown/markdown.module.css b/src/components/ui/markdown/markdown.module.css
index b9bc7afda1..4774c21d78 100644
--- a/src/components/ui/markdown/markdown.module.css
+++ b/src/components/ui/markdown/markdown.module.css
@@ -14,6 +14,10 @@
       &:hover {
         background: transparent;
       }
+
+      &:not(:hover) * {
+        @apply !text-inherit;
+      }
     }
   }
 
@@ -95,4 +99,8 @@
   pre {
     @apply min-w-0 max-w-full flex-shrink flex-grow overflow-x-auto;
   }
+
+  p {
+    @apply break-words;
+  }
 }
diff --git a/src/components/ui/markdown/renderers/collapse.module.css b/src/components/ui/markdown/renderers/collapse.module.css
deleted file mode 100644
index 62341f4a41..0000000000
--- a/src/components/ui/markdown/renderers/collapse.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.collapse {
-  @apply my-2;
-
-  :global(.ReactCollapse--collapse) {
-    transition: height 200ms;
-  }
-
-  .title {
-    @apply mb-2 pl-2 flex items-center;
-  }
-
-  p {
-    @apply !m-0;
-  }
-}
diff --git a/src/components/ui/markdown/renderers/collapse.tsx b/src/components/ui/markdown/renderers/collapse.tsx
index 602b455785..74a8bc64a1 100644
--- a/src/components/ui/markdown/renderers/collapse.tsx
+++ b/src/components/ui/markdown/renderers/collapse.tsx
@@ -1,35 +1,35 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import clsx from 'clsx'
 import type { FC, ReactNode } from 'react'
 
 import { IcRoundKeyboardDoubleArrowRight } from '~/components/icons/arrow'
 
 import { Collapse } from '../../collapse'
-import styles from './collapse.module.css'
 
 export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
   const [open, setOpen] = useState(false)
 
   const $head = props.children[0]
 
+  const handleOpen = useCallback(() => {
+    setOpen((o) => !o)
+  }, [])
   return (
-    <div className={styles.collapse}>
-      <div
-        className={styles.title}
-        onClick={() => {
-          setOpen((o) => !o)
-        }}
+    <div className="my-2">
+      <button
+        className="mb-2 flex cursor-pointer items-center pl-2"
+        onClick={handleOpen}
       >
         <i
           className={clsx(
             'icon-[mingcute--align-arrow-down-line] mr-2 transform transition-transform duration-500',
-            open && 'rotate-90',
+            !open && '-rotate-90',
           )}
         >
           <IcRoundKeyboardDoubleArrowRight />
         </i>
         {$head}
-      </div>
+      </button>
       <Collapse isOpened={open} className="my-2">
         <div
           className={clsx(
diff --git a/src/components/ui/viewport/OnlyMobile.tsx b/src/components/ui/viewport/OnlyMobile.tsx
index 7ccc5025d2..3b7f8e144f 100644
--- a/src/components/ui/viewport/OnlyMobile.tsx
+++ b/src/components/ui/viewport/OnlyMobile.tsx
@@ -1,18 +1,12 @@
 'use client'
 
-import { useAtomValue } from 'jotai'
-import { selectAtom } from 'jotai/utils'
-import type { ExtractAtomValue } from 'jotai/vanilla'
-
-import { viewportAtom } from '~/atoms/viewport'
+import { useIsMobile } from '~/atoms/viewport'
 import { useIsClient } from '~/hooks/common/use-is-client'
 
-const selector = (v: ExtractAtomValue<typeof viewportAtom>) =>
-  (v.sm || v.md || !v.sm) && !v.lg
 export const OnlyMobile: Component = ({ children }) => {
   const isClient = useIsClient()
 
-  const isMobile = useAtomValue(selectAtom(viewportAtom, selector))
+  const isMobile = useIsMobile()
 
   if (!isClient) return null
 
diff --git a/src/components/widgets/toc/TocAside.tsx b/src/components/widgets/toc/TocAside.tsx
new file mode 100644
index 0000000000..8da99161a1
--- /dev/null
+++ b/src/components/widgets/toc/TocAside.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef } from 'react'
+import type { ITocItem } from './TocItem'
+
+import { throttle } from '~/lib/_'
+import { useWrappedElement } from '~/providers/shared/WrappedElementProvider'
+import { clsxm } from '~/utils/helper'
+
+import { TocTree } from './TocTree'
+
+export type TocAsideProps = {
+  treeClassName?: string
+}
+
+export interface TocSharedProps {
+  accessory?: React.ReactNode | React.FC
+}
+export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
+  className,
+  children,
+  treeClassName,
+  accessory,
+}) => {
+  const containerRef = useRef<HTMLUListElement>(null)
+  const $article = useWrappedElement()
+
+  if (typeof $article === 'undefined') {
+    throw new Error('<Toc /> must be used in <WrappedElementProvider />')
+  }
+  const $headings = useMemo(() => {
+    if (!$article) {
+      return []
+    }
+    return [
+      ...$article.querySelectorAll('h1,h2,h3,h4,h5,h6'),
+    ] as HTMLHeadingElement[]
+  }, [$article])
+
+  const toc: ITocItem[] = useMemo(() => {
+    return Array.from($headings).map((el, idx) => {
+      const depth = +el.tagName.slice(1)
+      const title = el.textContent || ''
+
+      const index = idx
+
+      return {
+        depth,
+        index: isNaN(index) ? -1 : index,
+        title,
+        anchorId: el.id,
+      }
+    })
+  }, [$headings])
+
+  useEffect(() => {
+    const setMaxWidth = throttle(() => {
+      if (containerRef.current) {
+        containerRef.current.style.maxWidth = `${
+          document.documentElement.getBoundingClientRect().width -
+          containerRef.current.getBoundingClientRect().x -
+          30
+        }px`
+      }
+    }, 14)
+    setMaxWidth()
+
+    window.addEventListener('resize', setMaxWidth)
+    return () => {
+      window.removeEventListener('resize', setMaxWidth)
+    }
+  }, [])
+
+  return (
+    <aside className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
+      <TocTree
+        $headings={$headings}
+        containerRef={containerRef}
+        className={clsxm('absolute max-h-[75vh]', treeClassName)}
+        accessory={accessory}
+      />
+      {children}
+    </aside>
+  )
+}
diff --git a/src/components/widgets/toc/TocFAB.tsx b/src/components/widgets/toc/TocFAB.tsx
new file mode 100644
index 0000000000..c0ac5117a0
--- /dev/null
+++ b/src/components/widgets/toc/TocFAB.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { useCallback } from 'react'
+import { useParams, usePathname } from 'next/navigation'
+
+import { FABBase } from '~/components/ui/fab'
+import { MAIN_MARKDOWN_ID } from '~/constants/dom-id'
+import { useModalStack } from '~/providers/root/modal-stack-provider'
+
+import { TocTree } from './TocTree'
+
+export const TocFAB = () => {
+  const { present } = useModalStack()
+  const pathname = usePathname()
+  const params = useParams()
+
+  const presentToc = useCallback(() => {
+    const $mainMarkdownRender = document.getElementById(MAIN_MARKDOWN_ID)
+    if (!$mainMarkdownRender) return
+    const $headings = [
+      ...$mainMarkdownRender.querySelectorAll('h1,h2,h3,h4,h5,h6'),
+    ] as HTMLHeadingElement[]
+    const dispose = present({
+      title: 'Table of Content',
+      content: () => (
+        <TocTree
+          $headings={$headings}
+          className="space-y-3 [&>li]:py-1"
+          onItemClick={() => {
+            dispose()
+          }}
+          scrollInNextTick
+        />
+      ),
+    })
+  }, [pathname, params])
+  return (
+    <FABBase id="show-toc" aria-label="Show ToC" onClick={presentToc}>
+      <i className="icon-[mingcute--list-expansion-line]" />
+    </FABBase>
+  )
+}
diff --git a/src/components/widgets/toc/TocItem.tsx b/src/components/widgets/toc/TocItem.tsx
index d6c2924471..28983c6984 100644
--- a/src/components/widgets/toc/TocItem.tsx
+++ b/src/components/widgets/toc/TocItem.tsx
@@ -3,11 +3,8 @@ import { tv } from 'tailwind-variants'
 import type { FC, MouseEvent } from 'react'
 
 import { getIsInteractive } from '~/atoms/is-interactive'
-import { useWrappedElement } from '~/providers/shared/WrappedElementProvider'
 import { clsxm } from '~/utils/helper'
 
-import { escapeSelector } from './escapeSelector'
-
 const styles = tv({
   base: clsxm(
     'leading-normal mb-[1.5px] text-neutral-content inline-block relative max-w-full min-w-0',
@@ -24,19 +21,19 @@ export interface ITocItem {
   title: string
   anchorId: string
   index: number
+
+  $heading: HTMLHeadingElement
 }
 
 export const TocItem: FC<{
-  title: string
-  anchorId: string
-  depth: number
+  heading: ITocItem
+
   active: boolean
   rootDepth: number
   onClick?: (i: number, $el: HTMLElement | null, anchorId: string) => void
-  index: number
-  // containerRef?: RefObject<HTMLDivElement>
 }> = memo((props) => {
-  const { index, active, depth, title, rootDepth, onClick, anchorId } = props
+  const { active, rootDepth, onClick, heading } = props
+  const { $heading, anchorId, depth, index, title } = heading
 
   const $ref = useRef<HTMLAnchorElement>(null)
 
@@ -49,12 +46,18 @@ export const TocItem: FC<{
     history.replaceState(state, '', `#${anchorId}`)
   }, [active, anchorId])
 
+  useEffect(() => {
+    if (active) {
+      $ref.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [])
+
   const renderDepth = useMemo(() => {
     const result = depth - rootDepth
 
     return result
   }, [depth, rootDepth])
-  const $article = useWrappedElement()
+
   return (
     <a
       ref={$ref}
@@ -76,13 +79,10 @@ export const TocItem: FC<{
       onClick={useCallback(
         (e: MouseEvent) => {
           e.preventDefault()
-          const $el = $article?.querySelector(
-            `#${escapeSelector(anchorId)}`,
-          ) as any as HTMLElement
 
-          onClick?.(index, $el, anchorId)
+          onClick?.(index, $heading, anchorId)
         },
-        [onClick, index, $article, anchorId],
+        [onClick, index, $heading, anchorId],
       )}
       title={title}
     >
diff --git a/src/components/widgets/toc/Toc.tsx b/src/components/widgets/toc/TocTree.tsx
similarity index 64%
rename from src/components/widgets/toc/Toc.tsx
rename to src/components/widgets/toc/TocTree.tsx
index b56e6db9d3..3acbd85a6e 100644
--- a/src/components/widgets/toc/Toc.tsx
+++ b/src/components/widgets/toc/TocTree.tsx
@@ -11,44 +11,69 @@ import React, {
 import { motion } from 'framer-motion'
 import { atom, useAtom } from 'jotai'
 import type { FC } from 'react'
+import type { TocSharedProps } from './TocAside'
 import type { ITocItem } from './TocItem'
 
 import { Divider } from '~/components/ui/divider'
 import { RightToLeftTransitionView } from '~/components/ui/transition/RightToLeftTransitionView'
-import { throttle } from '~/lib/_'
-import { useWrappedElement } from '~/providers/shared/WrappedElementProvider'
+import { useStateToRef } from '~/hooks/common/use-state-ref'
 import { clsxm } from '~/utils/helper'
 import { springScrollToElement } from '~/utils/scroller'
 
 import { TocItem } from './TocItem'
 
-export type TocAsideProps = {
-  treeClassName?: string
-}
+const tocActiveIdAtom = atom<string | null>(null)
+
+function useActiveId($headings: HTMLHeadingElement[]) {
+  const [activeId, setActiveId] = useAtom(tocActiveIdAtom)
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            startTransition(() => {
+              setActiveId(entry.target.id)
+            })
+          }
+        })
+      },
+      { rootMargin: `-100px 0px -100px 0px` },
+    )
+    $headings.forEach(($heading) => {
+      observer.observe($heading)
+    })
+    return () => {
+      $headings.forEach(($heading) => {
+        observer.unobserve($heading)
+      })
+
+      observer.disconnect()
+    }
+  }, [$headings])
 
-interface TocSharedProps {
-  accessory?: React.ReactNode | React.FC
+  return [activeId, setActiveId] as const
 }
-export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
+
+export const TocTree: Component<
+  {
+    $headings: HTMLHeadingElement[]
+    containerRef?: React.MutableRefObject<HTMLUListElement | null>
+    /**
+     * 下次循环中跳转，在 Modal 中很管用
+     */
+    scrollInNextTick?: boolean
+
+    onItemClick?: (item: ITocItem) => void
+  } & TocSharedProps
+> = ({
+  $headings,
+  containerRef,
   className,
-  children,
-  treeClassName,
   accessory,
+  scrollInNextTick,
+  onItemClick,
 }) => {
-  const containerRef = useRef<HTMLUListElement>(null)
-  const $article = useWrappedElement()
-
-  if (typeof $article === 'undefined') {
-    throw new Error('<Toc /> must be used in <WrappedElementProvider />')
-  }
-  const $headings = useMemo(() => {
-    if (!$article) {
-      return []
-    }
-    return [
-      ...$article.querySelectorAll('h1,h2,h3,h4,h5,h6'),
-    ] as HTMLHeadingElement[]
-  }, [$article])
+  const [activeId, setActiveId] = useActiveId($headings)
 
   const toc: ITocItem[] = useMemo(() => {
     return Array.from($headings).map((el, idx) => {
@@ -62,28 +87,11 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
         index: isNaN(index) ? -1 : index,
         title,
         anchorId: el.id,
+        $heading: el,
       }
     })
   }, [$headings])
 
-  useEffect(() => {
-    const setMaxWidth = throttle(() => {
-      if (containerRef.current) {
-        containerRef.current.style.maxWidth = `${
-          document.documentElement.getBoundingClientRect().width -
-          containerRef.current.getBoundingClientRect().x -
-          30
-        }px`
-      }
-    }, 14)
-    setMaxWidth()
-
-    window.addEventListener('resize', setMaxWidth)
-    return () => {
-      window.removeEventListener('resize', setMaxWidth)
-    }
-  }, [])
-
   const rootDepth = useMemo(
     () =>
       toc?.length
@@ -95,47 +103,22 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
     [toc],
   )
 
-  const [activeId, setActiveId] = useActiveId($headings)
-
-  return (
-    <aside className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
-      <TocTree
-        toc={toc}
-        activeId={activeId}
-        setActiveId={setActiveId}
-        rootDepth={rootDepth}
-        containerRef={containerRef}
-        className={clsxm('absolute max-h-[75vh]', treeClassName)}
-        accessory={accessory}
-      />
-      {children}
-    </aside>
-  )
-}
-
-const TocTree: Component<
-  {
-    toc: ITocItem[]
-    activeId: string | null
-    setActiveId: (id: string | null) => void
-    rootDepth: number
-    containerRef: React.MutableRefObject<HTMLUListElement | null>
-  } & TocSharedProps
-> = ({
-  toc,
-  activeId,
-  setActiveId,
-  rootDepth,
-  containerRef,
-  className,
-  accessory,
-}) => {
+  const tocRef = useStateToRef(toc)
   const handleScrollTo = useCallback(
     (i: number, $el: HTMLElement | null, anchorId: string) => {
+      onItemClick?.(tocRef.current[i])
+
       if ($el) {
-        springScrollToElement($el, -100).then(() => {
-          setActiveId(anchorId)
-        })
+        const handle = () => {
+          springScrollToElement($el, -100).then(() => {
+            setActiveId?.(anchorId)
+          })
+        }
+        if (scrollInNextTick) {
+          requestAnimationFrame(() => {
+            handle()
+          })
+        } else handle()
       }
     },
     [],
@@ -172,13 +155,11 @@ const TocTree: Component<
     </ul>
   )
 }
-
 const MemoedItem = memo<{
   isActive: boolean
   heading: ITocItem
   rootDepth: number
   onClick?: (i: number, $el: HTMLElement | null, anchorId: string) => void
-  // containerRef: any
 }>((props) => {
   const {
     heading,
@@ -208,50 +189,13 @@ const MemoedItem = memo<{
         />
       )}
       <TocItem
-        anchorId={heading.anchorId}
-        // containerRef={containerRef}
-        index={heading.index}
+        heading={heading}
         onClick={onClick}
         active={isActive}
-        depth={heading.depth}
-        title={heading.title}
         key={heading.title}
         rootDepth={rootDepth}
       />
     </RightToLeftTransitionView>
   )
 })
-
 MemoedItem.displayName = 'MemoedItem'
-
-const tocActiveIdAtom = atom<string | null>(null)
-
-function useActiveId($headings: HTMLHeadingElement[]) {
-  const [activeId, setActiveId] = useAtom(tocActiveIdAtom)
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startTransition(() => {
-              setActiveId(entry.target.id)
-            })
-          }
-        })
-      },
-      { rootMargin: `-100px 0px -100px 0px` },
-    )
-    $headings.forEach(($heading) => {
-      observer.observe($heading)
-    })
-    return () => {
-      $headings.forEach(($heading) => {
-        observer.unobserve($heading)
-      })
-
-      observer.disconnect()
-    }
-  }, [$headings])
-
-  return [activeId, setActiveId] as const
-}
diff --git a/src/components/widgets/toc/index.ts b/src/components/widgets/toc/index.ts
index 4d993384f7..0c2e90b31e 100644
--- a/src/components/widgets/toc/index.ts
+++ b/src/components/widgets/toc/index.ts
@@ -1,3 +1,3 @@
-export * from './Toc'
+export * from './TocAside'
 export * from './TocAutoScroll'
 export * from './TocItem'
diff --git a/src/constants/dom-id.ts b/src/constants/dom-id.ts
new file mode 100644
index 0000000000..b0d51dcccb
--- /dev/null
+++ b/src/constants/dom-id.ts
@@ -0,0 +1 @@
+export const MAIN_MARKDOWN_ID = 'main-markdown-render'
diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css
index 7c9db0a8b3..e0f6a5112a 100644
--- a/src/styles/tailwindcss.css
+++ b/src/styles/tailwindcss.css
@@ -9,6 +9,10 @@ html {
 
 .prose {
   max-width: 100% !important;
+
+  p {
+    @apply break-words;
+  }
 }
 
 *:focus {