@chaitrabhairappa/react-native-rich-text-editor 2.1.1 → 3.0.0

package/README.md

@@ -20,12 +20,13 @@ Unlike other rich text editor packages that rely on HTML and WebView, this libra
 - Bullet lists and Numbered lists
 - Headings
 - Quotes and Checklists
+- Media attachments (images)
 - Link insertion
 - Undo/Redo
 - Text alignment (left, center, right)
 - Indent/Outdent
 - Floating toolbar with customizable options
-- Two variants: outlined and flat
+- Three variants: outlined, flat, and plain
 - Auto-growing height
 - **`numberOfLines` support** — truncate text with ellipsis in readOnly mode
 - **Delta-based content updates** for optimized performance
@@ -143,7 +144,7 @@ export default App;
 | `maxHeight`         | `number`                                | `undefined`  | Maximum height before scrolling              |
 | `showToolbar`       | `boolean`                               | `true`       | Show/hide floating toolbar                   |
 | `toolbarOptions`    | `ToolbarOption[]`                       | All options  | Customize toolbar buttons                    |
-| `variant`           | `'outlined' \| 'flat'`                  | `'outlined'` | Editor style variant                         |
+| `variant`           | `'outlined' \| 'flat' \| 'plain'`       | `'outlined'` | Editor style variant                         |
 | `onContentChange`   | `(event: ContentChangeEvent) => void`   | `undefined`  | Called when content changes                  |
 | `onSelectionChange` | `(event: SelectionChangeEvent) => void` | `undefined`  | Called when selection changes                |
 | `onFocus`           | `() => void`                            | `undefined`  | Called when editor gains focus               |
@@ -180,6 +181,9 @@ editorRef.current?.setQuote();
 editorRef.current?.setChecklist();
 editorRef.current?.setParagraph();
 
+// Media
+editorRef.current?.insertMediaAttachment({ kind: 'image', uri: 'https://example.com/image.png' });
+
 // Actions
 editorRef.current?.insertLink(url, text);
 editorRef.current?.undo();
@@ -204,9 +208,18 @@ interface Block {
   alignment?: TextAlignment;
   checked?: boolean;
   indentLevel?: number;
+  mediaAttachment?: MediaAttachment;
+}
+
+interface MediaAttachment {
+  kind: 'image';
+  uri: string;
+  width?: number;
+  height?: number;
+  alt?: string;
 }
 
