moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lexical: Focus editor by hotkey 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-07-31 23:52:35 +02:00
parent 1d8b686928
commit f259f52b40
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/soapbox/features/compose/editor/plugins/focus-plugin.tsx
View File

@ -1,27 +1,35 @@
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { COMMAND_PRIORITY_NORMAL, createCommand, type LexicalCommand } from 'lexical';
import { useEffect } from 'react'; import { useEffect } from 'react';
interface IFocusPlugin { interface IFocusPlugin {
autoFocus?: boolean autoFocus?: boolean
} }
export const FOCUS_EDITOR_COMMAND: LexicalCommand<void> = createCommand();
const FocusPlugin: React.FC<IFocusPlugin> = ({ autoFocus }) => { const FocusPlugin: React.FC<IFocusPlugin> = ({ autoFocus }) => {
const [editor] = useLexicalComposerContext(); const [editor] = useLexicalComposerContext();
const focus = () => { const focus = () => {
editor.dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
};
useEffect(() => editor.registerCommand(FOCUS_EDITOR_COMMAND, () => {
editor.focus( editor.focus(
() => { () => {
const activeElement = document.activeElement; const activeElement = document.activeElement;
const rootElement = editor.getRootElement(); const rootElement = editor.getRootElement();
if ( if (
rootElement !== null && rootElement !== null &&
(activeElement === null || !rootElement.contains(activeElement)) (activeElement === null || !rootElement.contains(activeElement))
) { ) {
rootElement.focus({ preventScroll: true }); rootElement.focus({ preventScroll: true });
} }
}, { defaultSelection: 'rootEnd' }, }, { defaultSelection: 'rootEnd' },
); );
}; return true;
}, COMMAND_PRIORITY_NORMAL));
useEffect(() => { useEffect(() => {
if (autoFocus) focus(); if (autoFocus) focus();

20
app/soapbox/features/ui/util/global-hotkeys.tsx
View File

@ -4,7 +4,10 @@ import { useHistory } from 'react-router-dom';
import { resetCompose } from 'soapbox/actions/compose'; import { resetCompose } from 'soapbox/actions/compose';
import { openModal } from 'soapbox/actions/modals'; 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 = { const keyMap = {
help: '?', help: '?',
@ -46,14 +49,25 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const me = useAppSelector(state => state.me); const me = useAppSelector(state => state.me);
const { account } = useOwnAccount(); const { account } = useOwnAccount();
const wysiwygEditor = useSettings().get('wysiwyg');
const handleHotkeyNew = (e?: KeyboardEvent) => { const handleHotkeyNew = (e?: KeyboardEvent) => {
e?.preventDefault(); 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) { if (element) {
element.focus(); if (wysiwygEditor) {
((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
} else {
element.focus();
}
} else { } else {
dispatch(openModal('COMPOSE')); dispatch(openModal('COMPOSE'));
} }