fix: image editors should be rendered inline

src/export/visitors.ts

@@ -336,15 +336,10 @@ const LexicalImageVisitor: LexicalExportVisitor<ImageNode, Mdast.Image> = {
   testLexicalNode: $isImageNode,
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
     actions.appendToParent(mdastParent, {
-      type: 'paragraph',
-      children: [
-        {
-          type: 'image',
-          url: lexicalNode.getSrc(),
-          alt: lexicalNode.getAltText(),
-          title: lexicalNode.getTitle()
-        }
-      ]
+      type: 'image',
+      url: lexicalNode.getSrc(),
+      alt: lexicalNode.getAltText(),
+      title: lexicalNode.getTitle()
     })
   }
 }

src/stories/assets/image-markdown.md

@@ -0,0 +1,11 @@
+---
+title: Hello World
+---
+
+# Block Image
+
+![image](https://picsum.photos/200/300)
+
+# Two inline images
+
+![image](https://picsum.photos/200/300) ![image](https://picsum.photos/200/300)

src/stories/boilerplate.tsx

@@ -70,17 +70,24 @@ interface WrappedEditorProps {
   onChange?: (markdown: string) => void
   viewMode?: ViewMode
   className?: string
+  imageUploadHandler?: (image: File) => Promise<string>
 }
 
-async function imageUploadHandler(image: File) {
+async function expressImageUploadHandler(image: File) {
   const formData = new FormData()
   formData.append('image', image)
   const response = await fetch('/uploads/new', { method: 'POST', body: formData })
   const json = (await response.json()) as { url: string }
   return json.url
 }
 
-export const WrappedLexicalEditor: React.FC<WrappedEditorProps> = ({ viewMode, markdown, onChange, className }) => {
+export const WrappedLexicalEditor: React.FC<WrappedEditorProps> = ({
+  viewMode,
+  markdown,
+  onChange,
+  className,
+  imageUploadHandler = expressImageUploadHandler
+}) => {
   return (
     <MDXEditor
       markdown={markdown}

src/stories/images.stories.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { WrappedLexicalEditor } from './boilerplate'
+
+import imageMarkdown from './assets/image-markdown.md?raw'
+export function Hello() {
+  // eslint-disable-next-line @typescript-eslint/require-await
+  return <WrappedLexicalEditor markdown={imageMarkdown} imageUploadHandler={async () => 'https://picsum.photos/200/300'} />
+}

src/ui/NodeDecorators/ImageEditor.tsx

@@ -175,7 +175,7 @@ export function ImageEditor({ src, title, nodeKey }: ImageEditorProps): JSX.Elem
   return (
     <Suspense fallback={null}>
       <>
-        <div draggable={draggable} className={styles.imageWrapper}>
+        <div draggable={draggable} className={styles.imageWrapper} data-editor-block-type="image">
           <LazyImage
             className={classNames({
               [styles.focusedImage]: isFocused

src/ui/styles.module.css

@@ -750,6 +750,10 @@
   outline: highlight solid 2px;
 }
 
+.imageWrapper {
+  display: inline;
+}
+
 .imageWrapper[draggable=true] {
   cursor: move; /* fallback if grab cursor is unsupported */
   cursor: grab;