Fix copy actions for non-HTTPS/localhost Fixes #2352

6e2b5d5dc8aed6e30ab5cbc5b4e5da4c8a2ca3e2

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/script.js+9 -16 Viewed

     isTrueBoolean,
     toggleDrawer,
     isElementInViewport,
 +    copyText,
 } from './scripts/utils.js';
 import { debounce_timeout } from './scripts/constants.js';

     const codeBlocks = $(messageElement).find('pre code');
     for (let i = 0; i < codeBlocks.length; i++) {
         hljs.highlightElement(codeBlocks.get(i));
 -        if (navigator.clipboard !== undefined) {
         const copyButton = document.createElement('i');
         copyButton.classList.add('fa-solid', 'fa-copy', 'code-copy', 'interactable');
         copyButton.title = 'Copy code';
         codeBlocks.get(i).appendChild(copyButton);
                     copyButton.addEventListener('pointerup', async function (event) {
                 navigator.clipboard.writeText(            const text = codeBlocks.get(i).innerText);
 +            await copyText(text);
             toastr.info(t`Copied!`, '', { timeOut: 2000 });
         });
+    }
+}
 -}
 /**

     } else {
         diffPrevPrompt.style.display = 'none';
+    }
     popup.dlg.querySelector('#copyPromptToClipboard').addEventListener('clickpointerup', async function () {
         let rawPrompt = itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt;
         let rawPromptValues = rawPrompt;

             rawPromptValues = rawPrompt.map(x => x.content).join('\n');
+        }
         navigator.clipboard.writeTextawait copyText(rawPromptValues);
         toastr.info(t`Copied!`);
     });

         //console.log(logMessage);
         try {
             await navigator.clipboard.writeTextcopyText(logMessage);
             toastr.info('Your ST API setup data has been copied to the clipboard.');
         } catch (error) {
             toastr.error('Failed to copy ST Setup to clipboard:', error);

         setTimeout(function () { $('#shadow_select_chat_popup').css('display', 'none'); }, animation_duration);
     });
 -    if (navigator.clipboard === undefined) {
 +    $(document).on('pointerup', '.mes_copy', async function () {
 -        // No clipboard support
 -        $('.mes_copy').remove();
 -    }
 -    else {
 -        $(document).on('pointerup', '.mes_copy', function () {
         if (this_chid !== undefined || selected_group || name2 === neutralCharacterName) {
             try {
                 const messageId = $(this).closest('.mes').attr('mesid');
                 const text = chat[messageId]['mes'];
 -                    navigator.clipboard.writeText(text);
 +                await copyText(text);
                 toastr.info('Copied!', '', { timeOut: 2000 });
             } catch (err) {
                 console.error('Failed to copy: ', err);
+            }
+        }
     });
 -    }
     $(document).on('pointerup', '.mes_prompt', async function () {
         let mesIdForItemization = $(this).closest('.mes').attr('mesId');

     initCustomSelectedSamplers();
 });
+-

public/scripts/utils.js+20 -0 Viewed

+}
 /**
 + * Copy text to clipboard. Use navigator.clipboard.writeText if available, otherwise use document.execCommand.
 + * @param {string} text - The text to copy to the clipboard.
 + * @returns {Promise<void>} A promise that resolves when the text has been copied to the clipboard.
 + */
 +export function copyText(text) {
 +    if (navigator.clipboard) {
 +        return navigator.clipboard.writeText(text);
 +    }
++
 +    const parent = document.querySelector('dialog[open]:last-of-type') ?? document.body;
 +    const textArea = document.createElement('textarea');
 +    textArea.value = text;
 +    parent.appendChild(textArea);
 +    textArea.focus();
 +    textArea.select();
 +    document.execCommand('copy');
 +    parent.removeChild(textArea);
 +}
++
 +/**
  * Map of debounced functions to their timers.
  * Weak map is used to avoid memory leaks.
  * @type {WeakMap<function, any>}