Untitled

(function() {
    'use strict';

     // Create new button element
    const newButton = document.createElement('button');
    newButton.innerText = '火星文，变！';
    newButton.id = 'magicButton';
    newButton.style.marginLeft = '16px';

    // Add click event listener to new button
    newButton.addEventListener('click', () => {
        console.log('Magic started!');

        // get input text
        const textarea = document.getElementById('reply-control').querySelector('textarea');

        if (textarea) {
           const textContent = textarea.value;
           // redacted for some reason
           const magicContent = textContent + " hello world\n";
           textarea.value = magicContent;
        }

        // Dispatch space event to trigger the change (see preview panel as verification)
        // TODO: need to manually add space to trigger, don't know how to simulate
        // the following does not work
        const mouseEvent = new MouseEvent('click', { bubbles: true });
        textarea.dispatchEvent(mouseEvent);
        textarea.click();
        textarea.focus();

        // Dispatch space event to input element
        const spaceEvent = new KeyboardEvent('keydown', {
            key: 'Space',
            bubbles: true,
            cancelable: true
        });
        textarea.dispatchEvent(spaceEvent);

        console.log('Magic is finished!');
    });

    setInterval(() =>{
        // Check if reply control is available
        const replyControl = document.getElementById('reply-control');
        if (!replyControl) {
            return;
        }

        // check if button is already added
        const magicButton = document.getElementById('magicButton');
        if (magicButton) {
            return;
        }

        // Add new button to save-or-cancel div
        const saveOrCancelDiv = replyControl.querySelector('.save-or-cancel');
        saveOrCancelDiv.appendChild(newButton);
    }, 0);
})();