pinmenote.com/pinmenote-extension
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Projects Releases Wiki Activity

fix: download html on preview

Browse Source
This commit is contained in:
Michal Szczepanski 2023-09-05 00:17:03 +02:00
parent afcd92efee
commit 4c6f0c1ce0
2 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/common/factory/iframe-html.factory.ts
View File

@ -16,7 +16,6 @@
*/
import { SegmentCss, SegmentPage } from '@pinmenote/page-compute';
import { PageSegmentGetCommand } from '../command/snapshot/segment/page-segment-get.command';
import { PageSnapshotDto } from '../model/obj/page-snapshot.dto';
export class IframeHtmlFactory {
static computeHtml = async (snapshot: SegmentPage, title?: string): Promise<string> => {
@ -55,11 +54,48 @@ export class IframeHtmlFactory {
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
${style}
</head>
<script>
if (document.readyState !== 'complete') {
document.addEventListener('readystatechange', async () => {
if (document.readyState === 'complete') renderTemplates();
});
} else {
renderTemplates();
}
const renderTemplates = () => {
const elList = Array.from(document.querySelectorAll('[data-pmn-shadow]'));
for (const el of elList) {
renderTemplate(el);
}
}
const renderTemplate = (el) => {
const templates = Array.from(el.querySelectorAll('template'));
for (const template of templates) {
if (template.parentElement) {
const mode = template.getAttribute('data-mode');
const shadow = template.parentElement.attachShadow({ mode: mode });
shadow.appendChild(template.content.cloneNode(true));
for (const child of Array.from(shadow.children)) {
renderTemplate(child);
}
}
}
};
</script>
${snapshot.html.html}
</html>`;
};
static computeDownload = (snapshot: PageSnapshotDto, data: SegmentPage): string => {
return '';
static computeDownload = (pageSegment: SegmentPage, iframe: HTMLIFrameElement): string => {
if (!iframe.contentWindow) return '';
return `<!doctype html>
<html ${pageSegment.html.htmlAttr}>
<head>
${iframe.contentWindow.document.head.innerHTML}
</head>
<body>
${iframe.contentWindow.document.body.innerHTML}
</body>
</html>`;
};
}

10
src/options-ui/components/preview/html-preview.component.tsx
View File

@ -304,13 +304,15 @@ export const HtmlPreviewComponent: FunctionComponent<Props> = (props) => {
renderTemplate(child);
}
}
template.remove();
//template.remove();
}
};
const handleDownload = async () => {
if (!pageSegment || !pageSnapshot) return;
const html = IframeHtmlFactory.computeDownload(pageSnapshot, pageSegment);
if (!htmlRef.current) return;
const iframe = htmlRef.current.lastChild as HTMLIFrameElement;
const html = IframeHtmlFactory.computeDownload(pageSegment, iframe);
// https://stackoverflow.com/a/54302120 handle utf-8 string download
const url = window.URL.createObjectURL(new Blob(['\ufeff' + html], { type: 'text/html' }));
const filename = `${fnUid()}.html`;
@ -352,9 +354,9 @@ export const HtmlPreviewComponent: FunctionComponent<Props> = (props) => {
<div style={{ display: isLoading ? 'flex' : 'none' }}>
<CircularProgress />
</div>
{/*<IconButton onClick={handleDownload}>
<IconButton onClick={handleDownload}>
<DownloadIcon />
</IconButton>*/}
</IconButton>
<IconButton onClick={handleClose}>
<ClearIcon />
</IconButton>