docs

apps/www/public/r/styles/default/slate-to-html.json

@@ -8,7 +8,7 @@
       "type": "registry:page"
     },
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { serializeHtml } from '@udecode/plate-core';\nimport { Plate } from '@udecode/plate-core/react';\nimport { useTheme } from 'next-themes';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport {\n  editorComponents,\n  useCreateEditor,\n} from '@/components/editor/use-create-editor';\nimport { Button } from '@/components/plate-ui/button';\nimport { Editor } from '@/components/plate-ui/editor';\n\nfunction useThemedHtml(html: string, serverTheme?: string) {\n  const { resolvedTheme } = useTheme();\n\n  const getThemedHtml = React.useCallback(() => {\n    if (typeof window === 'undefined') return html;\n    // Only parse and update if theme differs from server\n    if (serverTheme === resolvedTheme) return html;\n\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(html, 'text/html');\n    const htmlElement = doc.documentElement;\n\n    if (resolvedTheme === 'dark') {\n      htmlElement.classList.add('dark');\n    } else {\n      htmlElement.classList.remove('dark');\n    }\n\n    return doc.documentElement.outerHTML;\n  }, [html, resolvedTheme, serverTheme]);\n\n  return { getThemedHtml };\n}\n\nexport function ExportHtmlButton({\n  html,\n  serverTheme,\n}: {\n  html: string;\n  serverTheme?: string;\n}) {\n  const { getThemedHtml } = useThemedHtml(html, serverTheme);\n  const [url, setUrl] = React.useState<string>();\n\n  React.useEffect(() => {\n    const updatedHtml = getThemedHtml();\n    const blob = new Blob([updatedHtml], { type: 'text/html' });\n    const blobUrl = URL.createObjectURL(blob);\n    setUrl(blobUrl);\n\n    return () => {\n      URL.revokeObjectURL(blobUrl);\n    };\n  }, [getThemedHtml]);\n\n  return (\n    <a\n      download=\"export-plate.html\"\n      href={url}\n      rel=\"noopener noreferrer\"\n      role=\"button\"\n    >\n      <Button>Export HTML</Button>\n    </a>\n  );\n}\n\nexport function HtmlIframe({\n  html,\n  serverTheme,\n  ...props\n}: {\n  html: string;\n  serverTheme?: string;\n} & React.ComponentProps<'iframe'>) {\n  const { getThemedHtml } = useThemedHtml(html, serverTheme);\n  const [content, setContent] = React.useState(html);\n\n  React.useEffect(() => {\n    setContent(getThemedHtml());\n  }, [getThemedHtml]);\n\n  return <iframe title=\"Preview\" srcDoc={content} {...props} />;\n}\n\nexport function EditorClient({ value }: { value: any }) {\n  const editor = useCreateEditor({\n    plugins: editorPlugins.filter(\n      (p) => !['fixed-toolbar', 'floating-toolbar'].includes(p.key)\n    ),\n    value,\n  });\n\n  React.useEffect(() => {\n    void (async () => {\n      const html = await serializeHtml(editor, {\n        components: editorComponents,\n        editorComponent: Editor,\n        // props: { variant: 'none' },\n      });\n      console.log(1, html);\n    })();\n  }, [editor]);\n\n  return (\n    <Plate readOnly editor={editor}>\n      <Editor variant=\"none\" />\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { Plate } from '@udecode/plate-core/react';\nimport { useTheme } from 'next-themes';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Button } from '@/components/plate-ui/button';\nimport { Editor } from '@/components/plate-ui/editor';\n\nfunction useThemedHtml(html: string, serverTheme?: string) {\n  const { resolvedTheme } = useTheme();\n\n  const getThemedHtml = React.useCallback(() => {\n    if (typeof window === 'undefined') return html;\n    // Only parse and update if theme differs from server\n    if (serverTheme === resolvedTheme) return html;\n\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(html, 'text/html');\n    const htmlElement = doc.documentElement;\n\n    if (resolvedTheme === 'dark') {\n      htmlElement.classList.add('dark');\n    } else {\n      htmlElement.classList.remove('dark');\n    }\n\n    return doc.documentElement.outerHTML;\n  }, [html, resolvedTheme, serverTheme]);\n\n  return { getThemedHtml };\n}\n\nexport function ExportHtmlButton({\n  html,\n  serverTheme,\n}: {\n  html: string;\n  serverTheme?: string;\n}) {\n  const { getThemedHtml } = useThemedHtml(html, serverTheme);\n  const [url, setUrl] = React.useState<string>();\n\n  React.useEffect(() => {\n    const updatedHtml = getThemedHtml();\n    const blob = new Blob([updatedHtml], { type: 'text/html' });\n    const blobUrl = URL.createObjectURL(blob);\n    setUrl(blobUrl);\n\n    return () => {\n      URL.revokeObjectURL(blobUrl);\n    };\n  }, [getThemedHtml]);\n\n  return (\n    <a\n      download=\"export-plate.html\"\n      href={url}\n      rel=\"noopener noreferrer\"\n      role=\"button\"\n    >\n      <Button>Export HTML</Button>\n    </a>\n  );\n}\n\nexport function HtmlIframe({\n  html,\n  serverTheme,\n  ...props\n}: {\n  html: string;\n  serverTheme?: string;\n} & React.ComponentProps<'iframe'>) {\n  const { getThemedHtml } = useThemedHtml(html, serverTheme);\n  const [content, setContent] = React.useState(html);\n\n  React.useEffect(() => {\n    setContent(getThemedHtml());\n  }, [getThemedHtml]);\n\n  return <iframe title=\"Preview\" srcDoc={content} {...props} />;\n}\n\nexport function EditorClient({ value }: { value: any }) {\n  const editor = useCreateEditor({\n    plugins: editorPlugins.filter(\n      (p) => !['fixed-toolbar', 'floating-toolbar'].includes(p.key)\n    ),\n    value,\n  });\n\n  return (\n    <Plate readOnly editor={editor}>\n      <Editor variant=\"none\" />\n    </Plate>\n  );\n}\n",
       "path": "block/slate-to-html/slate-to-html-client.tsx",
       "target": "app/html/slate-to-html-client.tsx",
       "type": "registry:component"