{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "markdown-to-slate-demo",
  "dependencies": [
    "remark-emoji"
  ],
  "registryDependencies": [
    "https://platejs.org/r/editor-kit.json",
    "https://platejs.org/r/use-debounce.json"
  ],
  "files": [
    {
      "path": "src/registry/examples/markdown-to-slate-demo.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { MarkdownPlugin, remarkMdx, remarkMention } from '@platejs/markdown';\nimport { Plate, usePlateEditor } from 'platejs/react';\nimport remarkEmoji from 'remark-emoji';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\n\nimport { EditorKit } from '@/registry/components/editor/editor-kit';\nimport { useDebounce } from '@/registry/hooks/use-debounce';\nimport { Editor, EditorContainer } from '@/registry/ui/editor';\n\nconst initialMarkdown = `## Basic Markdown\n\n> The following node and marks is supported by the Markdown standard.\n\nFormat text with **bold**, _italic_, _**combined styles**_, ~~strikethrough~~, \\`code\\` formatting, and [hyperlinks](https://en.wikipedia.org/wiki/Hypertext).\n\n\\`\\`\\`javascript\n// Use code blocks to showcase code snippets\nfunction greet() {\n  console.info(\"Hello World!\")\n}\n\\`\\`\\`\n\n- Simple lists for organizing content\n\n1. Numbered lists for sequential steps\n\n| **Plugin**  | **Element** | **Inline** | **Void** |\n| ----------- | ----------- | ---------- | -------- |\n| **Heading** |             |            | No       |\n| **Image**   | Yes         | No         | Yes      |\n| **Mention** | Yes         | Yes        | Yes      |\n\n![](https://images.unsplash.com/photo-1712688930249-98e1963af7bd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)\n\n- [x] Completed tasks\n\n- [ ] Pending tasks\n\nGFM footnotes round-trip too.[^1]\n\n[^1]: Footnote definitions deserialize to dedicated footnote nodes.\n\n---\n\n## Advanced Features\n\n<callout>\nThe following node and marks are not supported in Markdown but can be serialized and deserialized using MDX or specialized UnifiedJS plugins.\n</callout>\n\nAdvanced marks: <kbd>⌘ + B</kbd>,<u>underlined</u>, <mark>highlighted</mark> text, <span style=\"color: #93C47D;\">colored text</span> and <span style=\"background-color: #6C9EEB;\">background highlights</span> for visual emphasis.\n\nSuperscript like E=mc<sup>2</sup> and subscript like H<sub>2</sub>O demonstrate mathematical and chemical notation capabilities.\n\nAdd mentions like [Aayla Sxecura](mention:mention_id) 12312\n\n\n, dates (<date>2025-05-08</date>), and math formulas ($E=mc^2$).\n\nThe table of contents feature automatically generates document structure for easy navigation.\n\n<toc />\n\nMath formula support makes displaying complex mathematical expressions simple.\n\n$$\n\\\\frac{-b \\\\pm \\\\sqrt{b^2 - 4ac}}{2a}\n$$\n\nMulti-column layout features enable richer page designs and content layouts.\n\n<column_group layout=\"[50,50]\">\n<column width=\"50%\">\nleft\n</column>\n\n  <column width=\"50%\">\n    right\n  </column>\n</column_group>\n\nPDF embedding makes document referencing simple and intuitive.\n<file name=\"sample.pdf\" align=\"center\" src=\"https://s26.q4cdn.com/900411403/files/doc_downloads/test.pdf\" width=\"80%\" isUpload=\"true\" />\n\nAudio players can be embedded directly into documents, supporting online audio resources.\n<audio align=\"center\" src=\"https://samplelib.com/lib/preview/mp3/sample-3s.mp3\" width=\"80%\" />\n\nVideo playback features support embedding various online video resources, enriching document content.\n<video align=\"center\" src=\"https://videos.pexels.com/video-files/6769791/6769791-uhd_2560_1440_24fps.mp4\" width=\"80%\" isUpload=\"true\" />\n\n:smile: :heart:\n`;\n\nexport default function MarkdownDemo() {\n  const [markdownValue, setMarkdownValue] = React.useState(initialMarkdown);\n  const debouncedMarkdownValue = useDebounce(markdownValue, 300);\n\n  const markdownEditor = usePlateEditor({\n    plugins: [],\n    value: [{ children: [{ text: markdownValue }], type: 'p' }],\n  });\n\n  const editor = usePlateEditor(\n    {\n      plugins: EditorKit,\n      value: (editor) =>\n        editor.getApi(MarkdownPlugin).markdown.deserialize(initialMarkdown, {\n          remarkPlugins: [\n            remarkMath,\n            remarkGfm,\n            remarkMdx,\n            remarkMention,\n            remarkEmoji as any,\n          ],\n        }),\n    },\n    []\n  );\n\n  React.useEffect(() => {\n    if (debouncedMarkdownValue !== initialMarkdown) {\n      editor.tf.reset();\n      editor.tf.setValue(\n        editor.api.markdown.deserialize(debouncedMarkdownValue, {\n          remarkPlugins: [\n            remarkMath,\n            remarkGfm,\n            remarkMdx,\n            remarkMention,\n            remarkEmoji as any,\n          ],\n        })\n      );\n    }\n  }, [debouncedMarkdownValue, editor]);\n\n  return (\n    <div className=\"grid h-full grid-cols-2 overflow-y-auto\">\n      <Plate\n        onValueChange={() => {\n          const value = markdownEditor.children\n            .map((node: any) => markdownEditor.api.string(node))\n            .join('\\n');\n          setMarkdownValue(value);\n        }}\n        editor={markdownEditor}\n      >\n        <EditorContainer>\n          <Editor\n            variant=\"none\"\n            className=\"bg-muted/50 p-2 font-mono text-sm\"\n          />\n        </EditorContainer>\n      </Plate>\n\n      <Plate editor={editor}>\n        <EditorContainer>\n          <Editor variant=\"none\" className=\"px-4 py-2\" />\n        </EditorContainer>\n      </Plate>\n    </div>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}