bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

why doesn't it autofocus

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-03-19 20:17:09 +01:00
parent 5b55a89826
commit 9933aeb238
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/soapbox/features/compose/editor/index.tsx
View file

@ -7,6 +7,7 @@ This source code is licensed under the MIT license found in the
LICENSE file in the /app/soapbox/features/compose/editor directory. LICENSE file in the /app/soapbox/features/compose/editor directory.
*/ */
import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown'; import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown';
import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
import { LexicalComposer, InitialConfigType } from '@lexical/react/LexicalComposer'; import { LexicalComposer, InitialConfigType } from '@lexical/react/LexicalComposer';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { ContentEditable } from '@lexical/react/LexicalContentEditable'; import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@ -30,13 +31,13 @@ import FloatingLinkEditorPlugin from './plugins/floating-link-editor-plugin';
import FloatingTextFormatToolbarPlugin from './plugins/floating-text-format-toolbar-plugin'; import FloatingTextFormatToolbarPlugin from './plugins/floating-text-format-toolbar-plugin';
import { MentionPlugin } from './plugins/mention-plugin'; import { MentionPlugin } from './plugins/mention-plugin';
const StatePlugin = ({ composeId, autoFocus }: { composeId: string, autoFocus: boolean }) => { const StatePlugin = ({ composeId }: { composeId: string }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [editor] = useLexicalComposerContext(); const [editor] = useLexicalComposerContext();
useEffect(() => { (window as any).xd = editor;
if (autoFocus) editor.focus();
useEffect(() => {
editor.registerUpdateListener(({ editorState }) => { editor.registerUpdateListener(({ editorState }) => {
dispatch(setEditorState(composeId, editorState.isEmpty() ? null : JSON.stringify(editorState.toJSON()))); dispatch(setEditorState(composeId, editorState.isEmpty() ? null : JSON.stringify(editorState.toJSON())));
}); });
@ -65,6 +66,11 @@ const ComposeEditor = React.forwardRef<string, any>(({ composeId, condensed, onF
underline: 'underline', underline: 'underline',
underlineStrikethrough: 'underline-line-through', underlineStrikethrough: 'underline-line-through',
}, },
heading: {
h1: 'text-2xl font-bold',
h2: 'text-xl font-bold',
h3: 'text-lg font-semibold',
},
}, },
editorState: dispatch((_, getState) => { editorState: dispatch((_, getState) => {
const state = getState(); const state = getState();
@ -111,9 +117,10 @@ const ComposeEditor = React.forwardRef<string, any>(({ composeId, condensed, onF
<div className='editor' ref={onRef} onFocus={onFocus}> <div className='editor' ref={onRef} onFocus={onFocus}>
<ContentEditable <ContentEditable
className={clsx('mr-4 py-2 outline-none transition-[min-height] motion-reduce:transition-none', { className={clsx('mr-4 py-2 outline-none transition-[min-height] motion-reduce:transition-none', {
'min-h-[40px]': condensed, 'min-fh-[40px]': condensed,
'min-h-[100px]': !condensed, 'min-h-[100px]': !condensed,
})} })}
autoFocus={autoFocus}
/> />
</div> </div>
} }
@ -124,6 +131,7 @@ const ComposeEditor = React.forwardRef<string, any>(({ composeId, condensed, onF
)} )}
ErrorBoundary={LexicalErrorBoundary} ErrorBoundary={LexicalErrorBoundary}
/> />
{autoFocus && <AutoFocusPlugin />}
<OnChangePlugin onChange={(_, editor) => { <OnChangePlugin onChange={(_, editor) => {
editor.update(() => { editor.update(() => {
if (editorStateRef) (editorStateRef as any).current = $convertToMarkdownString(TRANSFORMERS); if (editorStateRef) (editorStateRef as any).current = $convertToMarkdownString(TRANSFORMERS);
@ -141,7 +149,7 @@ const ComposeEditor = React.forwardRef<string, any>(({ composeId, condensed, onF
<FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} /> <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
</> </>
)} )}
<StatePlugin composeId={composeId} autoFocus={autoFocus} /> <StatePlugin composeId={composeId} />
</div> </div>
</LexicalComposer> </LexicalComposer>
); );