@chaitrabhairappa/react-native-rich-text-editor 2.1.2 → 3.1.0

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

@@ -1,6 +1,7 @@
 package com.richtext.editor
 
 import android.content.Context
+import android.content.ClipboardManager
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Paint
@@ -20,11 +21,22 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputConnection
 import android.widget.PopupWindow
 import android.widget.FrameLayout
 import android.app.AlertDialog
+import android.net.Uri
 import android.widget.EditText
 import android.widget.LinearLayout
+import android.webkit.MimeTypeMap
+import androidx.activity.ComponentActivity
+import androidx.activity.result.ActivityResultLauncher
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.core.view.ContentInfoCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.inputmethod.EditorInfoCompat
+import androidx.core.view.inputmethod.InputConnectionCompat
+import androidx.core.view.inputmethod.InputContentInfoCompat
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.WritableArray
@@ -34,6 +46,10 @@ import com.facebook.react.uimanager.events.RCTEventEmitter
 class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompatEditText(context),
     FloatingToolbar.ToolbarActionListener {
 
+    companion object {
+        private const val MEDIA_PLACEHOLDER_CHAR = '\uFFFC'
+    }
+
     private var placeholder: String = ""
     private var maxHeightValue: Int = 0
     private var numberOfLinesValue: Int = 0
@@ -49,6 +65,32 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
     private var previousText: String = ""
     private var pendingDelta: Map<String, Any>? = null
     private var pendingPrefixDeletion: Pair<Int, Int>? = null // (lineStart, prefixLength) for backspace-in-prefix
+    private var imagePickerLauncher: ActivityResultLauncher<String>? = null
+    private val imagePickerLauncherKey = "richtext_image_picker_${hashCode()}"
+    private val mediaAttachmentSupport by lazy {
+        MediaAttachmentSupport(
+            context = context,
+            density = density,
+            placeholderChar = MEDIA_PLACEHOLDER_CHAR,
+            getLineSpacingMultiplier = { lineSpacingMultiplier },
+            getTargetWidthPx = {
+                val contentWidth = width - totalPaddingLeft - totalPaddingRight
+                if (contentWidth > 0) {
+                    contentWidth
+                } else {
+                    (context.resources.displayMetrics.widthPixels - totalPaddingLeft - totalPaddingRight)
+                        .coerceAtLeast((120 * density).toInt())
+                }
+            },
+            editableProvider = { text },
+            runOnUiThread = { action -> post(action) },
+            onMediaSpansUpdated = {
+                invalidate()
+                requestLayout()
+                post { updateContentSize() }
+            }
+        )
+    }
 
     // For flat variant bottom border
     private val bottomBorderPaint = Paint().apply {
@@ -103,6 +145,7 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         isFocusable = true
         isFocusableInTouchMode = true
         inputType = EditorInfo.TYPE_CLASS_TEXT or EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE
+        setupImageReceiveContentHandler()
 
         // Disable vertical scrolling by default
         isVerticalScrollBarEnabled = false
@@ -168,6 +211,9 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
                     if (!handled) {
                         handled = autoContinueListOnEnter(s)
                     }
+                    if (!handled) {
+                        handled = applyInlineStyleShortcut(s)
+                    }
                     if (!handled) {
                         isInternalChange = true
                         renumberNumberedLists()
@@ -194,6 +240,51 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         isInitialized = true
     }
 
+    // Handle image pasting from clipboard and input method
+    override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection? {
+        val inputConnection = super.onCreateInputConnection(outAttrs) ?: return null
+        EditorInfoCompat.setContentMimeTypes(outAttrs, arrayOf("image/*"))
+
+        return InputConnectionCompat.createWrapper(
+            inputConnection,
+            outAttrs
+        ) { inputContentInfo: InputContentInfoCompat, flags: Int, _ ->
+            if ((flags and InputConnectionCompat.INPUT_CONTENT_GRANT_READ_URI_PERMISSION) != 0) {
+                runCatching { inputContentInfo.requestPermission() }
+            }
+
+            val uri = inputContentInfo.contentUri
+            if (isImageUri(uri)) {
+                post { insertMediaAttachmentBlock(uri.toString()) }
+                true
+            } else {
+                false
+            }
+        }
+    }
+
+    // Handle receiving images via drag-and-drop or clipboard paste (Android 13+)
+    private fun setupImageReceiveContentHandler() {
+        ViewCompat.setOnReceiveContentListener(this, arrayOf("image/*")) { _, payload: ContentInfoCompat ->
+            val clip = payload.clip
+            if (clip == null || clip.itemCount == 0) {
+                return@setOnReceiveContentListener payload
+            }
+
+            var handled = false
+            for (index in 0 until clip.itemCount) {
+                val item = clip.getItemAt(index)
+                val uri = item.uri
+                if (uri != null && isImageUri(uri)) {
+                    insertMediaAttachmentBlock(uri.toString())
+                    handled = true
+                }
+            }
+
+            if (handled) null else payload
+        }
+    }
+
     private fun setupToolbar() {
         floatingToolbar = FloatingToolbar(context).apply {
             listener = this@RichTextEditorView
@@ -571,6 +662,49 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         return super.onTouchEvent(event)
     }
 
+    // Handle image pasting from clipboard (Android 13+ also sends via onReceiveContent)
+    override fun onTextContextMenuItem(id: Int): Boolean {
+        val isPasteAction = id == android.R.id.paste || id == android.R.id.pasteAsPlainText
+        if (!isPasteAction) {
+            return super.onTextContextMenuItem(id)
+        }
+
+        val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as? ClipboardManager
+            ?: return super.onTextContextMenuItem(id)
+        val primaryClip = clipboard.primaryClip ?: return super.onTextContextMenuItem(id)
+
+        val imageUris = mutableListOf<Uri>()
+        for (index in 0 until primaryClip.itemCount) {
+            val item = primaryClip.getItemAt(index)
+            item.uri?.let { uri ->
+                if (isImageUri(uri)) {
+                    imageUris.add(uri)
+                }
+            }
+
+            val maybeUriText = item.text?.toString()?.trim().orEmpty()
+            if (maybeUriText.isNotEmpty()) {
+                runCatching { Uri.parse(maybeUriText) }
+                    .getOrNull()
+                    ?.let { parsed ->
+                        if (parsed.scheme != null && isImageUri(parsed)) {
+                            imageUris.add(parsed)
+                        }
+                    }
+            }
+        }
+
+        if (imageUris.isEmpty()) {
+            return super.onTextContextMenuItem(id)
+        }
+
+        imageUris
+            .distinctBy { it.toString() }
+            .forEach { insertMediaAttachmentBlock(it.toString()) }
+
+        return true
+    }
+
     private fun selectWordAtPosition(x: Float, y: Float) {
         val layout = layout ?: return
         val textContent = text?.toString() ?: return
@@ -601,6 +735,38 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         }
     }
 
+    private fun isImageUri(uri: Uri): Boolean {
+        val scheme = uri.scheme?.lowercase()
+
+        if (scheme == "http" || scheme == "https") {
+            val path = uri.path.orEmpty()
+            return path.endsWith(".png", true) ||
+                path.endsWith(".jpg", true) ||
+                path.endsWith(".jpeg", true) ||
+                path.endsWith(".webp", true) ||
+                path.endsWith(".gif", true) ||
+                path.endsWith(".bmp", true)
+        }
+
+        val mimeType = runCatching {
+            context.contentResolver.getType(uri)
+        }.getOrNull()
+
+        if (mimeType?.startsWith("image/") == true) {
+            return true
+        }
+
+        val extension = MimeTypeMap.getFileExtensionFromUrl(uri.toString())
+        if (!extension.isNullOrEmpty()) {
+            val guessedMime = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension.lowercase())
+            if (guessedMime?.startsWith("image/") == true) {
+                return true
+            }
+        }
+
+        return false
+    }
+
     override fun onDraw(canvas: Canvas) {
         super.onDraw(canvas)
 
@@ -878,6 +1044,18 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
             val textContent = block["text"] as? String ?: ""
             val blockType = block["type"] as? String ?: "paragraph"
 
+            if (blockType == "mediaAttachment") {
+                numberedListCounter = 1
+                val mediaData = mediaAttachmentSupport.parseMediaData(block) ?: return@forEachIndexed
+                currentOffset = mediaAttachmentSupport.appendMediaBlock(
+                    spannable = spannable,
+                    currentOffset = currentOffset,
+                    mediaData = mediaData,
+                    appendTrailingNewline = index < blocks.size - 1
+                )
+                return@forEachIndexed
+            }
+
             // Add list prefix based on block type
             val prefix = when (blockType) {
                 "bullet", "bulletList" -> "• "
@@ -1042,6 +1220,19 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         val lines = textContent.split("\n")
         var currentIndex = 0
         lines.forEach { line ->
+            val lineStart = currentIndex
+            val lineEnd = currentIndex + line.length
+
+            val mediaSpan = mediaAttachmentSupport.findMediaAttachmentSpan(spannable, lineStart, lineEnd)
+            if (mediaSpan != null && mediaAttachmentSupport.isMediaLine(line)) {
+                val mediaData = mediaSpan.toMediaAttachmentData()
+                val block = mediaAttachmentSupport.createWritableMediaBlock(mediaData)
+
+                blocks.pushMap(block)
+                currentIndex += line.length + 1
+                return@forEach
+            }
+
             val (blockType, displayText) = detectBlockType(line)
             val prefixLen = line.length - displayText.length
 
@@ -1050,9 +1241,8 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
             block.putString("text", displayText)
 
             val stylesArray = Arguments.createArray()
-            val lineStart = currentIndex + prefixLen
-            val lineEnd = currentIndex + line.length
-            extractStylesForRange(spannable, lineStart, lineEnd).forEach { style ->
+            val styleStart = currentIndex + prefixLen
+            extractStylesForRange(spannable, styleStart, lineEnd).forEach { style ->
                 val styleMap = Arguments.createMap()
                 styleMap.putString("style", style["style"] as String)
                 styleMap.putInt("start", style["start"] as Int)
@@ -1076,6 +1266,19 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         val lines = textContent.split("\n")
         var currentIndex = 0
         lines.forEach { line ->
+            val lineStart = currentIndex
+            val lineEnd = currentIndex + line.length
+
+            val mediaSpan = mediaAttachmentSupport.findMediaAttachmentSpan(spannable, lineStart, lineEnd)
+            if (mediaSpan != null && mediaAttachmentSupport.isMediaLine(line)) {
+                val mediaData = mediaSpan.toMediaAttachmentData()
+                val block = mediaAttachmentSupport.createJsonMediaBlock(mediaData)
+
+                jsonArray.put(block)
+                currentIndex += line.length + 1
+                return@forEach
+            }
+
             val (blockType, displayText) = detectBlockType(line)
             val prefixLen = line.length - displayText.length
 
@@ -1084,9 +1287,8 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
             block.put("text", displayText)
 
             val stylesJson = org.json.JSONArray()
-            val lineStart = currentIndex + prefixLen
-            val lineEnd = currentIndex + line.length
-            extractStylesForRange(spannable, lineStart, lineEnd).forEach { style ->
+            val styleStart = currentIndex + prefixLen
+            extractStylesForRange(spannable, styleStart, lineEnd).forEach { style ->
                 val styleObj = org.json.JSONObject()
                 styleObj.put("style", style["style"])
                 styleObj.put("start", style["start"])
@@ -1244,6 +1446,10 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         toggleChecklistPrefix()
     }
 
+    override fun onMediaAttachmentClick() {
+        openImagePicker()
+    }
+
     override fun onLinkClick() {
         promptInsertLink()
     }
@@ -1533,6 +1739,64 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         return false
     }
 
+    private fun applyInlineStyleShortcut(s: Editable?): Boolean {
+        if (s == null) return false
+
+        val start = selectionStart
+        val end = selectionEnd
+        if (start != end || start <= 0 || start > s.length) return false
+
+        var lineStart = start - 1
+        while (lineStart > 0 && s[lineStart - 1] != '\n') {
+            lineStart--
+        }
+
+        val textBeforeCursor = s.subSequence(lineStart, start).toString()
+        if (textBeforeCursor.length < 3) return false
+
+        data class ShortcutPattern(
+            val regex: Regex,
+            val apply: (Editable, Int, Int) -> Unit,
+        )
+
+        val patterns = listOf(
+            ShortcutPattern(Regex("(^|\\s)\\*([^*\\n]+)\\*$")) { editable, spanStart, spanEnd ->
+                editable.setSpan(StyleSpan(Typeface.BOLD), spanStart, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            },
+            ShortcutPattern(Regex("(^|\\s)_([^_\\n]+)_$")) { editable, spanStart, spanEnd ->
+                editable.setSpan(StyleSpan(Typeface.ITALIC), spanStart, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            },
+            ShortcutPattern(Regex("(^|\\s)~([^~\\n]+)~$")) { editable, spanStart, spanEnd ->
+                editable.setSpan(StrikethroughSpan(), spanStart, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            }
+        )
+
+        for (pattern in patterns) {
+            val match = pattern.regex.find(textBeforeCursor) ?: continue
+            val prefixWhitespaceLen = match.groupValues[1].length
+            val styledText = match.groupValues[2]
+            if (styledText.isEmpty()) continue
+
+            val markerStartInLine = match.range.first + prefixWhitespaceLen
+            val markerStart = lineStart + markerStartInLine
+            if (markerStart < 0 || markerStart > start) continue
+
+            isInternalChange = true
+            s.replace(markerStart, start, styledText)
+
+            val styleStart = markerStart
+            val styleEnd = markerStart + styledText.length
+            if (styleStart < styleEnd && styleEnd <= s.length) {
+                pattern.apply(s, styleStart, styleEnd)
+                setSelection(styleEnd)
+            }
+            isInternalChange = false
+            return true
+        }
+
+        return false
+    }
+
     private fun renumberNumberedLists() {
         val editable = text ?: return
         val fullText = editable.toString()
@@ -1621,6 +1885,47 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         }
     }
 
+    private fun openImagePicker() {
+        val reactContext = context as? ReactContext ?: return
+        val activity = reactContext.currentActivity ?: return
+
+        if (activity !is ComponentActivity) {
+            return
+        }
+
+        if (imagePickerLauncher == null) {
+            imagePickerLauncher = activity.activityResultRegistry.register(
+                imagePickerLauncherKey,
+                ActivityResultContracts.GetContent()
+            ) { uri: Uri? ->
+                if (uri == null) return@register
+                insertMediaAttachmentBlock(uri.toString())
+            }
+        }
+
+        imagePickerLauncher?.launch("image/*")
+    }
+
+    private fun insertMediaAttachmentBlock(uri: String) {
+        val editable = text ?: return
+        var insertPos = selectionStart.coerceIn(0, editable.length)
+
+        isInternalChange = true
+        val nextPos = mediaAttachmentSupport.insertMediaAttachmentBlock(editable, insertPos, uri)
+        setSelection(nextPos.coerceAtMost(editable.length))
+
+        isInternalChange = false
+        sendContentChange()
+        saveToUndoStack()
+        post { updateContentSize() }
+    }
+
+    fun insertMediaAttachment(uri: String?) {
+        val safeUri = uri?.trim().orEmpty()
+        if (safeUri.isEmpty()) return
+        insertMediaAttachmentBlock(safeUri)
+    }
+
     private fun promptInsertLink() {
         val context = context
         val builder = AlertDialog.Builder(context)
@@ -1828,6 +2133,8 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
+        imagePickerLauncher?.unregister()
+        imagePickerLauncher = null
         hideToolbar()
         toolbarPopup = null
         floatingToolbar = null

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

@@ -11,14 +11,39 @@ class RichTextEditorViewManager : SimpleViewManager<RichTextEditorView>() {
 
     companion object {
         const val NAME = "RichTextEditorView"
+        private const val COMMAND_INSERT_MEDIA_ATTACHMENT = 1
     }
 
     override fun getName(): String = NAME
 
+    override fun getCommandsMap(): MutableMap<String, Int> {
+        return mutableMapOf(
+            "insertMediaAttachment" to COMMAND_INSERT_MEDIA_ATTACHMENT
+        )
+    }
+
     override fun createViewInstance(reactContext: ThemedReactContext): RichTextEditorView {
         return RichTextEditorView(reactContext)
     }
 
+    override fun receiveCommand(view: RichTextEditorView, commandId: String?, args: ReadableArray?) {
+        when (commandId) {
+            "insertMediaAttachment" -> {
+                val uri = args?.getString(0)
+                view.insertMediaAttachment(uri)
+            }
+        }
+    }
+
+    override fun receiveCommand(view: RichTextEditorView, commandId: Int, args: ReadableArray?) {
+        when (commandId) {
+            COMMAND_INSERT_MEDIA_ATTACHMENT -> {
+                val uri = args?.getString(0)
+                view.insertMediaAttachment(uri)
+            }
+        }
+    }
+
     @ReactProp(name = "placeholder")
     fun setPlaceholder(view: RichTextEditorView, placeholder: String?) {
         try {
@@ -116,6 +141,18 @@ class RichTextEditorViewManager : SimpleViewManager<RichTextEditorView>() {
                     }
                 }
                 blockMap["styles"] = stylesList
+
+                val mediaAttachment = block.optJSONObject("mediaAttachment")
+                if (mediaAttachment != null) {
+                    val mediaMap = mutableMapOf<String, Any>()
+                    mediaMap["kind"] = mediaAttachment.optString("kind", "image")
+                    mediaMap["uri"] = mediaAttachment.optString("uri", "")
+                    mediaMap["width"] = mediaAttachment.optInt("width", 100)
+                    mediaMap["height"] = mediaAttachment.optInt("height", 100)
+                    mediaMap["alt"] = mediaAttachment.optString("alt", "")
+                    blockMap["mediaAttachment"] = mediaMap
+                }
+
                 blocksList.add(blockMap)
             }
             view.post {

package/android/src/main/res/drawable/ic_format_media_attachment.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FFFFFF"
+        android:pathData="M19,3H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2V5c0,-1.1 -0.9,-2 -2,-2zM19,19H5V5h14v14zM8.5,11A1.5,1.5 0 1,0 8.5,8A1.5,1.5 0 1,0 8.5,11zM6,17h12l-3.75,-5 -2.75,3.54 -1.75,-2.04L6,17z" />
+</vector>