From a6d904bcd18a2c9962abfd9b5b325340f6b18b0d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 9 Feb 2022 08:59:32 -0500
Subject: speeding up rendering using bitmaps for webpages and other
 heavyweight docs.

---
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   9 +
 src/client/views/nodes/DocumentView.tsx            |  15 +-
 src/client/views/nodes/VideoBox.tsx                |   5 +-
 src/client/views/nodes/WebBox.tsx                  |  61 +++-
 src/client/views/nodes/WebBoxRenderer.js           | 395 +++++++++++++++++++++
 5 files changed, 468 insertions(+), 17 deletions(-)
 create mode 100644 src/client/views/nodes/WebBoxRenderer.js

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index fe34d6687..28a65f628 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -154,6 +154,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     returnThis = () => this;
     render() {
         TraceMobx();
+
+        const panx = this.props.CollectionFreeFormView.panX();
+        const pany = this.props.CollectionFreeFormView.panY();
+        const viewWidth = this.props.CollectionFreeFormView.props.PanelWidth() / this.props.CollectionFreeFormView.zoomScaling() / 2;
+        const viewHeight = this.props.CollectionFreeFormView.props.PanelHeight() / this.props.CollectionFreeFormView.zoomScaling() / 2;
+        const hideContent = !this.props.CollectionFreeFormView.props.isAnnotationOverlay &&
+            (Math.min(Math.abs(panx - (this.X + this.panelWidth())), Math.abs(panx - (this.X))) > viewWidth ||
+                Math.min(Math.abs(pany - (this.Y + this.panelHeight())), Math.abs(pany - (this.Y))) > viewHeight) ? true : false;
         const divProps: DocumentViewProps = {
             ...this.props,
             CollectionFreeFormDocumentView: this.returnThis,
@@ -162,6 +170,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             ScreenToLocalTransform: this.screenToLocalTransform,
             PanelWidth: this.panelWidth,
             PanelHeight: this.panelHeight,
+            hideContent
         };
         const background = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const mixBlendMode = StrCast(this.layoutDoc.mixBlendMode) as any || (typeof background === "string" && DashColor(background).alpha() !== 1 ? "multiply" : undefined);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9fc4b7890..a83fba37d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -9,7 +9,7 @@ import { List } from "../../../fields/List";
 import { ObjectField } from "../../../fields/ObjectField";
 import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types";
+import { BoolCast, Cast, NumCast, ScriptCast, StrCast, ImageCast } from "../../../fields/Types";
 import { AudioField } from "../../../fields/URLField";
 import { GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util';
 import { MobileInterface } from '../../../mobile/MobileInterface';
@@ -148,6 +148,7 @@ export interface DocumentViewSharedProps {
 export interface DocumentViewProps extends DocumentViewSharedProps {
     // properties specific to DocumentViews but not to FieldView
     freezeDimensions?: boolean;
+    hideContent?: boolean; // whether to show content or not (used to speed up rendering complex scenes when documents are not in view)
     hideResizeHandles?: boolean; // whether to suppress DocumentDecorations when this document is selected
     hideTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
     hideDecorationTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
@@ -184,6 +185,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @observable _animateScalingTo = 0;
     @observable _mediaState = 0;
     @observable _pendingDoubleClick = false;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     private _downX: number = 0;
     private _downY: number = 0;
     private _firstX: number = -1;
@@ -239,6 +241,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         this._multiTouchDisposer?.();
         this._holdDisposer?.();
         unbrush && Doc.UnBrushDoc(this.props.Document);
+        Object.values(this._disposers).forEach(disposer => disposer?.());
     }
 
     handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
@@ -837,6 +840,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     }
     @computed get contents() {
         TraceMobx();
+        const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc["thumb"]))?.url.href;
         const audioView = !this.layoutDoc._showAudio ? (null) :
             <div className="documentView-audioBackground"
                 onPointerDown={this.recordAudioAnnotation}
@@ -864,6 +868,9 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 onClick={this.onClickFunc}
                 focus={this.focus}
                 layoutKey={this.finalLayoutKey} />
+            {(this.isContentActive() && !SnappingManager.GetIsDragging()) || !thumb ? (null) :
+                <img style={{ background: "white", top: 0, position: "absolute" }} src={thumb}// + '?d=' + (new Date()).getTime()}
+                    width={this.props.PanelWidth()} height={this.props.PanelHeight()} />}
             {this.layoutDoc.hideAllLinks ? (null) : this.allLinkEndpoints}
             {this.hideLinkButton || this.props.renderDepth === -1 ? (null) :
                 <div style={{ transformOrigin: "top left", transform: `scale(${Math.min(1, this.props.ScreenToLocalTransform().scale(this.props.ContentScaling?.() || 1).Scale)})` }}>
@@ -1047,9 +1054,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 {captionView}
             </div>;
     }
+    @observable _: string = "";
     @computed get renderDoc() {
         TraceMobx();
-        const isButton: boolean = this.props.Document.type === DocumentType.FONTICON;
+        const isButton = this.props.Document.type === DocumentType.FONTICON;
         if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || this.hidden) return null;
         return this.docContents ??
             <div className={`documentView-node${this.topMost ? "-topmost" : ""}`}
@@ -1064,6 +1072,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined,
                     transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : `transform 0.5s ease-${this._animateScalingTo < 1 ? "in" : "out"}`,
                 }}>
