{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"markdown-editor","type":"registry:ui","title":"MarkdownEditor","description":"Markdown editor + live preview.","package":"fancy-code","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["code-editor","engine"],"files":[{"path":"components\/fancy\/markdown-editor\/MarkdownEditor.tsx","content":"import { cn, useControllableState } from \"@particle-academy\/react-fancy\";\r\nimport { CodeEditor } from \"..\/CodeEditor\";\r\nimport { renderMarkdown } from \"..\/..\/engine\/markdown-render\";\r\n\r\nexport type MarkdownEditorMode = \"split\" | \"edit\" | \"preview\";\r\n\r\nexport interface MarkdownEditorProps {\r\n  \/** Controlled markdown value. *\/\r\n  value?: string;\r\n  \/** Initial value (uncontrolled). *\/\r\n  defaultValue?: string;\r\n  \/** Called with the new markdown whenever the document changes. *\/\r\n  onValueChange?: (markdown: string) => void;\r\n  \/**\r\n   * Layout: `split` (editor + live preview side by side), `edit` (editor only),\r\n   * or `preview` (rendered only). Default `split`.\r\n   *\/\r\n  mode?: MarkdownEditorMode;\r\n  \/** Editor theme \u2014 `\"light\" | \"dark\" | \"auto\"` or a registered name. Default `auto`. *\/\r\n  theme?: string;\r\n  \/** Prevent editing. *\/\r\n  readOnly?: boolean;\r\n  \/** Show line numbers in the editor (default false \u2014 prose reads better without). *\/\r\n  lineNumbers?: boolean;\r\n  \/** Wrap long lines in the editor (default true for prose). *\/\r\n  wordWrap?: boolean;\r\n  \/** Placeholder shown when empty. *\/\r\n  placeholder?: string;\r\n  \/** Editor height bounds (px). *\/\r\n  minHeight?: number;\r\n  maxHeight?: number;\r\n  className?: string;\r\n  \/**\r\n   * Swap the markdown \u2192 HTML renderer used by the preview pane (e.g. a full\r\n   * CommonMark library). Defaults to the built-in lightweight renderer.\r\n   *\/\r\n  renderPreview?: (markdown: string) => string;\r\n}\r\n\r\n\/**\r\n * A markdown-aware editor: a syntax-highlighted `CodeEditor` (the registered\r\n * `markdown` language) with an optional live preview pane. Controlled via\r\n * `value` + `onValueChange`. The preview renders with a small built-in\r\n * dependency-free renderer; pass `renderPreview` to use your own.\r\n *\r\n * ```tsx\r\n * <MarkdownEditor value={md} onValueChange={setMd} mode=\"split\" minHeight={240} \/>\r\n * ```\r\n *\/\r\nexport function MarkdownEditor({\r\n  value,\r\n  defaultValue = \"\",\r\n  onValueChange,\r\n  mode = \"split\",\r\n  theme = \"auto\",\r\n  readOnly = false,\r\n  lineNumbers = false,\r\n  wordWrap = true,\r\n  placeholder,\r\n  minHeight,\r\n  maxHeight,\r\n  className,\r\n  renderPreview = renderMarkdown,\r\n}: MarkdownEditorProps) {\r\n  const [content, setContent] = useControllableState(value, defaultValue, onValueChange);\r\n\r\n  const showEditor = mode !== \"preview\";\r\n  const showPreview = mode !== \"edit\";\r\n\r\n  return (\r\n    <div\r\n      data-fancy-markdown-editor=\"\"\r\n      data-mode={mode}\r\n      className={cn(\"fancy-md-editor\", className)}\r\n    >\r\n      {showEditor && (\r\n        <div className=\"fancy-md-editor-pane\">\r\n          <CodeEditor\r\n            value={content}\r\n            onChange={setContent}\r\n            language=\"markdown\"\r\n            theme={theme}\r\n            readOnly={readOnly}\r\n            lineNumbers={lineNumbers}\r\n            wordWrap={wordWrap}\r\n            placeholder={placeholder}\r\n            minHeight={minHeight}\r\n            maxHeight={maxHeight}\r\n          >\r\n            <CodeEditor.Panel \/>\r\n          <\/CodeEditor>\r\n        <\/div>\r\n      )}\r\n      {showPreview && (\r\n        <div\r\n          data-fancy-markdown-preview=\"\"\r\n          className=\"fancy-md-preview\"\r\n          dangerouslySetInnerHTML={{ __html: renderPreview(content) }}\r\n        \/>\r\n      )}\r\n    <\/div>\r\n  );\r\n}\r\n\r\nMarkdownEditor.displayName = \"MarkdownEditor\";\r\n","type":"registry:ui","target":"components\/fancy\/markdown-editor\/MarkdownEditor.tsx"},{"path":"components\/fancy\/markdown-editor\/index.ts","content":"export { MarkdownEditor } from \".\/MarkdownEditor\";\r\nexport type { MarkdownEditorProps, MarkdownEditorMode } from \".\/MarkdownEditor\";\r\n","type":"registry:ui","target":"components\/fancy\/markdown-editor\/index.ts"}]}