"N" keyboard shortcut to open a new post modal (#5197)
* feat: Add hook on web app to open composer with 'N' keyboard shortcut * Extract, don't fire open composer if already open * Ignore interactive elements --------- Co-authored-by: João Gabriel <joaog@nocorp.io> Co-authored-by: Hailey <me@haileyok.com>zio/dev^2
parent
cac43127f0
commit
d76f9abdd7
|
@ -35,6 +35,7 @@ import {
|
|||
} from '#/state/session'
|
||||
import {readLastActiveAccount} from '#/state/session/util'
|
||||
import {Provider as ShellStateProvider} from '#/state/shell'
|
||||
import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
|
||||
import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
|
||||
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
|
||||
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
|
||||
|
@ -62,6 +63,8 @@ function InnerApp() {
|
|||
useIntentHandler()
|
||||
const hasCheckedReferrer = useStarterPackEntry()
|
||||
|
||||
useComposerKeyboardShortcut()
|
||||
|
||||
// init
|
||||
useEffect(() => {
|
||||
async function onLaunch(account?: SessionAccount) {
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react'
|
||||
|
||||
import {useComposerControls} from './'
|
||||
|
||||
/**
|
||||
* Based on {@link https://github.com/jaywcjlove/hotkeys-js/blob/b0038773f3b902574f22af747f3bb003a850f1da/src/index.js#L51C1-L64C2}
|
||||
*/
|
||||
function shouldIgnore(event: KeyboardEvent) {
|
||||
const target: any = event.target || event.srcElement
|
||||
if (!target) return false
|
||||
const {tagName} = target
|
||||
if (!tagName) return false
|
||||
const isInput =
|
||||
tagName === 'INPUT' &&
|
||||
![
|
||||
'checkbox',
|
||||
'radio',
|
||||
'range',
|
||||
'button',
|
||||
'file',
|
||||
'reset',
|
||||
'submit',
|
||||
'color',
|
||||
].includes(target.type)
|
||||
// ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
|
||||
if (
|
||||
target.isContentEditable ||
|
||||
((isInput || tagName === 'TEXTAREA' || tagName === 'SELECT') &&
|
||||
!target.readOnly)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export function useComposerKeyboardShortcut() {
|
||||
const {openComposer} = useComposerControls()
|
||||
|
||||
React.useEffect(() => {
|
||||
function handler(event: KeyboardEvent) {
|
||||
if (shouldIgnore(event)) return
|
||||
if (event.key === 'n' || event.key === 'N') {
|
||||
openComposer({})
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [openComposer])
|
||||
}
|
Loading…
Reference in New Issue