-
-
Notifications
You must be signed in to change notification settings - Fork 755
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main' into feat/editor-select
- Loading branch information
Showing
27 changed files
with
1,934 additions
and
1,095 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| 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 [Export Toolbar Button](/docs/components/export-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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
apps/www/public/r/styles/default/export-toolbar-button.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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": "Export Toolbar Button" | ||
| }, | ||
| "files": [ | ||
| { | ||
| "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\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 { ToolbarButton } from './toolbar';\n\nexport function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {\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 const { height, width } = imageEmbed.scale(1);\n page.drawImage(imageEmbed, {\n height,\n 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 <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Export\" isDropdown>\n <ArrowDownToLineIcon className=\"size-4\" />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent align=\"start\">\n <DropdownMenuGroup>\n <DropdownMenuItem onSelect={exportToPdf}>\n Export as PDF\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={exportToImage}>\n Export as Image\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\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" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.