fix: Improvements to image positioning (#3061)

* fix: Empty paragraph below images that confuses block insertion

* Remove spacing for caption when unused

app/editor/components/ComponentView.tsx

@@ -55,6 +55,8 @@ export default class ComponentView {
       ? document.createElement("span")
       : document.createElement("div");
 
+    this.dom.classList.add(`component-${node.type.name}`);
+
     this.renderElement();
   }
 

app/editor/components/Styles.ts

@@ -120,6 +120,7 @@ const EditorStyles = styled.div<{
   }
 
   .image {
+    line-height: 0;
     text-align: center;
     max-width: 100%;
     clear: both;
@@ -200,6 +201,19 @@ const EditorStyles = styled.div<{
     pointer-events: none;
   }
 
+  img.ProseMirror-separator {
+    display: inline;
+    border: none !important;
+    margin: 0 !important;
+  }
+
+  // Removes forced paragraph spaces below images, this is needed to images
+  // being inline nodes that are displayed like blocks
+  .component-image + img.ProseMirror-separator,
+  .component-image + img.ProseMirror-separator + br.ProseMirror-trailingBreak {
+    display: none;
+  }
+
   .ProseMirror[contenteditable="false"] {
     .caption {
       pointer-events: none;