diff --git a/apps/www/public/r/styles/default/slate-to-html.json b/apps/www/public/r/styles/default/slate-to-html.json
index 6a96a478a5..c3e46024dc 100644
--- a/apps/www/public/r/styles/default/slate-to-html.json
+++ b/apps/www/public/r/styles/default/slate-to-html.json
@@ -2,7 +2,7 @@
   "description": "Slate to HTML",
   "files": [
     {
-      "content": "import React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { BaseAlignPlugin } from '@udecode/plate-alignment';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseSubscriptPlugin,\n  BaseSuperscriptPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { BaseCommentsPlugin } from '@udecode/plate-comments';\nimport {\n  type Value,\n  BaseParagraphPlugin,\n  SlateLeaf,\n  createSlateEditor,\n  serializeHtml,\n} from '@udecode/plate-common';\nimport { BaseDatePlugin } from '@udecode/plate-date';\nimport {\n  BaseFontBackgroundColorPlugin,\n  BaseFontColorPlugin,\n  BaseFontSizePlugin,\n} from '@udecode/plate-font';\nimport {\n  BaseHeadingPlugin,\n  BaseTocPlugin,\n  HEADING_KEYS,\n  HEADING_LEVELS,\n} from '@udecode/plate-heading';\nimport { BaseHighlightPlugin } from '@udecode/plate-highlight';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentPlugin } from '@udecode/plate-indent';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseKbdPlugin } from '@udecode/plate-kbd';\nimport { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';\nimport { BaseLineHeightPlugin } from '@udecode/plate-line-height';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport {\n  BaseAudioPlugin,\n  BaseFilePlugin,\n  BaseImagePlugin,\n  BaseMediaEmbedPlugin,\n  BaseVideoPlugin,\n} from '@udecode/plate-media';\nimport { BaseMentionPlugin } from '@udecode/plate-mention';\nimport {\n  BaseTableCellHeaderPlugin,\n  BaseTableCellPlugin,\n  BaseTablePlugin,\n  BaseTableRowPlugin,\n} from '@udecode/plate-table';\nimport { BaseTogglePlugin } from '@udecode/plate-toggle';\nimport Prism from 'prismjs';\n\nimport { H3 } from '@/components/typography';\nimport {\n  EditorClient,\n  ExportHtmlButton,\n  HtmlIframe,\n} from '@/components/editor/slate-to-html';\nimport { alignValue } from '@/components/values/align-value';\nimport { basicElementsValue } from '@/components/values/basic-elements-value';\nimport { basicMarksValue } from '@/components/values/basic-marks-value';\nimport { columnValue } from '@/components/values/column-value';\nimport { commentsValue } from '@/components/values/comments-value';\nimport { dateValue } from '@/components/values/date-value';\nimport { fontValue } from '@/components/values/font-value';\nimport { highlightValue } from '@/components/values/highlight-value';\nimport { horizontalRuleValue } from '@/components/values/horizontal-rule-value';\nimport { indentListValue } from '@/components/values/indent-list-value';\nimport { indentValue } from '@/components/values/indent-value';\nimport { kbdValue } from '@/components/values/kbd-value';\nimport { lineHeightValue } from '@/components/values/line-height-value';\nimport { linkValue } from '@/components/values/link-value';\nimport { todoListValue } from '@/components/values/list-value';\nimport { mediaValue } from '@/components/values/media-value';\nimport { mentionValue } from '@/components/values/mention-value';\nimport { tableValue } from '@/components/values/table-value';\nimport { tocPlaygroundValue } from '@/components/values/toc-value';\nimport { createHtmlDocument } from '@/lib/create-html-document';\nimport { BlockquoteElementStatic } from '@/components/plate-ui/blockquote-element-static';\nimport { CodeBlockElementStatic } from '@/components/plate-ui/code-block-element-static';\nimport { CodeLeafStatic } from '@/components/plate-ui/code-leaf-static';\nimport { CodeLineElementStatic } from '@/components/plate-ui/code-line-element-static';\nimport { CodeSyntaxLeafStatic } from '@/components/plate-ui/code-syntax-leaf-static';\nimport { ColumnElementStatic } from '@/components/plate-ui/column-element-static';\nimport { ColumnGroupElementStatic } from '@/components/plate-ui/column-group-element-static';\nimport { CommentLeafStatic } from '@/components/plate-ui/comment-leaf-static';\nimport { DateElementStatic } from '@/components/plate-ui/date-element-static';\nimport { EditorStatic } from '@/components/plate-ui/editor-static';\nimport { HeadingElementStatic } from '@/components/plate-ui/heading-element-static';\nimport { HighlightLeafStatic } from '@/components/plate-ui/highlight-leaf-static';\nimport { HrElementStatic } from '@/components/plate-ui/hr-element-static';\nimport { ImageElementStatic } from '@/components/plate-ui/image-element-static';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\nimport { KbdLeafStatic } from '@/components/plate-ui/kbd-leaf-static';\nimport { LinkElementStatic } from '@/components/plate-ui/link-element-static';\nimport { MediaAudioElementStatic } from '@/components/plate-ui/media-audio-element-static';\nimport { MediaFileElementStatic } from '@/components/plate-ui/media-file-element-static';\nimport { MediaVideoElementStatic } from '@/components/plate-ui/media-video-element-static';\nimport { MentionElementStatic } from '@/components/plate-ui/mention-element-static';\nimport { ParagraphElementStatic } from '@/components/plate-ui/paragraph-element-static';\nimport {\n  TableCellElementStatic,\n  TableCellHeaderStaticElement,\n} from '@/components/plate-ui/table-cell-element-static';\nimport { TableElementStatic } from '@/components/plate-ui/table-element-static';\nimport { TableRowElementStatic } from '@/components/plate-ui/table-row-element-static';\nimport { TocElementStatic } from '@/components/plate-ui/toc-element-static';\nimport { ToggleElementStatic } from '@/components/plate-ui/toggle-element-static';\n// const getCachedTailwindCss = React.cache(async () => {\n//   const cssPath = path.join(process.cwd(), 'public', 'tailwind.css');\n\n//   return await fs.readFile(cssPath, 'utf8');\n// });\n\n// const getCachedPrismCss = React.cache(async () => {\n//   const cssPath = path.join(process.cwd(), 'public', 'prism.css');\n\n//   return await fs.readFile(cssPath, 'utf8');\n// });\n\nexport default async function SlateToHtmlBlock() {\n  const components = {\n    [BaseAudioPlugin.key]: MediaAudioElementStatic,\n    [BaseBlockquotePlugin.key]: BlockquoteElementStatic,\n    [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),\n    [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,\n    [BaseCodeLinePlugin.key]: CodeLineElementStatic,\n    [BaseCodePlugin.key]: CodeLeafStatic,\n    [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,\n    [BaseColumnItemPlugin.key]: ColumnElementStatic,\n    [BaseColumnPlugin.key]: ColumnGroupElementStatic,\n    [BaseCommentsPlugin.key]: CommentLeafStatic,\n    [BaseDatePlugin.key]: DateElementStatic,\n    [BaseFilePlugin.key]: MediaFileElementStatic,\n    [BaseHighlightPlugin.key]: HighlightLeafStatic,\n    [BaseHorizontalRulePlugin.key]: HrElementStatic,\n    [BaseImagePlugin.key]: ImageElementStatic,\n    [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),\n    [BaseKbdPlugin.key]: KbdLeafStatic,\n    [BaseLinkPlugin.key]: LinkElementStatic,\n    // [BaseMediaEmbedPlugin.key]: MediaEmbedElementStatic,\n    [BaseMentionPlugin.key]: MentionElementStatic,\n    [BaseParagraphPlugin.key]: ParagraphElementStatic,\n    [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 'del' }),\n    [BaseSubscriptPlugin.key]: withProps(SlateLeaf, { as: 'sub' }),\n    [BaseSuperscriptPlugin.key]: withProps(SlateLeaf, { as: 'sup' }),\n    [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement,\n    [BaseTableCellPlugin.key]: TableCellElementStatic,\n    [BaseTablePlugin.key]: TableElementStatic,\n    [BaseTableRowPlugin.key]: TableRowElementStatic,\n    [BaseTocPlugin.key]: TocElementStatic,\n    [BaseTogglePlugin.key]: ToggleElementStatic,\n    [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),\n    [BaseVideoPlugin.key]: MediaVideoElementStatic,\n    [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),\n    [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),\n    [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),\n    [HEADING_KEYS.h4]: withProps(HeadingElementStatic, { variant: 'h4' }),\n    [HEADING_KEYS.h5]: withProps(HeadingElementStatic, { variant: 'h5' }),\n    [HEADING_KEYS.h6]: withProps(HeadingElementStatic, { variant: 'h6' }),\n  };\n\n  const createValue = (): Value => [\n    ...basicElementsValue,\n    ...basicMarksValue,\n    ...tocPlaygroundValue,\n    ...todoListValue,\n    ...linkValue,\n    ...horizontalRuleValue,\n    ...tableValue,\n    ...mediaValue,\n    ...columnValue,\n    ...mentionValue,\n    ...dateValue,\n    ...fontValue,\n    ...highlightValue,\n    ...kbdValue,\n    ...commentsValue,\n    ...alignValue,\n    ...lineHeightValue,\n    ...indentValue,\n    ...indentListValue,\n  ];\n\n  const editor = createSlateEditor({\n    plugins: [\n      BaseColumnPlugin,\n      BaseColumnItemPlugin,\n      BaseTocPlugin,\n      BaseVideoPlugin,\n      BaseAudioPlugin,\n      BaseParagraphPlugin,\n      BaseHeadingPlugin,\n      BaseMediaEmbedPlugin,\n      BaseBoldPlugin,\n      BaseCodePlugin,\n      BaseItalicPlugin,\n      BaseStrikethroughPlugin,\n      BaseSubscriptPlugin,\n      BaseSuperscriptPlugin,\n      BaseUnderlinePlugin,\n      BaseBlockquotePlugin,\n      BaseDatePlugin,\n      BaseCodeBlockPlugin.configure({\n        options: {\n          prism: Prism,\n        },\n      }),\n      BaseIndentPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            BaseBlockquotePlugin.key,\n            BaseCodeBlockPlugin.key,\n          ],\n        },\n      }),\n      BaseIndentListPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            ...HEADING_LEVELS,\n            BaseBlockquotePlugin.key,\n            BaseCodeBlockPlugin.key,\n            BaseTogglePlugin.key,\n          ],\n        },\n        options: {\n          listStyleTypes: {\n            fire: {\n              liComponent: FireLiComponent,\n              markerComponent: FireMarker,\n              type: 'fire',\n            },\n            todo: {\n              liComponent: TodoLiStatic,\n              markerComponent: TodoMarkerStatic,\n              type: 'todo',\n            },\n          },\n        },\n      }),\n      BaseLinkPlugin,\n      BaseTableRowPlugin,\n      BaseTablePlugin,\n      BaseTableCellPlugin,\n      BaseHorizontalRulePlugin,\n      BaseFontColorPlugin,\n      BaseFontBackgroundColorPlugin,\n      BaseFontSizePlugin,\n      BaseKbdPlugin,\n      BaseAlignPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            BaseMediaEmbedPlugin.key,\n            ...HEADING_LEVELS,\n            BaseImagePlugin.key,\n          ],\n        },\n      }),\n      BaseLineHeightPlugin,\n      BaseHighlightPlugin,\n      BaseFilePlugin,\n      BaseImagePlugin,\n      BaseMentionPlugin,\n      BaseCommentsPlugin,\n      BaseTogglePlugin,\n    ],\n    value: createValue(),\n  });\n\n  // const tailwindCss = await getCachedTailwindCss();\n  // const prismCss = await getCachedPrismCss();\n  // const cookieStore = await cookies();\n  // const theme = cookieStore.get('theme')?.value;\n  const theme = 'light';\n  const prismCss = '';\n  const tailwindCss = '';\n\n  // Get the editor content HTML using EditorStatic\n  const editorHtml = await serializeHtml(editor, {\n    components,\n    editorComponent: EditorStatic,\n    props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } },\n  });\n\n  // Create the full HTML document\n  const html = createHtmlDocument({\n    editorHtml,\n    prismCss,\n    tailwindCss,\n    theme,\n  });\n\n  return (\n    <div className=\"grid grid-cols-3 px-4\">\n      <div className=\"p-2\">\n        <H3>Editor</H3>\n        <EditorClient value={createValue()} />\n      </div>\n\n      <div className=\"p-2\">\n        <H3>EditorStatic</H3>\n        <EditorStatic components={components} editor={editor} />\n      </div>\n\n      <div className=\"p-2\">\n        <div className=\"flex items-end gap-2\">\n          <H3>HTML Iframe</H3>\n          <ExportHtmlButton html={html} serverTheme={theme} />\n        </div>\n        <HtmlIframe className=\"size-full\" html={html} serverTheme={theme} />\n      </div>\n    </div>\n  );\n}\n",
+      "content": "import React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { BaseAlignPlugin } from '@udecode/plate-alignment';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseSubscriptPlugin,\n  BaseSuperscriptPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { BaseCommentsPlugin } from '@udecode/plate-comments';\nimport {\n  type Value,\n  BaseParagraphPlugin,\n  SlateLeaf,\n  createSlateEditor,\n  serializeHtml,\n} from '@udecode/plate-common';\nimport { BaseDatePlugin } from '@udecode/plate-date';\nimport {\n  BaseFontBackgroundColorPlugin,\n  BaseFontColorPlugin,\n  BaseFontSizePlugin,\n} from '@udecode/plate-font';\nimport {\n  BaseHeadingPlugin,\n  BaseTocPlugin,\n  HEADING_KEYS,\n  HEADING_LEVELS,\n} from '@udecode/plate-heading';\nimport { BaseHighlightPlugin } from '@udecode/plate-highlight';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentPlugin } from '@udecode/plate-indent';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseKbdPlugin } from '@udecode/plate-kbd';\nimport { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';\nimport { BaseLineHeightPlugin } from '@udecode/plate-line-height';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport {\n  BaseAudioPlugin,\n  BaseFilePlugin,\n  BaseImagePlugin,\n  BaseMediaEmbedPlugin,\n  BaseVideoPlugin,\n} from '@udecode/plate-media';\nimport { BaseMentionPlugin } from '@udecode/plate-mention';\nimport {\n  BaseTableCellHeaderPlugin,\n  BaseTableCellPlugin,\n  BaseTablePlugin,\n  BaseTableRowPlugin,\n} from '@udecode/plate-table';\nimport { BaseTogglePlugin } from '@udecode/plate-toggle';\nimport { cookies } from 'next/headers';\nimport fs from 'node:fs/promises';\nimport path from 'node:path';\nimport Prism from 'prismjs';\n\nimport { H3 } from '@/components/typography';\nimport {\n  EditorClient,\n  ExportHtmlButton,\n  HtmlIframe,\n} from '@/components/editor/slate-to-html';\nimport { alignValue } from '@/components/values/align-value';\nimport { basicElementsValue } from '@/components/values/basic-elements-value';\nimport { basicMarksValue } from '@/components/values/basic-marks-value';\nimport { columnValue } from '@/components/values/column-value';\nimport { commentsValue } from '@/components/values/comments-value';\nimport { dateValue } from '@/components/values/date-value';\nimport { fontValue } from '@/components/values/font-value';\nimport { highlightValue } from '@/components/values/highlight-value';\nimport { horizontalRuleValue } from '@/components/values/horizontal-rule-value';\nimport { indentListValue } from '@/components/values/indent-list-value';\nimport { indentValue } from '@/components/values/indent-value';\nimport { kbdValue } from '@/components/values/kbd-value';\nimport { lineHeightValue } from '@/components/values/line-height-value';\nimport { linkValue } from '@/components/values/link-value';\nimport { todoListValue } from '@/components/values/list-value';\nimport { mediaValue } from '@/components/values/media-value';\nimport { mentionValue } from '@/components/values/mention-value';\nimport { tableValue } from '@/components/values/table-value';\nimport { tocPlaygroundValue } from '@/components/values/toc-value';\nimport { createHtmlDocument } from '@/lib/create-html-document';\nimport { BlockquoteElementStatic } from '@/components/plate-ui/blockquote-element-static';\nimport { CodeBlockElementStatic } from '@/components/plate-ui/code-block-element-static';\nimport { CodeLeafStatic } from '@/components/plate-ui/code-leaf-static';\nimport { CodeLineElementStatic } from '@/components/plate-ui/code-line-element-static';\nimport { CodeSyntaxLeafStatic } from '@/components/plate-ui/code-syntax-leaf-static';\nimport { ColumnElementStatic } from '@/components/plate-ui/column-element-static';\nimport { ColumnGroupElementStatic } from '@/components/plate-ui/column-group-element-static';\nimport { CommentLeafStatic } from '@/components/plate-ui/comment-leaf-static';\nimport { DateElementStatic } from '@/components/plate-ui/date-element-static';\nimport { EditorStatic } from '@/components/plate-ui/editor-static';\nimport { HeadingElementStatic } from '@/components/plate-ui/heading-element-static';\nimport { HighlightLeafStatic } from '@/components/plate-ui/highlight-leaf-static';\nimport { HrElementStatic } from '@/components/plate-ui/hr-element-static';\nimport { ImageElementStatic } from '@/components/plate-ui/image-element-static';\nimport {\n  FireLiComponent,\n  FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\nimport { KbdLeafStatic } from '@/components/plate-ui/kbd-leaf-static';\nimport { LinkElementStatic } from '@/components/plate-ui/link-element-static';\nimport { MediaAudioElementStatic } from '@/components/plate-ui/media-audio-element-static';\nimport { MediaFileElementStatic } from '@/components/plate-ui/media-file-element-static';\nimport { MediaVideoElementStatic } from '@/components/plate-ui/media-video-element-static';\nimport { MentionElementStatic } from '@/components/plate-ui/mention-element-static';\nimport { ParagraphElementStatic } from '@/components/plate-ui/paragraph-element-static';\nimport {\n  TableCellElementStatic,\n  TableCellHeaderStaticElement,\n} from '@/components/plate-ui/table-cell-element-static';\nimport { TableElementStatic } from '@/components/plate-ui/table-element-static';\nimport { TableRowElementStatic } from '@/components/plate-ui/table-row-element-static';\nimport { TocElementStatic } from '@/components/plate-ui/toc-element-static';\nimport { ToggleElementStatic } from '@/components/plate-ui/toggle-element-static';\nconst getCachedTailwindCss = React.cache(async () => {\n  const cssPath = path.join(process.cwd(), 'public', 'tailwind.css');\n\n  return await fs.readFile(cssPath, 'utf8');\n});\n\nconst getCachedPrismCss = React.cache(async () => {\n  const cssPath = path.join(process.cwd(), 'public', 'prism.css');\n\n  return await fs.readFile(cssPath, 'utf8');\n});\n\nexport default async function SlateToHtmlBlock() {\n  const components = {\n    [BaseAudioPlugin.key]: MediaAudioElementStatic,\n    [BaseBlockquotePlugin.key]: BlockquoteElementStatic,\n    [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),\n    [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,\n    [BaseCodeLinePlugin.key]: CodeLineElementStatic,\n    [BaseCodePlugin.key]: CodeLeafStatic,\n    [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,\n    [BaseColumnItemPlugin.key]: ColumnElementStatic,\n    [BaseColumnPlugin.key]: ColumnGroupElementStatic,\n    [BaseCommentsPlugin.key]: CommentLeafStatic,\n    [BaseDatePlugin.key]: DateElementStatic,\n    [BaseFilePlugin.key]: MediaFileElementStatic,\n    [BaseHighlightPlugin.key]: HighlightLeafStatic,\n    [BaseHorizontalRulePlugin.key]: HrElementStatic,\n    [BaseImagePlugin.key]: ImageElementStatic,\n    [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),\n    [BaseKbdPlugin.key]: KbdLeafStatic,\n    [BaseLinkPlugin.key]: LinkElementStatic,\n    // [BaseMediaEmbedPlugin.key]: MediaEmbedElementStatic,\n    [BaseMentionPlugin.key]: MentionElementStatic,\n    [BaseParagraphPlugin.key]: ParagraphElementStatic,\n    [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 'del' }),\n    [BaseSubscriptPlugin.key]: withProps(SlateLeaf, { as: 'sub' }),\n    [BaseSuperscriptPlugin.key]: withProps(SlateLeaf, { as: 'sup' }),\n    [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement,\n    [BaseTableCellPlugin.key]: TableCellElementStatic,\n    [BaseTablePlugin.key]: TableElementStatic,\n    [BaseTableRowPlugin.key]: TableRowElementStatic,\n    [BaseTocPlugin.key]: TocElementStatic,\n    [BaseTogglePlugin.key]: ToggleElementStatic,\n    [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),\n    [BaseVideoPlugin.key]: MediaVideoElementStatic,\n    [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),\n    [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),\n    [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),\n    [HEADING_KEYS.h4]: withProps(HeadingElementStatic, { variant: 'h4' }),\n    [HEADING_KEYS.h5]: withProps(HeadingElementStatic, { variant: 'h5' }),\n    [HEADING_KEYS.h6]: withProps(HeadingElementStatic, { variant: 'h6' }),\n  };\n\n  const createValue = (): Value => [\n    ...basicElementsValue,\n    ...basicMarksValue,\n    ...tocPlaygroundValue,\n    ...todoListValue,\n    ...linkValue,\n    ...horizontalRuleValue,\n    ...tableValue,\n    ...mediaValue,\n    ...columnValue,\n    ...mentionValue,\n    ...dateValue,\n    ...fontValue,\n    ...highlightValue,\n    ...kbdValue,\n    ...commentsValue,\n    ...alignValue,\n    ...lineHeightValue,\n    ...indentValue,\n    ...indentListValue,\n  ];\n\n  const editor = createSlateEditor({\n    plugins: [\n      BaseColumnPlugin,\n      BaseColumnItemPlugin,\n      BaseTocPlugin,\n      BaseVideoPlugin,\n      BaseAudioPlugin,\n      BaseParagraphPlugin,\n      BaseHeadingPlugin,\n      BaseMediaEmbedPlugin,\n      BaseBoldPlugin,\n      BaseCodePlugin,\n      BaseItalicPlugin,\n      BaseStrikethroughPlugin,\n      BaseSubscriptPlugin,\n      BaseSuperscriptPlugin,\n      BaseUnderlinePlugin,\n      BaseBlockquotePlugin,\n      BaseDatePlugin,\n      BaseCodeBlockPlugin.configure({\n        options: {\n          prism: Prism,\n        },\n      }),\n      BaseIndentPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            BaseBlockquotePlugin.key,\n            BaseCodeBlockPlugin.key,\n          ],\n        },\n      }),\n      BaseIndentListPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            ...HEADING_LEVELS,\n            BaseBlockquotePlugin.key,\n            BaseCodeBlockPlugin.key,\n            BaseTogglePlugin.key,\n          ],\n        },\n        options: {\n          listStyleTypes: {\n            fire: {\n              liComponent: FireLiComponent,\n              markerComponent: FireMarker,\n              type: 'fire',\n            },\n            todo: {\n              liComponent: TodoLiStatic,\n              markerComponent: TodoMarkerStatic,\n              type: 'todo',\n            },\n          },\n        },\n      }),\n      BaseLinkPlugin,\n      BaseTableRowPlugin,\n      BaseTablePlugin,\n      BaseTableCellPlugin,\n      BaseHorizontalRulePlugin,\n      BaseFontColorPlugin,\n      BaseFontBackgroundColorPlugin,\n      BaseFontSizePlugin,\n      BaseKbdPlugin,\n      BaseAlignPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            BaseMediaEmbedPlugin.key,\n            ...HEADING_LEVELS,\n            BaseImagePlugin.key,\n          ],\n        },\n      }),\n      BaseLineHeightPlugin,\n      BaseHighlightPlugin,\n      BaseFilePlugin,\n      BaseImagePlugin,\n      BaseMentionPlugin,\n      BaseCommentsPlugin,\n      BaseTogglePlugin,\n    ],\n    value: createValue(),\n  });\n\n  const tailwindCss = await getCachedTailwindCss();\n  const prismCss = await getCachedPrismCss();\n  const cookieStore = await cookies();\n  const theme = cookieStore.get('theme')?.value;\n\n  // Get the editor content HTML using EditorStatic\n  const editorHtml = await serializeHtml(editor, {\n    components,\n    editorComponent: EditorStatic,\n    props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } },\n  });\n\n  // Create the full HTML document\n  const html = createHtmlDocument({\n    editorHtml,\n    prismCss,\n    tailwindCss,\n    theme,\n  });\n\n  return (\n    <div className=\"grid grid-cols-3 px-4\">\n      <div className=\"p-2\">\n        <H3>Editor</H3>\n        <EditorClient value={createValue()} />\n      </div>\n\n      <div className=\"p-2\">\n        <H3>EditorStatic</H3>\n        <EditorStatic components={components} editor={editor} />\n      </div>\n\n      <div className=\"p-2\">\n        <div className=\"flex items-end gap-2\">\n          <H3>HTML Iframe</H3>\n          <ExportHtmlButton html={html} serverTheme={theme} />\n        </div>\n        <HtmlIframe className=\"size-full\" html={html} serverTheme={theme} />\n      </div>\n    </div>\n  );\n}\n",
       "path": "block/slate-to-html/page.tsx",
       "target": "app/html/page.tsx",
       "type": "registry:page"
diff --git a/apps/www/src/__registry__/default/block/slate-to-html/page.tsx b/apps/www/src/__registry__/default/block/slate-to-html/page.tsx
index 5ced973ccd..1ea574926e 100644
--- a/apps/www/src/__registry__/default/block/slate-to-html/page.tsx
+++ b/apps/www/src/__registry__/default/block/slate-to-html/page.tsx
@@ -60,6 +60,9 @@ import {
   BaseTableRowPlugin,
 } from '@udecode/plate-table';
 import { BaseTogglePlugin } from '@udecode/plate-toggle';
+import { cookies } from 'next/headers';
+import fs from 'node:fs/promises';
+import path from 'node:path';
 import Prism from 'prismjs';
 
 import { H3 } from '@/components/typography';
@@ -132,17 +135,17 @@ export const iframeHeight = '800px';
 
 export const containerClassName = 'w-full h-full';
 
-// const getCachedTailwindCss = React.cache(async () => {
-//   const cssPath = path.join(process.cwd(), 'public', 'tailwind.css');
+const getCachedTailwindCss = React.cache(async () => {
+  const cssPath = path.join(process.cwd(), 'public', 'tailwind.css');
 
-//   return await fs.readFile(cssPath, 'utf8');
-// });
+  return await fs.readFile(cssPath, 'utf8');
+});
 
-// const getCachedPrismCss = React.cache(async () => {
-//   const cssPath = path.join(process.cwd(), 'public', 'prism.css');
+const getCachedPrismCss = React.cache(async () => {
+  const cssPath = path.join(process.cwd(), 'public', 'prism.css');
 
-//   return await fs.readFile(cssPath, 'utf8');
-// });
+  return await fs.readFile(cssPath, 'utf8');
+});
 
 export default async function SlateToHtmlBlock() {
   const components = {
@@ -296,13 +299,10 @@ export default async function SlateToHtmlBlock() {
     value: createValue(),
   });
 
-  // const tailwindCss = await getCachedTailwindCss();
-  // const prismCss = await getCachedPrismCss();
-  // const cookieStore = await cookies();
-  // const theme = cookieStore.get('theme')?.value;
-  const theme = 'light';
-  const prismCss = '';
-  const tailwindCss = '';
+  const tailwindCss = await getCachedTailwindCss();
+  const prismCss = await getCachedPrismCss();
+  const cookieStore = await cookies();
+  const theme = cookieStore.get('theme')?.value;
 
   // Get the editor content HTML using EditorStatic
   const editorHtml = await serializeHtml(editor, {