fix: pdf export in client and hide png export (#2604)

packages/component/src/components/affine-watermark/index.css.ts

@@ -4,7 +4,7 @@ export const waterMarkStyle = style({
   display: 'none',
   '@media': {
     print: {
-      position: 'absolute',
+      position: 'fixed',
       bottom: '0',
       right: '20px',
       zIndex: 100,

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

@@ -1,22 +1,138 @@
 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,
 } from '@blocksuite/icons';
 import { useRef } from 'react';
 
 import { Menu, MenuItem } from '../../..';
 import type { CommonMenuItemProps } from './types';
 
-export const Export = ({
+const ExportToPdfMenuItem = ({
   onSelect,
+}: CommonMenuItemProps<{ type: 'pdf' }>) => {
+  const t = useAFFiNEI18N();
+  const contentParserRef = useRef<ContentParser>();
+  return (
+    <>
+      {globalThis.currentEditor!.mode === 'page' && (
+        <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>
+      )}
+    </>
+  );
+};
+
+const ExportToHtmlMenuItem = ({
+  onSelect,
+}: CommonMenuItemProps<{ type: 'html' }>) => {
+  const t = useAFFiNEI18N();
+  const contentParserRef = useRef<ContentParser>();
+  return (
+    <>
+      <MenuItem
+        data-testid="export-to-html"
+        onClick={() => {
+          if (!contentParserRef.current) {
+            contentParserRef.current = new ContentParser(
+              globalThis.currentEditor!.page
+            );
+          }
+          contentParserRef.current.exportHtml();
+          onSelect?.({ type: 'html' });
+        }}
+        icon={<ExportToHtmlIcon />}
+      >
+        {t['Export to HTML']()}
+      </MenuItem>
+    </>
+  );
+};
+
+// const ExportToPngMenuItem = ({
+//   onSelect,
+// }: CommonMenuItemProps<{ type: 'png' }>) => {
+//   const t = useAFFiNEI18N();
+//   const contentParserRef = useRef<ContentParser>();
+//   return (
+//     <>
+//       {globalThis.currentEditor!.mode === 'page' && (
+//         <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>
+//       )}
+//     </>
+//   );
+// };
+
+const ExportToMarkdownMenuItem = ({
+  onSelect,
+}: CommonMenuItemProps<{ type: 'markdown' }>) => {
+  const t = useAFFiNEI18N();
+  const contentParserRef = useRef<ContentParser>();
+  return (
+    <>
+      <MenuItem
+        data-testid="export-to-markdown"
+        onClick={() => {
+          if (!contentParserRef.current) {
+            contentParserRef.current = new ContentParser(
+              globalThis.currentEditor!.page
+            );
+          }
+          contentParserRef.current.exportMarkdown();
+          onSelect?.({ type: 'markdown' });
+        }}
+        icon={<ExportToMarkdownIcon />}
+      >
+        {t['Export to Markdown']()}
+      </MenuItem>
+    </>
+  );
+};
+
+export const Export = ({
   onItemClick,
 }: CommonMenuItemProps<{ type: 'markdown' | 'html' | 'pdf' | 'png' }>) => {
   const t = useAFFiNEI18N();
-  const contentParserRef = useRef<ContentParser>();
   return (
     <Menu
       width={248}
@@ -24,74 +140,10 @@ export const Export = ({
       trigger="click"
       content={
         <>
-          {/* <MenuItem
+          <ExportToPdfMenuItem></ExportToPdfMenuItem>
-            data-testid="export-to-pdf"
+          <ExportToHtmlMenuItem></ExportToHtmlMenuItem>
-            onClick={async () => {
+          {/* <ExportToPngMenuItem></ExportToPngMenuItem> */}
-              if (!contentParserRef.current) {
+          <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
-                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={() => {
-              if (!contentParserRef.current) {
-                contentParserRef.current = new ContentParser(
-                  globalThis.currentEditor!.page
-                );
-              }
-              contentParserRef.current.exportHtml();
-              onSelect?.({ type: 'html' });
-            }}
-            icon={<ExportToHtmlIcon />}
-          >
-            {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={() => {
-              if (!contentParserRef.current) {
-                contentParserRef.current = new ContentParser(
-                  globalThis.currentEditor!.page
-                );
-              }
-              contentParserRef.current.exportMarkdown();
-              onSelect?.({ type: 'markdown' });
-            }}
-            icon={<ExportToMarkdownIcon />}
-          >
-            {t['Export to Markdown']()}
-          </MenuItem>
         </>
       }
     >

packages/component/src/components/workspace/index.css.ts

@@ -58,6 +58,11 @@ export const mainContainerStyle = style({
       borderRadius: '8px',
       overflow: 'hidden',
       boxShadow: 'var(--affine-shadow-1)',
+      '@media': {
+        print: {
+          overflow: 'visible',
+        },
+      },
     },
   },
 });