mirror of https://github.com/fantasticit/think.git
improve print style
This commit is contained in:
parent
4524617e38
commit
0fbdd1d11c
|
@ -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>}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 });
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -118,3 +118,9 @@ body[theme-mode='dark'] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.ProseMirror {
|
||||||
|
padding: 1cm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -31,3 +31,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.ProseMirror {
|
||||||
|
.node-title {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue