@chaitrabhairappa/react-native-rich-text-editor 1.0.7 → 2.0.0

package/README.md

@@ -27,6 +27,37 @@ Unlike other rich text editor packages that rely on HTML and WebView, this libra
 - Floating toolbar with customizable options
 - Two variants: outlined and flat
 - Auto-growing height
+- **Delta-based content updates** for optimized performance
+- **Synchronous style detection** via `onActiveStylesChange`
+
+## Why Delta-Based Updates?
+
+Unlike other editors that send the **entire document** on every keystroke, this library includes **delta information** — only what changed.
+
+```typescript
+onContentChange={(event) => {
+  // Full content (for saving)
+  console.log(event.nativeEvent.text);
+  console.log(event.nativeEvent.blocks);
+
+  // Delta (for optimized processing)
+  console.log(event.nativeEvent.delta);
+  // { type: "insert", position: 50, text: "a" }
+}}
+```
+
+| Delta Type | When | Data |
+|------------|------|------|
+| `insert` | User types | `position`, `text` |
+| `delete` | User deletes | `position`, `length` |
+| `replace` | Selection replaced | `position`, `length`, `text` |
+| `format` | Style applied | `position`, `length`, `style` |
+
+**Benefits:**
+- **Server sync** — Send only deltas instead of full document
+- **Collaborative editing** — Apply remote changes efficiently
+- **Analytics** — Track exactly what users type/delete
+- **Performance** — Process small changes without parsing entire content
 
 ## Installation
 

package/android/build.gradle

@@ -12,22 +12,23 @@ buildscript {
     }
 }
 
-def isNewArchitectureEnabled() {
-    return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
-}
-
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
+apply plugin: 'com.facebook.react'
 
 android {
     namespace "com.richtext.editor"
     compileSdkVersion safeExtGet('compileSdkVersion', 34)
 
     defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', 21)
+        minSdkVersion safeExtGet('minSdkVersion', 23)
         targetSdkVersion safeExtGet('targetSdkVersion', 34)
     }
 
+    buildFeatures {
+        buildConfig true
+    }
+
     buildTypes {
         release {
             minifyEnabled false
@@ -56,6 +57,12 @@ repositories {
 }
 
 dependencies {
-    implementation "com.facebook.react:react-native:+"
+    implementation "com.facebook.react:react-android:+"
     implementation "org.jetbrains.kotlin:kotlin-stdlib:${safeExtGet('kotlinVersion', '1.8.0')}"
 }
+
+react {
+    jsRootDir = file("../src/")
+    libraryName = "RichTextEditorSpec"
+    codegenJavaPackageName = "com.richtext.editor"
+}

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

@@ -113,12 +113,12 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
     private fun createArrowButton(text: String): TextView {
         return TextView(context).apply {
             this.text = text
-            textSize = 24f
+            textSize = 20f
             setTextColor(Color.parseColor("#FFFFFF"))
             gravity = Gravity.CENTER
             isClickable = true
             isFocusable = true
-            val params = LayoutParams((32 * density).toInt(), ViewGroup.LayoutParams.MATCH_PARENT)
+            val params = LayoutParams((16 * density).toInt(), ViewGroup.LayoutParams.MATCH_PARENT)
             layoutParams = params
             // Add touch feedback
             val bg = GradientDrawable().apply {
@@ -190,7 +190,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
     }
 
     private val iconSize = (20 * density).toInt()
-    private val iconPadding = (8 * density).toInt()
+    private val iconPadding = (10 * density).toInt()
 
     private fun createButton(option: String): ImageView? {
         val drawableResId = getDrawableResId(option)
@@ -290,7 +290,7 @@ class FloatingToolbar(context: Context) : LinearLayout(context) {
         val screenWidth = context.resources.displayMetrics.widthPixels
         val maxWidth = (screenWidth * 0.9).toInt()
         val buttonCount = enabledOptions.size
-        val calculatedWidth = (buttonCount * buttonSize) + ((buttonCount - 1) * buttonSpacing) + (56 * density).toInt()
+        val calculatedWidth = (buttonCount * buttonSize) + ((buttonCount - 1) * buttonSpacing) + (48 * density).toInt()
         return minOf(calculatedWidth, maxWidth)
     }
 

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

@@ -1,13 +1,21 @@
 package com.richtext.editor
 
-import com.facebook.react.ReactPackage
+import com.facebook.react.TurboReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 
-class RichTextEditorPackage : ReactPackage {
-    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-        return emptyList()
+class RichTextEditorPackage : TurboReactPackage() {
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+        return null
+    }
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+        return ReactModuleInfoProvider {
+            mapOf()
+        }
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {

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

@@ -45,6 +45,9 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
     private var minHeightPx: Float = 0f
     private var isInitialized = false
 
+    private var previousText: String = ""
+    private var pendingDelta: Map<String, Any>? = null
+
     // For flat variant bottom border
     private val bottomBorderPaint = Paint().apply {
         color = Color.parseColor("#E0E0E0")
@@ -112,13 +115,57 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         setupToolbar()
 
         addTextChangedListener(object : TextWatcher {
-            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
-            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
+            private var changeStart = 0
+            private var removedCount = 0
+            private var addedCount = 0
+
+            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
+                changeStart = start
+                removedCount = count
+                addedCount = after
+            }
+
+            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
+                // Capture delta information
+                if (!isInternalChange && s != null) {
+                    val newText = s.toString()
+                    val deltaMap = mutableMapOf<String, Any>()
+
+                    when {
+                        removedCount == 0 && addedCount > 0 -> {
+                            // Insert
+                            deltaMap["type"] = "insert"
+                            deltaMap["position"] = changeStart
+                            deltaMap["text"] = newText.substring(start, start + count)
+                        }
+                        removedCount > 0 && addedCount == 0 -> {
+                            // Delete
+                            deltaMap["type"] = "delete"
+                            deltaMap["position"] = changeStart
+                            deltaMap["length"] = removedCount
+                        }
+                        removedCount > 0 && addedCount > 0 -> {
+                            // Replace
+                            deltaMap["type"] = "replace"
+                            deltaMap["position"] = changeStart
+                            deltaMap["length"] = removedCount
+                            deltaMap["text"] = newText.substring(start, start + count)
+                        }
+                    }
+
+                    if (deltaMap.isNotEmpty()) {
+                        pendingDelta = deltaMap
+                    }
+                }
+            }
+
             override fun afterTextChanged(s: Editable?) {
                 if (!isInternalChange) {
-                    sendContentChange()
+                    sendContentChangeWithDelta()
                     saveToUndoStack()
+                    pendingDelta = null
                 }
+                previousText = s?.toString() ?: ""
                 post { updateContentSize() }
             }
         })
@@ -213,6 +260,9 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         map.putInt("end", selEnd)
         sendEvent("onSelectionChange", map)
 
+        // Emit active styles synchronously for instant toolbar updates
+        emitActiveStyles()
+
         // Show/hide toolbar based on selection
         if (selStart != selEnd && showToolbar && hasFocus()) {
             android.util.Log.d("RichTextEditor", "Should show toolbar - selection exists")
@@ -231,6 +281,78 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         }
     }
 
+    // Synchronous style detection - emits current active styles to JS
+    private fun emitActiveStyles() {
+        val start = selectionStart
+        val end = selectionEnd
+        val spannable = text as? Spanned
+
+        var hasBold = false
+        var hasItalic = false
+        var hasUnderline = false
+        var hasStrikethrough = false
+        var hasCode = false
+        var hasHighlight = false
+        var blockType = "paragraph"
+        var alignment = "left"
+
+        if (spannable != null && start <= end) {
+            // Check for style spans
+            spannable.getSpans(start, end.coerceAtLeast(start + 1), StyleSpan::class.java).forEach { span ->
+                when (span.style) {
+                    Typeface.BOLD -> hasBold = true
+                    Typeface.ITALIC -> hasItalic = true
+                    Typeface.BOLD_ITALIC -> {
+                        hasBold = true
+                        hasItalic = true
+                    }
+                }
+            }
+
+            hasUnderline = spannable.getSpans(start, end.coerceAtLeast(start + 1), UnderlineSpan::class.java).isNotEmpty()
+            hasStrikethrough = spannable.getSpans(start, end.coerceAtLeast(start + 1), StrikethroughSpan::class.java).isNotEmpty()
+            hasCode = spannable.getSpans(start, end.coerceAtLeast(start + 1), TypefaceSpan::class.java).any { it.family == "monospace" }
+
+            // Check highlight (but not code background)
+            val bgSpans = spannable.getSpans(start, end.coerceAtLeast(start + 1), BackgroundColorSpan::class.java)
+            hasHighlight = bgSpans.any {
+                val color = it.backgroundColor
+                color == Color.parseColor("#80FFFF00") || color == Color.YELLOW
+            }
+
+            // Check block type from line content
+            val lineText = getCurrentLineText()
+            blockType = when {
+                lineText.startsWith("• ") -> "bullet"
+                lineText.matches(Regex("^\\d+\\.\\s.*")) -> "numbered"
+                lineText.startsWith("☐ ") || lineText.startsWith("☑ ") -> "checklist"
+                lineText.startsWith("\"") && lineText.endsWith("\"") -> "quote"
+                spannable.getSpans(start, end.coerceAtLeast(start + 1), RelativeSizeSpan::class.java).any { it.sizeChange > 1.2f } -> "heading"
+                else -> "paragraph"
+            }
+
+            // Check alignment
+            spannable.getSpans(start, end.coerceAtLeast(start + 1), AlignmentSpan.Standard::class.java).firstOrNull()?.let { span ->
+                alignment = when (span.alignment) {
+                    Layout.Alignment.ALIGN_CENTER -> "center"
+                    Layout.Alignment.ALIGN_OPPOSITE -> "right"
+                    else -> "left"
+                }
+            }
+        }
+
+        val map = Arguments.createMap()
+        map.putBoolean("bold", hasBold)
+        map.putBoolean("italic", hasItalic)
+        map.putBoolean("underline", hasUnderline)
+        map.putBoolean("strikethrough", hasStrikethrough)
+        map.putBoolean("code", hasCode)
+        map.putBoolean("highlight", hasHighlight)
+        map.putString("blockType", blockType)
+        map.putString("alignment", alignment)
+        sendEvent("onActiveStylesChange", map)
+    }
+
     private val hideToolbarRunnable = Runnable {
         android.util.Log.d("RichTextEditor", "hideToolbarRunnable: selectionStart=$selectionStart, selectionEnd=$selectionEnd")
         if (selectionStart == selectionEnd) {
@@ -583,16 +705,44 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
     }
 
     private fun sendContentChange() {
+        sendContentChangeWithDelta(null)
+    }
+
+    private fun sendContentChangeWithDelta(delta: Map<String, Any>? = pendingDelta) {
         try {
             val map = Arguments.createMap()
             map.putString("text", text?.toString() ?: "")
-            map.putArray("blocks", getBlocksArray())
+            // Serialize blocks to JSON string (codegen doesn't support nested arrays)
+            map.putString("blocksJson", getBlocksJsonString())
+
+            // Include delta information if available
+            if (delta != null) {
+                val deltaMap = Arguments.createMap()
+                delta["type"]?.let { deltaMap.putString("type", it as String) }
+                delta["position"]?.let { deltaMap.putInt("position", it as Int) }
+                delta["length"]?.let { deltaMap.putInt("length", it as Int) }
+                delta["text"]?.let { deltaMap.putString("text", it as String) }
+                delta["style"]?.let { deltaMap.putString("style", it as String) }
+                map.putMap("delta", deltaMap)
+            }
+
             sendEvent("onContentChange", map)
         } catch (e: Exception) {
             e.printStackTrace()
         }
     }
 
+    // Send format delta when applying styles
+    private fun sendFormatDelta(style: String, start: Int, end: Int) {
+        val delta = mapOf(
+            "type" to "format",
+            "position" to start,
+            "length" to (end - start),
+            "style" to style
+        )
+        sendContentChangeWithDelta(delta)
+    }
+
     private fun saveToUndoStack() {
         val currentText = text?.toString() ?: ""
         if (currentText != lastSavedText) {
@@ -717,6 +867,19 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
 
     fun getTextContent(): String = text.toString()
 
+    // Fabric command response methods
+    fun emitGetTextResponse() {
+        val map = Arguments.createMap()
+        map.putString("text", text?.toString() ?: "")
+        sendEvent("onGetTextResponse", map)
+    }
+
+    fun emitGetBlocksResponse() {
+        val map = Arguments.createMap()
+        map.putArray("blocks", getBlocksArray())
+        sendEvent("onGetBlocksResponse", map)
+    }
+
     fun getBlocksArray(): WritableArray {
         val blocks = Arguments.createArray()
         val textContent = text?.toString() ?: ""
@@ -734,6 +897,23 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
         return blocks
     }
 
+    fun getBlocksJsonString(): String {
+        val textContent = text?.toString() ?: ""
+        if (textContent.isEmpty()) {
+            return "[]"
+        }
+        val jsonArray = org.json.JSONArray()
+        val lines = textContent.split("\n")
+        lines.forEach { line ->
+            val block = org.json.JSONObject()
+            block.put("type", "paragraph")
+            block.put("text", line)
+            block.put("styles", org.json.JSONArray())
+            jsonArray.put(block)
+        }
+        return jsonArray.toString()
+    }
+
     fun clearContent() {
         isInternalChange = true
         text?.clear()

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

@@ -1,14 +1,19 @@
 package com.richtext.editor
 
 import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.common.MapBuilder
+import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 
+@ReactModule(name = RichTextEditorViewManager.NAME)
 class RichTextEditorViewManager : SimpleViewManager<RichTextEditorView>() {
 
-    override fun getName(): String = "RichTextEditorView"
+    companion object {
+        const val NAME = "RichTextEditorView"
+    }
+
+    override fun getName(): String = NAME
 
     override fun createViewInstance(reactContext: ThemedReactContext): RichTextEditorView {
         return RichTextEditorView(reactContext)
@@ -33,9 +38,9 @@ class RichTextEditorViewManager : SimpleViewManager<RichTextEditorView>() {
     }
 
     @ReactProp(name = "maxHeight")
-    fun setMaxHeight(view: RichTextEditorView, maxHeight: Int) {
+    fun setMaxHeight(view: RichTextEditorView, maxHeight: Double) {
         try {
-            view.setMaxHeightValue(maxHeight)
+            view.setMaxHeightValue(maxHeight.toInt())
         } catch (e: Exception) {
             e.printStackTrace()
         }
@@ -76,36 +81,34 @@ class RichTextEditorViewManager : SimpleViewManager<RichTextEditorView>() {
         }
     }
 
-    @ReactProp(name = "initialContent")
-    fun setInitialContent(view: RichTextEditorView, initialContent: ReadableArray?) {
-        if (initialContent == null || initialContent.size() == 0) return
+    @ReactProp(name = "initialContentJson")
+    fun setInitialContentJson(view: RichTextEditorView, initialContentJson: String?) {
+        if (initialContentJson.isNullOrEmpty()) return
 
         try {
+            val json = org.json.JSONArray(initialContentJson)
             val blocksList = mutableListOf<Map<String, Any>>()
-            for (i in 0 until initialContent.size()) {
-                val block = initialContent.getMap(i) ?: continue
+            for (i in 0 until json.length()) {
+                val block = json.getJSONObject(i)
                 val blockMap = mutableMapOf<String, Any>()
-                blockMap["text"] = block.getString("text") ?: ""
-                blockMap["type"] = block.getString("type") ?: "paragraph"
+                blockMap["text"] = block.optString("text", "")
+                blockMap["type"] = block.optString("type", "paragraph")
 
                 val stylesList = mutableListOf<Map<String, Any>>()
-                if (block.hasKey("styles")) {
-                    val styles = block.getArray("styles")
-                    if (styles != null) {
-                        for (j in 0 until styles.size()) {
-                            val style = styles.getMap(j) ?: continue
-                            val styleMap = mutableMapOf<String, Any>()
-                            styleMap["style"] = style.getString("style") ?: ""
-                            styleMap["start"] = if (style.hasKey("start")) style.getInt("start") else 0
-                            styleMap["end"] = if (style.hasKey("end")) style.getInt("end") else 0
-                            stylesList.add(styleMap)
-                        }
+                val styles = block.optJSONArray("styles")
+                if (styles != null) {
+                    for (j in 0 until styles.length()) {
+                        val style = styles.getJSONObject(j)
+                        val styleMap = mutableMapOf<String, Any>()
+                        styleMap["style"] = style.optString("style", "")
+                        styleMap["start"] = style.optInt("start", 0)
+                        styleMap["end"] = style.optInt("end", 0)
+                        stylesList.add(styleMap)
                     }
                 }
                 blockMap["styles"] = stylesList
                 blocksList.add(blockMap)
             }
-            // Delay setting content until view is ready
             view.post {
                 view.setContent(blocksList)
             }
@@ -114,123 +117,14 @@ class RichTextEditorViewManager : SimpleViewManager<RichTextEditorView>() {
         }
     }
 
-    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
-        return MapBuilder.builder<String, Any>()
-            .put("onContentChange", MapBuilder.of("registrationName", "onContentChange"))
-            .put("onSelectionChange", MapBuilder.of("registrationName", "onSelectionChange"))
-            .put("onEditorFocus", MapBuilder.of("registrationName", "onEditorFocus"))
-            .put("onEditorBlur", MapBuilder.of("registrationName", "onEditorBlur"))
-            .put("onSizeChange", MapBuilder.of("registrationName", "onSizeChange"))
-            .build()
-    }
-
-    override fun getCommandsMap(): Map<String, Int>? {
-        return MapBuilder.builder<String, Int>()
-            // Content management
-            .put("setContent", 1)
-            .put("getText", 2)
-            .put("getBlocks", 3)
-            .put("clear", 4)
-            // Focus management
-            .put("focus", 5)
-            .put("blur", 6)
-            // Text styles
-            .put("toggleBold", 10)
-            .put("toggleItalic", 11)
-            .put("toggleUnderline", 12)
-            .put("toggleStrikethrough", 13)
-            .put("toggleCode", 14)
-            .put("toggleHighlight", 15)
-            // Block types
-            .put("setHeading", 16)
-            .put("setBulletList", 17)
-            .put("setNumberedList", 18)
-            .put("setQuote", 19)
-            .put("setChecklist", 20)
-            .put("setParagraph", 21)
-            // Actions
-            .put("insertLink", 7)
-            .put("undo", 8)
-            .put("redo", 9)
-            .put("clearFormatting", 22)
-            // Indentation
-            .put("indent", 23)
-            .put("outdent", 24)
-            // Alignment
-            .put("setAlignment", 25)
-            // Checklist
-            .put("toggleChecklistItem", 26)
-            .build()
-    }
-
-    override fun receiveCommand(view: RichTextEditorView, commandId: Int, args: ReadableArray?) {
-        when (commandId) {
-            1 -> {
-                val blocks = args?.getArray(0)
-                if (blocks != null) {
-                    val blocksList = mutableListOf<Map<String, Any>>()
-                    for (i in 0 until blocks.size()) {
-                        val block = blocks.getMap(i)
-                        val blockMap = mutableMapOf<String, Any>()
-                        blockMap["text"] = block?.getString("text") ?: ""
-                        blockMap["type"] = block?.getString("type") ?: "paragraph"
-
-                        val styles = block?.getArray("styles")
-                        if (styles != null) {
-                            val stylesList = mutableListOf<Map<String, Any>>()
-                            for (j in 0 until styles.size()) {
-                                val style = styles.getMap(j)
-                                val styleMap = mutableMapOf<String, Any>()
-                                styleMap["style"] = style?.getString("style") ?: ""
-                                styleMap["start"] = style?.getInt("start") ?: 0
-                                styleMap["end"] = style?.getInt("end") ?: 0
-                                stylesList.add(styleMap)
-                            }
-                            blockMap["styles"] = stylesList
-                        }
-                        blocksList.add(blockMap)
-                    }
-                    view.setContent(blocksList)
-                }
-            }
-            4 -> view.clearContent()
-            5 -> view.focusEditor()
-            6 -> view.blurEditor()
-            7 -> {
-                val url = args?.getString(0) ?: ""
-                val text = args?.getString(1) ?: ""
-                view.insertLink(url, text)
-            }
-            8 -> view.undo()
-            9 -> view.redo()
-            10 -> view.toggleBold()
-            11 -> view.toggleItalic()
-            12 -> view.toggleUnderline()
-            13 -> view.toggleStrikethrough()
-            14 -> view.toggleCode()
-            15 -> {
-                val color = args?.getString(0)
-                view.toggleHighlight(color)
-            }
-            16 -> view.setHeading()
-            17 -> view.toggleBulletList()
-            18 -> view.toggleNumberedList()
-            19 -> view.setQuote()
-            20 -> view.setChecklist()
-            21 -> view.setParagraph()
-            22 -> view.clearFormatting()
-            23 -> view.indent()
-            24 -> view.outdent()
-            25 -> {
-                val alignment = args?.getString(0) ?: "left"
-                val layoutAlignment = when (alignment) {
-                    "center" -> android.text.Layout.Alignment.ALIGN_CENTER
-                    "right" -> android.text.Layout.Alignment.ALIGN_OPPOSITE
-                    else -> android.text.Layout.Alignment.ALIGN_NORMAL
-                }
-                view.setAlignment(layoutAlignment)
-            }
-            26 -> view.toggleChecklistItem()
-        }
+    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+        val events = mutableMapOf<String, Any>()
+        events["onContentChange"] = mapOf("registrationName" to "onContentChange")
+        events["onSelectionChange"] = mapOf("registrationName" to "onSelectionChange")
+        events["onEditorFocus"] = mapOf("registrationName" to "onEditorFocus")
+        events["onEditorBlur"] = mapOf("registrationName" to "onEditorBlur")
+        events["onSizeChange"] = mapOf("registrationName" to "onSizeChange")
+        events["onActiveStylesChange"] = mapOf("registrationName" to "onActiveStylesChange")
+        return events
     }
 }