export

apps/www/content/docs/examples/export.mdx

@@ -0,0 +1,58 @@
+---
+title: Export
+---
+
+<ComponentPreview name="playground-demo" id="basic-elements" />
+
+<PackageInfo>
+
+## Features
+
+- Export editor content to:
+- Client-side export with no server dependencies
+
+</PackageInfo>
+
+## Usage
+
+Install the [PDF Toolbar Button](/docs/plate-ui/pdf-toolbar-button) component.
+
+Note: When using Tailwind CSS, you may encounter background color issues. Please refer to [this link](https://github.com/niklasvh/html2canvas/issues/2775#issuecomment-1204988157) for a solution.
+
+Add the following CSS to fix background color rendering issues with html2canvas:
+```css
+@layer base {
+  img {
+    @apply inline-block;
+  }
+}
+```
+
+## Examples
+
+### Plate UI
+
+Refer to the preview above.
+
+### Plate Plus
+
+- Server-side PDF export:
+  - High-quality PDF generation
+  - Custom fonts and styling
+  - Headers and footers
+  - Page numbers
+  - Font selectable
+- Advanced export options:
+  - Paper size selection
+  - Margin controls
+  - Orientation settings
+  - Compression level
+- Enterprise-ready features:
+  {/* - Batch processing */}
+  {/* - Watermarking */}
+  - Custom templates
+  - Password protection
+
+Try it out with our server-side PDF export:
+
+<ComponentPreviewPro name="export-demo" />

apps/www/package.json

@@ -139,13 +139,15 @@
     "contentlayer2": "^0.4.6",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.5.4",
+    "html2canvas": "^1.4.1",
     "lodash.template": "^4.5.0",
     "lucide-react": "0.460.0",
     "match-sorter": "6.3.4",
     "next": "15.0.0",
     "next-contentlayer2": "^0.4.6",
     "next-themes": "^0.3.0",
     "nuqs": "^2.0.3",
+    "pdf-lib": "^1.17.1",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",

apps/www/public/r/styles/default/editor-ai.json

@@ -38,7 +38,7 @@
       "type": "registry:component"
     },
     {
-      "content": "import { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n  CodeBlockPlugin,\n  CodeLinePlugin,\n  CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  PlateLeaf,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n  MentionInputPlugin,\n  MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n  TableCellHeaderPlugin,\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { ColumnElement } from '@/components/plate-ui/column-element';\nimport { ColumnGroupElement } from '@/components/plate-ui/column-group-element';\nimport { CommentLeaf } from '@/components/plate-ui/comment-leaf';\nimport { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-element';\nimport { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HighlightLeaf } from '@/components/plate-ui/highlight-leaf';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { ImageElement } from '@/components/plate-ui/image-element';\nimport { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MentionElement } from '@/components/plate-ui/mention-element';\nimport { MentionInputElement } from '@/components/plate-ui/mention-input-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\nimport { withPlaceholders } from '@/components/plate-ui/placeholder';\nimport { SlashInputElement } from '@/components/plate-ui/slash-input-element';\nimport {\n  TableCellElement,\n  TableCellHeaderElement,\n} from '@/components/plate-ui/table-cell-element';\nimport { TableElement } from '@/components/plate-ui/table-element';\nimport { TableRowElement } from '@/components/plate-ui/table-row-element';\nimport { TocElement } from '@/components/plate-ui/toc-element';\nimport { ToggleElement } from '@/components/plate-ui/toggle-element';\nimport { withDraggables } from '@/components/plate-ui/with-draggables';\n\nexport const useCreateEditor = () => {\n  return usePlateEditor({\n    override: {\n      components: withDraggables(\n        withPlaceholders({\n          [AIPlugin.key]: AILeaf,\n          [BlockquotePlugin.key]: BlockquoteElement,\n          [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n          [CodeBlockPlugin.key]: CodeBlockElement,\n          [CodeLinePlugin.key]: CodeLineElement,\n          [CodePlugin.key]: CodeLeaf,\n          [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n          [ColumnItemPlugin.key]: ColumnElement,\n          [ColumnPlugin.key]: ColumnGroupElement,\n          [CommentsPlugin.key]: CommentLeaf,\n          [DatePlugin.key]: DateElement,\n          [EmojiInputPlugin.key]: EmojiInputElement,\n          [ExcalidrawPlugin.key]: ExcalidrawElement,\n          [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n          [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n          [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n          [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }),\n          [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }),\n          [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }),\n          [HighlightPlugin.key]: HighlightLeaf,\n          [HorizontalRulePlugin.key]: HrElement,\n          [ImagePlugin.key]: ImageElement,\n          [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n          [KbdPlugin.key]: KbdLeaf,\n          [LinkPlugin.key]: LinkElement,\n          [MediaEmbedPlugin.key]: MediaEmbedElement,\n          [MentionInputPlugin.key]: MentionInputElement,\n          [MentionPlugin.key]: MentionElement,\n          [ParagraphPlugin.key]: ParagraphElement,\n          [SlashInputPlugin.key]: SlashInputElement,\n          [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n          [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),\n          [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }),\n          [TableCellHeaderPlugin.key]: TableCellHeaderElement,\n          [TableCellPlugin.key]: TableCellElement,\n          [TablePlugin.key]: TableElement,\n          [TableRowPlugin.key]: TableRowElement,\n          [TocPlugin.key]: TocElement,\n          [TogglePlugin.key]: ToggleElement,\n          [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n        })\n      ),\n    },\n    plugins: [\n      ...copilotPlugins,\n      ...editorPlugins,\n      FixedToolbarPlugin,\n      FloatingToolbarPlugin,\n    ],\n    value: [\n      {\n        children: [{ text: 'Playground' }],\n        type: 'h1',\n      },\n      {\n        children: [\n          { text: 'A rich-text editor with AI capabilities. Try the ' },\n          { bold: true, text: 'AI commands' },\n          { text: ' or use ' },\n          { kbd: true, text: 'Cmd+J' },\n          { text: ' to open the AI menu.' },\n        ],\n        type: ParagraphPlugin.key,\n      },\n    ],\n  });\n};\n",
+      "content": "import { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n  CodeBlockPlugin,\n  CodeLinePlugin,\n  CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  ParagraphPlugin,\n  PlateLeaf,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n  MentionInputPlugin,\n  MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n  TableCellHeaderPlugin,\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { ColumnElement } from '@/components/plate-ui/column-element';\nimport { ColumnGroupElement } from '@/components/plate-ui/column-group-element';\nimport { CommentLeaf } from '@/components/plate-ui/comment-leaf';\nimport { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-element';\nimport { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HighlightLeaf } from '@/components/plate-ui/highlight-leaf';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { ImageElement } from '@/components/plate-ui/image-element';\nimport { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MentionElement } from '@/components/plate-ui/mention-element';\nimport { MentionInputElement } from '@/components/plate-ui/mention-input-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\nimport { withPlaceholders } from '@/components/plate-ui/placeholder';\nimport { SlashInputElement } from '@/components/plate-ui/slash-input-element';\nimport {\n  TableCellElement,\n  TableCellHeaderElement,\n} from '@/components/plate-ui/table-cell-element';\nimport { TableElement } from '@/components/plate-ui/table-element';\nimport { TableRowElement } from '@/components/plate-ui/table-row-element';\nimport { TocElement } from '@/components/plate-ui/toc-element';\nimport { ToggleElement } from '@/components/plate-ui/toggle-element';\nimport { withDraggables } from '@/components/plate-ui/with-draggables';\nimport { usePlaygroundValue } from '@/registry/default/example/playground-demo';\n\nexport const useCreateEditor = () => {\n  const value = usePlaygroundValue();\n\n  return usePlateEditor({\n    override: {\n      components: withDraggables(\n        withPlaceholders({\n          [AIPlugin.key]: AILeaf,\n          [BlockquotePlugin.key]: BlockquoteElement,\n          [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n          [CodeBlockPlugin.key]: CodeBlockElement,\n          [CodeLinePlugin.key]: CodeLineElement,\n          [CodePlugin.key]: CodeLeaf,\n          [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n          [ColumnItemPlugin.key]: ColumnElement,\n          [ColumnPlugin.key]: ColumnGroupElement,\n          [CommentsPlugin.key]: CommentLeaf,\n          [DatePlugin.key]: DateElement,\n          [EmojiInputPlugin.key]: EmojiInputElement,\n          [ExcalidrawPlugin.key]: ExcalidrawElement,\n          [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n          [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n          [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n          [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }),\n          [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }),\n          [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }),\n          [HighlightPlugin.key]: HighlightLeaf,\n          [HorizontalRulePlugin.key]: HrElement,\n          [ImagePlugin.key]: ImageElement,\n          [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n          [KbdPlugin.key]: KbdLeaf,\n          [LinkPlugin.key]: LinkElement,\n          [MediaEmbedPlugin.key]: MediaEmbedElement,\n          [MentionInputPlugin.key]: MentionInputElement,\n          [MentionPlugin.key]: MentionElement,\n          [ParagraphPlugin.key]: ParagraphElement,\n          [SlashInputPlugin.key]: SlashInputElement,\n          [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n          [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),\n          [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }),\n          [TableCellHeaderPlugin.key]: TableCellHeaderElement,\n          [TableCellPlugin.key]: TableCellElement,\n          [TablePlugin.key]: TableElement,\n          [TableRowPlugin.key]: TableRowElement,\n          [TocPlugin.key]: TocElement,\n          [TogglePlugin.key]: ToggleElement,\n          [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n        })\n      ),\n    },\n    plugins: [\n      ...copilotPlugins,\n      ...editorPlugins,\n      FixedToolbarPlugin,\n      FloatingToolbarPlugin,\n    ],\n    value: value,\n  });\n};\n",
       "path": "block/editor-ai/components/editor/use-create-editor.tsx",
       "target": "components/editor/use-create-editor.tsx",
       "type": "registry:component"