4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T102c,import * as React from 'react'; import { cva } from 'class-variance-authority'; import fs from 'node:fs/promises'; import path from 'node:path'; import { type Value, normalizeStaticValue } from 'platejs'; import { createStaticEditor, serializeHtml } from 'platejs/static'; import { BaseEditorKit } from '@/registry/components/editor/editor-base-kit'; import { EditorClient, EditorViewClient, ExportHtmlButton, HtmlIframe, } from '@/registry/components/editor/slate-to-html'; import { alignValue } from '@/registry/examples/values/align-value'; import { basicBlocksValue } from '@/registry/examples/values/basic-blocks-value'; import { basicMarksValue } from '@/registry/examples/values/basic-marks-value'; import { columnValue } from '@/registry/examples/values/column-value'; import { dateValue } from '@/registry/examples/values/date-value'; import { discussionValue } from '@/registry/examples/values/discussion-value'; import { equationValue } from '@/registry/examples/values/equation-value'; import { fontValue } from '@/registry/examples/values/font-value'; import { indentValue } from '@/registry/examples/values/indent-value'; import { lineHeightValue } from '@/registry/examples/values/line-height-value'; import { linkValue } from '@/registry/examples/values/link-value'; import { listValue } from '@/registry/examples/values/list-value'; import { mediaValue } from '@/registry/examples/values/media-value'; import { mentionValue } from '@/registry/examples/values/mention-value'; import { tableValue } from '@/registry/examples/values/table-value'; import { tocPlaygroundValue } from '@/registry/examples/values/toc-value'; import { createHtmlDocument } from '@/registry/lib/create-html-document'; import { EditorStatic } from '@/registry/ui/editor-static'; const getCachedTailwindCss = React.cache(async () => { const cssPath = path.join(process.cwd(), 'public', 'tailwind.css'); return await fs.readFile(cssPath, 'utf8'); }); export default async function SlateToHtmlBlock() { const createValue = (): Value => normalizeStaticValue([ ...basicBlocksValue, ...basicMarksValue, ...tocPlaygroundValue, ...linkValue, ...tableValue, ...equationValue, ...columnValue, ...mentionValue, ...dateValue, ...fontValue, ...discussionValue, ...alignValue, ...lineHeightValue, ...indentValue, ...listValue, ...mediaValue, ]); const editor = createStaticEditor({ plugins: BaseEditorKit, value: createValue(), }); const tailwindCss = await getCachedTailwindCss(); const katexCDN = ``; // const cookieStore = await cookies(); // const theme = cookieStore.get('theme')?.value; const theme = 'light'; // Get the editor content HTML using EditorStatic const editorHtml = await serializeHtml(editor, { editorComponent: EditorStatic, props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } }, }); // Create the full HTML document const html = createHtmlDocument({ editorHtml, katexCDN, tailwindCss, theme, }); return (

Editor

EditorView

HTML Iframe

); } const headingVariants = cva( 'group mt-8 scroll-m-20 font-heading font-semibold text-xl tracking-tight' ); 52:Ta9d,'use client'; import * as React from 'react'; import { useTheme } from 'next-themes'; import { Plate, usePlateEditor, usePlateViewEditor } from 'platejs/react'; import { Button } from '@/components/ui/button'; import { EditorKit } from '@/registry/components/editor/editor-kit'; import { Editor, EditorView } from '@/registry/ui/editor'; import { BaseEditorKit } from './editor-base-kit'; function useThemedHtml(html: string, serverTheme?: string) { const { resolvedTheme } = useTheme(); return React.useMemo(() => { if (typeof window === 'undefined') return html; // Only parse and update if theme differs from server if (serverTheme === resolvedTheme) return html; const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const htmlElement = doc.documentElement; if (resolvedTheme === 'dark') { htmlElement.classList.add('dark'); } else { htmlElement.classList.remove('dark'); } return doc.documentElement.outerHTML; }, [html, resolvedTheme, serverTheme]); } export function ExportHtmlButton({ className, html, serverTheme, }: { html: string; className?: string; serverTheme?: string; }) { const themedHtml = useThemedHtml(html, serverTheme); const [url, setUrl] = React.useState(); React.useEffect(() => { const blob = new Blob([themedHtml], { type: 'text/html' }); const blobUrl = URL.createObjectURL(blob); // eslint-disable-next-line react-hooks/set-state-in-effect -- Track browser object URL lifecycle for the generated export blob. setUrl(blobUrl); return () => { URL.revokeObjectURL(blobUrl); }; }, [themedHtml]); return ( ); } export function HtmlIframe({ html, serverTheme, ...props }: { html: string; serverTheme?: string; } & React.ComponentProps<'iframe'>) { const content = useThemedHtml(html, serverTheme); return