From 43216e7d2aeca7506c46adb8ae3561762f2471ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 1 Aug 2023 00:42:06 +0200 Subject: [PATCH] Lexical: Do not display two toolbars at once MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../features/compose/editor/handlers/image.ts | 11 +++++++++++ .../compose/editor/nodes/image-component.tsx | 11 ++--------- .../editor/plugins/autosuggest-plugin.tsx | 17 +++++------------ .../floating-text-format-toolbar-plugin.tsx | 10 ++-------- .../compose/editor/plugins/focus-plugin.tsx | 5 +---- 5 files changed, 21 insertions(+), 33 deletions(-) create mode 100644 app/soapbox/features/compose/editor/handlers/image.ts diff --git a/app/soapbox/features/compose/editor/handlers/image.ts b/app/soapbox/features/compose/editor/handlers/image.ts new file mode 100644 index 000000000..58178e242 --- /dev/null +++ b/app/soapbox/features/compose/editor/handlers/image.ts @@ -0,0 +1,11 @@ +import { $createImageNode } from '../nodes/image-node'; + +import type { LexicalNode } from 'lexical'; +import type { ImportHandler } from 'lexical-remark'; + +const importImage: ImportHandler /* TODO */ = (node: LexicalNode, parser) => { + const lexicalNode = $createImageNode({ altText: node.alt ?? '', src: node.url }); + parser.append(lexicalNode); +}; + +export { importImage }; diff --git a/app/soapbox/features/compose/editor/nodes/image-component.tsx b/app/soapbox/features/compose/editor/nodes/image-component.tsx index c5d302a07..0bc917686 100644 --- a/app/soapbox/features/compose/editor/nodes/image-component.tsx +++ b/app/soapbox/features/compose/editor/nodes/image-component.tsx @@ -148,15 +148,8 @@ const ImageComponent = ({ (event: KeyboardEvent) => { const latestSelection = $getSelection(); const buttonElem = buttonRef.current; - if ( - isSelected && - $isNodeSelection(latestSelection) && - latestSelection.getNodes().length === 1 - ) { - if ( - buttonElem !== null && - buttonElem !== document.activeElement - ) { + if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) { + if (buttonElem !== null && buttonElem !== document.activeElement) { event.preventDefault(); buttonElem.focus(); return true; diff --git a/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx b/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx index 794742fc7..2ce5a1df7 100644 --- a/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx +++ b/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx @@ -120,18 +120,12 @@ const getScrollParent = ( if (style.position === 'fixed') { return document.body; } - for ( - let parent: HTMLElement | null = element; - (parent = parent.parentElement); - - ) { + for (let parent: HTMLElement | null = element; (parent = parent.parentElement);) { style = getComputedStyle(parent); if (excludeStaticParent && style.position === 'static') { continue; } - if ( - overflowRegex.test(style.overflow + style.overflowY + style.overflowX) - ) { + if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) { return parent; } } @@ -418,17 +412,16 @@ const AutosuggestPlugin = ({ editor.getEditorState().read(() => { const range = document.createRange(); const match = getQueryTextForSearch(editor); + const nativeSelection = window.getSelection(); - if (!match) { + if (!match || nativeSelection?.anchorOffset !== nativeSelection?.focusOffset) { closeTypeahead(); return; } dispatch(fetchComposeSuggestions(composeId, match.matchingString.trim())); - if ( - !isSelectionOnEntityBoundary(editor, match.leadOffset) - ) { + if (!isSelectionOnEntityBoundary(editor, match.leadOffset)) { const isRangePositioned = tryToPositionRange(match.leadOffset, range); if (isRangePositioned !== null) { startTransition(() => diff --git a/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx index 53c52fe4b..356654976 100644 --- a/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx +++ b/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx @@ -119,10 +119,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: { const formatParagraph = () => { editor.update(() => { const selection = $getSelection(); - if ( - $isRangeSelection(selection) || - DEPRECATED_$isGridSelection(selection) - ) { + if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) { $setBlocksType(selection, () => $createParagraphNode()); } }); @@ -509,10 +506,7 @@ const useFloatingTextFormatToolbar = ( setIsLink(false); } - if ( - !$isCodeHighlightNode(selection.anchor.getNode()) && - selection.getTextContent() !== '' - ) { + if (!$isCodeHighlightNode(selection.anchor.getNode()) && selection.getTextContent() !== '') { setIsText($isTextNode(node)); } else { setIsText(false); diff --git a/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx b/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx index 1051e2537..94a911793 100644 --- a/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx +++ b/app/soapbox/features/compose/editor/plugins/focus-plugin.tsx @@ -20,10 +20,7 @@ const FocusPlugin: React.FC = ({ autoFocus }) => { () => { const activeElement = document.activeElement; const rootElement = editor.getRootElement(); - if ( - rootElement !== null && - (activeElement === null || !rootElement.contains(activeElement)) - ) { + if (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) { rootElement.focus({ preventScroll: true }); } }, { defaultSelection: 'rootEnd' },