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

This commit is contained in:
JimmFly 2023-07-07 21:16:49 +08:00 committed by GitHub
parent b12412a3c1
commit 66152401be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 62 deletions

View File

@ -16,7 +16,7 @@ import { useCallback, useRef } from 'react';
import { Menu, MenuItem } from '../../..'; import { Menu, MenuItem } from '../../..';
import type { CommonMenuItemProps } from './types'; import type { CommonMenuItemProps } from './types';
const ExportToPdfMenuItem = ({ export const ExportToPdfMenuItem = ({
onSelect, onSelect,
}: CommonMenuItemProps<{ type: 'pdf' }>) => { }: CommonMenuItemProps<{ type: 'pdf' }>) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
@ -91,12 +91,13 @@ const ExportToPdfMenuItem = ({
); );
}; };
const ExportToHtmlMenuItem = ({ export const ExportToHtmlMenuItem = ({
onSelect, onSelect,
}: CommonMenuItemProps<{ type: 'html' }>) => { }: CommonMenuItemProps<{ type: 'html' }>) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const contentParserRef = useRef<ContentParser>(); const contentParserRef = useRef<ContentParser>();
const { currentEditor } = globalThis; const { currentEditor } = globalThis;
const setPushNotification = useSetAtom(pushNotificationAtom);
const onClickExportHtml = useCallback(() => { const onClickExportHtml = useCallback(() => {
if (!currentEditor) { if (!currentEditor) {
return; return;
@ -104,11 +105,22 @@ const ExportToHtmlMenuItem = ({
if (!contentParserRef.current) { if (!contentParserRef.current) {
contentParserRef.current = new ContentParser(currentEditor.page); contentParserRef.current = new ContentParser(currentEditor.page);
} }
contentParserRef.current.exportHtml().catch(err => { contentParserRef.current
.exportHtml()
.then(() => {
onSelect?.({ type: 'html' });
setPushNotification({
key: 'export-to-html',
title: t['com.affine.export.success.title'](),
message: t['com.affine.export.success.message'](),
type: 'success',
});
})
.catch(err => {
console.error(err); console.error(err);
}); });
onSelect?.({ type: 'html' }); onSelect?.({ type: 'html' });
}, [onSelect, currentEditor]); }, [currentEditor, onSelect, setPushNotification, t]);
return ( return (
<> <>
<MenuItem <MenuItem
@ -122,7 +134,7 @@ const ExportToHtmlMenuItem = ({
); );
}; };
const ExportToPngMenuItem = ({ export const ExportToPngMenuItem = ({
onSelect, onSelect,
}: CommonMenuItemProps<{ type: 'png' }>) => { }: CommonMenuItemProps<{ type: 'png' }>) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
@ -143,7 +155,7 @@ const ExportToPngMenuItem = ({
.then(() => { .then(() => {
onSelect?.({ type: 'png' }); onSelect?.({ type: 'png' });
setPushNotification({ setPushNotification({
key: 'export-to-pdf', key: 'export-to-png',
title: t['com.affine.export.success.title'](), title: t['com.affine.export.success.title'](),
message: t['com.affine.export.success.message'](), message: t['com.affine.export.success.message'](),
type: 'success', type: 'success',
@ -152,7 +164,7 @@ const ExportToPngMenuItem = ({
.catch(err => { .catch(err => {
console.error(err); console.error(err);
setPushNotification({ setPushNotification({
key: 'export-to-pdf', key: 'export-to-png',
title: t['com.affine.export.error.title'](), title: t['com.affine.export.error.title'](),
message: t['com.affine.export.error.message'](), message: t['com.affine.export.error.message'](),
type: 'error', type: 'error',
@ -173,12 +185,13 @@ const ExportToPngMenuItem = ({
); );
}; };
const ExportToMarkdownMenuItem = ({ export const ExportToMarkdownMenuItem = ({
onSelect, onSelect,
}: CommonMenuItemProps<{ type: 'markdown' }>) => { }: CommonMenuItemProps<{ type: 'markdown' }>) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const contentParserRef = useRef<ContentParser>(); const contentParserRef = useRef<ContentParser>();
const { currentEditor } = globalThis; const { currentEditor } = globalThis;
const setPushNotification = useSetAtom(pushNotificationAtom);
const onClickExportMarkdown = useCallback(() => { const onClickExportMarkdown = useCallback(() => {
if (!currentEditor) { if (!currentEditor) {
return; return;
@ -186,11 +199,28 @@ const ExportToMarkdownMenuItem = ({
if (!contentParserRef.current) { if (!contentParserRef.current) {
contentParserRef.current = new ContentParser(currentEditor.page); contentParserRef.current = new ContentParser(currentEditor.page);
} }
contentParserRef.current.exportMarkdown().catch(err => { contentParserRef.current
.exportMarkdown()
.then(() => {
onSelect?.({ type: 'markdown' });
setPushNotification({
key: 'export-to-markdown',
title: t['com.affine.export.success.title'](),
message: t['com.affine.export.success.message'](),
type: 'success',
});
})
.catch(err => {
console.error(err); console.error(err);
setPushNotification({
key: 'export-to-markdown',
title: t['com.affine.export.error.title'](),
message: t['com.affine.export.error.message'](),
type: 'error',
});
}); });
onSelect?.({ type: 'markdown' }); onSelect?.({ type: 'markdown' });
}, [onSelect, currentEditor]); }, [currentEditor, onSelect, setPushNotification, t]);
return ( return (
<> <>
<MenuItem <MenuItem

View File

@ -1,21 +1,16 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks'; 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 type { FC } from 'react';
import { useRef } from 'react';
import { Button } from '../..';
import { import {
actionsStyle, ExportToHtmlMenuItem,
descriptionStyle, ExportToMarkdownMenuItem,
exportButtonStyle, ExportToPdfMenuItem,
menuItemStyle, ExportToPngMenuItem,
svgStyle, } from '../page-list/operation-menu-items/export';
} from './index.css'; import { actionsStyle, descriptionStyle, menuItemStyle } from './index.css';
import type { ShareMenuProps } from './share-menu'; import type { ShareMenuProps } from './share-menu';
export const Export: FC<ShareMenuProps> = props => { export const Export: FC<ShareMenuProps> = () => {
const contentParserRef = useRef<ContentParser>();
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
return ( return (
<div className={menuItemStyle}> <div className={menuItemStyle}>
@ -23,30 +18,10 @@ export const Export: FC<ShareMenuProps> = props => {
{t['Export Shared Pages Description']()} {t['Export Shared Pages Description']()}
</div> </div>
<div className={actionsStyle}> <div className={actionsStyle}>
<Button <ExportToPdfMenuItem />
className={exportButtonStyle} <ExportToHtmlMenuItem />
onClick={() => { <ExportToPngMenuItem />
if (!contentParserRef.current) { <ExportToMarkdownMenuItem />
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>
</div> </div>
</div> </div>
); );

View File

@ -52,15 +52,3 @@ export const inputButtonRowStyle = style({
alignItems: 'center', alignItems: 'center',
marginTop: '16px', 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',
});