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

This commit is contained in:
fourdim
2023-06-01 21:26:57 +08:00
committed by GitHub
parent 7af5bd3894
commit 89a566a645
3 changed files with 128 additions and 71 deletions

View File

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

View File

@@ -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
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> */}
<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>
<ExportToPdfMenuItem></ExportToPdfMenuItem>
<ExportToHtmlMenuItem></ExportToHtmlMenuItem>
{/* <ExportToPngMenuItem></ExportToPngMenuItem> */}
<ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
</>
}
>

View File

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