From 4282a3b38f1ad599f1205877b503787d040d18da Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Tue, 26 Nov 2024 20:37:32 +0800 Subject: [PATCH] fix --- apps/www/content/docs/examples/export.mdx | 2 - .../plate-ui/export-toolbar-button.tsx | 179 ++++++++---------- .../plate-ui/fixed-toolbar-buttons.tsx | 2 +- 3 files changed, 78 insertions(+), 105 deletions(-) diff --git a/apps/www/content/docs/examples/export.mdx b/apps/www/content/docs/examples/export.mdx index 1bd5321f7d..e1c76bc920 100644 --- a/apps/www/content/docs/examples/export.mdx +++ b/apps/www/content/docs/examples/export.mdx @@ -17,8 +17,6 @@ title: Export Install the [PDF Toolbar Button](/docs/plate-ui/pdf-toolbar-button) component. -``` - ## Examples ### Plate UI diff --git a/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx index 3d2a5c29aa..04cd9f5283 100644 --- a/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx @@ -2,7 +2,8 @@ import React from 'react'; -import { withRef } from '@udecode/cn'; +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { toDOMNode, useEditorRef } from '@udecode/plate-common/react'; import { ArrowDownToLineIcon } from 'lucide-react'; @@ -14,105 +15,79 @@ import { DropdownMenuTrigger, useOpenState, } from './dropdown-menu'; -import { - ToolbarSplitButton, - ToolbarSplitButtonPrimary, - ToolbarSplitButtonSecondary, -} from './toolbar'; - -export const ExportToolbarButton = withRef( - ({ children, ...props }, ref) => { - const editor = useEditorRef(); - const openState = useOpenState(); - - const getCanvas = async () => { - const { default: html2canvas } = await import('html2canvas'); - - const style = document.createElement('style'); - document.head.append(style); - style.sheet?.insertRule( - 'body > div:last-child img { display: inline-block !important; }' - ); - - const canvas = await html2canvas(toDOMNode(editor, editor)!); - style.remove(); - - return canvas; - }; - - const downloadFile = (href: string, filename: string) => { - const element = document.createElement('a'); - element.setAttribute('href', href); - element.setAttribute('download', filename); - element.style.display = 'none'; - document.body.append(element); - element.click(); - element.remove(); - }; - - const exportToPdf = async () => { - const canvas = await getCanvas(); - - const PDFLib = await import('pdf-lib'); - const pdfDoc = await PDFLib.PDFDocument.create(); - const page = pdfDoc.addPage([canvas.width, canvas.height]); - const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG')); - - page.drawImage(imageEmbed, { - height: canvas.height, - width: canvas.width, - x: 0, - y: 0, - }); - const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true }); - - downloadFile(pdfBase64, 'plate.pdf'); - }; - - const exportToImage = async () => { - const canvas = await getCanvas(); - downloadFile(canvas.toDataURL('image/png'), 'plate.png'); - }; - - return ( - { - if (e.key === 'ArrowDown') { - e.preventDefault(); - openState.onOpenChange(true); - } - }} - pressed={openState.open} - tooltip="Export" - {...props} - > - - - - - - - - - - e.stopPropagation()} - align="start" - alignOffset={-32} - > - - - Export as PDF - - - Export as Image - - - - - +import { ToolbarButton } from './toolbar'; + +export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) { + const editor = useEditorRef(); + const openState = useOpenState(); + + const getCanvas = async () => { + const { default: html2canvas } = await import('html2canvas'); + + const style = document.createElement('style'); + document.head.append(style); + style.sheet?.insertRule( + 'body > div:last-child img { display: inline-block !important; }' ); - } -); + + const canvas = await html2canvas(toDOMNode(editor, editor)!); + style.remove(); + + return canvas; + }; + + const downloadFile = (href: string, filename: string) => { + const element = document.createElement('a'); + element.setAttribute('href', href); + element.setAttribute('download', filename); + element.style.display = 'none'; + document.body.append(element); + element.click(); + element.remove(); + }; + + const exportToPdf = async () => { + const canvas = await getCanvas(); + + const PDFLib = await import('pdf-lib'); + const pdfDoc = await PDFLib.PDFDocument.create(); + const page = pdfDoc.addPage([canvas.width, canvas.height]); + const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG')); + + page.drawImage(imageEmbed, { + height: canvas.height, + width: canvas.width, + x: 0, + y: 0, + }); + const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true }); + + downloadFile(pdfBase64, 'plate.pdf'); + }; + + const exportToImage = async () => { + const canvas = await getCanvas(); + downloadFile(canvas.toDataURL('image/png'), 'plate.png'); + }; + + return ( + + + + + + + + + + + Export as PDF + + + Export as Image + + + + + ); +} diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx index 9778dff638..ffcba0a6e1 100644 --- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx +++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx @@ -78,7 +78,7 @@ export function FixedToolbarButtons() { - +