improve print style

This commit is contained in:
fantasticit 2023-01-03 22:01:51 +08:00
parent 4524617e38
commit 0fbdd1d11c
7 changed files with 35 additions and 20 deletions

View File

@ -70,7 +70,7 @@ export const DocumentExporter: React.FC<IProps> = ({ document, render }) => {
}} }}
> >
<Space> <Space>
<div className={styles.templateItem} onClick={exportMarkdown}> <div className={styles.templateItem} onMouseDown={exportMarkdown}>
<header> <header>
<IconMarkdown style={{ fontSize: 40 }} /> <IconMarkdown style={{ fontSize: 40 }} />
</header> </header>
@ -82,7 +82,7 @@ export const DocumentExporter: React.FC<IProps> = ({ document, render }) => {
</footer> </footer>
</div> </div>
<div className={styles.templateItem} onClick={exportJSON}> <div className={styles.templateItem} onMouseDown={exportJSON}>
<header> <header>
<IconJSON style={{ fontSize: 40 }} /> <IconJSON style={{ fontSize: 40 }} />
</header> </header>
@ -94,7 +94,7 @@ export const DocumentExporter: React.FC<IProps> = ({ document, render }) => {
</footer> </footer>
</div> </div>
<div className={styles.templateItem} onClick={exportWord}> <div className={styles.templateItem} onMouseDown={exportWord}>
<header> <header>
<Badge count="beta" type="danger"> <Badge count="beta" type="danger">
<IconWord style={{ fontSize: 40 }} /> <IconWord style={{ fontSize: 40 }} />
@ -108,7 +108,7 @@ export const DocumentExporter: React.FC<IProps> = ({ document, render }) => {
</footer> </footer>
</div> </div>
<div className={styles.templateItem} onClick={exportPDF}> <div className={styles.templateItem} onMouseDown={exportPDF}>
<header> <header>
<Badge count="beta" type="danger"> <Badge count="beta" type="danger">
<IconPDF style={{ fontSize: 40 }} /> <IconPDF style={{ fontSize: 40 }} />
@ -166,7 +166,7 @@ export const DocumentExporter: React.FC<IProps> = ({ document, render }) => {
<Dropdown <Dropdown
visible={visible} visible={visible}
onVisibleChange={toggleVisible} onVisibleChange={toggleVisible}
trigger="click" trigger="custom"
position="bottomRight" position="bottomRight"
content={<div style={{ padding: '0 16px' }}>{content}</div>} content={<div style={{ padding: '0 16px' }}>{content}</div>}
> >

View File

@ -9,8 +9,7 @@ function printHtml(dom: Element) {
const content: string = style + dom.outerHTML; const content: string = style + dom.outerHTML;
const iframe: HTMLIFrameElement = document.createElement('iframe'); const iframe: HTMLIFrameElement = document.createElement('iframe');
iframe.id = 'el-tiptap-iframe'; iframe.setAttribute('style', 'position: absolute; width: 0; height: 0; top: 0; left: 0;');
iframe.setAttribute('style', 'position: absolute; width: 0; height: 0; top: -10px; left: -10px;');
document.body.appendChild(iframe); document.body.appendChild(iframe);
const frameWindow = iframe.contentWindow; const frameWindow = iframe.contentWindow;

View File

@ -142,6 +142,10 @@ export const Table = BuiltInTable.extend({
}, },
addProseMirrorPlugins() { addProseMirrorPlugins() {
return [...this.parent(), !this.editor.isEditable && readonlyTableView()].filter(Boolean); // @ts-ignore
const isPrint = this.editor?.options?.editorProps?.print;
const isEditable = this.editor?.isEditable;
return [...this.parent(), !isPrint && !isEditable && readonlyTableView()].filter(Boolean);
}, },
}).configure({ resizable: true }); }).configure({ resizable: true });

View File

@ -60,17 +60,7 @@ export const Title = Node.create<TitleOptions>({
renderHTML({ HTMLAttributes, node }) { renderHTML({ HTMLAttributes, node }) {
const { cover } = node.attrs; const { cover } = node.attrs;
return [ return ['h1', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, nodeAttrsToDataset(node)), 0];
'h1',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, nodeAttrsToDataset(node)),
[
'img',
{
src: cover,
},
],
['div', 0],
];
}, },
addNodeView() { addNodeView() {

View File

@ -118,3 +118,9 @@ body[theme-mode='dark'] {
} }
} }
} }
@media print {
.ProseMirror {
padding: 1cm;
}
}

View File

@ -1,5 +1,4 @@
/* stylelint-disable */ /* stylelint-disable */
.ProseMirror { .ProseMirror {
$tableBorderColor: var(--semi-color-border); $tableBorderColor: var(--semi-color-border);
$tableHeaderBgColor: var(--semi-color-fill-0); $tableHeaderBgColor: var(--semi-color-fill-0);
@ -286,3 +285,12 @@
cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */ cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
} }
} }
@media print {
.ProseMirror {
table {
margin-top: 0.75em;
table-layout: fixed;
}
}
}

View File

@ -31,3 +31,11 @@
} }
} }
} }
@media print {
.ProseMirror {
.node-title {
border-bottom: 0;
}
}
}