path: root/src/client/views/nodes/WebBoxRenderer.js

/* eslint-disable no-undef */
/**
 *
 * @param {StyleSheetList} styleSheets
 */
const ForeignHtmlRenderer = function (styleSheets) {
    /**
     *
     * @param {String} binStr
     */
    const binaryStringToBase64 = binStr =>
        new Promise(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 = (webUrl, inurl) =>
        new Promise(resolve => {
            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;
            let 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}`);
            } else if (inurl.startsWith('https') && !inurl.startsWith(window.location.origin)) {
                url = CorsProxy(inurl);
            }
            xhr.open('GET', url);
            xhr.responseType = 'blob';

            xhr.onreadystatechange = async function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    const resBase64 = await binaryStringToBase64(xhr.response);

                    resolve({
                        resourceUrl: inurl,
                        resourceBase64: resBase64,
                    });
                } else if (xhr.readyState === XMLHttpRequest.DONE) {
                    console.log(`COULDN'T FIND: ${inurl.startsWith('/') ? webUrl + inurl : inurl}`);
                    resolve({
                        resourceUrl: '',
                        resourceBase64: inurl,
                    });
                }
            };

            xhr.send(null);
        });

    /**
     *
     * @param {String[]} urls
     * @returns {Promise}
     */
    const getMultipleResourcesAsBase64 = (webUrl, urls) => {
        const promises = [];
        for (let i = 0; webUrl && i < urls.length; i += 1) {
            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 += 1) {
            if (suffixTokens.indexOf(str[i]) !== -1) {
                break;
            }

            val += str[i];
        }

        return {
            foundAtIndex: idx,
            value: val,
        };
    };

    /**
     *
     * @param {String} str
     * @returns {String}
     */
    const removeQuotes = function (str) {
        return str.replace(/["']/g, '');
    };

    /**
     *
     * @param {String} cssRuleStr
     * @returns {String[]}
     */
    const getUrlsFromCssString = function (cssRuleStr, selector = 'url(', delimiters = [')'], mustEndWithQuote = false) {
        const urlsFound = [];
        let searchStartIndex = 0;

        // eslint-disable-next-line no-constant-condition
        while (true) {
            const url = parseValue(cssRuleStr, searchStartIndex, selector, delimiters);
            if (url === null) {
                break;
            }
            searchStartIndex = url.foundAtIndex + url.value.length + 1;
            if (!mustEndWithQuote || url.value[url.value.length - 1] === '"') {
                const unquoted = removeQuotes(url.value);
                if (unquoted /* || (!unquoted.startsWith('http')&& !unquoted.startsWith("/") ) */ && unquoted !== 'http://' && unquoted !== 'https://') {
                    if (unquoted) urlsFound.push(unquoted);
                }
            }
        }

        return urlsFound;
    };

    /**
     * Extracts font-face URLs from CSS rules
     * @param {String} cssRuleStr
     * @returns {String[]}
     */
    const getFontFaceUrlsFromCss = function (cssRuleStr) {
        const fontFaceUrls = [];
        // Find @font-face blocks
        const fontFaceBlocks = cssRuleStr.match(/@font-face\s*{[^}]*}/g) || [];

        fontFaceBlocks.forEach(block => {
            // Extract URLs from src properties
            const urls = block.match(/src\s*:\s*[^;]*/g) || [];
            urls.forEach(srcDeclaration => {
                // Find all url() references in the src declaration
                const fontUrls = getUrlsFromCssString(srcDeclaration);
                fontFaceUrls.push(...fontUrls);
            });
        });

        return fontFaceUrls;
    };

    /**
     *
     * @param {String} html
     * @returns {String[]}
     */
    const getImageUrlsFromFromHtml = function (html) {
        return getUrlsFromCssString(html, 'src=', [' ', '>', '\t'], true);
    };

    const escapeRegExp = function (string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
    };

    /**
     * Create a fallback font-face rule for handling CORS errors
     * @returns {String}
     */
    const createFallbackFontFaceRules = function () {
        return `
            @font-face {
                font-family: 'CORS-fallback-serif';
                src: local('Times New Roman'), local('Georgia'), serif;
            }
            @font-face {
                font-family: 'CORS-fallback-sans';
                src: local('Arial'), local('Helvetica'), sans-serif;
            }
            /* Add fallback font handling */
            [data-font-error] {
                font-family: 'CORS-fallback-sans', sans-serif !important;
            }
            [data-font-error="serif"] {
                font-family: 'CORS-fallback-serif', serif !important;
            }
        `;
    };

    /**
     * Clean up and optimize CSS for better rendering
     * @param {String} cssStyles
     * @returns {String}
     */
    const optimizeCssForRendering = function (cssStyles) {
        // Add fallback font-face rules
        const enhanced = cssStyles + createFallbackFontFaceRules();

        // Replace problematic font-face declarations with proxied versions
        let optimized = enhanced.replace(/(url\(['"]?)(https?:\/\/[^)'"]+)(['"]?\))/gi, (match, prefix, url, suffix) => {
            // If it's a font file, proxy it
            if (url.match(/\.(woff2?|ttf|eot|otf)(\?.*)?$/i)) {
                return `${prefix}${CorsProxy(url)}${suffix}`;
            }
            return match;
        });

        // Add error handling for fonts
        optimized += `
            /* Suppress font CORS errors in console */
            @supports (font-display: swap) {
                @font-face {
                    font-display: swap !important;
                }
            }
        `;

        return optimized;
    };

    /**
     *
     * @param {String} contentHtml
     * @param {Number} width
     * @param {Number} height
     *
     * @returns {Promise<String>}
     */
    const buildSvgDataUri = (webUrl, inputContentHtml, width, height, scroll, xoff) => {
        /* !! 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 = '';
        const urlsFoundInCss = [];
        const fontUrlsInCss = [];

        for (let i = 0; i < styleSheets.length; i += 1) {
            try {
                const rules = styleSheets[i].cssRules;
                for (let j = 0; j < rules.length; j += 1) {
                    const cssRuleStr = rules[j].cssText;
                    urlsFoundInCss.push(...getUrlsFromCssString(cssRuleStr));
                    fontUrlsInCss.push(...getFontFaceUrlsFromCss(cssRuleStr));
                    cssStyles += cssRuleStr;
                }
            } catch (e) {
                /* empty */
            }
        }

        // Optimize and enhance CSS
        cssStyles = optimizeCssForRendering(cssStyles);

        // 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);
        //     }
        // }

        let contentHtml = inputContentHtml
            .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

        // Add script to handle font loading errors
        contentHtml += `
            <script>
                // Handle font loading errors with fallbacks
                document.addEventListener('DOMContentLoaded', function() {
                    // Mark elements with font issues
                    document.querySelectorAll('*').forEach(function(el) {
                        const style = window.getComputedStyle(el);
                        const fontFamily = style.getPropertyValue('font-family');
                        if (fontFamily && !fontFamily.includes('serif') && !fontFamily.includes('sans')) {
                            el.setAttribute('data-font-error', 'sans');
                        } else if (fontFamily && fontFamily.includes('serif')) {
                            el.setAttribute('data-font-error', 'serif');
                        }
                    });
                });
            </script>
        `;

        const urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml).filter(url => !url.startsWith('data:'));
        return getMultipleResourcesAsBase64(webUrl, urlsFoundInHtml).then(fetchedResources => {
            for (let i = 0; i < fetchedResources.length; i += 1) {
                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 =
                '#mw-sidebar-checkbox ~ .vector-main-menu-container { display: none !important; } ' + // hack to prevent wikipedia menu from appearing
                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='${-xoff}' y='${-scroll}' width='${xoff + width}' height='${scroll + height}'>
                            ${contentRootElemString}
                        </foreignObject>
                </svg>`;

            // convert SVG to data-uri
            return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svg)))}`;
        });
    };

    /**
     * @param {String} html
     * @param {Number} width
     * @param {Number} height
     *
     * @return {Promise<Image>}
     */
    this.renderToImage = (webUrl, html, width, height, scroll, xoff) =>
        new Promise(resolve => {
            console.log(`BUILDING SVG for: ${webUrl}`);
            buildSvgDataUri(webUrl, html, width, height, scroll, xoff).then(uri => {
                const img = new Image();
                img.src = uri;
                img.onload = () => {
                    console.log(`IMAGE SVG created: ${webUrl}`);
                    resolve(img);
                };
            });
        });

    /**
     * @param {String} html
     * @param {Number} width
     * @param {Number} height
     *
     * @return {Promise<Image>}
     */
    this.renderToCanvas = (webUrl, html, width, height, scroll, xoff, oversample) =>
        this.renderToImage(webUrl, html, width, height, scroll, xoff).then(img => {
            const canvas = document.createElement('canvas');
            canvas.width = img.width * oversample;
            canvas.height = img.height * oversample;

            const canvasCtx = canvas.getContext('2d');
            canvasCtx.drawImage(img, 0, 0, img.width * oversample, img.height * oversample);
            return canvas;
        });

    /**
     * @param {String} html
     * @param {Number} width
     * @param {Number} height
     *
     * @return {Promise<String>}
     */
    this.renderToBase64Png = (webUrl, html, width, height, scroll, xoff, oversample) =>
        this.renderToCanvas(webUrl, html, width, height, scroll, xoff, oversample) //
            .then(canvas => canvas.toDataURL('image/png'));
};

