feat: Rewrite keyboardEventListener mixin to a composable (#9831)

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -1,18 +1,14 @@
 <script>
+import { ref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
   name: 'ReplyTopPanel',
-  mixins: [keyboardEventListenerMixins],
   props: {
     mode: {
       type: String,
       default: REPLY_EDITOR_MODES.REPLY,
     },
-    setReplyMode: {
-      type: Function,
-      default: () => {},
-    },
     isMessageLengthReachingThreshold: {
       type: Boolean,
       default: () => false,
@@ -26,6 +22,36 @@ export default {
       default: false,
     },
   },
+  setup(props, { emit }) {
+    const replyTopRef = ref(null);
+
+    const setReplyMode = mode => {
+      emit('setReplyMode', mode);
+    };
+    const handleReplyClick = () => {
+      setReplyMode(REPLY_EDITOR_MODES.REPLY);
+    };
+    const handleNoteClick = () => {
+      setReplyMode(REPLY_EDITOR_MODES.NOTE);
+    };
+    const keyboardEvents = {
+      'Alt+KeyP': {
+        action: () => handleNoteClick(),
+        allowOnFocusedInput: true,
+      },
+      'Alt+KeyL': {
+        action: () => handleReplyClick(),
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, replyTopRef);
+
+    return {
+      handleReplyClick,
+      handleNoteClick,
+      replyTopRef,
+    };
+  },
   computed: {
     replyButtonClass() {
       return {
@@ -46,31 +72,14 @@ export default {
         : `${this.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
     },
   },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyP': {
-          action: () => this.handleNoteClick(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyL': {
-          action: () => this.handleReplyClick(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
-    handleReplyClick() {
-      this.setReplyMode(REPLY_EDITOR_MODES.REPLY);
-    },
-    handleNoteClick() {
-      this.setReplyMode(REPLY_EDITOR_MODES.NOTE);
-    },
-  },
 };
 </script>
 
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+  <div
+    ref="replyTopRef"
+    class="flex justify-between bg-black-50 dark:bg-slate-800"
+  >
     <div class="button-group">
       <woot-button
         variant="clear"