react-native-enriched 0.2.1 → 0.4.0

package/android/src/main/java/com/swmansion/enriched/textinput/utils/EnrichedSpanState.kt

@@ -0,0 +1,304 @@
+package com.swmansion.enriched.textinput.utils
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.swmansion.enriched.textinput.EnrichedTextInputView
+import com.swmansion.enriched.textinput.events.OnChangeStateEvent
+import com.swmansion.enriched.textinput.spans.EnrichedSpans
+
+class EnrichedSpanState(
+  private val view: EnrichedTextInputView,
+) {
+  private var previousPayload: WritableMap? = null
+
+  var boldStart: Int? = null
+    private set
+  var italicStart: Int? = null
+    private set
+  var underlineStart: Int? = null
+    private set
+  var strikethroughStart: Int? = null
+    private set
+  var inlineCodeStart: Int? = null
+    private set
+  var h1Start: Int? = null
+    private set
+  var h2Start: Int? = null
+    private set
+  var h3Start: Int? = null
+    private set
+  var h4Start: Int? = null
+    private set
+  var h5Start: Int? = null
+    private set
+  var h6Start: Int? = null
+    private set
+  var codeBlockStart: Int? = null
+    private set
+  var blockQuoteStart: Int? = null
+    private set
+  var orderedListStart: Int? = null
+    private set
+  var unorderedListStart: Int? = null
+    private set
+  var checkboxListStart: Int? = null
+    private set
+  var linkStart: Int? = null
+    private set
+  var imageStart: Int? = null
+    private set
+  var mentionStart: Int? = null
+    private set
+
+  fun setBoldStart(start: Int?) {
+    this.boldStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setItalicStart(start: Int?) {
+    this.italicStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setUnderlineStart(start: Int?) {
+    this.underlineStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setStrikethroughStart(start: Int?) {
+    this.strikethroughStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setInlineCodeStart(start: Int?) {
+    this.inlineCodeStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setH1Start(start: Int?) {
+    this.h1Start = start
+    emitStateChangeEvent()
+  }
+
+  fun setH2Start(start: Int?) {
+    this.h2Start = start
+    emitStateChangeEvent()
+  }
+
+  fun setH3Start(start: Int?) {
+    this.h3Start = start
+    emitStateChangeEvent()
+  }
+
+  fun setH4Start(start: Int?) {
+    this.h4Start = start
+    emitStateChangeEvent()
+  }
+
+  fun setH5Start(start: Int?) {
+    this.h5Start = start
+    emitStateChangeEvent()
+  }
+
+  fun setH6Start(start: Int?) {
+    this.h6Start = start
+    emitStateChangeEvent()
+  }
+
+  fun setCodeBlockStart(start: Int?) {
+    this.codeBlockStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setBlockQuoteStart(start: Int?) {
+    this.blockQuoteStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setOrderedListStart(start: Int?) {
+    this.orderedListStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setUnorderedListStart(start: Int?) {
+    this.unorderedListStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setCheckboxListStart(start: Int?) {
+    this.checkboxListStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setLinkStart(start: Int?) {
+    this.linkStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setImageStart(start: Int?) {
+    this.imageStart = start
+    emitStateChangeEvent()
+  }
+
+  fun setMentionStart(start: Int?) {
+    this.mentionStart = start
+    emitStateChangeEvent()
+  }
+
+  fun getStart(name: String): Int? {
+    val start =
+      when (name) {
+        EnrichedSpans.BOLD -> boldStart
+        EnrichedSpans.ITALIC -> italicStart
+        EnrichedSpans.UNDERLINE -> underlineStart
+        EnrichedSpans.STRIKETHROUGH -> strikethroughStart
+        EnrichedSpans.INLINE_CODE -> inlineCodeStart
+        EnrichedSpans.H1 -> h1Start
+        EnrichedSpans.H2 -> h2Start
+        EnrichedSpans.H3 -> h3Start
+        EnrichedSpans.H4 -> h4Start
+        EnrichedSpans.H5 -> h5Start
+        EnrichedSpans.H6 -> h6Start
+        EnrichedSpans.CODE_BLOCK -> codeBlockStart
+        EnrichedSpans.BLOCK_QUOTE -> blockQuoteStart
+        EnrichedSpans.ORDERED_LIST -> orderedListStart
+        EnrichedSpans.UNORDERED_LIST -> unorderedListStart
+        EnrichedSpans.CHECKBOX_LIST -> checkboxListStart
+        EnrichedSpans.LINK -> linkStart
+        EnrichedSpans.IMAGE -> imageStart
+        EnrichedSpans.MENTION -> mentionStart
+        else -> null
+      }
+
+    return start
+  }
+
+  fun setStart(
+    name: String,
+    start: Int?,
+  ) {
+    when (name) {
+      EnrichedSpans.BOLD -> setBoldStart(start)
+      EnrichedSpans.ITALIC -> setItalicStart(start)
+      EnrichedSpans.UNDERLINE -> setUnderlineStart(start)
+      EnrichedSpans.STRIKETHROUGH -> setStrikethroughStart(start)
+      EnrichedSpans.INLINE_CODE -> setInlineCodeStart(start)
+      EnrichedSpans.H1 -> setH1Start(start)
+      EnrichedSpans.H2 -> setH2Start(start)
+      EnrichedSpans.H3 -> setH3Start(start)
+      EnrichedSpans.H4 -> setH4Start(start)
+      EnrichedSpans.H5 -> setH5Start(start)
+      EnrichedSpans.H6 -> setH6Start(start)
+      EnrichedSpans.CODE_BLOCK -> setCodeBlockStart(start)
+      EnrichedSpans.BLOCK_QUOTE -> setBlockQuoteStart(start)
+      EnrichedSpans.ORDERED_LIST -> setOrderedListStart(start)
+      EnrichedSpans.UNORDERED_LIST -> setUnorderedListStart(start)
+      EnrichedSpans.CHECKBOX_LIST -> setCheckboxListStart(start)
+      EnrichedSpans.LINK -> setLinkStart(start)
+      EnrichedSpans.IMAGE -> setImageStart(start)
+      EnrichedSpans.MENTION -> setMentionStart(start)
+    }
+  }
+
+  private fun emitStateChangeEvent() {
+    val context = view.context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+
+    dispatchPayload(dispatcher, surfaceId)
+  }
+
+  private fun dispatchPayload(
+    dispatcher: EventDispatcher?,
+    surfaceId: Int,
+  ) {
+    val activeStyles =
+      listOfNotNull(
+        if (boldStart != null) EnrichedSpans.BOLD else null,
+        if (italicStart != null) EnrichedSpans.ITALIC else null,
+        if (underlineStart != null) EnrichedSpans.UNDERLINE else null,
+        if (strikethroughStart != null) EnrichedSpans.STRIKETHROUGH else null,
+        if (inlineCodeStart != null) EnrichedSpans.INLINE_CODE else null,
+        if (h1Start != null) EnrichedSpans.H1 else null,
+        if (h2Start != null) EnrichedSpans.H2 else null,
+        if (h3Start != null) EnrichedSpans.H3 else null,
+        if (h4Start != null) EnrichedSpans.H4 else null,
+        if (h5Start != null) EnrichedSpans.H5 else null,
+        if (h6Start != null) EnrichedSpans.H6 else null,
+        if (codeBlockStart != null) EnrichedSpans.CODE_BLOCK else null,
+        if (blockQuoteStart != null) EnrichedSpans.BLOCK_QUOTE else null,
+        if (orderedListStart != null) EnrichedSpans.ORDERED_LIST else null,
+        if (unorderedListStart != null) EnrichedSpans.UNORDERED_LIST else null,
+        if (checkboxListStart != null) EnrichedSpans.CHECKBOX_LIST else null,
+        if (linkStart != null) EnrichedSpans.LINK else null,
+        if (imageStart != null) EnrichedSpans.IMAGE else null,
+        if (mentionStart != null) EnrichedSpans.MENTION else null,
+      )
+    val payload = Arguments.createMap()
+    payload.putMap("bold", getStyleState(activeStyles, EnrichedSpans.BOLD))
+    payload.putMap("italic", getStyleState(activeStyles, EnrichedSpans.ITALIC))
+    payload.putMap("underline", getStyleState(activeStyles, EnrichedSpans.UNDERLINE))
+    payload.putMap("strikeThrough", getStyleState(activeStyles, EnrichedSpans.STRIKETHROUGH))
+    payload.putMap("inlineCode", getStyleState(activeStyles, EnrichedSpans.INLINE_CODE))
+    payload.putMap("h1", getStyleState(activeStyles, EnrichedSpans.H1))
+    payload.putMap("h2", getStyleState(activeStyles, EnrichedSpans.H2))
+    payload.putMap("h3", getStyleState(activeStyles, EnrichedSpans.H3))
+    payload.putMap("h4", getStyleState(activeStyles, EnrichedSpans.H4))
+    payload.putMap("h5", getStyleState(activeStyles, EnrichedSpans.H5))
+    payload.putMap("h6", getStyleState(activeStyles, EnrichedSpans.H6))
+    payload.putMap("codeBlock", getStyleState(activeStyles, EnrichedSpans.CODE_BLOCK))
+    payload.putMap("blockQuote", getStyleState(activeStyles, EnrichedSpans.BLOCK_QUOTE))
+    payload.putMap("orderedList", getStyleState(activeStyles, EnrichedSpans.ORDERED_LIST))
+    payload.putMap("unorderedList", getStyleState(activeStyles, EnrichedSpans.UNORDERED_LIST))
+    payload.putMap("link", getStyleState(activeStyles, EnrichedSpans.LINK))
+    payload.putMap("image", getStyleState(activeStyles, EnrichedSpans.IMAGE))
+    payload.putMap("mention", getStyleState(activeStyles, EnrichedSpans.MENTION))
+    payload.putMap("checkboxList", getStyleState(activeStyles, EnrichedSpans.CHECKBOX_LIST))
+
+    // Do not emit event if payload is the same
+    if (previousPayload == payload) {
+      return
+    }
+
+    previousPayload =
+      Arguments.createMap().apply {
+        merge(payload)
+      }
+    dispatcher?.dispatchEvent(
+      OnChangeStateEvent(
+        surfaceId,
+        view.id,
+        payload,
+        view.experimentalSynchronousEvents,
+      ),
+    )
+  }
+
+  private fun getStyleState(
+    activeStyles: List<String>,
+    type: String,
+  ): WritableMap {
+    val mergingConfig = EnrichedSpans.getMergingConfigForStyle(type, view.htmlStyle)
+    val blockingList = mergingConfig?.blockingStyles
+    val conflictingList = mergingConfig?.conflictingStyles
+
+    val state = Arguments.createMap()
+
+    state.putBoolean("isActive", activeStyles.contains(type))
+
+    val isBlocking = blockingList?.any { activeStyles.contains(it) } ?: false
+    state.putBoolean("isBlocking", isBlocking)
+
+    val isConflicting = conflictingList?.any { activeStyles.contains(it) } ?: false
+    state.putBoolean("isConflicting", isConflicting)
+
+    return state
+  }
+
+  companion object {
+    const val NAME = "ReactNativeEnrichedView"
+  }
+}

package/android/src/main/java/com/swmansion/enriched/{utils/Utils.kt → textinput/utils/EnrichedSpannable.kt}

@@ -1,38 +1,25 @@
-package com.swmansion.enriched.utils
+package com.swmansion.enriched.textinput.utils
 
 import android.text.Spannable
 import android.text.SpannableString
 import android.text.SpannableStringBuilder
-import android.util.Log
-import com.swmansion.enriched.spans.interfaces.EnrichedBlockSpan
-import com.swmansion.enriched.spans.interfaces.EnrichedParagraphSpan
-import org.json.JSONObject
-
-fun jsonStringToStringMap(json: String): Map<String, String> {
-  val result = mutableMapOf<String, String>()
-  try {
-    val jsonObject = JSONObject(json)
-    for (key in jsonObject.keys()) {
-      val value = jsonObject.opt(key)
-      if (value is String) {
-        result[key] = value
-      }
-    }
-  } catch (e: Exception) {
-    Log.w("ReactNativeEnrichedView", "Failed to parse JSON string to Map: $json", e)
-  }
-
-  return result
-}
+import com.swmansion.enriched.common.spans.interfaces.EnrichedBlockSpan
+import com.swmansion.enriched.common.spans.interfaces.EnrichedParagraphSpan
 
-fun Spannable.getSafeSpanBoundaries(start: Int, end: Int): Pair<Int, Int> {
+fun Spannable.getSafeSpanBoundaries(
+  start: Int,
+  end: Int,
+): Pair<Int, Int> {
   val safeStart = start.coerceAtMost(end).coerceAtLeast(0)
   val safeEnd = end.coerceAtLeast(start).coerceAtMost(this.length)
 
   return Pair(safeStart, safeEnd)
 }
 
-fun Spannable.getParagraphBounds(start: Int, end: Int): Pair<Int, Int> {
+fun Spannable.getParagraphBounds(
+  start: Int,
+  end: Int,
+): Pair<Int, Int> {
   var startPosition = start.coerceAtLeast(0).coerceAtMost(this.length)
   var endPosition = end.coerceAtLeast(0).coerceAtMost(this.length)
 
@@ -54,15 +41,19 @@ fun Spannable.getParagraphBounds(start: Int, end: Int): Pair<Int, Int> {
   return Pair(startPosition, endPosition)
 }
 
-fun Spannable.getParagraphBounds(index: Int): Pair<Int, Int> {
-  return this.getParagraphBounds(index, index)
-}
+fun Spannable.getParagraphBounds(index: Int): Pair<Int, Int> = this.getParagraphBounds(index, index)
 
-fun Spannable.mergeSpannables(start: Int, end: Int, string: String): Spannable {
-  return this.mergeSpannables(start, end, SpannableString(string))
-}
+fun Spannable.mergeSpannables(
+  start: Int,
+  end: Int,
+  string: String,
+): Spannable = this.mergeSpannables(start, end, SpannableString(string))
 
-fun Spannable.mergeSpannables(start: Int, end: Int, spannable: Spannable): Spannable {
+fun Spannable.mergeSpannables(
+  start: Int,
+  end: Int,
+  spannable: Spannable,
+): Spannable {
   var finalStart = start
   var finalEnd = end
 

package/android/src/main/java/com/swmansion/enriched/textinput/utils/EnrichedSpannableStringBuilder.kt

@@ -0,0 +1,16 @@
+package com.swmansion.enriched.textinput.utils
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.common.EnrichedConstants
+
+// Removes zero-width spaces from the given range in the SpannableStringBuilder without affecting spans
+fun SpannableStringBuilder.removeZWS(
+  start: Int,
+  end: Int,
+) {
+  for (i in (end - 1) downTo start) {
+    if (this[i] == EnrichedConstants.ZWS) {
+      delete(i, i + 1)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/textinput/utils/RichContentReceiver.kt

@@ -0,0 +1,127 @@
+package com.swmansion.enriched.textinput.utils
+
+import android.content.ClipData
+import android.content.Context
+import android.graphics.BitmapFactory
+import android.net.Uri
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import android.view.View
+import android.webkit.MimeTypeMap
+import androidx.core.view.ContentInfoCompat
+import androidx.core.view.OnReceiveContentListener
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.swmansion.enriched.textinput.EnrichedTextInputView
+import com.swmansion.enriched.textinput.events.OnPasteImagesEvent
+import java.io.File
+import java.io.FileOutputStream
+import kotlin.io.copyTo
+
+class RichContentReceiver(
+  private val view: EnrichedTextInputView,
+  private val context: ReactContext,
+) : OnReceiveContentListener {
+  override fun onReceiveContent(
+    view: View,
+    contentInfo: ContentInfoCompat,
+  ): ContentInfoCompat? {
+    val split = contentInfo.partition { item: ClipData.Item -> item.uri != null }
+    val uriContent = split.first
+    val remaining = split.second
+
+    if (uriContent != null) {
+      processClipDataInBackground(uriContent.clip)
+    }
+
+    if (remaining != null && remaining.clip.itemCount > 0) {
+      val item = remaining.clip.getItemAt(0)
+
+      this.view.handleTextPaste(item)
+    }
+
+    return null
+  }
+
+  private fun processClipDataInBackground(clip: ClipData) {
+    Thread {
+      val results = mutableListOf<OnPasteImagesEvent.Companion.PastedImage>()
+
+      for (i in 0 until clip.itemCount) {
+        val item = clip.getItemAt(i)
+        val uri = item.uri ?: continue
+        val mimeType = getMimeTypeFromUri(uri) ?: continue
+
+        if (mimeType.startsWith("image/")) {
+          val result = saveUriToTempFile(context, uri, mimeType)
+          if (result != null) {
+            results.add(result)
+          }
+        }
+      }
+
+      if (results.isNotEmpty()) {
+        Handler(Looper.getMainLooper()).post {
+          emitOnPasteImageEvent(results)
+        }
+      }
+    }.start()
+  }
+
+  private fun emitOnPasteImageEvent(images: List<OnPasteImagesEvent.Companion.PastedImage>) {
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+    dispatcher?.dispatchEvent(OnPasteImagesEvent(surfaceId, view.id, images, false))
+  }
+
+  private fun saveUriToTempFile(
+    context: Context,
+    uri: Uri,
+    mimeType: String,
+  ): OnPasteImagesEvent.Companion.PastedImage? {
+    return try {
+      val resolver = context.contentResolver
+      val ext = MimeTypeMap.getFileExtensionFromUrl(uri.toString())
+      val file = File.createTempFile("temp", ".$ext", context.cacheDir)
+
+      // Copy Stream
+      resolver.openInputStream(uri).use { input ->
+        if (input == null) return null
+        FileOutputStream(file).use { output ->
+          input.copyTo(output)
+        }
+      }
+
+      // Decode Dimensions
+      val options = BitmapFactory.Options().apply { inJustDecodeBounds = true }
+      BitmapFactory.decodeFile(file.absolutePath, options)
+
+      OnPasteImagesEvent.Companion.PastedImage(
+        uri = "file://${file.absolutePath}",
+        type = mimeType,
+        width = options.outWidth.toDouble(),
+        height = options.outHeight.toDouble(),
+      )
+    } catch (e: Exception) {
+      Log.e("RichContentReceiver", "Failed to save URI: $uri", e)
+      null
+    }
+  }
+
+  private fun getMimeTypeFromUri(uri: Uri): String? {
+    var mimeType = context.contentResolver.getType(uri)
+
+    if (mimeType == null) {
+      val extension = MimeTypeMap.getFileExtensionFromUrl(uri.toString())
+
+      mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension)
+    }
+
+    return mimeType
+  }
+
+  companion object {
+    val MIME_TYPES = arrayOf("image/*", "text/*")
+  }
+}

package/android/src/main/java/com/swmansion/enriched/textinput/utils/Utils.kt

@@ -0,0 +1,106 @@
+package com.swmansion.enriched.textinput.utils
+
+import android.annotation.SuppressLint
+import android.text.Selection
+import android.text.Spannable
+import android.text.Spanned
+import android.util.Log
+import android.view.MotionEvent
+import android.widget.TextView
+import com.swmansion.enriched.textinput.spans.EnrichedInputCheckboxListSpan
+import org.json.JSONObject
+
+fun jsonStringToStringMap(json: String): Map<String, String> {
+  val result = mutableMapOf<String, String>()
+  try {
+    val jsonObject = JSONObject(json)
+    for (key in jsonObject.keys()) {
+      val value = jsonObject.opt(key)
+      if (value is String) {
+        result[key] = value
+      }
+    }
+  } catch (e: Exception) {
+    Log.w("ReactNativeEnrichedView", "Failed to parse JSON string to Map: $json", e)
+  }
+
+  return result
+}
+
+// Sets a touch listener on TextView which is responsible for detecting touches on checkbox icons
+// We don't use ClickableSpan because it works fine only when LinkMovementMethod is set on TextView
+// Which breaks text selection and other features
+@SuppressLint("ClickableViewAccessibility")
+fun TextView.setCheckboxClickListener() {
+  var isDownOnCheckbox = false
+
+  setOnTouchListener { v, event ->
+    val tv = v as TextView
+    val layout = tv.layout ?: return@setOnTouchListener false
+    val spannable = tv.text as? Spanned ?: return@setOnTouchListener false
+
+    // Get touch coordinates relative to the text content
+    val x = event.x.toInt() - tv.totalPaddingLeft + tv.scrollX
+    val y = event.y.toInt() - tv.totalPaddingTop + tv.scrollY
+
+    // Identify the line and whether it's the first line of the span
+    val line = layout.getLineForVertical(y)
+    val lineStart = layout.getLineStart(line)
+
+    // Find spans for specific line
+    val spans = spannable.getSpans(lineStart, lineStart, EnrichedInputCheckboxListSpan::class.java)
+    if (spans.isEmpty()) return@setOnTouchListener false
+
+    // There should be only one span per line as we don't support nested lists
+    val span = spans[0]
+    val isFirstLine = spannable.getSpanStart(span) == lineStart
+    val marginWidth = span.getLeadingMargin(true)
+
+    // Check if touch is on checkbox icon area (which is in the leading margin on the first line)
+    val isInHotZone = isFirstLine && x in 0..marginWidth
+
+    when (event.action) {
+      MotionEvent.ACTION_DOWN -> {
+        if (isInHotZone) {
+          isDownOnCheckbox = true
+          return@setOnTouchListener true
+        }
+      }
+
+      MotionEvent.ACTION_UP -> {
+        if (isDownOnCheckbox && isInHotZone) {
+          val spannable = tv.text as? Spannable
+          if (spannable != null) {
+            val start = spannable.getSpanStart(span)
+            val end = spannable.getSpanEnd(span)
+            val flags = spannable.getSpanFlags(span)
+            span.isChecked = !span.isChecked
+
+            // Reapply span so changes are visible without need to redraw entire TextView
+            spannable.removeSpan(span)
+            spannable.setSpan(span, start, end, flags)
+
+            // For focused input, ensure cursor is active for affected paragraph
+            if (tv.isFocused) {
+              val currentCursor = Selection.getSelectionEnd(spannable)
+              if (currentCursor < start || currentCursor > end) {
+                Selection.setSelection(spannable, end)
+              }
+            }
+          }
+
+          isDownOnCheckbox = false
+          return@setOnTouchListener true
+        }
+        isDownOnCheckbox = false
+      }
+
+      MotionEvent.ACTION_CANCEL -> {
+        isDownOnCheckbox = false
+      }
+    }
+
+    // Let TextView handle other touches (e.g., for selection)
+    false
+  }
+}