Prevent accidental submission of Tavern/Guild posts after pasting (#10226)

* Temporarily disable ctrl-enter to send Guild messages after paste

Disable Ctrl-Enter after pasting, because some users are experiencing issues with accidentally sending their messages after pasting.

* Code style fixes for "Temporarily disable ctrl-enter to send Guild messages after paste"

* Fix issues with variable location

* Fix variables for accidental chat submission features

Moving vatiables for the chat submit timeout to their own variable so they won't be overwritten

* Fix code formatting issues with accidental chat submission code

* Remove leading space from variables to fix lint issues

website/client/components/groups/group.vue

@@ -29,7 +29,7 @@
       .col-12
         h3(v-once) {{ $t('chat') }}
         .row.new-message-row
-          textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessage()')
+          textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessageShortcut()', @paste='disableMessageSendShortcut()')
           autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
         .row.chat-actions
           .col-6.chat-receive-actions
@@ -397,6 +397,10 @@ export default {
         description: true,
         challenges: true,
       },
+      chat: {
+        submitDisable: false,
+        submitTimeout: null,
+      },
       newMessage: '',
       coords: {
         TOP: 0,
@@ -552,6 +556,28 @@ export default {
       this.$store.state.memberModalOptions.fetchMoreMembers = this.loadMembers;
       this.$root.$emit('bv::show::modal', 'members-modal');
     },
+    disableMessageSendShortcut () {
+      // Some users were experiencing accidental sending of messages after pasting
+      // So, after pasting, disable the shortcut for a second.
+      this.chat.submitDisable = true;
+
+      if (this.chat.submitTimeout) {
+        // If someone pastes during the disabled period, prevent early re-enable
+        clearTimeout(this.chat.submitTimeout);
+        this.chat.submitTimeout = null;
+      }
+
+      this.chat.submitTimeout = window.setTimeout(() => {
+        this.chat.submitTimeout = null;
+        this.chat.submitDisable = false;
+      }, 500);
+    },
+    async sendMessageShortcut () {
+      // If the user recently pasted in the text field, don't submit
+      if (!this.chat.submitDisable) {
+        this.sendMessage();
+      }
+    },
     async sendMessage () {
       if (!this.newMessage) return;
 

website/client/components/groups/tavern.vue

@@ -12,7 +12,7 @@
         h3(v-once) {{ $t('tavernChat') }}
 
         .row
-          textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', :class='{"user-entry": newMessage}', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessage()')
+          textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', :class='{"user-entry": newMessage}', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessageShortcut()', @paste='disableMessageSendShortcut()')
           autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
 
         .row.chat-actions
@@ -603,6 +603,10 @@ export default {
         tierStaff,
         upIcon,
       }),
+      chat: {
+        submitDisable: false,
+        submitTimeout: null,
+      },
       group: {
         chat: [],
       },
@@ -765,6 +769,28 @@ export default {
     toggleSleep () {
       this.$store.dispatch('user:sleep');
     },
+    disableMessageSendShortcut () {
+      // Some users were experiencing accidental sending of messages after pasting
+      // So, after pasting, disable the shortcut for a second.
+      this.chat.submitDisable = true;
+
+      if (this.chat.submitTimeout) {
+        // If someone pastes during the disabled period, prevent early re-enable
+        clearTimeout(this.chat.submitTimeout);
+        this.chat.submitTimeout = null;
+      }
+
+      this.chat.submitTimeout = window.setTimeout(() => {
+        this.chat.submitTimeout = null;
+        this.chat.submitDisable = false;
+      }, 500);
+    },
+    async sendMessageShortcut () {
+      // If the user recently pasted in the text field, don't submit
+      if (!this.chat.submitDisable) {
+        this.sendMessage();
+      }
+    },
     async sendMessage () {
       let response = await this.$store.dispatch('chat:postChat', {
         group: this.group,