Inline media block

[busbyk]

WIP

Remaining things to address:

• The % width options aren't ideal since you might want an image to be 25% of the width on desktop but full width on mobile. We need a solution for that here. Similar problem in the MediaBlock discussed in Media block should use responsive image sizes based on it's container #757
• Hydration error occurs for InlineMediaBlock
• Needs to be added to lexical editors that specify a different list of blocks as the defaultLexical configuration -- currently only added to the Posts collection's lexical editor and the defaultLexical configuration
• InlineMediaBlock needs a thumbnail

Description

Adds a new InlineMedia inline block for the Lexical rich text editor, allowing editors to embed images directly within text flow. Images can be positioned inline with configurable vertical alignment, or floated left/right with text wrapping.

Related Issues

None, alternative to #961

Key Changes

• New InlineMedia block (src/blocks/InlineMedia/) — config and component for inline media in rich text
• Position options: Inline (within text flow) or float left/right (text wraps around image)
• Size options: Original (natural size), percentage widths (25%/50%/75%/100%), or fixed pixel height
• Vertical alignment: Top, middle, bottom, or baseline (only for inline position)
• Optional caption: Displayed below the image as small gray text
• Registered in Posts collection and default Lexical editor config as an inlineBlock
• RichText renderer updated with JSX converter for frontend rendering

How to test

1. Run pnpm dev and navigate to the admin panel
2. Create or edit a Post (or any content using the default Lexical editor)
3. In the rich text editor, use the inline block inserter to add an "Inline Media" block
4. Upload or select a media item and configure position, size, and alignment
5. Verify:
   • Inline position: Image renders within the text line with correct vertical alignment
   • Float left/right: Image floats to the side with text wrapping around it
   • Size options: Percentage widths scale relative to the container; fixed height respects the pixel value
   • Caption: Appears as small text below the image when provided
6. View the published content on the frontend to confirm the rich text JSX converter renders correctly

Screenshots / Demo video

https://www.loom.com/share/a167f8e500824d60b88914fe6b66014b

Hmm I wonder if floats are too confusing to content editors when they can use them, unconstrained in the ContentBlock?

Migration Explanation

No migration needed — this adds a new inline block type to existing Lexical rich text fields. Existing content is unaffected.

Future enhancements / Questions

• Could extend to support inline video embeds
• May want to add margin/padding controls for finer spacing adjustments around floated images

[github-actions]

Preview deployment: https://inline-media-block.preview.avy-fx.org