[{"path":"preview-markdown-demo.tsx","content":"'use client';\n\nimport * as React from 'react';\n\nimport {\n type Decorate,\n type RenderLeafProps,\n type TText,\n createSlatePlugin,\n TextApi,\n} from 'platejs';\nimport { Plate, usePlateEditor } from 'platejs/react';\nimport Prism from 'prismjs';\n\nimport { cn } from '@/lib/utils';\nimport { BasicNodesKit } from '@/components/editor/plugins/basic-nodes-kit';\nimport { previewMdValue } from '@/registry/examples/values/preview-md-value';\nimport { Editor, EditorContainer } from '@/components/ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/** Decorate texts with markdown preview. */\nconst decoratePreview: Decorate = ({ entry: [node, path] }) => {\n const ranges: any[] = [];\n\n if (!TextApi.isText(node)) {\n return ranges;\n }\n\n const getLength = (token: any) => {\n if (typeof token === 'string') {\n return token.length;\n }\n if (typeof token.content === 'string') {\n return token.content.length;\n }\n\n return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n };\n\n const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n let start = 0;\n\n for (const token of tokens) {\n const length = getLength(token);\n const end = start + length;\n\n if (typeof token !== 'string') {\n ranges.push({\n anchor: { offset: start, path },\n focus: { offset: end, path },\n [token.type]: true,\n });\n }\n\n start = end;\n }\n\n return ranges;\n};\n\nfunction PreviewLeaf({\n attributes,\n children,\n leaf,\n}: RenderLeafProps<\n {\n blockquote?: boolean;\n bold?: boolean;\n code?: boolean;\n hr?: boolean;\n italic?: boolean;\n list?: boolean;\n title?: boolean;\n } & TText\n>) {\n const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n return (\n \n {children}\n \n );\n}\n\nexport default function PreviewMdDemo() {\n const editor = usePlateEditor(\n {\n plugins: [\n ...BasicNodesKit,\n createSlatePlugin({\n key: 'preview-markdown',\n decorate: decoratePreview,\n }),\n ],\n value: previewMdValue,\n },\n []\n );\n\n return (\n \n \n \n \n \n );\n}\n","type":"registry:example","target":"components/preview-markdown-demo.tsx","highlightedContent":"

'use client';\n\nimport * as React from 'react';\n\nimport {\n  type Decorate,\n  type RenderLeafProps,\n  type TText,\n  createSlatePlugin,\n  TextApi,\n} from 'platejs';\nimport { Plate, usePlateEditor } from 'platejs/react';\nimport Prism from 'prismjs';\n\nimport { cn } from '@/lib/utils';\nimport { BasicNodesKit } from '@/components/editor/plugins/basic-nodes-kit';\nimport { previewMdValue } from '@/registry/examples/values/preview-md-value';\nimport { Editor, EditorContainer } from '@/components/ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/** Decorate texts with markdown preview. */\nconst decoratePreview: Decorate = ({ entry: [node, path] }) => {\n  const ranges: any[] = [];\n\n  if (!TextApi.isText(node)) {\n    return ranges;\n  }\n\n  const getLength = (token: any) => {\n    if (typeof token === 'string') {\n      return token.length;\n    }\n    if (typeof token.content === 'string') {\n      return token.content.length;\n    }\n\n    return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n  };\n\n  const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n  let start = 0;\n\n  for (const token of tokens) {\n    const length = getLength(token);\n    const end = start + length;\n\n    if (typeof token !== 'string') {\n      ranges.push({\n        anchor: { offset: start, path },\n        focus: { offset: end, path },\n        [token.type]: true,\n      });\n    }\n\n    start = end;\n  }\n\n  return ranges;\n};\n\nfunction PreviewLeaf({\n  attributes,\n  children,\n  leaf,\n}: RenderLeafProps<\n  {\n    blockquote?: boolean;\n    bold?: boolean;\n    code?: boolean;\n    hr?: boolean;\n    italic?: boolean;\n    list?: boolean;\n    title?: boolean;\n  } & TText\n>) {\n  const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n  return (\n    <span\n      {...attributes}\n      className={cn(\n        bold && 'font-bold',\n        italic && 'italic',\n        title && 'mx-0 mt-5 mb-2.5 inline-block font-bold text-[20px]',\n        list && 'pl-2.5 text-[20px] leading-[10px]',\n        hr && 'block border-[#ddd] border-b-2 text-center',\n        blockquote &&\n          'inline-block border-[#ddd] border-l-2 pl-2.5 text-[#aaa] italic',\n        code && 'bg-[#eee] p-[3px] font-mono'\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport default function PreviewMdDemo() {\n  const editor = usePlateEditor(\n    {\n      plugins: [\n        ...BasicNodesKit,\n        createSlatePlugin({\n          key: 'preview-markdown',\n          decorate: decoratePreview,\n        }),\n      ],\n      value: previewMdValue,\n    },\n    []\n  );\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor renderLeaf={PreviewLeaf} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n

"},{"path":"values/preview-md-value.tsx","type":"registry:example","target":"components/preview-md-value.tsx","highlightedContent":"

"},{"path":"../components/editor/plugins/basic-nodes-kit.tsx","type":"registry:component","target":"components/editor/plugins/basic-nodes-kit.tsx","highlightedContent":"

"},{"path":"../components/editor/plugins/basic-blocks-kit.tsx","type":"registry:component","target":"components/editor/plugins/basic-blocks-kit.tsx","highlightedContent":"

"},{"path":"../components/editor/plugins/basic-blocks-base-kit.tsx","type":"registry:component","target":"components/editor/plugins/basic-blocks-base-kit.tsx","highlightedContent":"

"},{"path":"../ui/blockquote-node.tsx","type":"registry:ui","target":"components/ui/blockquote-node.tsx","highlightedContent":"

"},{"path":"../ui/blockquote-node-static.tsx","type":"registry:ui","target":"components/ui/blockquote-node-static.tsx","highlightedContent":"

"},{"path":"../ui/heading-node.tsx","type":"registry:ui","target":"components/ui/heading-node.tsx","highlightedContent":"

"},{"path":"../ui/heading-node-static.tsx","type":"registry:ui","target":"components/ui/heading-node-static.tsx","highlightedContent":"

"},{"path":"../ui/hr-node.tsx","type":"registry:ui","target":"components/ui/hr-node.tsx","highlightedContent":"

"},{"path":"../ui/hr-node-static.tsx","type":"registry:ui","target":"components/ui/hr-node-static.tsx","highlightedContent":"

"},{"path":"../ui/paragraph-node.tsx","type":"registry:ui","target":"components/ui/paragraph-node.tsx","highlightedContent":"

"},{"path":"../ui/paragraph-node-static.tsx","type":"registry:ui","target":"components/ui/paragraph-node-static.tsx","highlightedContent":"

"},{"path":"../components/editor/plugins/basic-marks-kit.tsx","type":"registry:component","target":"components/editor/plugins/basic-marks-kit.tsx","highlightedContent":"

"},{"path":"../components/editor/plugins/basic-marks-base-kit.tsx","type":"registry:component","target":"components/editor/plugins/basic-marks-base-kit.tsx","highlightedContent":"

"},{"path":"../ui/code-node.tsx","type":"registry:ui","target":"components/ui/code-node.tsx","highlightedContent":"

"},{"path":"../ui/code-node-static.tsx","type":"registry:ui","target":"components/ui/code-node-static.tsx","highlightedContent":"

"},{"path":"../ui/highlight-node.tsx","type":"registry:ui","target":"components/ui/highlight-node.tsx","highlightedContent":"

"},{"path":"../ui/highlight-node-static.tsx","type":"registry:ui","target":"components/ui/highlight-node-static.tsx","highlightedContent":"

"},{"path":"../ui/kbd-node.tsx","type":"registry:ui","target":"components/ui/kbd-node.tsx","highlightedContent":"

"},{"path":"../ui/kbd-node-static.tsx","type":"registry:ui","target":"components/ui/kbd-node-static.tsx","highlightedContent":"

"},{"path":"../ui/mark-toolbar-button.tsx","type":"registry:ui","target":"components/ui/mark-toolbar-button.tsx","highlightedContent":"

"},{"path":"../ui/toolbar.tsx","type":"registry:ui","target":"components/ui/toolbar.tsx","highlightedContent":"

"},{"path":"../ui/editor.tsx","type":"registry:ui","target":"components/ui/editor.tsx","highlightedContent":"

"},{"path":"../ui/editor-static.tsx","type":"registry:ui","target":"components/ui/editor-static.tsx","highlightedContent":"

"}]

预览Markdown