react-native-enriched 0.0.0 → 0.1.1

package/android/src/main/java/com/swmansion/enriched/styles/HtmlStyle.kt

@@ -0,0 +1,227 @@
+package com.swmansion.enriched.styles
+
+import android.graphics.Color
+import com.facebook.react.bridge.ColorPropConverter
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.swmansion.enriched.EnrichedTextInputView
+import kotlin.Float
+import kotlin.Int
+import kotlin.String
+import kotlin.math.ceil
+
+class HtmlStyle {
+  private var style: ReadableMap? = null
+  private var view: EnrichedTextInputView? = null
+
+  // Default values are ignored as they are specified on the JS side.
+  // They are specified only because they are required by the constructor.
+  // JS passes them as a prop - so they are initialized after the constructor is called.
+  var h1FontSize: Int = 72
+  var h1Bold: Boolean = false
+
+  var h2FontSize: Int = 64
+  var h2Bold: Boolean = false
+
+  var h3FontSize: Int = 56
+  var h3Bold: Boolean = false
+
+  var blockquoteColor: Int? = null
+  var blockquoteBorderColor: Int = Color.BLACK
+  var blockquoteStripeWidth: Int = 2
+  var blockquoteGapWidth: Int = 16
+
+  var olGapWidth: Int = 16
+  var olMarginLeft: Int = 24
+  var olMarkerFontWeight: Int? = null
+  var olMarkerColor: Int? = null
+
+  var ulGapWidth: Int = 16
+  var ulMarginLeft: Int = 24
+  var ulBulletSize: Int = 8
+  var ulBulletColor: Int = Color.BLACK
+
+  var imgWidth: Int = 200
+  var imgHeight: Int = 200
+
+  var aColor: Int = Color.BLACK
+  var aUnderline: Boolean = true
+
+  var codeBlockColor: Int = Color.BLACK
+  var codeBlockBackgroundColor: Int = Color.BLACK
+  var codeBlockRadius: Float = 4f
+
+  var inlineCodeColor: Int = Color.BLACK
+  var inlineCodeBackgroundColor: Int = Color.BLACK
+
+  var mentionsStyle: MutableMap<String, MentionStyle> = mutableMapOf()
+
+  constructor(view: EnrichedTextInputView?, style: ReadableMap?) {
+    this.view = view
+    this.style = style
+
+    invalidateStyles()
+  }
+
+  fun invalidateStyles() {
+    val style = this.style ?: return
+
+    val h1Style = style.getMap("h1")
+    h1FontSize = parseFloat(h1Style, "fontSize").toInt()
+    h1Bold = h1Style?.getBoolean("bold") == true
+
+    val h2Style = style.getMap("h2")
+    h2FontSize = parseFloat(h2Style, "fontSize").toInt()
+    h2Bold = h2Style?.getBoolean("bold") == true
+
+    val h3Style = style.getMap("h3")
+    h3FontSize = parseFloat(h3Style, "fontSize").toInt()
+    h3Bold = h3Style?.getBoolean("bold") == true
+
+    val blockquoteStyle = style.getMap("blockquote")
+    blockquoteColor = parseOptionalColor(blockquoteStyle, "color")
+    blockquoteBorderColor = parseColor(blockquoteStyle, "borderColor")
+    blockquoteGapWidth = parseFloat(blockquoteStyle, "gapWidth").toInt()
+    blockquoteStripeWidth = parseFloat(blockquoteStyle, "borderWidth").toInt()
+
+    val olStyle = style.getMap("ol")
+    val userDefinedMarginLeft = parseFloat(olStyle, "marginLeft").toInt()
+    val calculatedMarginLeft = calculateOlMarginLeft(view, userDefinedMarginLeft)
+    olMarginLeft = calculatedMarginLeft
+    olGapWidth = parseFloat(olStyle, "gapWidth").toInt()
+    olMarkerColor = parseOptionalColor(olStyle, "markerColor")
+    olMarkerFontWeight = parseOptionalFontWeight(olStyle, "markerFontWeight")
+
+    val ulStyle = style.getMap("ul")
+    ulBulletColor = parseColor(ulStyle, "bulletColor")
+    ulGapWidth = parseFloat(ulStyle, "gapWidth").toInt()
+    ulMarginLeft = parseFloat(ulStyle, "marginLeft").toInt()
+    ulBulletSize = parseFloat(ulStyle, "bulletSize").toInt()
+
+    val imgStyle = style.getMap("img")
+    imgWidth = parseFloat(imgStyle, "width").toInt()
+    imgHeight = parseFloat(imgStyle, "height").toInt()
+
+    val aStyle = style.getMap("a")
+    aColor = parseColor(aStyle, "color")
+    aUnderline = parseIsUnderline(aStyle)
+
+    val codeBlockStyle = style.getMap("codeblock")
+    codeBlockRadius = parseFloat(codeBlockStyle, "borderRadius")
+    codeBlockColor = parseColor(codeBlockStyle, "color")
+    codeBlockBackgroundColor = parseColorWithOpacity(codeBlockStyle, "backgroundColor", 80)
+
+    val inlineCodeStyle = style.getMap("code")
+    inlineCodeColor = parseColor(inlineCodeStyle, "color")
+    inlineCodeBackgroundColor = parseColorWithOpacity(inlineCodeStyle, "backgroundColor", 80)
+
+    val mentionStyle = style.getMap("mention")
+    mentionsStyle = parseMentionsStyle(mentionStyle)
+  }
+
+  private fun parseFloat(map: ReadableMap?, key: String): Float {
+    val safeMap = ensureValueIsSet(map, key)
+
+    val fontSize = safeMap.getDouble(key)
+    return ceil(PixelUtil.toPixelFromSP(fontSize))
+  }
+
+  private fun parseColorWithOpacity(map: ReadableMap?, key: String, opacity: Int): Int {
+    val color = parseColor(map, key)
+    return withOpacity(color, opacity)
+  }
+
+  private fun parseOptionalColor(map: ReadableMap?, key: String): Int? {
+    if (map == null) return null
+    if (!map.hasKey(key)) return null
+    if (map.isNull(key)) return null
+
+    return parseColor(map, key)
+  }
+
+  private fun parseColor(map: ReadableMap?, key: String): Int {
+    val safeMap = ensureValueIsSet(map, key)
+
+    val color = safeMap.getDouble(key)
+    val parsedColor = ColorPropConverter.getColor(color, view?.context as ReactContext)
+    if (parsedColor == null) {
+      throw Error("Specified color value is not supported: $color")
+    }
+
+    return parsedColor
+  }
+
+  private fun withOpacity(color: Int, alpha: Int): Int {
+    val a = alpha.coerceIn(0, 255)
+    return (color and 0x00FFFFFF) or (a shl 24)
+  }
+
+  private fun parseIsUnderline(map: ReadableMap?): Boolean {
+    val underline = map?.getString("textDecorationLine")
+    val isEnabled = underline == "underline"
+    val isDisabled = underline == "none"
+
+    if (isEnabled) return true
+    if (isDisabled) return false
+
+    throw Error("Specified textDecorationLine value is not supported: $underline. Supported values are 'underline' and 'none'.")
+  }
+
+  private fun calculateOlMarginLeft(view: EnrichedTextInputView?, userMargin: Int): Int {
+    val fontSize = view?.fontSize?.toInt() ?: 0
+    val leadMargin = fontSize / 2
+
+    return leadMargin + userMargin
+  }
+
+  private fun ensureValueIsSet(map: ReadableMap?, key: String): ReadableMap {
+    if (map == null) throw Error("Style map cannot be null")
+
+    if (!map.hasKey(key)) throw Error("Style map must contain key: $key")
+
+    if (map.isNull(key)) throw Error("Style map cannot contain null value for key: $key")
+
+    return map
+  }
+
+  private fun parseMentionsStyle(mentionsStyle: ReadableMap?): MutableMap<String, MentionStyle> {
+    if (mentionsStyle == null) throw Error("Mentions style cannot be null")
+
+    val parsedMentionsStyle: MutableMap<String, MentionStyle> = mutableMapOf()
+
+     val iterator = mentionsStyle.keySetIterator()
+        while (iterator.hasNextKey()) {
+          val key = iterator.nextKey()
+          val value = mentionsStyle.getMap(key)
+
+          if (value == null) throw Error("Mention style for key '$key' cannot be null")
+
+          val color = parseColor(value, "color")
+          val backgroundColor = parseColorWithOpacity(value, "backgroundColor", 80)
+          val isUnderline = parseIsUnderline(value)
+          val parsedStyle = MentionStyle(color, backgroundColor, isUnderline)
+          parsedMentionsStyle.put(key, parsedStyle)
+        }
+
+    return parsedMentionsStyle
+  }
+
+  private fun parseOptionalFontWeight(map: ReadableMap?, key: String): Int? {
+    if (map == null) return null
+    if (!map.hasKey(key)) return null
+    if (map.isNull(key)) return null
+
+    val fontWeight = map.getString(key) ?: return null
+    return parseFontWeight(fontWeight)
+  }
+
+  companion object {
+    data class MentionStyle(
+      val color: Int,
+      val backgroundColor: Int,
+      val underline: Boolean
+    )
+  }
+}

