react-native-enriched-html 0.0.0 → 1.0.0

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

@@ -0,0 +1,340 @@
+package com.swmansion.enriched.textinput.utils
+
+import android.text.Editable
+import android.text.Spannable
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.swmansion.enriched.common.EnrichedConstants
+import com.swmansion.enriched.textinput.EnrichedTextInputView
+import com.swmansion.enriched.textinput.events.OnChangeSelectionEvent
+import com.swmansion.enriched.textinput.events.OnLinkDetectedEvent
+import com.swmansion.enriched.textinput.events.OnMentionDetectedEvent
+import com.swmansion.enriched.textinput.spans.EnrichedInputLinkSpan
+import com.swmansion.enriched.textinput.spans.EnrichedInputMentionSpan
+import com.swmansion.enriched.textinput.spans.EnrichedSpans
+import org.json.JSONObject
+
+class EnrichedSelection(
+  private val view: EnrichedTextInputView,
+) {
+  var start: Int = 0
+  var end: Int = 0
+
+  private var previousLinkDetectedEvent: MutableMap<String, String> = mutableMapOf("text" to "", "url" to "")
+  private var previousMentionDetectedEvent: MutableMap<String, String> = mutableMapOf("text" to "", "payload" to "")
+
+  fun onSelection(
+    selStart: Int,
+    selEnd: Int,
+  ) {
+    var shouldValidateStyles = false
+    var newStart = start
+    var newEnd = end
+
+    if (selStart != -1 && selStart != newStart) {
+      newStart = selStart
+      shouldValidateStyles = true
+    }
+
+    if (selEnd != -1 && selEnd != newEnd) {
+      newEnd = selEnd
+      shouldValidateStyles = true
+    }
+
+    val textLength = view.text?.length ?: 0
+    val finalStart = newStart.coerceAtMost(newEnd).coerceAtLeast(0).coerceAtMost(textLength)
+    val finalEnd = newEnd.coerceAtLeast(newStart).coerceAtLeast(0).coerceAtMost(textLength)
+
+    if (isZeroWidthSelection(finalStart, finalEnd) && !view.isDuringTransaction) {
+      view.setSelection(finalStart + 1)
+      shouldValidateStyles = false
+    }
+
+    if (!shouldValidateStyles) return
+
+    start = finalStart
+    end = finalEnd
+    validateStyles()
+    emitSelectionChangeEvent(view.text, finalStart, finalEnd)
+  }
+
+  private fun isZeroWidthSelection(
+    start: Int,
+    end: Int,
+  ): Boolean {
+    val text = view.text ?: return false
+
+    if (start != end) {
+      return text.substring(start, end) == EnrichedConstants.ZWS_STRING
+    }
+
+    val isNewLine = if (start > 0) text.substring(start - 1, start) == "\n" else true
+    val isNextCharacterZeroWidth =
+      if (start < text.length) {
+        text.substring(start, start + 1) == EnrichedConstants.ZWS_STRING
+      } else {
+        false
+      }
+
+    return isNewLine && isNextCharacterZeroWidth
+  }
+
+  fun validateStyles() {
+    val state = view.spanState ?: return
+
+    // We don't validate inline styles when removing many characters at once
+    // We don't want to remove styles on auto-correction
+    // If user removes many characters at once, we want to keep the styles config
+    if (!view.isRemovingMany) {
+      for ((style, config) in EnrichedSpans.inlineSpans) {
+        state.setStart(style, getInlineStyleStart(config.clazz))
+      }
+    } else {
+      view.isRemovingMany = false
+    }
+
+    for ((style, config) in EnrichedSpans.paragraphSpans) {
+      state.setStart(style, getParagraphStyleStart(config.clazz))
+    }
+
+    for ((style, config) in EnrichedSpans.listSpans) {
+      state.setStart(style, getListStyleStart(config.clazz))
+    }
+
+    for ((style, config) in EnrichedSpans.parametrizedStyles) {
+      state.setStart(style, getParametrizedStyleStart(config.clazz))
+    }
+
+    val currentAlignment = view.alignmentStyles?.getCurrentAlignment() ?: "auto"
+    state.setAlignment(currentAlignment)
+  }
+
+  fun getInlineSelection(): Pair<Int, Int> {
+    val textLength = view.text?.length ?: 0
+    val finalStart = start.coerceAtMost(end).coerceAtLeast(0).coerceAtMost(textLength)
+    val finalEnd = end.coerceAtLeast(start).coerceAtLeast(0).coerceAtMost(textLength)
+
+    return Pair(finalStart, finalEnd)
+  }
+
+  private fun <T> getInlineStyleStart(type: Class<T>): Int? {
+    val (start, end) = getInlineSelection()
+    val spannable = view.text as Spannable
+    val spans = spannable.getSpans(start, end, type)
+    var styleStart: Int? = null
+
+    for (span in spans) {
+      val spanStart = spannable.getSpanStart(span)
+      val spanEnd = spannable.getSpanEnd(span)
+
+      if (start == end && start == spanStart) {
+        styleStart = null
+      } else if (start >= spanStart && end <= spanEnd) {
+        styleStart = spanStart
+      }
+    }
+
+    return styleStart
+  }
+
+  fun getParagraphSelection(): Pair<Int, Int> {
+    val (currentStart, currentEnd) = getInlineSelection()
+    val spannable = view.text as Spannable
+    return spannable.getParagraphBounds(currentStart, currentEnd)
+  }
+
+  private fun <T> getParagraphStyleStart(type: Class<T>): Int? {
+    val (start, end) = getParagraphSelection()
+    val spannable = view.text as Spannable
+    val spans = spannable.getSpans(start, end, type)
+    var styleStart: Int? = null
+
+    for (span in spans) {
+      val spanStart = spannable.getSpanStart(span)
+      val spanEnd = spannable.getSpanEnd(span)
+
+      if (start >= spanStart && end <= spanEnd) {
+        styleStart = spanStart
+        break
+      }
+    }
+
+    return styleStart
+  }
+
+  private fun <T> getListStyleStart(type: Class<T>): Int? {
+    val (start, end) = getParagraphSelection()
+    val spannable = view.text as Spannable
+    var styleStart: Int? = null
+
+    var paragraphStart = start
+    val paragraphs = spannable.substring(start, end).split("\n")
+    pi@ for (paragraph in paragraphs) {
+      val paragraphEnd = paragraphStart + paragraph.length
+      val spans = spannable.getSpans(paragraphStart, paragraphEnd, type)
+
+      for (span in spans) {
+        val spanStart = spannable.getSpanStart(span)
+        val spanEnd = spannable.getSpanEnd(span)
+
+        if (spanStart == paragraphStart && spanEnd == paragraphEnd) {
+          styleStart = spanStart
+          paragraphStart = paragraphEnd + 1
+          continue@pi
+        }
+      }
+
+      styleStart = null
+      break
+    }
+
+    return styleStart
+  }
+
+  private fun <T> getParametrizedStyleStart(type: Class<T>): Int? {
+    val (start, end) = getInlineSelection()
+    val spannable = view.text as Spannable
+    val spans = spannable.getSpans(start, end, type)
+    val isLinkType = type == EnrichedInputLinkSpan::class.java
+    val isMentionType = type == EnrichedInputMentionSpan::class.java
+
+    if (isLinkType && spans.isEmpty()) {
+      if (wasLinkPreviouslyDetected()) {
+        emitLinkDetectedEvent(spannable, null, 0, 0)
+      }
+      return null
+    }
+
+    if (isMentionType && spans.isEmpty()) {
+      if (wasMentionPreviouslyDetected()) {
+        emitMentionDetectedEvent(spannable, null, start, end)
+      }
+      return null
+    }
+
+    for (span in spans) {
+      val spanStart = spannable.getSpanStart(span)
+      val spanEnd = spannable.getSpanEnd(span)
+
+      if (start >= spanStart && end <= spanEnd) {
+        if (isLinkType && span is EnrichedInputLinkSpan) {
+          emitLinkDetectedEvent(spannable, span, spanStart, spanEnd)
+        } else if (isMentionType && span is EnrichedInputMentionSpan) {
+          emitMentionDetectedEvent(spannable, span, spanStart, spanEnd)
+        }
+
+        return spanStart
+      }
+    }
+
+    return null
+  }
+
+  private fun emitSelectionChangeEvent(
+    editable: Editable?,
+    start: Int,
+    end: Int,
+  ) {
+    if (editable == null) return
+
+    val context = view.context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+
+    val visibleStart = start - editable.zwsCountBefore(start)
+    val visibleEnd = end - editable.zwsCountBefore(end)
+    val text = editable.substring(start, end).replace(EnrichedConstants.ZWS_STRING, "")
+    dispatcher?.dispatchEvent(
+      OnChangeSelectionEvent(
+        surfaceId,
+        view.id,
+        text,
+        visibleStart,
+        visibleEnd,
+        view.experimentalSynchronousEvents,
+      ),
+    )
+  }
+
+  private fun wasMentionPreviouslyDetected(): Boolean {
+    val previousText = previousMentionDetectedEvent["text"] ?: ""
+    val previousIndicator = previousMentionDetectedEvent["indicator"] ?: ""
+    return previousText.isNotEmpty() || previousIndicator.isNotEmpty()
+  }
+
+  private fun wasLinkPreviouslyDetected(): Boolean {
+    val previousText = previousLinkDetectedEvent["text"] ?: ""
+    val previousUrl = previousLinkDetectedEvent["url"] ?: ""
+    return previousText.isNotEmpty() || previousUrl.isNotEmpty()
+  }
+
+  private fun emitLinkDetectedEvent(
+    spannable: Spannable,
+    span: EnrichedInputLinkSpan?,
+    start: Int,
+    end: Int,
+  ) {
+    val text = spannable.substring(start, end).replace(EnrichedConstants.ZWS_STRING, "")
+    val url = span?.getUrl() ?: ""
+
+    // Prevents emitting unnecessary events
+    if (text == previousLinkDetectedEvent["text"] && url == previousLinkDetectedEvent["url"]) return
+
+    previousLinkDetectedEvent.put("text", text)
+    previousLinkDetectedEvent.put("url", url)
+
+    val visibleStart = start - spannable.zwsCountBefore(start)
+    val visibleEnd = end - spannable.zwsCountBefore(end)
+
+    val context = view.context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+    dispatcher?.dispatchEvent(
+      OnLinkDetectedEvent(
+        surfaceId,
+        view.id,
+        text,
+        url,
+        visibleStart,
+        visibleEnd,
+        view.experimentalSynchronousEvents,
+      ),
+    )
+  }
+
+  private fun emitMentionDetectedEvent(
+    spannable: Spannable,
+    span: EnrichedInputMentionSpan?,
+    start: Int,
+    end: Int,
+  ) {
+    val text = spannable.substring(start, end)
+    val attributes = span?.getAttributes() ?: emptyMap()
+    val indicator = span?.getIndicator() ?: ""
+    val payload = JSONObject(attributes).toString()
+
+    val previousText = previousMentionDetectedEvent["text"] ?: ""
+    val previousPayload = previousMentionDetectedEvent["payload"] ?: ""
+    val previousIndicator = previousMentionDetectedEvent["indicator"] ?: ""
+
+    if (text == previousText && payload == previousPayload && indicator == previousIndicator) return
+
+    previousMentionDetectedEvent.put("text", text)
+    previousMentionDetectedEvent.put("payload", payload)
+    previousMentionDetectedEvent.put("indicator", indicator)
+
+    val context = view.context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+    dispatcher?.dispatchEvent(
+      OnMentionDetectedEvent(
+        surfaceId,
+        view.id,
+        text,
+        indicator,
+        payload,
+        view.experimentalSynchronousEvents,
+      ),
+    )
+  }
+}

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

@@ -0,0 +1,318 @@
+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
+  var currentAlignment: String = "auto"
+    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 setAlignment(value: String) {
+    this.currentAlignment = value
+    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)
+    }
+  }
+
+  fun getStyleStatePayload(): WritableMap {
+    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))
+    payload.putString("alignment", currentAlignment)
+
+    return payload
+  }
+
+  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 payload = getStyleStatePayload()
+
+    // 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"
+  }
+}