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,30 +1,27 @@
 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,
-  onItemClick,
+}: CommonMenuItemProps<{ type: 'pdf' }>) => {
-}: CommonMenuItemProps<{ type: 'markdown' | 'html' | 'pdf' | 'png' }>) => {
   const t = useAFFiNEI18N();
   const contentParserRef = useRef<ContentParser>();
   return (
-    <Menu
-      width={248}
-      placement="left"
-      trigger="click"
-      content={
     <>
-          {/* <MenuItem
+      {globalThis.currentEditor!.mode === 'page' && (
+        <MenuItem
           data-testid="export-to-pdf"
           onClick={async () => {
             if (!contentParserRef.current) {
@@ -46,7 +43,19 @@ export const Export = ({
           icon={<ExportToPdfIcon />}
         >
           {t['Export to PDF']()}
-          </MenuItem> */}
+        </MenuItem>
+      )}
+    </>
+  );
+};
+
+const ExportToHtmlMenuItem = ({
+  onSelect,
+}: CommonMenuItemProps<{ type: 'html' }>) => {
+  const t = useAFFiNEI18N();
+  const contentParserRef = useRef<ContentParser>();
+  return (
+    <>
       <MenuItem
         data-testid="export-to-html"
         onClick={() => {
@@ -62,21 +71,45 @@ 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' });
+// const ExportToPngMenuItem = ({
-            }}
+//   onSelect,
-            icon={<ExportToPngIcon />}
+// }: CommonMenuItemProps<{ type: 'png' }>) => {
-          >
+//   const t = useAFFiNEI18N();
-            {t['Export to PNG']()}
+//   const contentParserRef = useRef<ContentParser>();
-          </MenuItem> */}
+//   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={() => {
@@ -93,6 +126,25 @@ export const Export = ({
         {t['Export to Markdown']()}
       </MenuItem>
     </>
+  );
+};
+
+export const Export = ({
+  onItemClick,
+}: CommonMenuItemProps<{ type: 'markdown' | 'html' | 'pdf' | 'png' }>) => {
+  const t = useAFFiNEI18N();
+  return (
+    <Menu
+      width={248}
+      placement="left"
+      trigger="click"
+      content={
+        <>
+          <ExportToPdfMenuItem></ExportToPdfMenuItem>
+          <ExportToHtmlMenuItem></ExportToHtmlMenuItem>
+          {/* <ExportToPngMenuItem></ExportToPngMenuItem> */}
+          <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
+        </>
       }
     >
       <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',
+        },
+      },
     },
   },
 });