feat(core): use new print pdf api (#7932)

packages/frontend/core/src/components/affine/page-properties/styles.css.ts

@@ -42,6 +42,11 @@ export const tableHeaderInfoRow = style({
   fontSize: cssVar('fontSm'),
   fontWeight: 500,
   minHeight: 34,
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
 });
 
 export const tableHeaderSecondaryRow = style({
@@ -54,6 +59,11 @@ export const tableHeaderSecondaryRow = style({
   padding: '0 6px',
   gap: '8px',
   height: 24,
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
 });
 
 export const tableHeaderCollapseButtonWrapper = style({
@@ -101,12 +111,26 @@ export const tableHeaderDivider = style({
   borderTop: `0.5px solid ${cssVar('borderColor')}`,
   width: '100%',
   margin: '8px 0',
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
 });
 
 export const tableBodyRoot = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
+  '@media': {
+    print: {
+      selectors: {
+        '&[data-state="open"]': {
+          marginBottom: 32,
+        },
+      },
+    },
+  },
 });
 
 export const tableBodySortable = style({
@@ -124,6 +148,11 @@ export const addPropertyButton = style({
   height: 36,
   fontWeight: 400,
   gap: 6,
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
 });
 globalStyle(`${addPropertyButton} svg`, {
   fontSize: 16,

packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts

@@ -148,6 +148,11 @@ export const rowContainerStyle = style({
   alignItems: 'center',
   padding: '4px',
 });
+export const exportContainerStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+});
 export const labelStyle = style({
   fontSize: cssVar('fontSm'),
   fontWeight: 500,

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx

@@ -1,20 +1,22 @@
-import { ExportMenuItems } from '@affine/core/components/page-list';
+import {
+  ExportMenuItems,
+  PrintMenuItems,
+} from '@affine/core/components/page-list';
 import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
 import { EditorService } from '@affine/core/modules/editor';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 
 import * as styles from './index.css';
-import type { ShareMenuProps } from './share-menu';
 
-export const ShareExport = ({ currentPage }: ShareMenuProps) => {
+export const ShareExport = () => {
   const t = useI18n();
   const editor = useService(EditorService).editor;
-  const exportHandler = useExportPage(currentPage);
+  const exportHandler = useExportPage();
   const currentMode = useLiveData(editor.mode$);
 
   return (
-    <>
+    <div className={styles.exportContainerStyle}>
       <div className={styles.descriptionStyle}>
         {t['com.affine.share-menu.ShareViaExportDescription']()}
       </div>
@@ -25,6 +27,19 @@ export const ShareExport = ({ currentPage }: ShareMenuProps) => {
           pageMode={currentMode}
         />
       </div>
-    </>
+      {currentMode === 'page' && (
+        <>
+          <div className={styles.descriptionStyle}>
+            {t['com.affine.share-menu.ShareViaPrintDescription']()}
+          </div>
+          <div>
+            <PrintMenuItems
+              exportHandler={exportHandler}
+              className={styles.exportItemStyle}
+            />
+          </div>
+        </>
+      )}
+    </div>
   );
 };

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx

@@ -39,7 +39,7 @@ export const ShareMenuContent = (props: ShareMenuProps) => {
           <SharePage {...props} />
         </Tabs.Content>
         <Tabs.Content value="export">
-          <ShareExport {...props} />
+          <ShareExport />
         </Tabs.Content>
       </Tabs.Root>
     </div>

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts

@@ -14,6 +14,11 @@ export const container = style({
       padding: '0 24px',
     },
   },
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
 });
 
 export const dividerContainer = style({

packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx

@@ -168,6 +168,9 @@ export const BlocksuiteEditorContainer = forwardRef<
       get mode() {
         return mode;
       },
+      get origin() {
+        return rootRef.current;
+      },
     };
 
     const proxy = new Proxy(api, {

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -162,7 +162,7 @@ export const PageHeaderMenuButton = ({
     }
   }, []);
 
-  const exportHandler = useExportPage(editorService.editor.doc.blockSuiteDoc);
+  const exportHandler = useExportPage();
 
   const handleDuplicate = useCallback(() => {
     duplicate(pageId);

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

@@ -1,15 +1,15 @@
-import { MenuItem, MenuSub } from '@affine/component';
+import { MenuItem, MenuSeparator, MenuSub } from '@affine/component';
 import { track } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import {
   ExportIcon,
   ExportToHtmlIcon,
   ExportToMarkdownIcon,
-  ExportToPdfIcon,
   ExportToPngIcon,
+  FileIcon,
 } from '@blocksuite/icons/rc';
 import type { ReactNode } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import { transitionStyle } from './index.css';
 
@@ -22,7 +22,7 @@ interface ExportMenuItemProps<T> {
 }
 
 interface ExportProps {
-  exportHandler: (type: 'pdf' | 'html' | 'png' | 'markdown') => Promise<void>;
+  exportHandler: (type: 'pdf' | 'html' | 'png' | 'markdown') => void;
   pageMode?: 'page' | 'edgeless';
   className?: string;
 }
@@ -47,74 +47,73 @@ export function ExportMenuItem<T>({
   );
 }
 
+export const PrintMenuItems = ({
+  exportHandler,
+  className = transitionStyle,
+}: ExportProps) => {
+  const t = useI18n();
+  return (
+    <ExportMenuItem
+      onSelect={() => exportHandler('pdf')}
+      className={className}
+      type="pdf"
+      icon={<FileIcon />}
+      label={t['com.affine.export.print']()}
+    />
+  );
+};
+
 export const ExportMenuItems = ({
   exportHandler,
   className = transitionStyle,
   pageMode = 'page',
 }: ExportProps) => {
   const t = useI18n();
-  const itemMap = useMemo(
-    () => [
-      {
-        component: ExportMenuItem,
-        props: {
-          onSelect: () => exportHandler('pdf'),
-          className: className,
-          type: 'pdf',
-          icon: <ExportToPdfIcon />,
-          label: t['Export to PDF'](),
-        },
-      },
-      {
-        component: ExportMenuItem,
-        props: {
-          onSelect: () => exportHandler('html'),
-          className: className,
-          type: 'html',
-          icon: <ExportToHtmlIcon />,
-          label: t['Export to HTML'](),
-        },
-      },
-      {
-        component: ExportMenuItem,
-        props: {
-          onSelect: () => exportHandler('png'),
-          className: className,
-          type: 'png',
-          icon: <ExportToPngIcon />,
-          label: t['Export to PNG'](),
-        },
-      },
-      {
-        component: ExportMenuItem,
-        props: {
-          onSelect: () => exportHandler('markdown'),
-          className: className,
-          type: 'markdown',
-          icon: <ExportToMarkdownIcon />,
-          label: t['Export to Markdown'](),
-        },
-      },
-    ],
-    [className, exportHandler, t]
+  return (
+    <>
+      <ExportMenuItem
+        onSelect={() => exportHandler('html')}
+        className={className}
+        type="html"
+        icon={<ExportToHtmlIcon />}
+        label={t['Export to HTML']()}
+      />
+      {pageMode !== 'edgeless' && (
+        <ExportMenuItem
+          onSelect={() => exportHandler('png')}
+          className={className}
+          type="png"
+          icon={<ExportToPngIcon />}
+          label={t['Export to PNG']()}
+        />
+      )}
+      <ExportMenuItem
+        onSelect={() => exportHandler('markdown')}
+        className={className}
+        type="markdown"
+        icon={<ExportToMarkdownIcon />}
+        label={t['Export to Markdown']()}
+      />
+    </>
   );
-  const items = itemMap.map(({ component: Component, props }) =>
-    pageMode === 'edgeless' &&
-    (props.type === 'pdf' || props.type === 'png') ? null : (
-      <Component key={props.label} {...props} />
-    )
-  );
-  return items;
 };
 
 export const Export = ({ exportHandler, className, pageMode }: ExportProps) => {
   const t = useI18n();
   const items = (
-    <ExportMenuItems
-      exportHandler={exportHandler}
-      className={className}
-      pageMode={pageMode}
-    />
+    <>
+      <ExportMenuItems
+        exportHandler={exportHandler}
+        className={className}
+        pageMode={pageMode}
+      />
+      {pageMode !== 'edgeless' && (
+        <>
+          <MenuSeparator />
+          <PrintMenuItems exportHandler={exportHandler} className={className} />
+        </>
+      )}
+    </>
   );
   const handleExportMenuOpenChange = useCallback((open: boolean) => {
     if (open) {