-type BlockType = 'paragraph' | 'bullet' | 'numbered' | 'heading' | 'quote' | 'checklist';
+type BlockType = 'paragraph' | 'bullet' | 'numbered' | 'heading' | 'quote' | 'checklist' | 'mediaAttachment';
 type TextAlignment = 'left' | 'center' | 'right';
 
 interface StyleRange {
@@ -229,6 +242,7 @@ type ToolbarOption =
   | 'numbered'
   | 'quote'
   | 'checklist'
+  | 'mediaAttachment'
   | 'link'
   | 'undo'
   | 'redo'
@@ -250,6 +264,41 @@ Use the `numberOfLines` prop along with `readOnly` to truncate content with an e
 
 This works like React Native's `Text` component — content is truncated at the specified number of lines with a trailing ellipsis.
 
+## Media Attachments
+
+You can insert images into the editor using the `insertMediaAttachment` ref method. The toolbar also includes a `mediaAttachment` button that triggers the native media attachment flow.
+
+```tsx
+import RichTextEditor, {
+  RichTextEditorRef,
+  MediaAttachment,
+} from '@chaitrabhairappa/react-native-rich-text-editor';
+
+const editorRef = useRef<RichTextEditorRef>(null);
+
+// Insert an image programmatically
+const insertImage = () => {
+  editorRef.current?.insertMediaAttachment({
+    kind: 'image',
+    uri: 'https://example.com/photo.png',
+  });
+};
+```
+
+Media attachment blocks are included in the content output:
+
+```typescript
+{
+  type: 'mediaAttachment',
+  text: '',
+  styles: [],
+  mediaAttachment: {
+    kind: 'image',
+    uri: 'https://example.com/photo.png',
+  }
+}
+```
+
 ## Customizing Toolbar
 
 ```tsx
@@ -265,7 +314,14 @@ const toolbarOptions: ToolbarOption[] = ['bold', 'italic', 'underline', 'bullet'
 
 ## Changelog
 
-### 2.0.1
+### 3.0.0
+
+- Add media attachment support — insert images into the editor (iOS & Android)
+- New `insertMediaAttachment` ref method for programmatic image insertion
+- New `mediaAttachment` toolbar option
+- New `MediaAttachment` type and `mediaAttachment` block type
+
+### 2.1.2
 
 - Add `numberOfLines` prop to truncate text with ellipsis in readOnly mode (iOS & Android)
 - Fix Android `onContentChange` to correctly extract text styles (bold, italic, underline, strikethrough, code, highlight)

package/android/src/main/java/com/richtext/editor/FloatingToolbar.kt

@@ -34,6 +34,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
         fun onNumberedListClick()
         fun onQuoteClick()
         fun onChecklistClick()
+        fun onMediaAttachmentClick()
         fun onLinkClick()
         fun onUndoClick()
         fun onRedoClick()
@@ -63,6 +64,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
     private var enabledOptions: List<String> = listOf(
         "bold", "italic", "underline", "strikethrough", "code", "highlight",
         "heading", "bullet", "numbered", "quote", "checklist",
+        "mediaAttachment",
         "link", "undo", "redo", "clearFormatting",
         "indent", "outdent",
         "alignLeft", "alignCenter", "alignRight"
@@ -143,6 +145,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
         enabledOptions = options ?: listOf(
             "bold", "italic", "underline", "strikethrough", "code", "highlight",
             "heading", "bullet", "numbered", "quote", "checklist",
+            "mediaAttachment",
             "link", "undo", "redo", "clearFormatting",
             "indent", "outdent",
             "alignLeft", "alignCenter", "alignRight"
@@ -176,6 +179,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
             "numbered" -> R.drawable.ic_format_list_numbered
             "quote" -> R.drawable.ic_format_quote
             "checklist" -> R.drawable.ic_format_checklist
+            "mediaAttachment" -> R.drawable.ic_format_media_attachment
             "link" -> R.drawable.ic_format_link
             "undo" -> R.drawable.ic_format_undo
             "redo" -> R.drawable.ic_format_redo
@@ -227,6 +231,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
             "numbered" -> button.setOnClickListener { listener?.onNumberedListClick() }
             "quote" -> button.setOnClickListener { listener?.onQuoteClick() }
             "checklist" -> button.setOnClickListener { listener?.onChecklistClick() }
+            "mediaAttachment" -> button.setOnClickListener { listener?.onMediaAttachmentClick() }
             "link" -> button.setOnClickListener { listener?.onLinkClick() }
             "undo" -> button.setOnClickListener { listener?.onUndoClick() }
             "redo" -> button.setOnClickListener { listener?.onRedoClick() }
@@ -253,6 +258,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
         numbered: Boolean = false,
         quote: Boolean = false,
         checklist: Boolean = false,
+        mediaAttachment: Boolean = false,
         alignLeft: Boolean = true,
         alignCenter: Boolean = false,
         alignRight: Boolean = false
@@ -269,6 +275,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
             "numbered" to numbered,
             "quote" to quote,
             "checklist" to checklist,
+            "mediaAttachment" to mediaAttachment,
             "alignLeft" to alignLeft,
             "alignCenter" to alignCenter,
             "alignRight" to alignRight

package/android/src/main/java/com/richtext/editor/MediaAttachmentSpan.kt

@@ -0,0 +1,85 @@
+package com.richtext.editor
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.text.style.ReplacementSpan
+import kotlin.math.ceil
+
+data class MediaAttachmentData(
+    val kind: String,
+    val uri: String,
+    val widthDp: Int,
+    val heightDp: Int,
+    val alt: String
+)
+
+class MediaAttachmentSpan(
+    private val data: MediaAttachmentData,
+    private val density: Float,
+    private val bitmap: Bitmap? = null,
+    private val lineSpacingMultiplier: Float = 1f
+) : ReplacementSpan() {
+
+    fun toMediaAttachmentData(): MediaAttachmentData = data
+
+    private fun getWidthPx(): Int {
+        return bitmap?.width ?: (data.widthDp * density).toInt().coerceAtLeast(1)
+    }
+
+    private fun getHeightPx(): Int {
+        return bitmap?.height ?: (data.heightDp * density).toInt().coerceAtLeast(1)
+    }
+
+    override fun getSize(
+        paint: Paint,
+        text: CharSequence?,
+        start: Int,
+        end: Int,
+        fm: Paint.FontMetricsInt?
+    ): Int {
+        val widthPx = getWidthPx()
+        if (fm != null) {
+            val imageHeightPx = getHeightPx()
+            val metricsHeightPx = if (lineSpacingMultiplier > 1f) {
+                ceil(imageHeightPx / lineSpacingMultiplier).toInt().coerceAtLeast(1)
+            } else {
+                imageHeightPx
+            }
+            fm.ascent = -metricsHeightPx
+            fm.descent = 0
+            fm.top = fm.ascent
+            fm.bottom = 0
+        }
+        return widthPx
+    }
+
+    override fun draw(
+        canvas: Canvas,
+        text: CharSequence?,
+        start: Int,
+        end: Int,
+        x: Float,
+        top: Int,
+        y: Int,
+        bottom: Int,
+        paint: Paint
+    ) {
+        val widthPx = getWidthPx().toFloat()
+        val heightPx = getHeightPx().toFloat()
+        val oldColor = paint.color
+        val oldStyle = paint.style
+        val lineHeight = (bottom - top).toFloat().coerceAtLeast(heightPx)
+        val rectTop = top + ((lineHeight - heightPx) / 2f)
+
+        if (bitmap != null) {
+            val destRect = RectF(x, rectTop, x + widthPx, rectTop + heightPx)
+            canvas.drawBitmap(bitmap, null, destRect, null)
+        }
+
+        paint.color = oldColor
+        paint.style = oldStyle
+    }
+}

package/android/src/main/java/com/richtext/editor/MediaAttachmentSupport.kt

@@ -0,0 +1,296 @@
+package com.richtext.editor
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.net.Uri
+import android.text.Editable
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import org.json.JSONObject
+import java.net.URL
+
+class MediaAttachmentSupport(
+    private val context: Context,
+    private val density: Float,
+    private val placeholderChar: Char,
+    private val getLineSpacingMultiplier: () -> Float,
+    private val getTargetWidthPx: () -> Int,
+    private val editableProvider: () -> Editable?,
+    private val runOnUiThread: ((() -> Unit) -> Unit),
+    private val onMediaSpansUpdated: () -> Unit
+) {
+
+    private val mediaBitmapCache = mutableMapOf<String, Bitmap>()
+    private val loadingRemoteUris = mutableSetOf<String>()
+
+    // Block Data to MediaAttachmentData parsing
+    fun parseMediaData(block: Map<String, Any>): MediaAttachmentData? {
+        val blockType = block["type"] as? String ?: return null
+        if (blockType != "mediaAttachment") return null
+
+        val mediaInfo = block["mediaAttachment"] as? Map<*, *>
+        return MediaAttachmentData(
+            kind = mediaInfo?.get("kind") as? String ?: "image",
+            uri = mediaInfo?.get("uri") as? String ?: "",
+            widthDp = (mediaInfo?.get("width") as? Number)?.toInt() ?: 100,
+            heightDp = (mediaInfo?.get("height") as? Number)?.toInt() ?: 100,
+            alt = mediaInfo?.get("alt") as? String ?: ""
+        )
+    }
+
+    fun createMediaAttachmentSpan(mediaData: MediaAttachmentData): MediaAttachmentSpan {
+        val targetWidthPx = getTargetWidthPx().coerceAtLeast(1)
+        val loaded = loadBitmapForMedia(mediaData, targetWidthPx)
+        return if (loaded != null) {
+            val (bitmap, updatedData) = loaded
+            MediaAttachmentSpan(updatedData, density, bitmap, getLineSpacingMultiplier())
+        } else {
+            val fallbackData = normalizeMediaDimensions(mediaData, targetWidthPx)
+            MediaAttachmentSpan(fallbackData, density, null, getLineSpacingMultiplier())
+        }
+    }
+
+    fun findMediaAttachmentSpan(spannable: Spanned, lineStart: Int, lineEnd: Int): MediaAttachmentSpan? {
+        val safeEnd = lineEnd.coerceAtLeast(lineStart + 1)
+        return spannable.getSpans(lineStart, safeEnd, MediaAttachmentSpan::class.java)
+            .firstOrNull { span ->
+                val spanStart = spannable.getSpanStart(span)
+                val spanEnd = spannable.getSpanEnd(span)
+                spanStart < lineEnd && spanEnd > lineStart
+            }
+    }
+
+    fun isMediaLine(line: String): Boolean {
+        return line.replace(placeholderChar.toString(), "").trim().isEmpty()
+    }
+
+    fun createWritableMediaBlock(mediaData: MediaAttachmentData): WritableMap {
+        val block = Arguments.createMap()
+        block.putString("type", "mediaAttachment")
+        block.putString("text", "")
+        block.putArray("styles", Arguments.createArray())
+
+        val mediaMap = Arguments.createMap()
+        mediaMap.putString("kind", mediaData.kind)
+        mediaMap.putString("uri", mediaData.uri)
+        mediaMap.putInt("width", mediaData.widthDp)
+        mediaMap.putInt("height", mediaData.heightDp)
+        mediaMap.putString("alt", mediaData.alt)
+        block.putMap("mediaAttachment", mediaMap)
+
+        return block
+    }
+
+    fun createJsonMediaBlock(mediaData: MediaAttachmentData): JSONObject {
+        val block = JSONObject()
+        block.put("type", "mediaAttachment")
+        block.put("text", "")
+        block.put("styles", org.json.JSONArray())
+
+        val mediaObj = JSONObject()
+        mediaObj.put("kind", mediaData.kind)
+        mediaObj.put("uri", mediaData.uri)
+        mediaObj.put("width", mediaData.widthDp)
+        mediaObj.put("height", mediaData.heightDp)
+        mediaObj.put("alt", mediaData.alt)
+        block.put("mediaAttachment", mediaObj)
+
+        return block
+    }
+
+    fun appendMediaBlock(
+        spannable: SpannableStringBuilder,
+        currentOffset: Int,
+        mediaData: MediaAttachmentData,
+        appendTrailingNewline: Boolean
+    ): Int {
+        var offset = currentOffset
+        val spanStart = offset
+        spannable.append(placeholderChar)
+        offset += 1
+        spannable.setSpan(
+            createMediaAttachmentSpan(mediaData),
+            spanStart,
+            spanStart + 1,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+
+        if (appendTrailingNewline) {
+            spannable.append("\n")
+            offset += 1
+        }
+
+        return offset
+    }
+
+    fun insertMediaAttachmentBlock(editable: Editable, insertPos: Int, uri: String): Int {
+        var mutableInsertPos = insertPos.coerceIn(0, editable.length)
+        val mediaData = MediaAttachmentData(
+            kind = "image",
+            uri = uri,
+            widthDp = 100,
+            heightDp = 100,
+            alt = "Selected image"
+        )
+
+        if (mutableInsertPos > 0 && editable[mutableInsertPos - 1] != '\n') {
+            editable.insert(mutableInsertPos, "\n")
+            mutableInsertPos += 1
+        }
+
+        val spanStart = mutableInsertPos
+        editable.insert(spanStart, placeholderChar.toString())
+        editable.setSpan(
+            createMediaAttachmentSpan(mediaData),
+            spanStart,
+            spanStart + 1,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+
+        var nextPos = spanStart + 1
+        val hasFollowingText = nextPos < editable.length
+        if (hasFollowingText && editable[nextPos] != '\n') {
+            editable.insert(nextPos, "\n")
+            nextPos += 1
+        }
+
+        return nextPos.coerceAtMost(editable.length)
+    }
+
+    private fun normalizeMediaDimensions(mediaData: MediaAttachmentData, targetWidthPx: Int): MediaAttachmentData {
+        val targetWidthDp = (targetWidthPx / density).toInt().coerceAtLeast(1)
+        val fallbackHeightDp = if (mediaData.widthDp > 0 && mediaData.heightDp > 0) {
+            ((mediaData.heightDp.toFloat() / mediaData.widthDp.toFloat()) * targetWidthDp).toInt().coerceAtLeast(1)
+        } else {
+            targetWidthDp
+        }
+
+        return mediaData.copy(
+            widthDp = targetWidthDp,
+            heightDp = fallbackHeightDp
+        )
+    }
+
+    private fun buildScaledBitmapWithAspect(bitmap: Bitmap, targetWidthPx: Int): Pair<Bitmap, Int> {
+        val safeTargetWidthPx = targetWidthPx.coerceAtLeast(1)
+        val aspectRatio = if (bitmap.width > 0) {
+            bitmap.height.toFloat() / bitmap.width.toFloat()
+        } else {
+            1f
+        }
+        val targetHeightPx = (safeTargetWidthPx * aspectRatio).toInt().coerceAtLeast(1)
+
+        val scaled = if (bitmap.width == safeTargetWidthPx && bitmap.height == targetHeightPx) {
+            bitmap
+        } else {
+            Bitmap.createScaledBitmap(bitmap, safeTargetWidthPx, targetHeightPx, true)
+        }
+
+        return Pair(scaled, targetHeightPx)
+    }
+
+    private fun loadBitmapForMedia(mediaData: MediaAttachmentData, targetWidthPx: Int): Pair<Bitmap, MediaAttachmentData>? {
+        if (mediaData.uri.isBlank() || mediaData.uri == "red-box-placeholder") return null
+
+        mediaBitmapCache[mediaData.uri]?.let { cached ->
+            val (scaledBitmap, targetHeightPx) = buildScaledBitmapWithAspect(cached, targetWidthPx)
+            val updatedData = mediaData.copy(
+                widthDp = (targetWidthPx / density).toInt().coerceAtLeast(1),
+                heightDp = (targetHeightPx / density).toInt().coerceAtLeast(1)
+            )
+            return Pair(scaledBitmap, updatedData)
+        }
+
+        return try {
+            val uri = Uri.parse(mediaData.uri)
+
+            when (uri.scheme?.lowercase()) {
+                "http", "https" -> {
+                    loadRemoteBitmapAsync(mediaData, targetWidthPx)
+                    null
+                }
+                else -> {
+                    context.contentResolver.openInputStream(uri)?.use { inputStream ->
+                        BitmapFactory.decodeStream(inputStream)
+                    }?.let { original ->
+                        mediaBitmapCache[mediaData.uri] = original
+                        val (scaledBitmap, targetHeightPx) = buildScaledBitmapWithAspect(original, targetWidthPx)
+                        val updatedData = mediaData.copy(
+                            widthDp = (targetWidthPx / density).toInt().coerceAtLeast(1),
+                            heightDp = (targetHeightPx / density).toInt().coerceAtLeast(1)
+                        )
+                        Pair(scaledBitmap, updatedData)
+                    }
+                }
+            }
+        } catch (_: Exception) {
+            null
+        }
+    }
+
+    private fun loadRemoteBitmapAsync(mediaData: MediaAttachmentData, targetWidthPx: Int) {
+        val uriString = mediaData.uri
+        synchronized(loadingRemoteUris) {
+            if (loadingRemoteUris.contains(uriString)) return
+            loadingRemoteUris.add(uriString)
+        }
+
+        Thread {
+            try {
+                val loaded = URL(uriString).openStream().use { inputStream ->
+                    BitmapFactory.decodeStream(inputStream)
+                } ?: return@Thread
+
+                mediaBitmapCache[uriString] = loaded
+                val (scaledBitmap, targetHeightPx) = buildScaledBitmapWithAspect(loaded, targetWidthPx)
+                val updatedData = mediaData.copy(
+                    widthDp = (targetWidthPx / density).toInt().coerceAtLeast(1),
+                    heightDp = (targetHeightPx / density).toInt().coerceAtLeast(1)
+                )
+
+                runOnUiThread {
+                    synchronized(loadingRemoteUris) {
+                        loadingRemoteUris.remove(uriString)
+                    }
+                    refreshMediaSpansForUri(uriString, scaledBitmap, updatedData)
+                }
+            } catch (_: Exception) {
+                runOnUiThread {
+                    synchronized(loadingRemoteUris) {
+                        loadingRemoteUris.remove(uriString)
+                    }
+                }
+            }
+        }.start()
+    }
+
+    private fun refreshMediaSpansForUri(uriString: String, bitmap: Bitmap, updatedData: MediaAttachmentData) {
+        val editable = editableProvider() ?: return
+        val spans = editable.getSpans(0, editable.length, MediaAttachmentSpan::class.java)
+        var updated = false
+
+        spans.forEach { span ->
+            val data = span.toMediaAttachmentData()
+            if (data.uri == uriString) {
+                val start = editable.getSpanStart(span)
+                val end = editable.getSpanEnd(span)
+                val flags = editable.getSpanFlags(span)
+                editable.removeSpan(span)
+                editable.setSpan(
+                    MediaAttachmentSpan(updatedData, density, bitmap, getLineSpacingMultiplier()),
+                    start,
+                    end,
+                    flags
+                )
+                updated = true
+            }
+        }
+
+        if (updated) {
+            onMediaSpansUpdated()
+        }
+    }
+}