SubMiner/vendor/yomitan/js/comm/clipboard-reader.js

/*
 * Copyright (C) 2023-2025  Yomitan Authors
 * Copyright (C) 2020-2022  Yomichan Authors
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import {getFileExtensionFromImageMediaType} from '../media/media-util.js';

/**
 * Class which can read text and images from the clipboard.
 */
export class ClipboardReader {
    /**
     * @param {?Document} document
     * @param {?string} pasteTargetSelector
     * @param {?string} richContentPasteTargetSelector
     */
    constructor(document, pasteTargetSelector, richContentPasteTargetSelector) {
        /** @type {?Document} */
        this._document = document;
        /** @type {?import('environment').Browser} */
        this._browser = null;
        /** @type {?HTMLTextAreaElement} */
        this._pasteTarget = null;
        /** @type {?string} */
        this._pasteTargetSelector = pasteTargetSelector;
        /** @type {?HTMLElement} */
        this._richContentPasteTarget = null;
        /** @type {?string} */
        this._richContentPasteTargetSelector = richContentPasteTargetSelector;
    }

    /**
     * Gets the browser being used.
     * @type {?import('environment').Browser}
     */
    get browser() {
        return this._browser;
    }

    /**
     * Assigns the browser being used.
     */
    set browser(value) {
        this._browser = value;
    }

    /**
     * Gets the text in the clipboard.
     * @param {boolean} useRichText Whether or not to use rich text for pasting, when possible.
     * @returns {Promise<string>} A string containing the clipboard text.
     * @throws {Error} Error if not supported.
     */
    async getText(useRichText) {
        /*
        Notes:
            document.execCommand('paste') sometimes doesn't work on Firefox.
            See: https://bugzilla.mozilla.org/show_bug.cgi?id=1603985
            Therefore, navigator.clipboard.readText() is used on Firefox.

            navigator.clipboard.readText() can't be used in Chrome for two reasons:
            * Requires page to be focused, else it rejects with an exception.
            * When the page is focused, Chrome will request clipboard permission, despite already
              being an extension with clipboard permissions. It effectively asks for the
              non-extension permission for clipboard access.
        */
        if (this._isFirefox() && !useRichText) {
            try {
                return await navigator.clipboard.readText();
            } catch (e) {
                // Error is undefined, due to permissions
                throw new Error('Cannot read clipboard text; check extension permissions');
            }
        }

        const document = this._document;
        if (document === null) {
            throw new Error('Clipboard reading not supported in this context');
        }

        if (useRichText) {
            const target = this._getRichContentPasteTarget();
            target.focus();
            document.execCommand('paste');
            const result = /** @type {string} */ (target.textContent);
            this._clearRichContent(target);
            return result;
        } else {
            const target = this._getPasteTarget();
            target.value = '';
            target.focus();
            document.execCommand('paste');
            const result = target.value;
            target.value = '';
            return (typeof result === 'string' ? result : '');
        }
    }

    /**
     * Gets the first image in the clipboard.
     * @returns {Promise<?string>} A string containing a data URL of the image file, or null if no image was found.
     * @throws {Error} Error if not supported.
     */
    async getImage() {
        // See browser-specific notes in getText
        if (
            this._isFirefox() &&
            typeof navigator.clipboard !== 'undefined' &&
            typeof navigator.clipboard.read === 'function'
        ) {
            // This function is behind the Firefox flag: dom.events.asyncClipboard.read
            // See: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/read#browser_compatibility
            let items;
            try {
                items = await navigator.clipboard.read();
            } catch (e) {
                return null;
            }

            for (const item of items) {
                for (const type of item.types) {
                    if (!getFileExtensionFromImageMediaType(type)) { continue; }
                    try {
                        const blob = await item.getType(type);
                        return await this._readFileAsDataURL(blob);
                    } catch (e) {
                        // NOP
                    }
                }
            }
            return null;
        }

        const document = this._document;
        if (document === null) {
            throw new Error('Clipboard reading not supported in this context');
        }

        const target = this._getRichContentPasteTarget();
        target.focus();
        document.execCommand('paste');
        const image = target.querySelector('img[src^="data:"]');
        const result = (image !== null ? image.getAttribute('src') : null);
        this._clearRichContent(target);
        return result;
    }

    // Private

    /**
     * @returns {boolean}
     */
    _isFirefox() {
        return (this._browser === 'firefox' || this._browser === 'firefox-mobile');
    }

    /**
     * @param {Blob} file
     * @returns {Promise<string>}
     */
    _readFileAsDataURL(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(/** @type {string} */ (reader.result));
            reader.onerror = () => reject(reader.error);
            reader.readAsDataURL(file);
        });
    }

    /**
     * @returns {HTMLTextAreaElement}
     */
    _getPasteTarget() {
        if (this._pasteTarget === null) {
            this._pasteTarget = /** @type {HTMLTextAreaElement} */ (this._findPasteTarget(this._pasteTargetSelector));
        }
        return this._pasteTarget;
    }

    /**
     * @returns {HTMLElement}
     */
    _getRichContentPasteTarget() {
        if (this._richContentPasteTarget === null) {
            this._richContentPasteTarget = /** @type {HTMLElement} */ (this._findPasteTarget(this._richContentPasteTargetSelector));
        }
        return this._richContentPasteTarget;
    }

    /**
     * @template {Element} T
     * @param {?string} selector
     * @returns {T}
     * @throws {Error}
     */
    _findPasteTarget(selector) {
        if (selector === null) { throw new Error('Invalid selector'); }
        const target = this._document !== null ? this._document.querySelector(selector) : null;
        if (target === null) { throw new Error('Clipboard paste target does not exist'); }
        return /** @type {T} */ (target);
    }

    /**
     * @param {HTMLElement} element
     */
    _clearRichContent(element) {
        for (const image of element.querySelectorAll('img')) {
            image.removeAttribute('src');
            image.removeAttribute('srcset');
        }
        element.textContent = '';
    }
}