export function CreateImage(webUrl, styleSheets, html, width, height, scroll, xoff = 0, oversample = 1) {
    return new ForeignHtmlRenderer(styleSheets).renderToBase64Png(
        webUrl,
        html
            .replace(/docView-hack/g, 'documentView-hack')
            .replace(/\n/g, '')
            .replace(/<script((?!\/script).)*<\/script>/g, ''),
        width,
        height,
        scroll,
        xoff,
        oversample
    );
}

const ClipboardUtils = new (function () {
    const permissions = {
        'image/bmp': true,
        'image/gif': true,
        'image/png': true,
        'image/jpeg': true,
        'image/tiff': true,
    };

    function getType(types) {
        for (let j = 0; j < types.length; j += 1) {
            const type = types[j];
            if (permissions[type]) {
                return type;
            }
        }
        return null;
    }
    function getItem(items) {
        for (let i = 0; i < items.length; i += 1) {
            const item = items[i];
            if (item) {
                const type = getType(item.types);
                if (type) {
                    return item.getType(type);
                }
            }
        }
        return null;
    }
    function loadFile(file, callback) {
        if (window.FileReader) {
            const 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) {
            const promise = navigator.clipboard.read();
            promise
                .then(items => {
                    const promise2 = getItem(items);
                    if (promise2 == null) {
                        callback(null, null);
                        return;
                    }
                    promise2
                        .then(result => {
                            loadFile(result, callback);
                        })
                        .catch(() => {
                            callback(null, 'Reading clipboard error.');
                        });
                })
                .catch(() => {
                    callback(null, 'Reading clipboard error.');
                });
        } else {
            callback(null, 'Clipboard is not supported.');
        }
    };
})();

export function pasteImageBitmap(callback) {
    return ClipboardUtils.readImage(callback);
}