diff --git a/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx b/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx index 04d07652e..1051e2537 100644 --- a/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx +++ b/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx @@ -1,27 +1,35 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; +import { COMMAND_PRIORITY_NORMAL, createCommand, type LexicalCommand } from 'lexical'; import { useEffect } from 'react'; interface IFocusPlugin { autoFocus?: boolean } +export const FOCUS_EDITOR_COMMAND: LexicalCommand = createCommand(); + const FocusPlugin: React.FC = ({ autoFocus }) => { const [editor] = useLexicalComposerContext(); const focus = () => { + editor.dispatchCommand(FOCUS_EDITOR_COMMAND, undefined); + }; + + useEffect(() => editor.registerCommand(FOCUS_EDITOR_COMMAND, () => { editor.focus( () => { const activeElement = document.activeElement; const rootElement = editor.getRootElement(); if ( rootElement !== null && - (activeElement === null || !rootElement.contains(activeElement)) + (activeElement === null || !rootElement.contains(activeElement)) ) { rootElement.focus({ preventScroll: true }); } }, { defaultSelection: 'rootEnd' }, ); - }; + return true; + }, COMMAND_PRIORITY_NORMAL)); useEffect(() => { if (autoFocus) focus(); diff --git a/app/soapbox/features/ui/util/global-hotkeys.tsx b/app/soapbox/features/ui/util/global-hotkeys.tsx index 94204feb7..445692ad7 100644 --- a/app/soapbox/features/ui/util/global-hotkeys.tsx +++ b/app/soapbox/features/ui/util/global-hotkeys.tsx @@ -4,7 +4,10 @@ import { useHistory } from 'react-router-dom'; import { resetCompose } from 'soapbox/actions/compose'; import { openModal } from 'soapbox/actions/modals'; -import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks'; +import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin'; +import { useAppSelector, useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks'; + +import type { LexicalEditor } from 'lexical'; const keyMap = { help: '?', @@ -46,14 +49,25 @@ const GlobalHotkeys: React.FC = ({ children, node }) => { const dispatch = useAppDispatch(); const me = useAppSelector(state => state.me); const { account } = useOwnAccount(); + const wysiwygEditor = useSettings().get('wysiwyg'); const handleHotkeyNew = (e?: KeyboardEvent) => { e?.preventDefault(); - const element = node.current?.querySelector('textarea#compose-textarea') as HTMLTextAreaElement; + let element; + + if (wysiwygEditor) { + element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement; + } else { + element = node.current?.querySelector('textarea#compose-textarea') as HTMLTextAreaElement; + } if (element) { - element.focus(); + if (wysiwygEditor) { + ((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined); + } else { + element.focus(); + } } else { dispatch(openModal('COMPOSE')); }