diff --git a/src/app/organisms/channel/ChannelViewCmdBar.jsx b/src/app/organisms/channel/ChannelViewCmdBar.jsx index 39435763..17fc03d6 100644 --- a/src/app/organisms/channel/ChannelViewCmdBar.jsx +++ b/src/app/organisms/channel/ChannelViewCmdBar.jsx @@ -385,6 +385,22 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) { }); } + function listenKeyboard(event) { + const { activeElement } = document; + const lastCmdItem = document.activeElement.parentNode.lastElementChild; + if (event.keyCode === 27) { + if (activeElement.className !== 'cmd-item') return; + viewEvent.emit('focus_msg_input'); + } + if (event.keyCode === 9) { + if (lastCmdItem.className !== 'cmd-item') return; + if (lastCmdItem !== activeElement) return; + if (event.shiftKey) return; + viewEvent.emit('focus_msg_input'); + event.preventDefault(); + } + } + useEffect(() => { viewEvent.on('cmd_activate', activateCmd); viewEvent.on('cmd_deactivate', deactivateCmd); @@ -396,10 +412,13 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) { }, [roomId]); useEffect(() => { + if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard); viewEvent.on('cmd_process', processCmd); viewEvent.on('cmd_exe', executeCmd); asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions); return () => { + if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard); + viewEvent.removeListener('cmd_process', processCmd); viewEvent.removeListener('cmd_exe', executeCmd); asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions); diff --git a/src/app/organisms/channel/ChannelViewInput.jsx b/src/app/organisms/channel/ChannelViewInput.jsx index 773b47d0..08b32c0e 100644 --- a/src/app/organisms/channel/ChannelViewInput.jsx +++ b/src/app/organisms/channel/ChannelViewInput.jsx @@ -50,10 +50,17 @@ function ChannelViewInput({ const mx = initMatrix.matrixClient; const { roomsInput } = initMatrix; + function requestFocusInput() { + if (textAreaRef === null) return; + textAreaRef.current.focus(); + } + useEffect(() => { settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown); + viewEvent.on('focus_msg_input', requestFocusInput); return () => { settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown); + viewEvent.removeListener('focus_msg_input', requestFocusInput); }; }, []);