"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'
|
} from '#/state/session'
|
||||||
import {readLastActiveAccount} from '#/state/session/util'
|
import {readLastActiveAccount} from '#/state/session/util'
|
||||||
import {Provider as ShellStateProvider} from '#/state/shell'
|
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 LoggedOutViewProvider} from '#/state/shell/logged-out'
|
||||||
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
|
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
|
||||||
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
|
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
|
||||||
|
@ -62,6 +63,8 @@ function InnerApp() {
|
||||||
useIntentHandler()
|
useIntentHandler()
|
||||||
const hasCheckedReferrer = useStarterPackEntry()
|
const hasCheckedReferrer = useStarterPackEntry()
|
||||||
|
|
||||||
|
useComposerKeyboardShortcut()
|
||||||
|
|
||||||
// init
|
// init
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function onLaunch(account?: SessionAccount) {
|
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