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

Lexical: Improve image node insertion 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-08-01 14:44:12 +02:00
parent 43216e7d2a
commit 942f22d5a3
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/features/compose/editor/index.tsx
View File

@ -156,8 +156,8 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
<div className='editor' ref={onRef} onFocus={onFocus} onPaste={handlePaste}> <div className='editor' ref={onRef} onFocus={onFocus} onPaste={handlePaste}>
<ContentEditable <ContentEditable
className={clsx('outline-none transition-[min-height] motion-reduce:transition-none', { className={clsx('outline-none transition-[min-height] motion-reduce:transition-none', {
'min-h-[40px] pb-4': condensed, 'min-h-[40px]': condensed,
'min-h-[100px] pb-8': !condensed, 'min-h-[100px]': !condensed,
})} })}
/> />
</div> </div>

12
app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
View File

@ -6,10 +6,13 @@
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $createHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode'; import { $createHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
import { mergeRegister } from '@lexical/utils'; import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
import { import {
$createParagraphNode,
$getSelection, $getSelection,
$insertNodes,
$isRangeSelection, $isRangeSelection,
$isRootOrShadowRoot,
COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_LOW,
DEPRECATED_$isGridSelection, DEPRECATED_$isGridSelection,
LexicalEditor, LexicalEditor,
@ -181,8 +184,11 @@ const BlockTypeFloatingToolbar = ({
editor.update(() => { editor.update(() => {
const selection = $getSelection(); const selection = $getSelection();
if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) { if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
const selectionNode = selection.anchor.getNode(); const imageNode = $createImageNode({ altText: '', src });
selectionNode.replace($createImageNode({ altText: '', src })); $insertNodes([imageNode]);
if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
$wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
}
} }
}); });
}; };