Bing Search を使っているときにEnter key -> 送信を防ぐときのメモ

やりたいこと

Bing Search を利用しているとき、Enter key でメッセージが送信されるのを防ぎたいときのメモです。

つまり

• Enter key -> テキストエリア内の改行
• Shift key + Enter key -> メッセージ送信

です。

やったこと

以下のUserScript を、Edge で利用できるようにした。

これは、

• stopImmediatePropagation() で、key event に対するリスナーを抑止する
• dispatchEvent() で、key event を入れ替えて発行する

を行うものです。

// ==UserScript==
// @name         Enter for new line and Shift + Enter for submit in Bing Chat
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Allows using Enter for new line and Shift + Enter for submit in Bing Chat text area
// @author       You
// @match        https://www.bing.com/search*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // https://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea/6015906#6015906
    // and modified
    document.addEventListener('keydown', function(event) {
        // ここはBing Search チャット画面の要素が変更されたら更新しないといけないよ
        let cibSerpMain = document.querySelector(".cib-serp-main");
        let cibActionBarMain = cibSerpMain.shadowRoot.querySelector("#cib-action-bar-main");
        let divRoot = cibActionBarMain.shadowRoot.querySelector(".root");
        let mainContainter = divRoot.querySelector(".main-container");
        let inputContainter = mainContainter.querySelector(".input-container");
        let cibTextInput = inputContainter.querySelector("cib-text-input");
        let searchBoxForm = cibTextInput.shadowRoot.querySelector("#searchboxform");
        let textInput = searchBoxForm.querySelector(".text-input");
        let searchBox = textInput.querySelector("#searchbox");

        if (searchBox) {
            if (event.keyCode == 13 && event.shiftKey) {
                event.stopImmediatePropagation();
                const keyboardEvent = new KeyboardEvent('keydown', {
                    code: 'Enter',
                    key: 'Enter',
                    view: window,
                    bubbles: true
                });
                searchBox.dispatchEvent(keyboardEvent);
                searchBox.value = '';
            } else if (event.keyCode == 13) {
                event.stopImmediatePropagation();
            }
        }
    }, true);
})();

できなかったこと

Shift + Enter key でメッセージ送信後、テキストエリアに改行が1つ残る（クリア後、挿入される？）。消す方法がわからなかった。

参考

• How do I detect "shift+enter" and generate a new line in Textarea?
• stopImmediatePropagation()
• dispatchEvent()