From 942f22d5a30e4fecafff4ae50aeac4df81dd6307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 1 Aug 2023 14:44:12 +0200
Subject: [PATCH] Lexical: Improve image node insertion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/compose/editor/index.tsx        |  4 ++--
 .../plugins/floating-block-type-toolbar-plugin.tsx   | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/compose/editor/index.tsx b/app/soapbox/features/compose/editor/index.tsx
index 82b0cbae9..07b3c457b 100644
--- a/app/soapbox/features/compose/editor/index.tsx
+++ b/app/soapbox/features/compose/editor/index.tsx
@@ -156,8 +156,8 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
             <div className='editor' ref={onRef} onFocus={onFocus} onPaste={handlePaste}>
               <ContentEditable
                 className={clsx('outline-none transition-[min-height] motion-reduce:transition-none', {
-                  'min-h-[40px] pb-4': condensed,
-                  'min-h-[100px] pb-8': !condensed,
+                  'min-h-[40px]': condensed,
+                  'min-h-[100px]': !condensed,
                 })}
               />
             </div>
diff --git a/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx b/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
index 67fab475b..404ff6188 100644
--- a/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
+++ b/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
@@ -6,10 +6,13 @@
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $createHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { mergeRegister } from '@lexical/utils';
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
 import {
+  $createParagraphNode,
   $getSelection,
+  $insertNodes,
   $isRangeSelection,
+  $isRootOrShadowRoot,
   COMMAND_PRIORITY_LOW,
   DEPRECATED_$isGridSelection,
   LexicalEditor,
@@ -181,8 +184,11 @@ const BlockTypeFloatingToolbar = ({
     editor.update(() => {
       const selection = $getSelection();
       if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
-        const selectionNode = selection.anchor.getNode();
-        selectionNode.replace($createImageNode({ altText: '', src }));
+        const imageNode = $createImageNode({ altText: '', src });
+        $insertNodes([imageNode]);
+        if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+          $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+        }
       }
     });
   };