toolbar

Author: felixfeng33

apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx

@@ -53,7 +53,7 @@ import { MarkToolbarButton } from './mark-toolbar-button';
 import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
-import { PdfToolbarButton } from './pdf-toolbar-button';
+import { ExportToolbarButton } from './pdf-toolbar-button';
 import { TableDropdownMenu } from './table-dropdown-menu';
 import { ToggleToolbarButton } from './toggle-toolbar-button';
 import { ToolbarGroup } from './toolbar';
@@ -78,9 +78,9 @@ export function FixedToolbarButtons() {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <PdfToolbarButton tooltip="Export PDF">
+            <ExportToolbarButton tooltip="Export File">
               <ArrowUpToLineIcon />
-            </PdfToolbarButton>
+            </ExportToolbarButton>
           </ToolbarGroup>
 
           <ToolbarGroup>

apps/www/src/registry/default/plate-ui/pdf-toolbar-button.tsx

@@ -4,54 +4,115 @@ import React from 'react';
 
 import { withRef } from '@udecode/cn';
 import { toDOMNode, useEditorRef } from '@udecode/plate-common/react';
+import { ArrowDownToLineIcon } from 'lucide-react';
 
-import { ToolbarButton } from './toolbar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import {
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary,
+} from './toolbar';
 
-export const PdfToolbarButton = withRef<typeof ToolbarButton>(
-  ({ children, ...rest }, ref) => {
+export const ExportToolbarButton = withRef<typeof ToolbarSplitButton>(
+  ({ 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 (
-      <ToolbarButton
+      <ToolbarSplitButton
         ref={ref}
-        {...rest}
-        onClick={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();
-
-          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 });
-
-          const element = document.createElement('a');
-          element.setAttribute('href', pdfBase64);
-          element.setAttribute('download', 'plate.pdf');
-          element.style.display = 'none';
-          document.body.append(element);
-          element.click();
-          element.remove();
+        onClick={exportToPdf}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            openState.onOpenChange(true);
+          }
         }}
+        pressed={openState.open}
+        tooltip="Export"
+        {...props}
       >
-        {children}
-      </ToolbarButton>
+        <ToolbarSplitButtonPrimary>
+          <ArrowDownToLineIcon className="size-4" />
+        </ToolbarSplitButtonPrimary>
+
+        <DropdownMenu {...openState} modal={false}>
+          <DropdownMenuTrigger asChild>
+            <ToolbarSplitButtonSecondary />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            onClick={(e) => e.stopPropagation()}
+            align="start"
+            alignOffset={-32}
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuItem onSelect={exportToPdf}>
+                Export as PDF
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={exportToImage}>
+                Export via Image
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ToolbarSplitButton>
     );
   }
 );