package/android/src/main/java/com/swmansion/enriched/styles/InlineStyles.kt

@@ -0,0 +1,146 @@
+package com.swmansion.enriched.styles
+
+import android.text.Editable
+import android.text.Spannable
+import com.swmansion.enriched.EnrichedTextInputView
+import com.swmansion.enriched.spans.EnrichedSpans
+import com.swmansion.enriched.utils.getSafeSpanBoundaries
+
+class InlineStyles(private val view: EnrichedTextInputView) {
+  private fun <T>setSpan(spannable: Spannable, type: Class<T>, start: Int, end: Int) {
+    val previousSpanStart = (start - 1).coerceAtLeast(0)
+    val previousSpanEnd = previousSpanStart + 1
+    val nextSpanStart = (end + 1).coerceAtMost(spannable.length)
+    val nextSpanEnd = (nextSpanStart + 1).coerceAtMost(spannable.length)
+    val previousSpans = spannable.getSpans(previousSpanStart, previousSpanEnd, type)
+    val nextSpans = spannable.getSpans(nextSpanStart, nextSpanEnd, type)
+    var minimum = start
+    var maximum = end
+
+    for (span in previousSpans) {
+      val spanStart = spannable.getSpanStart(span)
+      minimum = spanStart.coerceAtMost(minimum)
+    }
+
+    for (span in nextSpans) {
+      val spanEnd = spannable.getSpanEnd(span)
+      maximum = spanEnd.coerceAtLeast(maximum)
+    }
+
+    val spans = spannable.getSpans(minimum, maximum, type)
+    for (span in spans) {
+      spannable.removeSpan(span)
+    }
+
+    val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
+    val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(minimum, maximum)
+    spannable.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+  }
+
+  private fun <T>setAndMergeSpans(spannable: Spannable, type: Class<T>, start: Int, end: Int) {
+    val spans = spannable.getSpans(start, end, type)
+
+    // No spans setup for current selection, means we just need to assign new span
+    if (spans.isEmpty()) {
+      setSpan(spannable, type, start, end)
+      return
+    }
+
+    var setSpanOnFinish = false
+
+    // Some spans are present, we have to remove spans and (optionally) apply new spans
+    for (span in spans) {
+      val spanStart = spannable.getSpanStart(span)
+      val spanEnd = spannable.getSpanEnd(span)
+      var finalStart: Int? = null
+      var finalEnd: Int? = null
+
+      spannable.removeSpan(span)
+
+      if (start == spanStart && end == spanEnd) {
+        setSpanOnFinish = false
+      } else if (start > spanStart && end < spanEnd) {
+        setSpan(spannable, type, spanStart, start)
+        setSpan(spannable, type, end, spanEnd)
+      } else if (start == spanStart && end < spanEnd) {
+        finalStart = end
+        finalEnd = spanEnd
+      } else if (start > spanStart && end == spanEnd) {
+        finalStart = spanStart
+        finalEnd = start
+      } else if (start > spanStart) {
+        finalStart = spanStart
+        finalEnd = end
+      } else if (start < spanStart && end < spanEnd) {
+        finalStart = start
+        finalEnd = spanEnd
+      } else {
+        setSpanOnFinish = true
+      }
+
+      if (!setSpanOnFinish && finalStart != null && finalEnd != null) {
+        setSpan(spannable, type, finalStart, finalEnd)
+      }
+    }
+
+    if (setSpanOnFinish) {
+      setSpan(spannable, type, start, end)
+    }
+  }
+
+  fun afterTextChanged(s: Editable, endCursorPosition: Int) {
+    for ((style, config) in EnrichedSpans.inlineSpans) {
+      val start = view.spanState?.getStart(style) ?: continue
+      var end = endCursorPosition
+      val spans = s.getSpans(start, end, config.clazz)
+
+      for (span in spans) {
+        end = s.getSpanEnd(span).coerceAtLeast(end)
+        s.removeSpan(span)
+      }
+
+      setSpan(s, config.clazz, start, end)
+    }
+  }
+
+  fun toggleStyle(name: String) {
+    if (view.selection == null) return
+    val (start, end) = view.selection.getInlineSelection()
+    val config = EnrichedSpans.inlineSpans[name] ?: return
+    val type = config.clazz
+
+    // We either start or end current span
+    if (start == end) {
+      val styleStart = view.spanState?.getStart(name)
+
+      if (styleStart != null) {
+        view.spanState.setStart(name, null)
+      } else {
+        view.spanState?.setStart(name, start)
+      }
+
+      return
+    }
+
+    val spannable = view.text as Spannable
+    setAndMergeSpans(spannable, type, start, end)
+    view.selection.validateStyles()
+  }
+
+  fun removeStyle(name: String, start: Int, end: Int): Boolean {
+    val config = EnrichedSpans.inlineSpans[name] ?: return false
+    val spannable = view.text as Spannable
+    val spans = spannable.getSpans(start, end, config.clazz)
+    if (spans.isEmpty()) return false
+
+    for (span in spans) {
+      spannable.removeSpan(span)
+    }
+
+    return true
+  }
+
+  fun getStyleRange(): Pair<Int, Int> {
+    return view.selection?.getInlineSelection() ?: Pair(0, 0)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/styles/ListStyles.kt

@@ -0,0 +1,173 @@
+package com.swmansion.enriched.styles
+
+import android.text.Editable
+import android.text.Spannable
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import com.swmansion.enriched.EnrichedTextInputView
+import com.swmansion.enriched.spans.EnrichedOrderedListSpan
+import com.swmansion.enriched.spans.EnrichedSpans
+import com.swmansion.enriched.spans.EnrichedUnorderedListSpan
+import com.swmansion.enriched.utils.getParagraphBounds
+import com.swmansion.enriched.utils.getSafeSpanBoundaries
+
+class ListStyles(private val view: EnrichedTextInputView) {
+  private fun <T>getPreviousParagraphSpan(spannable: Spannable, s: Int, type: Class<T>): T? {
+    if (s <= 0) return null
+
+    val (previousParagraphStart, previousParagraphEnd) = spannable.getParagraphBounds(s - 1)
+    val spans = spannable.getSpans(previousParagraphStart, previousParagraphEnd, type)
+
+    if (spans.isNotEmpty()) {
+      return spans.last()
+    }
+
+    return null
+  }
+
+  private fun <T>isPreviousParagraphList(spannable: Spannable, s: Int, type: Class<T>): Boolean {
+    val previousSpan = getPreviousParagraphSpan(spannable, s, type)
+
+    return previousSpan != null
+  }
+
+  private fun getOrderedListIndex(spannable: Spannable, s: Int): Int {
+    val span = getPreviousParagraphSpan(spannable, s, EnrichedOrderedListSpan::class.java)
+    val index = span?.getIndex() ?: 0
+    return index + 1
+  }
+
+  private fun setSpan(spannable: Spannable, name: String, start: Int, end: Int) {
+    val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(start, end)
+
+    if (name == EnrichedSpans.UNORDERED_LIST) {
+      val span = EnrichedUnorderedListSpan(view.htmlStyle)
+      spannable.setSpan(span, safeStart, safeEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+      return
+    }
+
+    if (name == EnrichedSpans.ORDERED_LIST) {
+      val index = getOrderedListIndex(spannable, safeStart)
+      val span = EnrichedOrderedListSpan(index, view.htmlStyle)
+      spannable.setSpan(span, safeStart, safeEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+    }
+  }
+
+  private fun <T>removeSpansForRange(spannable: Spannable, start: Int, end: Int, clazz: Class<T>): Boolean {
+    val ssb = spannable as SpannableStringBuilder
+    val spans = ssb.getSpans(start, end, clazz)
+    if (spans.isEmpty()) return false
+
+    ssb.replace(start, end, ssb.substring(start, end).replace("\u200B", ""))
+
+    for (span in spans) {
+      ssb.removeSpan(span)
+    }
+
+    return true
+  }
+
+  fun updateOrderedListIndexes(text: Spannable, position: Int) {
+    val spans = text.getSpans(position + 1, text.length, EnrichedOrderedListSpan::class.java)
+    for (span in spans) {
+      val spanStart = text.getSpanStart(span)
+      val index = getOrderedListIndex(text, spanStart)
+      span.setIndex(index)
+    }
+  }
+
+  fun toggleStyle(name: String) {
+    if (view.selection == null) return
+    val config = EnrichedSpans.listSpans[name] ?: return
+    val spannable = view.text as SpannableStringBuilder
+    val (start, end) = view.selection.getParagraphSelection()
+    val styleStart = view.spanState?.getStart(name)
+
+    if (styleStart != null) {
+      view.spanState.setStart(name, null)
+      removeSpansForRange(spannable, start, end, config.clazz)
+      view.selection.validateStyles()
+
+      return
+    }
+
+    if (start == end) {
+      spannable.insert(start, "\u200B")
+      view.spanState?.setStart(name, start + 1)
+      removeSpansForRange(spannable, start, end, config.clazz)
+      setSpan(spannable, name, start, end + 1)
+
+      return
+    }
+
+    var currentStart = start
+    val paragraphs = spannable.substring(start, end).split("\n")
+    removeSpansForRange(spannable, start, end, config.clazz)
+
+    for (paragraph in paragraphs) {
+      spannable.insert(currentStart, "\u200B")
+      val currentEnd = currentStart + paragraph.length + 1
+      setSpan(spannable, name, currentStart, currentEnd)
+
+      currentStart = currentEnd + 1
+    }
+
+    view.spanState?.setStart(name, currentStart)
+  }
+
+  private fun handleAfterTextChanged(s: Editable, name: String, endCursorPosition: Int, previousTextLength: Int) {
+    val config = EnrichedSpans.listSpans[name] ?: return
+    val cursorPosition = endCursorPosition.coerceAtMost(s.length)
+    val (start, end) = s.getParagraphBounds(cursorPosition)
+
+    val isBackspace = previousTextLength > s.length
+    val isNewLine = cursorPosition > 0 && s[cursorPosition - 1] == '\n'
+    val isShortcut = s.substring(start, end).startsWith(config.shortcut)
+    val spans = s.getSpans(start, end, config.clazz)
+
+    // Remove spans if cursor is at the start of the paragraph and spans exist
+    if (isBackspace && start == cursorPosition && spans.isNotEmpty()) {
+      removeSpansForRange(s, start, end, config.clazz)
+      return
+    }
+
+    if (!isBackspace && isShortcut) {
+      s.replace(start, cursorPosition, "\u200B")
+      setSpan(s, name, start, start + 1)
+      // Inform that new span has been added
+      view.selection?.validateStyles()
+      return
+    }
+
+    if (!isBackspace && isNewLine && isPreviousParagraphList(s, start, config.clazz)) {
+      s.insert(cursorPosition, "\u200B")
+      setSpan(s, name, start, end + 1)
+      // Inform that new span has been added
+      view.selection?.validateStyles()
+      return
+    }
+
+    if (spans.isNotEmpty()) {
+      for (span in spans) {
+        s.removeSpan(span)
+      }
+
+      setSpan(s, name, start, end)
+    }
+  }
+
+  fun afterTextChanged(s: Editable, endCursorPosition: Int, previousTextLength: Int) {
+    handleAfterTextChanged(s, EnrichedSpans.ORDERED_LIST, endCursorPosition, previousTextLength)
+    handleAfterTextChanged(s, EnrichedSpans.UNORDERED_LIST, endCursorPosition, previousTextLength)
+  }
+
+  fun getStyleRange(): Pair<Int, Int> {
+    return view.selection?.getParagraphSelection() ?: Pair(0, 0)
+  }
+
+  fun removeStyle(name: String, start: Int, end: Int): Boolean {
+    val config = EnrichedSpans.listSpans[name] ?: return false
+    val spannable = view.text as Spannable
+    return removeSpansForRange(spannable, start, end, config.clazz)
+  }
+}