Merge pull request #3807 from udecode/html2canvas

export

Author: felixfeng33

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

@@ -0,0 +1,49 @@
+---
+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.
+
+```
+
+## 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.3",
     "next-contentlayer2": "^0.4.6",
     "next-themes": "^0.4.3",
     "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/ai-selection.png

@@ -1558,6 +1558,37 @@
     "registryDependencies": [],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "html2canvas",
+      "pdf-lib"
+    ],
+    "doc": {
+      "description": "A toolbar button to export editor content as PDF.",
+      "docs": [
+        {
+          "route": "/docs/export",
+          "title": "Export"
+        }
+      ],
+      "examples": [
+        "basic-nodes-demo"
+      ],
+      "label": "New",
+      "title": "PDF Toolbar Button"
+    },
+    "files": [
+      {
+        "path": "plate-ui/export-toolbar-button.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "export-toolbar-button",
+    "registryDependencies": [
+      "toolbar"
+    ],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@udecode/plate-caption"

apps/www/public/r/index.json

@@ -15,7 +15,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PlateContent,\n  useEditorContainerRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'h-full',\n        demo: 'h-[650px]',\n      },\n    },\n  }\n);\n\nexport const EditorContainer = ({\n  className,\n  variant,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof editorContainerVariants>) => {\n  const editor = useEditorRef();\n  const containerRef = useEditorContainerRef();\n\n  return (\n    <div\n      id={editor.uid}\n      ref={containerRef}\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      role=\"button\"\n      {...props}\n    />\n  );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-base md:text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',\n        default:\n          'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n        none: '',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ className, disabled, focused, variant, ...props }, ref) => {\n    return (\n      <PlateContent\n        ref={ref}\n        className={cn(\n          editorVariants({\n            disabled,\n            focused,\n            variant,\n          }),\n          className\n        )}\n        disabled={disabled}\n        disableDefaultStyles\n        {...props}\n      />\n    );\n  }\n);\n\nEditor.displayName = 'Editor';\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PlateContent,\n  useEditorContainerRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'h-full',\n        demo: 'h-[650px]',\n      },\n    },\n  }\n);\n\nexport const EditorContainer = ({\n  className,\n  variant,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof editorContainerVariants>) => {\n  const editor = useEditorRef();\n  const containerRef = useEditorContainerRef();\n\n  return (\n    <div\n      id={editor.uid}\n      ref={containerRef}\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      // Adding this role attribute could cause the content captured by html2canvas to be incorrectly centered.\n      // role=\"button\"\n      {...props}\n    />\n  );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-base md:text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',\n        default:\n          'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n        none: '',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ className, disabled, focused, variant, ...props }, ref) => {\n    return (\n      <PlateContent\n        ref={ref}\n        className={cn(\n          editorVariants({\n            disabled,\n            focused,\n            variant,\n          }),\n          className\n        )}\n        disabled={disabled}\n        disableDefaultStyles\n        {...props}\n      />\n    );\n  }\n);\n\nEditor.displayName = 'Editor';\n",
       "path": "plate-ui/editor.tsx",
       "target": "components/plate-ui/editor.tsx",
       "type": "registry:ui"

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

@@ -0,0 +1,33 @@
+{
+  "dependencies": [
+    "html2canvas",
+    "pdf-lib"
+  ],
+  "doc": {
+    "description": "A toolbar button to export editor content as PDF.",
+    "docs": [
+      {
+        "route": "/docs/export",
+        "title": "Export"
+      }
+    ],
+    "examples": [
+      "basic-nodes-demo"
+    ],
+    "label": "New",
+    "title": "PDF Toolbar Button"
+  },
+  "files": [
+    {
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { toDOMNode, useEditorRef } from '@udecode/plate-common/react';\nimport { ArrowDownToLineIcon } from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nexport const ExportToolbarButton = withRef<typeof ToolbarSplitButton>(\n  ({ children, ...props }, ref) => {\n    const editor = useEditorRef();\n    const openState = useOpenState();\n\n    const getCanvas = async () => {\n      const { default: html2canvas } = await import('html2canvas');\n\n      const style = document.createElement('style');\n      document.head.append(style);\n      style.sheet?.insertRule(\n        'body > div:last-child img { display: inline-block !important; }'\n      );\n\n      const canvas = await html2canvas(toDOMNode(editor, editor)!);\n      style.remove();\n\n      return canvas;\n    };\n\n    const downloadFile = (href: string, filename: string) => {\n      const element = document.createElement('a');\n      element.setAttribute('href', href);\n      element.setAttribute('download', filename);\n      element.style.display = 'none';\n      document.body.append(element);\n      element.click();\n      element.remove();\n    };\n\n    const exportToPdf = async () => {\n      const canvas = await getCanvas();\n\n      const PDFLib = await import('pdf-lib');\n      const pdfDoc = await PDFLib.PDFDocument.create();\n      const page = pdfDoc.addPage([canvas.width, canvas.height]);\n      const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG'));\n\n      page.drawImage(imageEmbed, {\n        height: canvas.height,\n        width: canvas.width,\n        x: 0,\n        y: 0,\n      });\n      const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });\n\n      downloadFile(pdfBase64, 'plate.pdf');\n    };\n\n    const exportToImage = async () => {\n      const canvas = await getCanvas();\n      downloadFile(canvas.toDataURL('image/png'), 'plate.png');\n    };\n\n    return (\n      <ToolbarSplitButton\n        ref={ref}\n        onClick={exportToPdf}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown') {\n            e.preventDefault();\n            openState.onOpenChange(true);\n          }\n        }}\n        pressed={openState.open}\n        tooltip=\"Export\"\n        {...props}\n      >\n        <ToolbarSplitButtonPrimary>\n          <ArrowDownToLineIcon className=\"size-4\" />\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenu {...openState} modal={false}>\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n\n          <DropdownMenuContent\n            onClick={(e) => e.stopPropagation()}\n            align=\"start\"\n            alignOffset={-32}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuItem onSelect={exportToPdf}>\n                Export as PDF\n              </DropdownMenuItem>\n              <DropdownMenuItem onSelect={exportToImage}>\n                Export via Image\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ToolbarSplitButton>\n    );\n  }\n);\n",
+      "path": "plate-ui/export-toolbar-button.tsx",
+      "target": "components/plate-ui/export-toolbar-button.tsx",
+      "type": "registry:ui"
+    }
+  ],
+  "name": "export-toolbar-button",
+  "registryDependencies": [
+    "toolbar"
+  ],
+  "type": "registry:ui"
+}