chore: add new item for share component (#3084)

packages/component/src/components/share-menu/export.tsx

@@ -1,21 +1,16 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ContentParser } from '@blocksuite/blocks/content-parser';
-import { ExportToHtmlIcon, ExportToMarkdownIcon } from '@blocksuite/icons';
 import type { FC } from 'react';
-import { useRef } from 'react';
 
-import { Button } from '../..';
 import {
-  actionsStyle,
-  descriptionStyle,
-  exportButtonStyle,
-  menuItemStyle,
-  svgStyle,
-} from './index.css';
+  ExportToHtmlMenuItem,
+  ExportToMarkdownMenuItem,
+  ExportToPdfMenuItem,
+  ExportToPngMenuItem,
+} from '../page-list/operation-menu-items/export';
+import { actionsStyle, descriptionStyle, menuItemStyle } from './index.css';
 import type { ShareMenuProps } from './share-menu';
 
-export const Export: FC<ShareMenuProps> = props => {
-  const contentParserRef = useRef<ContentParser>();
+export const Export: FC<ShareMenuProps> = () => {
   const t = useAFFiNEI18N();
   return (
     <div className={menuItemStyle}>
@@ -23,30 +18,10 @@ export const Export: FC<ShareMenuProps> = props => {
         {t['Export Shared Pages Description']()}
       </div>
       <div className={actionsStyle}>
-        <Button
-          className={exportButtonStyle}
-          onClick={() => {
-            if (!contentParserRef.current) {
-              contentParserRef.current = new ContentParser(props.currentPage);
-            }
-            return contentParserRef.current.exportHtml();
-          }}
-        >
-          <ExportToHtmlIcon className={svgStyle} />
-          {t['Export to HTML']()}
-        </Button>
-        <Button
-          className={exportButtonStyle}
-          onClick={() => {
-            if (!contentParserRef.current) {
-              contentParserRef.current = new ContentParser(props.currentPage);
-            }
-            return contentParserRef.current.exportMarkdown();
-          }}
-        >
-          <ExportToMarkdownIcon className={svgStyle} />
-          {t['Export to Markdown']()}
-        </Button>
+        <ExportToPdfMenuItem />
+        <ExportToHtmlMenuItem />
+        <ExportToPngMenuItem />
+        <ExportToMarkdownMenuItem />
       </div>
     </div>
   );

packages/component/src/components/share-menu/index.css.ts

@@ -52,15 +52,3 @@ export const inputButtonRowStyle = style({
   alignItems: 'center',
   marginTop: '16px',
 });
-export const exportButtonStyle = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '0',
-  border: 'none',
-});
-export const svgStyle = style({
-  fontSize: '20px',
-  marginRight: '12px',
-  verticalAlign: 'top',
-});