add markdown block

Author: xc2f

package.json

@@ -61,7 +61,11 @@
     "react": "19.2.1",
     "react-dom": "19.2.1",
     "react-hook-form": "7.45.4",
+    "react-markdown": "^10.1.0",
     "recharts": "2.15.4",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "sharp": "0.34.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"

pnpm-lock.yaml

@@ -8,6 +8,7 @@ import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997e
 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { OverviewComponent as OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
 import { MetaTitleComponent as MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
@@ -16,7 +17,6 @@ import { MetaDescriptionComponent as MetaDescriptionComponent_a8a977ebc872c5d5ea
 import { PreviewComponent as PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
 import { SlugField as SlugField_3817bf644402e67bfe6577f60ef982de } from '@payloadcms/ui'
 import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { FolderTableCell as FolderTableCell_ab83ff7e88da8d3530831f296ec4756a } from '@payloadcms/ui/rsc'
 import { FolderField as FolderField_ab83ff7e88da8d3530831f296ec4756a } from '@payloadcms/ui/rsc'
 import { default as default_7b12fdf6bcfe60cc126dc2cbee538cd0 } from '@/components/Divider/index.tsx'
@@ -42,6 +42,7 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/plugin-seo/client#OverviewComponent": OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
   "@payloadcms/plugin-seo/client#MetaTitleComponent": MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860,
@@ -50,7 +51,6 @@ export const importMap = {
   "@payloadcms/plugin-seo/client#PreviewComponent": PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
   "@payloadcms/ui#SlugField": SlugField_3817bf644402e67bfe6577f60ef982de,
   "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/ui/rsc#FolderTableCell": FolderTableCell_ab83ff7e88da8d3530831f296ec4756a,
   "@payloadcms/ui/rsc#FolderField": FolderField_ab83ff7e88da8d3530831f296ec4756a,
   "@/components/Divider/index.tsx#default": default_7b12fdf6bcfe60cc126dc2cbee538cd0,

src/app/(payload)/admin/importMap.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import { Chart, ChartProps } from './charts'
 
-type Props = ChartProps & {
+import type { ChartBlock as ChartBlockProps } from 'src/payload-types'
+
+type Props = {
   className?: string
-}
+} & ChartBlockProps
 
-export const ChartBlock: React.FC<Props> = ({ className, ...restProps }) => {
+export const ChartBlock: React.FC<Props> = ({ className, ...rest }) => {
   return (
     <div className={[className, 'not-prose'].filter(Boolean).join(' ')}>
-      <Chart {...restProps} />
+      <Chart {...(rest as ChartProps)} />
     </div>
   )
 }

src/blocks/ChartBlock/Component.tsx

@@ -7,10 +7,11 @@ export type ChartProps =
   | ({ type: 'composed' } & ComposedChartProps)
   | { type: 'line' | 'bar' | 'area' | 'pie' }
 
-export const Chart: React.FC<ChartProps> = (props) => {
-  switch (props.type) {
+export const Chart: React.FC<ChartProps> = ({ type, ...rest }) => {
+  switch (type) {
     case 'composed':
-      return <ComposedChart {...props} />
+      return <ComposedChart {...(rest as ComposedChartProps)} />
+    default:
+      return null
   }
-  return null
 }

src/blocks/ChartBlock/charts/index.tsx

@@ -0,0 +1,60 @@
+import type { MarkdownBlock as MarkdownBlockProps } from 'src/payload-types'
+
+import { cn } from '@/utilities/ui'
+import React from 'react'
+import { convertLexicalToPlaintext } from '@payloadcms/richtext-lexical/plaintext'
+
+import Markdown from 'react-markdown'
+
+// autolink literals, footnotes, strikethrough, tables, tasklists
+import remarkGfm from 'remark-gfm'
+
+// math
+import rehypeKatex from 'rehype-katex'
+import remarkMath from 'remark-math'
+import 'katex/dist/katex.min.css'
+
+import { Code as CodeHighlighter } from '../Code/Component.client'
+
+type Props = {
+  className?: string
+} & MarkdownBlockProps
+
+export const MarkdownBlock: React.FC<Props> = ({ className, content }) => {
+  const withClassName = cn(className)
+  const markdownContent = (
+    <Markdown
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+      components={{
+        // 1. 拦截 pre 标签
+        pre(props) {
+          const { children, ...rest } = props
+          return <>{children}</>
+        },
+        // 2. 代码高亮逻辑
+        code(props) {
+          const { children, className, ...rest } = props
+          const match = /language-(\w+)/.exec(className || '')
+          if (match) {
+            const content = String(children).replace(/\n$/, '')
+            return <CodeHighlighter code={content} language={match[1]} />
+          }
+          return (
+            <code {...rest} className={className}>
+              {children}
+            </code>
+          )
+        },
+      }}
+    >
+      {convertLexicalToPlaintext({ data: content })}
+    </Markdown>
+  )
+
+  if (withClassName) {
+    return <div className={withClassName}>{markdownContent}</div>
+  } else {
+    return markdownContent
+  }
+}

src/blocks/MarkdownBlock/Component.tsx

@@ -0,0 +1,19 @@
+import type { Block } from 'payload'
+
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export const MarkdownBlock: Block = {
+  slug: 'markdown',
+  interfaceName: 'MarkdownBlock',
+  fields: [
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: [],
+      }),
+      label: false,
+      required: true,
+    },
+  ],
+}

src/blocks/MarkdownBlock/config.ts

@@ -15,6 +15,7 @@ import { Banner } from '../../blocks/Banner/config'
 import { Code } from '../../blocks/Code/config'
 import { MediaBlock } from '../../blocks/MediaBlock/config'
 import { ChartBlock } from '../../blocks/ChartBlock/config'
+import { MarkdownBlock } from '../../blocks/MarkdownBlock/config'
 import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 import { populateAuthors } from './hooks/populateAuthors'
 import { revalidateDelete, revalidatePost } from './hooks/revalidatePost'
@@ -93,7 +94,7 @@ export const Posts: CollectionConfig<'posts'> = {
                     ...rootFeatures,
                     HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
                     BlocksFeature({
-                      blocks: [Banner, Code, MediaBlock, ChartBlock()],
+                      blocks: [MediaBlock, Code, MarkdownBlock, Banner, ChartBlock()],
                     }),
                     FixedToolbarFeature(),
                     InlineToolbarFeature(),

src/collections/Posts/index.ts

@@ -12,21 +12,29 @@ import {
 } from '@payloadcms/richtext-lexical/react'
 
 import { CodeBlock, CodeBlockProps } from '@/blocks/Code/Component'
-import { ChartBlock, ChartBlockProps } from '@/blocks/ChartBlock/Component'
 
 import type {
   BannerBlock as BannerBlockProps,
   CallToActionBlock as CTABlockProps,
   MediaBlock as MediaBlockProps,
+  ChartBlock as ChartBlockProps,
+  MarkdownBlock as MarkdownBlockProps,
 } from '@/payload-types'
 import { BannerBlock } from '@/blocks/Banner/Component'
 import { CallToActionBlock } from '@/blocks/CallToAction/Component'
+import { ChartBlock } from '@/blocks/ChartBlock/Component'
+import { MarkdownBlock } from '@/blocks/MarkdownBlock/Component'
 import { cn } from '@/utilities/ui'
 
 type NodeTypes =
   | DefaultNodeTypes
   | SerializedBlockNode<
-      CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps | ChartBlockProps
+      | CTABlockProps
+      | MediaBlockProps
+      | BannerBlockProps
+      | CodeBlockProps
+      | ChartBlockProps
+      | MarkdownBlockProps
     >
 
 const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
@@ -56,6 +64,7 @@ const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters })
     code: ({ node }) => <CodeBlock className="col-start-2" {...node.fields} />,
     cta: ({ node }) => <CallToActionBlock {...node.fields} />,
     chart: ({ node }) => <ChartBlock {...node.fields} />,
+    markdown: ({ node }) => <MarkdownBlock {...node.fields} />,
   },
 })
 

src/components/RichText/index.tsx

@@ -6,15 +6,20 @@ import {
   ParagraphFeature,
   lexicalEditor,
   UnderlineFeature,
+  BlocksFeature,
   type LinkFields,
 } from '@payloadcms/richtext-lexical'
+import { MarkdownBlock } from '@/blocks/MarkdownBlock/config'
 
 export const defaultLexical = lexicalEditor({
   features: [
     ParagraphFeature(),
     UnderlineFeature(),
     BoldFeature(),
     ItalicFeature(),
+    BlocksFeature({
+      blocks: [MarkdownBlock],
+    }),
     LinkFeature({
       enabledCollections: ['pages', 'posts'],
       fields: ({ defaultFields }) => {