+
                 {this.innards}
                 {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <div className="documentView-contentBlocker" /> : (null)}
                 {this.widgetDecorations ?? null}
@@ -1079,7 +1088,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]";  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
 
         const borderPath = this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BorderPath) || { path: undefined };
-        const internal = PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc;
+        const internal = this.props.hideContent ? (null) : PresBox.EffectsProvider(this.layoutDoc, this.renderDoc) || this.renderDoc;
         const boxShadow = this.props.treeViewDoc ? null : highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` :
             this.boxShadow || (this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined);
 
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 615d595c0..3f3de9da3 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -257,13 +257,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
-    public static async convertDataUri(imageUri: string, returnedFilename: string) {
+    public static async convertDataUri(imageUri: string, returnedFilename: string, nosuffix = false) {
         try {
             const posting = Utils.prepend("/uploadURI");
             const returnedUri = await rp.post(posting, {
                 body: {
                     uri: imageUri,
-                    name: returnedFilename
+                    name: returnedFilename,
+                    nosuffix
                 },
                 json: true,
             });
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 9956cc36b..a1910c722 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -10,8 +10,8 @@ import { InkTool } from "../../../fields/InkField";
 import { List } from "../../../fields/List";
 import { listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
-import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { WebField } from "../../../fields/URLField";
+import { Cast, NumCast, StrCast, WebCast, ImageCast } from "../../../fields/Types";
+import { WebField, ImageField } from "../../../fields/URLField";
 import { TraceMobx } from "../../../fields/util";
 import { emptyFunction, getWordAtPoint, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils";
 import { Docs } from "../../documents/Documents";
@@ -38,9 +38,11 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { LinkDocPreview } from "./LinkDocPreview";
 import "./WebBox.scss";
 import React = require("react");
+import { RequestOptions } from "https";
+import { VideoBox } from "./VideoBox";
+const { CreateImage } = require("./WebBoxRenderer");
 const _global = (window /* browser */ || global /* node */) as any;
 const htmlToText = require("html-to-text");
-
 type WebDocument = makeInterface<[typeof documentSchema]>;
 const WebDocument = makeInterface(documentSchema);
 
@@ -76,6 +78,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); }
     @computed get inlineTextAnnotations() { return this.allAnnotations.filter(a => a.textInlineAnnotations); }
     @computed get webField() { return Cast(this.dataDoc[this.props.fieldKey], WebField)?.url; }
+    @computed get webThumb() { return ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url; }
 
     constructor(props: any) {
         super(props);
@@ -108,9 +111,47 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         runInAction(() => {
             this._annotationKeySuffix = () => this._urlHash + "-annotations";
             // bcz: need to make sure that doc.data-annotations points to the currently active web page's annotations (this could/should be when the doc is created)
-            this.dataDoc[this.fieldKey + "-annotations"] = ComputedField.MakeFunction(`copyField(this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-annotations"`);
-            this.dataDoc[this.fieldKey + "-sidebar"] = ComputedField.MakeFunction(`copyField(this["${this.fieldKey}-"+urlHash(this["${this.fieldKey}"]?.url?.toString())+"-sidebar"`);
+            this.dataDoc[this.fieldKey + "-annotations"] = ComputedField.GetAnnoCopyField(this.fieldKey);
+            this.dataDoc[this.fieldKey + "-sidebar"] = ComputedField.GetSidebarCopyField(this.fieldKey);
         });
