Skip to content

feat: add image.verticalAlign option to htmlStyle#520

Open
fendent wants to merge 1 commit intosoftware-mansion:mainfrom
fendent:feat/image-vertical-align
Open

feat: add image.verticalAlign option to htmlStyle#520
fendent wants to merge 1 commit intosoftware-mansion:mainfrom
fendent:feat/image-vertical-align

Conversation

@fendent
Copy link
Copy Markdown
Contributor

@fendent fendent commented Apr 6, 2026

Summary

Adds an image.verticalAlign property to the htmlStyle prop that controls how inline image attachments are vertically positioned within the line.

  • 'baseline' (default): existing behavior — image bottom aligns with the font descender
  • 'bottom': image bottom aligns with the bottom of the line fragment

This is useful for chat-style inputs where inline emotes should sit flush with the text baseline rather than floating above it.

<EnrichedTextInput
  htmlStyle={{ image: { verticalAlign: 'bottom' } }}
/>

Test Plan

  1. Insert an inline image with default htmlStyle — verify image bottom aligns with the descender (existing behavior)
  2. Set htmlStyle={{ image: { verticalAlign: 'bottom' } }} — verify image bottom aligns with the bottom of the line fragment
  3. Insert multiple images on the same line — verify consistent alignment
  4. Verify the caret renders correctly next to images in both modes

Compatibility

OS Implemented
iOS
Android

Checklist

  • E2E tests are passing
  • Required E2E tests have been added (if applicable)

Adds an image.verticalAlign property to htmlStyle that controls
inline image attachment positioning:
- 'baseline' (default): image bottom aligns with the descender
- 'bottom': image bottom aligns with the line fragment bottom

Implemented for iOS. Adjusts both the layout glyph bounds and the
overlay image view position.
@exploIF
Copy link
Copy Markdown
Collaborator

exploIF commented Apr 7, 2026

Hi, thanks so much for the contribution. Could you add screenshots/videos documenting your work? This is helpful for us to better understand introduced changes :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants