Skip to content

feat(ios): add image support to input#403

Draft
hryhoriiK97 wants to merge 3 commits into
mainfrom
feat/image-input-ios
Draft

feat(ios): add image support to input#403
hryhoriiK97 wants to merge 3 commits into
mainfrom
feat/image-input-ios

Conversation

@hryhoriiK97

Copy link
Copy Markdown
Collaborator

What/Why?

Add image support to EnrichedMarkdownTextInput on iOS — storing image metadata, inserting ORC placeholders, rendering attachments, serializing to ![alt](url), and handling copy/paste round-trips.

  • ENRMImageStore — Point-based metadata store with edit adjustment running in parallel with ENRMFormattingStore, plus duplicate-position guard
  • ENRMEditAdjusting protocol — Shared contract for both stores
  • ENRMParseResult consolidation — Extracted to own header; replaceTextInRange: now accepts ENRMParseResult directly
  • pasteMarkdown fix — Was dropping parsed imageEntries, leaving orphan ORCs; now threads them through
  • Serializer hardening — Validates entries against actual ORC positions before replacement
  • Image regex — Handles balanced parentheses in URLs (e.g. Wikipedia)
  • Paste refactor — Split extractImagesFromPasteboard: into focused static helpers
  • Style propsmarkdownStyle.image.borderRadius and inlineImage.size wired through full prop pipeline, replacing hardcoded values

Testing

Screenshots

Nagranie.z.ekranu.2026-06-17.o.13.36.49.mov

PR Checklist

  • Code compiles and runs on iOS
  • Code compiles and runs on Android
  • Updated documentation/README if applicable
  • Ran example app to verify changes
  • E2E tests are passing
  • Required E2E tests have been added (if applicable)

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds first-class image support to EnrichedMarkdownTextInput on iOS by tracking image metadata alongside formatting, rendering images via text attachments, supporting copy/paste round-trips, and exposing new JS APIs/events for inserting and handling pasted images.

Changes:

  • Introduces an iOS ENRMImageStore (plus ENRMEditAdjusting) and extends parsing/serialization to round-trip images via ORC placeholders and ![alt](url) markdown.
  • Adds a new native command (insertImage) and event (onPasteImages) surfaced through the TS component API and the example app.
  • Wires new style props (markdownStyle.image.borderRadius, markdownStyle.inlineImage.size) through the style normalization + native prop pipeline and into the image attachment rendering.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/react-native-enriched-markdown/src/normalizeMarkdownTextInputStyle.ts Adds normalized defaults/props for image border radius and inline image size.
packages/react-native-enriched-markdown/src/index.tsx Re-exports new image-related public types.
packages/react-native-enriched-markdown/src/EnrichedMarkdownTextInputNativeComponent.ts Adds codegen props/events/commands for paste images + insert image and new style fields.
packages/react-native-enriched-markdown/src/EnrichedMarkdownTextInput.tsx Adds insertImage imperative API and onPasteImages callback.
packages/react-native-enriched-markdown/ios/utils/ENRMImageDownloader.m Adds support for downloading/loading file:// image URLs.
packages/react-native-enriched-markdown/ios/input/ENRMParseResult.h Extracts parse result into a shared header and adds imageEntries.
packages/react-native-enriched-markdown/ios/input/ENRMMarkdownSerializer.h / .mm Adds image-aware serialization with validation against ORC positions.
packages/react-native-enriched-markdown/ios/input/ENRMInputTextView.mm Intercepts pasted images and emits onPasteImages instead of pasting text.
packages/react-native-enriched-markdown/ios/input/ENRMInputParser.h / .mm Extracts image markdown into ORCs and produces imageEntries.
packages/react-native-enriched-markdown/ios/input/ENRMImageStore.h / .mm New point-based image metadata store with edit adjustment.
packages/react-native-enriched-markdown/ios/input/ENRMFormattingStore.h Makes formatting store conform to shared edit-adjusting protocol.
packages/react-native-enriched-markdown/ios/input/ENRMEditAdjusting.h New shared edit-adjustment protocol.
packages/react-native-enriched-markdown/ios/input/EnrichedMarkdownTextInput.h / .mm Integrates image store, applies image attachments, emits paste images event, and adds insert image command.
packages/react-native-enriched-markdown/ios/attachments/ENRMImageAttachment.h / .m Adds input-specific attachment construction (explicit sizing + border radius) and associates attachment with text view.
apps/example/src/screens/playground/PlaygroundScreen.tsx Demonstrates inserting images and handling pasted images.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

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