+        reaction(() => this.props.isSelected(),
+            async (selected) => {
+                if (selected) {
+                    setTimeout(action(() => {
+                        this._scrollHeight = Math.max(this.scrollHeight, this._iframe?.contentDocument?.body.scrollHeight || 0);
+                        if (this._initialScroll !== undefined && this._outerRef.current) {
+                            setTimeout(() => {
+                                this._outerRef.current!.scrollTop = this._initialScroll!;
+                                this._initialScroll = undefined;
+                            });
+                        }
+                    }));
+                } else if (!this.props.isContentActive()) {
+                    const imageBitmap = ImageCast(this.layoutDoc["thumb-frozen"])?.url.href;
+                    if (this._iframe && !imageBitmap) {
+                        var htmlString = this._iframe.contentDocument && new XMLSerializer().serializeToString(this._iframe.contentDocument);
+                        if (!htmlString) {
+                            htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
+                        }
+                        const nativeWidth = NumCast(this.layoutDoc.nativeWidth);
+                        CreateImage(
+                            this._webUrl.endsWith("/") ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl,
+                            this._iframe.contentDocument?.styleSheets ?? [],
+                            htmlString,
+                            nativeWidth,
+                            nativeWidth * this.props.PanelHeight() / this.props.PanelWidth(),
+                            NumCast(this.layoutDoc._scrollTop)
+                        ).then
+                            (action((dataUrl: any) => {
+                                VideoBox.convertDataUri(dataUrl, this.layoutDoc[Id] + "-thumb", true).then(
+                                    returnedfilename => this.layoutDoc.thumb = new ImageField(returnedfilename));
+                            }))
+                            .catch(function (error: any) {
+                                console.error('oops, something went wrong!', error);
+                            });
+                    }
+                }
+            });
 
         this._disposers.autoHeight = reaction(() => this.layoutDoc._autoHeight,
             autoHeight => {
@@ -292,12 +333,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             iframe.contentDocument.addEventListener("pointerdown", this.iframeDown);
             this._scrollHeight = Math.max(this.scrollHeight, iframe?.contentDocument.body.scrollHeight);
             setTimeout(action(() => this._scrollHeight = Math.max(this.scrollHeight, iframe?.contentDocument?.body.scrollHeight || 0)), 5000);
-            const initialScroll = this._initialScroll;
-            if (initialScroll !== undefined && this._outerRef.current) {
-                // bcz: not sure why this happens, but if the webpage isn't ready yet, it's scroll height seems to be limited.  So we need to wait tp set scroll location to what we want.
-                setTimeout(() => this._outerRef.current!.scrollTop = initialScroll);
-                this._initialScroll = undefined;
-            }
             iframe.setAttribute("enable-annotation", "true");
             iframe.contentDocument.addEventListener("click", undoBatch(action((e: MouseEvent) => {
                 let href = "";
@@ -665,7 +700,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return (
             <div className="webBox" ref={this._mainCont}
                 style={{ pointerEvents: this.pointerEvents() }} >
-                <div className={`webBox-container`} style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
+                <div hidden={!this.props.isSelected() && !this.isAnyChildContentActive() ? true : false}
+                    className={`webBox-container`} style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
                     <div className={"webBox-outerContent"} ref={this._outerRef}
                         style={{
                             width: `calc(${100 / scale}% - ${this.sidebarWidth() / scale * (this._previewWidth ? scale : 1)}px)`,
@@ -703,6 +739,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 </div >
                 <SidebarAnnos ref={this._sidebarRef}
                     {...this.props}
+                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                     fieldKey={this.fieldKey + "-" + this._urlHash}
                     rootDoc={this.rootDoc}
                     layoutDoc={this.layoutDoc}
diff --git a/src/client/views/nodes/WebBoxRenderer.js b/src/client/views/nodes/WebBoxRenderer.js
new file mode 100644
index 000000000..08a5746d1
--- /dev/null
+++ b/src/client/views/nodes/WebBoxRenderer.js
@@ -0,0 +1,395 @@
+/**
+ * 
+ * @param {StyleSheetList} styleSheets 
+ */
+var ForeignHtmlRenderer = function (styleSheets) {
+
+    const self = this;
+
+    /**
+     * 
+     * @param {String} binStr 
+     */
+    const binaryStringToBase64 = function (binStr) {
+        return new Promise(function (resolve) {
+            const reader = new FileReader();
+            reader.readAsDataURL(binStr);
+            reader.onloadend = function () {
+                resolve(reader.result);
+            }
+        });
+    };
+
+    function prepend(extension) {
+        return window.location.origin + extension;
+    }
+    function CorsProxy(url) {
+        return prepend("/corsProxy/") + encodeURIComponent(url);
+    }
+    /**
+     * 
+     * @param {String} url 
+     * @returns {Promise}
+     */
+    const getResourceAsBase64 = function (webUrl, inurl) {
+        return new Promise(function (resolve, reject) {
+            const xhr = new XMLHttpRequest();
+            //const url = inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl;
+            //const url = CorsProxy(inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl);// inurl.startsWith("http") ? CorsProxy(inurl) : inurl;
+            var url = inurl;
+            if (inurl.startsWith("/static")) {
+                url = (new URL(webUrl).origin + inurl);
+            } else
+                if ((inurl.startsWith("/") && !inurl.startsWith("//"))) {
+                    url = CorsProxy(new URL(webUrl).origin + inurl);
+                } else if (!inurl.startsWith("http") && !inurl.startsWith("//")) {
+                    url = CorsProxy(webUrl + "/" + inurl);
+                }
+            xhr.open("GET", url);
+            xhr.responseType = 'blob';
+
+            xhr.onreadystatechange = async function () {
+                if (xhr.readyState === 4 && xhr.status === 200) {
+                    const resBase64 = await binaryStringToBase64(xhr.response);
+
+                    resolve(
+                        {
+                            "resourceUrl": inurl,
+                            "resourceBase64": resBase64
+                        }
+                    );
+                } else if (xhr.readyState === 4) {
+                    console.log("COULDN'T FIND: " + (inurl.startsWith("/") ? webUrl + inurl : inurl));
+                    resolve(
+                        {
+                            "resourceUrl": "",
+                            "resourceBase64": inurl
+                        }
+                    );
+                }
+            };
+
+            xhr.send(null);
+        });
+    };
+
+    /**
+     * 
+     * @param {String[]} urls 
+     * @returns {Promise}
+     */
+    const getMultipleResourcesAsBase64 = function (webUrl, urls) {
+        const promises = [];
+        for (let i = 0; i < urls.length; i++) {
+            promises.push(getResourceAsBase64(webUrl, urls[i]));
+        }
+        return Promise.all(promises);
+    };
+
+    /**
+     * 
+     * @param {String} str 
+     * @param {Number} startIndex 
+     * @param {String} prefixToken 
+     * @param {String[]} suffixTokens
+     * 
+     * @returns {String|null} 
+     */
+    const parseValue = function (str, startIndex, prefixToken, suffixTokens) {
+        const idx = str.indexOf(prefixToken, startIndex);
+        if (idx === -1) {
+            return null;
+        }
+
+        let val = '';
+        for (let i = idx + prefixToken.length; i < str.length; i++) {
+            if (suffixTokens.indexOf(str[i]) !== -1) {
+                break;
+            }
+
+            val += str[i];
+        }
+
+        return {
+            "foundAtIndex": idx,
+            "value": val
+        }
+    };
+
+    /**
+     * 
+     * @param {String} cssRuleStr 
+     * @returns {String[]}
+     */
+    const getUrlsFromCssString = function (cssRuleStr, selector = "url(", delimiters = [')'], mustEndWithQuote = false) {
+        const urlsFound = [];
+        let searchStartIndex = 0;
+
+        while (true) {
+            const url = parseValue(cssRuleStr, searchStartIndex, selector, delimiters);
+            if (url === null) {
+                break;
+            }
+            searchStartIndex = url.foundAtIndex + url.value.length;
+            if (mustEndWithQuote && url.value[url.value.length - 1] !== '"') continue;
+            const unquoted = removeQuotes(url.value);
+            if (!unquoted  /* || (!unquoted.startsWith('http')&& !unquoted.startsWith("/") )*/ || unquoted === 'http://' || unquoted === 'https://') {
+                continue;
+            }
+
+            unquoted && urlsFound.push(unquoted);
+        }
+
+        return urlsFound;
+    };
+
+    /**
+     * 
+     * @param {String} html 
+     * @returns {String[]}
+     */
+    const getImageUrlsFromFromHtml = function (html) {
+        return getUrlsFromCssString(html, "src=", [' ', '>', '\t'], true);
+    };
+    const getSourceUrlsFromFromHtml = function (html) {
+        return getUrlsFromCssString(html, "source=", [' ', '>', '\t'], true);
+    };
+
+    /**
+     * 
+     * @param {String} str
+     * @returns {String}
+     */
+    const removeQuotes = function (str) {
+        return str.replace(/["']/g, "");
+    };
+
+    const escapeRegExp = function (string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+    };
+
+    /**
+     * 
+     * @param {String} contentHtml 
+     * @param {Number} width
+     * @param {Number} height
+     * 
+     * @returns {Promise<String>}
+     */
+    const buildSvgDataUri = async function (webUrl, contentHtml, width, height, scroll) {
+
+        return new Promise(async function (resolve, reject) {
+
+            /* !! The problems !!
+            *  1. CORS (not really an issue, expect perhaps for images, as this is a general security consideration to begin with)
+            *  2. Platform won't wait for external assets to load (fonts, images, etc.)
+            */
+
+            // copy styles
+            let cssStyles = "";
+            let urlsFoundInCss = [];
+
+            for (let i = 0; i < styleSheets.length; i++) {
+                try {
+                    const rules = styleSheets[i].cssRules
+                    for (let j = 0; j < rules.length; j++) {
+                        const cssRuleStr = rules[j].cssText;
+                        urlsFoundInCss.push(...getUrlsFromCssString(cssRuleStr));
+                        cssStyles += cssRuleStr;
+                    }
+                } catch (e) {
+
+                }
+            }
+
+            // const fetchedResourcesFromStylesheets = await getMultipleResourcesAsBase64(webUrl, urlsFoundInCss);
+            // for (let i = 0; i < fetchedResourcesFromStylesheets.length; i++) {
+            //     const r = fetchedResourcesFromStylesheets[i];
+            //     if (r.resourceUrl) {
+            //         cssStyles = cssStyles.replace(new RegExp(escapeRegExp(r.resourceUrl), "g"), r.resourceBase64);
+            //     }
+            // }
+
+            contentHtml = contentHtml.replace(/<source[^>]*>/g, "") // <picture> tags have a <source> which has a srcset field of image refs.  instead of converting each, just use the default <img> of the picture
+                .replace(/noscript/g, "div").replace(/<div class="mediaset"><\/div>/g, "")  // when scripting isn't available (ie, rendering web pages here), <noscript> tags should become <div>'s.  But for Brown CS, there's a layout problem if you leave the empty <mediaset> tag
+                .replace(/<link[^>]*>/g, "")  // don't need to keep any linked style sheets because we've already processed all style sheets above
+                .replace(/srcset="([^ "]*)[^"]*"/g, "src=\"$1\""); // instead of converting each item in the srcset to a data url, just convert the first one and use that
+            let urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml);
+            const fetchedResources = await getMultipleResourcesAsBase64(webUrl, urlsFoundInHtml);
+            for (let i = 0; i < fetchedResources.length; i++) {
+                const r = fetchedResources[i];
+                if (r.resourceUrl) {
+                    contentHtml = contentHtml.replace(new RegExp(escapeRegExp(r.resourceUrl), "g"), r.resourceBase64);
+                }
+            }
+
+            const styleElem = document.createElement("style");
+            styleElem.innerHTML = cssStyles.replace("&gt;", ">").replace("&lt;", "<");
+
+            const styleElemString = new XMLSerializer().serializeToString(styleElem).replace(/&gt;/g, ">").replace(/&lt;/g, "<");
+
+            // create DOM element string that encapsulates styles + content
+            const contentRootElem = document.createElement("body");
+            contentRootElem.style.zIndex = "1111";
+            // contentRootElem.style.transform = "scale(0.08)"
+            contentRootElem.innerHTML = styleElemString + contentHtml;
+            contentRootElem.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+            //document.body.appendChild(contentRootElem);
+
+            const contentRootElemString = new XMLSerializer().serializeToString(contentRootElem);
+
+            // build SVG string
+            const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}'>
+                        <foreignObject x='0' y='${-scroll}' width='${width}' height='${scroll + height}'>
+                            ${contentRootElemString}
+                        </foreignObject>
+                </svg>`;
+
+            // convert SVG to data-uri
+            const dataUri = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svg)))}`;
+
+            resolve(dataUri);
+        });
+    };
+
+    /**
+     * @param {String} html
+     * @param {Number} width
+     * @param {Number} height
+     * 
+     * @return {Promise<Image>}
+     */
+    this.renderToImage = async function (webUrl, html, width, height, scroll) {
+        return new Promise(async function (resolve, reject) {
+            const img = new Image();
+            console.log("BUILDING SVG for:" + webUrl);
+            img.src = await buildSvgDataUri(webUrl, html, width, height, scroll);
+
+            img.onload = function () {
+                console.log("IMAGE SVG created:" + webUrl);
+                resolve(img);
+            };
+        });
+    };
+
+    /**
+     * @param {String} html
+     * @param {Number} width
+     * @param {Number} height
+     * 
+     * @return {Promise<Image>}
+     */
+    this.renderToCanvas = async function (webUrl, html, width, height, scroll) {
+        return new Promise(async function (resolve, reject) {
+            const img = await self.renderToImage(webUrl, html, width, height, scroll);
+
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            const canvasCtx = canvas.getContext('2d');
+            canvasCtx.drawImage(img, 0, 0, img.width, img.height);
+
+            resolve(canvas);
+        });
+    };
+
+    /**
+     * @param {String} html
+     * @param {Number} width
+     * @param {Number} height
+     * 
+     * @return {Promise<String>}
+     */
+    this.renderToBase64Png = async function (webUrl, html, width, height, scroll) {
+        return new Promise(async function (resolve, reject) {
+            const canvas = await self.renderToCanvas(webUrl, html, width, height, scroll);
+            resolve(canvas.toDataURL('image/png'));
+        });
+    };
+
+};
+
+
+export function CreateImage(webUrl, styleSheets, html, width, height, scroll) {
+    const val = (new ForeignHtmlRenderer(styleSheets)).renderToBase64Png(webUrl, html.replace(/\n/g, "").replace(/<script((?!\/script).)*<\/script>/g, ""), width, height, scroll);
+    return val;
+}
+
+
+
+var ClipboardUtils = new function () {
+    var permissions = {
+        'image/bmp': true,
+        'image/gif': true,
+        'image/png': true,
+        'image/jpeg': true,
+        'image/tiff': true
+    };
+
+    function getType(types) {
+        for (var j = 0; j < types.length; ++j) {
+            var type = types[j];
+            if (permissions[type]) {
+                return type;
+            }
+        }
+        return null;
+    }
+    function getItem(items) {
+        for (var i = 0; i < items.length; ++i) {
+            var item = items[i];
+            if (item) {
+                var type = getType(item.types);
+                if (type) {
+                    return item.getType(type);
+                }
+            }
+        }
+        return null;
+    }
+    function loadFile(file, callback) {
+        if (window.FileReader) {
+            var reader = new FileReader();
+            reader.onload = function () {
+                callback(reader.result, null);
+            };
+            reader.onerror = function () {
+                callback(null, 'Incorrect file.');
+            };
+            reader.readAsDataURL(file);
+        } else {
+            callback(null, 'File api is not supported.');
+        }
+    }
+    this.readImage = function (callback) {
+        if (navigator.clipboard) {
+            var promise = navigator.clipboard.read();
+            promise
+                .then(function (items) {
+                    var promise = getItem(items);
+                    if (promise == null) {
+                        callback(null, null);
+                        return;
+                    }
+                    promise
+                        .then(function (result) {
+                            loadFile(result, callback);
+                        })
+                        .catch(function (error) {
+                            callback(null, 'Reading clipboard error.');
+                        });
+                })
+                .catch(function (error) {
+                    callback(null, 'Reading clipboard error.');
+                });
+        } else {
+            callback(null, 'Clipboard is not supported.');
+        }
+    };
+};
+
+
+export function pasteImageBitmap(callback) {
+    return ClipboardUtils.readImage(callback);
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2