feat: add support for exporting pdf and png (#2588)

This closes #2583.

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -1,11 +1,14 @@
 import { Menu, MenuItem } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { PageBlockModel } from '@blocksuite/blocks';
 import { ContentParser } from '@blocksuite/blocks/content-parser';
 import {
   ArrowRightSmallIcon,
   ExportIcon,
   ExportToHtmlIcon,
   ExportToMarkdownIcon,
+  ExportToPdfIcon,
+  ExportToPngIcon,
 } from '@blocksuite/icons';
 import { useRef } from 'react';
 
@@ -14,7 +17,7 @@ import type { CommonMenuItemProps } from './types';
 export const Export = ({
   onSelect,
   onItemClick,
-}: CommonMenuItemProps<{ type: 'markdown' | 'html' }>) => {
+}: CommonMenuItemProps<{ type: 'markdown' | 'html' | 'pdf' | 'png' }>) => {
   const t = useAFFiNEI18N();
   const contentParserRef = useRef<ContentParser>();
   return (
@@ -24,6 +27,29 @@ export const Export = ({
       trigger="click"
       content={
         <>
+          <MenuItem
+            data-testid="export-to-pdf"
+            onClick={async () => {
+              if (!contentParserRef.current) {
+                contentParserRef.current = new ContentParser(
+                  globalThis.currentEditor!.page
+                );
+              }
+              const result = await window.apis?.export.savePDFFileAs(
+                (
+                  globalThis.currentEditor!.page.root as PageBlockModel
+                ).title.toString()
+              );
+              if (result !== undefined) {
+                return;
+              }
+              contentParserRef.current.exportPdf();
+              onSelect?.({ type: 'pdf' });
+            }}
+            icon={<ExportToPdfIcon />}
+          >
+            {t['Export to PDF']()}
+          </MenuItem>
           <MenuItem
             data-testid="export-to-html"
             onClick={() => {
@@ -39,6 +65,21 @@ export const Export = ({
           >
             {t['Export to HTML']()}
           </MenuItem>
+          <MenuItem
+            data-testid="export-to-png"
+            onClick={() => {
+              if (!contentParserRef.current) {
+                contentParserRef.current = new ContentParser(
+                  globalThis.currentEditor!.page
+                );
+              }
+              contentParserRef.current.exportPng();
+              onSelect?.({ type: 'png' });
+            }}
+            icon={<ExportToPngIcon />}
+          >
+            {t['Export to PNG']()}
+          </MenuItem>
           <MenuItem
             data-testid="export-to-markdown"
             onClick={() => {