From 492a29e5ed443f8012471a16e305a80e5842ee04 Mon Sep 17 00:00:00 2001 From: felixfeng33 Date: Thu, 19 Dec 2024 10:50:02 +0000 Subject: [PATCH] docs --- .../r/styles/default/slate-to-html.json | 2 +- .../default/block/slate-to-html/page.tsx | 30 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) 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
\n
\n

Editor

\n \n
\n\n
\n

EditorStatic

\n \n
\n\n
\n
\n

HTML Iframe

\n \n
\n \n
\n
\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
\n
\n

Editor

\n \n
\n\n
\n

EditorStatic

\n \n
\n\n
\n
\n

HTML Iframe

\n \n
\n \n
\n
\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, {