react-native-enriched 0.1.5 → 0.2.0

package/android/src/main/java/com/swmansion/enriched/spans/EnrichedCodeBlockSpan.kt

@@ -2,8 +2,10 @@ package com.swmansion.enriched.spans
 
 import android.graphics.Canvas
 import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.RectF
 import android.graphics.Typeface
+import android.text.Spanned
 import android.text.TextPaint
 import android.text.style.LineBackgroundSpan
 import android.text.style.MetricAffectingSpan
@@ -33,10 +35,43 @@ class EnrichedCodeBlockSpan(private val htmlStyle: HtmlStyle) : MetricAffectingS
     end: Int,
     lineNum: Int
   ) {
+    if (text !is Spanned) {
+      return
+    }
+
     val previousColor = p.color
     p.color = htmlStyle.codeBlockBackgroundColor
+
+    val radius = htmlStyle.codeBlockRadius
+
+    val spanStart = text.getSpanStart(this)
+    val spanEnd = text.getSpanEnd(this)
+    val isFirstLineOfSpan = start == spanStart
+    val isLastLineOfSpan = end == spanEnd || (spanEnd + 1 == end && text[spanEnd] == '\n')
+
+    val path = Path()
+    val radii = floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
+
+    if (isFirstLineOfSpan) {
+      // Top-Left and Top-Right corners
+      radii[0] = radius
+      radii[1] = radius
+      radii[2] = radius
+      radii[3] = radius
+    }
+
+    if (isLastLineOfSpan) {
+      // Bottom-Right and Bottom-Left corners
+      radii[4] = radius
+      radii[5] = radius
+      radii[6] = radius
+      radii[7] = radius
+    }
+
     val rect = RectF(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat())
-    canvas.drawRoundRect(rect, htmlStyle.codeBlockRadius, htmlStyle.codeBlockRadius, p)
+
+    path.addRoundRect(rect, radii, Path.Direction.CW)
+    canvas.drawPath(path, p)
     p.color = previousColor
   }
 }

package/android/src/main/java/com/swmansion/enriched/spans/EnrichedImageSpan.kt

@@ -1,24 +1,32 @@
 package com.swmansion.enriched.spans
 
-import android.content.Context
+import android.annotation.SuppressLint
+import android.content.res.Resources
+import android.graphics.BitmapFactory
 import android.graphics.Canvas
 import android.graphics.Paint
+import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
-import android.net.Uri
+import android.text.Editable
+import android.text.Spannable
 import android.text.style.ImageSpan
+import android.util.Log
+import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.graphics.withSave
 import com.swmansion.enriched.spans.interfaces.EnrichedInlineSpan
-import com.swmansion.enriched.styles.HtmlStyle
+import com.swmansion.enriched.utils.AsyncDrawable
+import androidx.core.graphics.drawable.toDrawable
+import com.swmansion.enriched.R
+import com.swmansion.enriched.spans.utils.ForceRedrawSpan
+import com.swmansion.enriched.utils.ResourceManager
 
 class EnrichedImageSpan : ImageSpan, EnrichedInlineSpan {
-  private var htmlStyle: HtmlStyle? = null
+  private var width: Int = 0
+  private var height: Int = 0
 
-  constructor(context: Context, uri: Uri, htmlStyle: HtmlStyle, ) : super(context, uri, ALIGN_BASELINE) {
-    this.htmlStyle = htmlStyle
-  }
-
-  constructor(drawable: Drawable, source: String, htmlStyle: HtmlStyle) : super(drawable, source, ALIGN_BASELINE) {
-    this.htmlStyle = htmlStyle
+  constructor(drawable: Drawable, source: String, width: Int, height: Int) : super(drawable, source, ALIGN_BASELINE) {
+    this.width = width
+    this.height = height
   }
 
   override fun draw(
@@ -35,7 +43,120 @@ class EnrichedImageSpan : ImageSpan, EnrichedInlineSpan {
 
   override fun getDrawable(): Drawable {
     val drawable = super.getDrawable()
-    drawable.setBounds(0, 0, htmlStyle!!.imgWidth, htmlStyle!!.imgHeight)
+    val scale = Resources.getSystem().displayMetrics.density
+
+    drawable.setBounds(0, 0, (width * scale).toInt() , (height * scale).toInt())
     return drawable
   }
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?
+  ): Int {
+    val d = drawable
+    val rect = d.bounds
+
+    if (fm != null) {
+      val imageHeight = rect.bottom - rect.top
+
+      // We want the image bottom to sit on the baseline (0).
+      // Therefore, the image top will be at: -imageHeight.
+      val targetTop = -imageHeight
+
+      // Expand the line UPWARDS if the image is taller than the current font
+      if (targetTop < fm.ascent) {
+        fm.ascent = targetTop
+        fm.top = targetTop
+      }
+    }
+
+    return rect.right
+  }
+
+  private fun registerDrawableLoadCallback (d: AsyncDrawable, text: Editable?) {
+    d.onLoaded = onLoaded@{
+      val spannable = text as? Spannable
+
+      if (spannable == null) {
+        return@onLoaded
+      }
+
+      val start = spannable.getSpanStart(this@EnrichedImageSpan)
+      val end = spannable.getSpanEnd(this@EnrichedImageSpan)
+
+      if (start != -1 && end != -1) {
+        // trick for adding empty span to force redraw when image is loaded
+        val redrawSpan = ForceRedrawSpan()
+        spannable.setSpan(redrawSpan, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+        spannable.removeSpan(redrawSpan)
+      }
+    }
+  }
+
+  fun observeAsyncDrawableLoaded(text: Editable?) {
+    val d = drawable
+
+    if (d !is AsyncDrawable) {
+      return
+    }
+
+    registerDrawableLoadCallback(d, text)
+
+    // If it's already loaded (race condition), run logic immediately
+    if (d.isLoaded) {
+      d.onLoaded?.invoke()
+    }
+  }
+
+  fun getWidth(): Int {
+    return width
+  }
+
+  fun getHeight(): Int {
+    return height
+  }
+
+  companion object {
+    fun createEnrichedImageSpan(src: String, width: Int, height: Int): EnrichedImageSpan {
+      var imgDrawable = prepareDrawableForImage(src)
+
+      if (imgDrawable == null) {
+        imgDrawable = ResourceManager.getDrawableResource(R.drawable.broken_image)
+      }
+
+      return EnrichedImageSpan(imgDrawable, src, width, height)
+    }
+
+    private fun prepareDrawableForImage(src: String): Drawable? {
+      var cleanPath = src
+
+      if (cleanPath.startsWith("http://") || cleanPath.startsWith("https://")) {
+        return AsyncDrawable(cleanPath)
+      }
+
+      if (cleanPath.startsWith("file://")) {
+        cleanPath = cleanPath.substring(7)
+      }
+
+      var drawable: BitmapDrawable? = null
+
+      try {
+        val bitmap = BitmapFactory.decodeFile(cleanPath)
+        if (bitmap != null) {
+          drawable = bitmap.toDrawable(Resources.getSystem())
+          // set bounds so it knows how big it is naturally,
+          // though EnrichedImageSpan will override this with the HTML width/height later.
+          drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight())
+        }
+      } catch (e: Exception) {
+        // Failed to load file
+        Log.e("EnrichedImageSpan", "Failed to load image from path: $cleanPath", e)
+      }
+
+      return drawable
+    }
+  }
 }

package/android/src/main/java/com/swmansion/enriched/spans/EnrichedSpans.kt

@@ -1,5 +1,7 @@
 package com.swmansion.enriched.spans
 
+import com.swmansion.enriched.styles.HtmlStyle
+
 data class BaseSpanConfig(val clazz: Class<*>)
 data class ParagraphSpanConfig(val clazz: Class<*>, val isContinuous: Boolean)
 data class ListSpanConfig(val clazz: Class<*>, val shortcut: String)
@@ -62,50 +64,67 @@ object EnrichedSpans {
     MENTION to BaseSpanConfig(EnrichedMentionSpan::class.java),
   )
 
-  val mergingConfig: Map<String, StylesMergingConfig> = mapOf(
-    BOLD to StylesMergingConfig(
-      blockingStyles = arrayOf(CODE_BLOCK)
-    ),
-    ITALIC to StylesMergingConfig(
-      blockingStyles = arrayOf(CODE_BLOCK)
-    ),
-    UNDERLINE to StylesMergingConfig(
-      blockingStyles = arrayOf(CODE_BLOCK)
-    ),
-    STRIKETHROUGH to StylesMergingConfig(
-      blockingStyles = arrayOf(CODE_BLOCK)
-    ),
-    INLINE_CODE to StylesMergingConfig(
-      conflictingStyles = arrayOf(MENTION, LINK),
-      blockingStyles = arrayOf(CODE_BLOCK)
-    ),
-    H1 to StylesMergingConfig(
-      conflictingStyles = arrayOf(H2, H3, ORDERED_LIST, UNORDERED_LIST, BLOCK_QUOTE, CODE_BLOCK),
-    ),
-    H2 to StylesMergingConfig(
-      conflictingStyles = arrayOf(H1, H3, ORDERED_LIST, UNORDERED_LIST, BLOCK_QUOTE, CODE_BLOCK),
-    ),
-    H3 to StylesMergingConfig(
-      conflictingStyles = arrayOf(H1, H2, ORDERED_LIST, UNORDERED_LIST, BLOCK_QUOTE, CODE_BLOCK),
-    ),
-    BLOCK_QUOTE to StylesMergingConfig(
-      conflictingStyles = arrayOf(H1, H2, H3, CODE_BLOCK, ORDERED_LIST, UNORDERED_LIST),
-    ),
-    CODE_BLOCK to StylesMergingConfig(
-      conflictingStyles = arrayOf(H1, H2, H3, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, UNORDERED_LIST, ORDERED_LIST, BLOCK_QUOTE, INLINE_CODE),
-    ),
-    UNORDERED_LIST to StylesMergingConfig(
-      conflictingStyles = arrayOf(H1, H2, H3, ORDERED_LIST, CODE_BLOCK, BLOCK_QUOTE),
-    ),
-    ORDERED_LIST to StylesMergingConfig(
-      conflictingStyles = arrayOf(H1, H2, H3, UNORDERED_LIST, CODE_BLOCK, BLOCK_QUOTE),
-    ),
-    LINK to StylesMergingConfig(
-      blockingStyles = arrayOf(INLINE_CODE, CODE_BLOCK, MENTION)
-    ),
-    IMAGE to StylesMergingConfig(),
-    MENTION to StylesMergingConfig(
-      blockingStyles = arrayOf(INLINE_CODE, CODE_BLOCK, LINK)
-    ),
-  )
+  fun getMergingConfigForStyle(style: String, htmlStyle: HtmlStyle): StylesMergingConfig? {
+    return when (style) {
+      BOLD -> {
+        val blockingStyles = mutableListOf(CODE_BLOCK)
+        if (htmlStyle.h1Bold) blockingStyles.add(H1)
+        if (htmlStyle.h2Bold) blockingStyles.add(H2)
+        if (htmlStyle.h3Bold) blockingStyles.add(H3)
+        StylesMergingConfig(blockingStyles = blockingStyles.toTypedArray())
+      }
+      ITALIC -> StylesMergingConfig(
+        blockingStyles = arrayOf(CODE_BLOCK)
+      )
+      UNDERLINE -> StylesMergingConfig(
+        blockingStyles = arrayOf(CODE_BLOCK)
+      )
+      STRIKETHROUGH -> StylesMergingConfig(
+        blockingStyles = arrayOf(CODE_BLOCK)
+      )
+      INLINE_CODE -> StylesMergingConfig(
+        conflictingStyles = arrayOf(MENTION, LINK),
+        blockingStyles = arrayOf(CODE_BLOCK)
+      )
+      H1 -> {
+        val conflictingStyles = mutableListOf(H2, H3, ORDERED_LIST, UNORDERED_LIST, BLOCK_QUOTE, CODE_BLOCK)
+        if (htmlStyle.h1Bold) conflictingStyles.add(BOLD)
+        StylesMergingConfig(conflictingStyles = conflictingStyles.toTypedArray())
+      }
+      H2 -> {
+        val conflictingStyles = mutableListOf(H1, H3, ORDERED_LIST, UNORDERED_LIST, BLOCK_QUOTE, CODE_BLOCK)
+        if (htmlStyle.h2Bold) conflictingStyles.add(BOLD)
+        StylesMergingConfig(conflictingStyles = conflictingStyles.toTypedArray())
+      }
+      H3 -> {
+        val conflictingStyles = mutableListOf(H1, H2, ORDERED_LIST, UNORDERED_LIST, BLOCK_QUOTE, CODE_BLOCK)
+        if (htmlStyle.h3Bold) conflictingStyles.add(BOLD)
+        StylesMergingConfig(conflictingStyles = conflictingStyles.toTypedArray())
+      }
+      BLOCK_QUOTE -> StylesMergingConfig(
+        conflictingStyles = arrayOf(H1, H2, H3, CODE_BLOCK, ORDERED_LIST, UNORDERED_LIST)
+      )
+      CODE_BLOCK -> StylesMergingConfig(
+        conflictingStyles = arrayOf(H1, H2, H3, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, UNORDERED_LIST, ORDERED_LIST, BLOCK_QUOTE, INLINE_CODE)
+      )
+      UNORDERED_LIST -> StylesMergingConfig(
+        conflictingStyles = arrayOf(H1, H2, H3, ORDERED_LIST, CODE_BLOCK, BLOCK_QUOTE)
+      )
+      ORDERED_LIST -> StylesMergingConfig(
+        conflictingStyles = arrayOf(H1, H2, H3, UNORDERED_LIST, CODE_BLOCK, BLOCK_QUOTE),
+      )
+      LINK -> StylesMergingConfig(
+        blockingStyles = arrayOf(INLINE_CODE, CODE_BLOCK, MENTION)
+      )
+      IMAGE -> StylesMergingConfig()
+      MENTION -> StylesMergingConfig(
+        blockingStyles = arrayOf(INLINE_CODE, CODE_BLOCK, LINK)
+      )
+      else -> null
+    }
+  }
+
+  fun isTypeContinuous(type: Class<*>): Boolean {
+    return paragraphSpans.values.find { it.clazz == type }?.isContinuous == true
+  }
 }

package/android/src/main/java/com/swmansion/enriched/spans/utils/ForceRedrawSpan.kt

@@ -0,0 +1,13 @@
+package com.swmansion.enriched.spans.utils
+
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+
+class ForceRedrawSpan:  MetricAffectingSpan() {
+  override fun updateMeasureState(tp: TextPaint) {
+    // Do nothing, we don't actually want to change how it looks
+  }
+  override fun updateDrawState(tp: TextPaint?) {
+    // Do nothing
+  }
+}

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

@@ -43,9 +43,6 @@ class HtmlStyle {
   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
 
@@ -100,10 +97,6 @@ class HtmlStyle {
     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)
@@ -124,8 +117,8 @@ class HtmlStyle {
   private fun parseFloat(map: ReadableMap?, key: String): Float {
     val safeMap = ensureValueIsSet(map, key)
 
-    val fontSize = safeMap.getDouble(key)
-    return ceil(PixelUtil.toPixelFromSP(fontSize))
+    val value = safeMap.getDouble(key)
+    return ceil(PixelUtil.toPixelFromSP(value))
   }
 
   private fun parseColorWithOpacity(map: ReadableMap?, key: String, opacity: Int): Int {

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

@@ -54,6 +54,7 @@ class InlineStyles(private val view: EnrichedTextInputView) {
       val spanEnd = spannable.getSpanEnd(span)
       var finalStart: Int? = null
       var finalEnd: Int? = null
+      if (spanStart == -1 || spanEnd == -1) continue
 
       spannable.removeSpan(span)
 

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

@@ -3,13 +3,86 @@ package com.swmansion.enriched.styles
 import android.text.Editable
 import android.text.Spannable
 import android.text.SpannableStringBuilder
+import android.util.Log
 import com.swmansion.enriched.EnrichedTextInputView
+import com.swmansion.enriched.spans.EnrichedBlockQuoteSpan
+import com.swmansion.enriched.spans.EnrichedCodeBlockSpan
 import com.swmansion.enriched.spans.EnrichedSpans
 import com.swmansion.enriched.utils.getParagraphBounds
 import com.swmansion.enriched.utils.getSafeSpanBoundaries
 
 class ParagraphStyles(private val view: EnrichedTextInputView) {
+  private fun <T>getPreviousParagraphSpan(spannable: Spannable, paragraphStart: Int, type: Class<T>): T? {
+    if (paragraphStart <= 0) return null
+
+    val (previousParagraphStart, previousParagraphEnd) = spannable.getParagraphBounds(paragraphStart - 1)
+    val spans = spannable.getSpans(previousParagraphStart, previousParagraphEnd, type)
+
+    // A paragraph implies a single cohesive style. having multiple spans of the
+    // same type (e.g., two codeblock spans) in one paragraph is an invalid state in current library logic
+    if (spans.size > 1) {
+      Log.w("ParagraphStyles", "getPreviousParagraphSpan(): Found more than one span in the paragraph!")
+    }
+
+    if (spans.isNotEmpty()) {
+      return spans.first()
+    }
+
+    return null
+  }
+
+  private fun <T>getNextParagraphSpan(spannable: Spannable, paragraphEnd: Int, type: Class<T>): T? {
+    if (paragraphEnd >= spannable.length - 1) return null
+
+    val (nextParagraphStart, nextParagraphEnd) = spannable.getParagraphBounds(paragraphEnd + 1)
+
+    val spans = spannable.getSpans(nextParagraphStart, nextParagraphEnd, type)
+
+    // A paragraph implies a single cohesive style. having multiple spans of the
+    // same type (e.g., two codeblock spans) in one paragraph is an invalid state in current library logic
+    if (spans.size > 1) {
+      Log.w("ParagraphStyles", "getNextParagraphSpan(): Found more than one span in the paragraph!")
+    }
+
+    if (spans.isNotEmpty()) {
+      return spans.first()
+    }
+
+    return null
+  }
+
+  /**
+   * Applies a continuous span to the specified range.
+   * If the new range touches existing continuous spans, they are coalesced into a single span
+   */
+  private fun <T>setContinuousSpan(spannable: Spannable, start: Int, end: Int, type: Class<T>) {
+    val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
+    val previousSpan = getPreviousParagraphSpan(spannable, start, type)
+    val nextSpan = getNextParagraphSpan(spannable, end, type)
+    var newStart = start
+    var newEnd = end
+
+    if (previousSpan != null) {
+      newStart = spannable.getSpanStart(previousSpan)
+      spannable.removeSpan(previousSpan)
+    }
+
+    if (nextSpan != null && start != end) {
+      newEnd = spannable.getSpanEnd(nextSpan)
+      spannable.removeSpan(nextSpan)
+    }
+
+    val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(newStart, newEnd)
+    spannable.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+  }
+
+
   private fun <T>setSpan(spannable: Spannable, type: Class<T>, start: Int, end: Int) {
+    if (EnrichedSpans.isTypeContinuous(type)) {
+      setContinuousSpan(spannable, start, end, type)
+      return
+    }
+
     val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
     val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(start, end)
     spannable.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
@@ -94,6 +167,33 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
     return spans.isNotEmpty()
   }
 
+  private fun <T>mergeAdjacentStyleSpans(s: Editable, endCursorPosition: Int, type: Class<T>) {
+    val (start, end) = s.getParagraphBounds(endCursorPosition)
+    val currParagraphSpans = s.getSpans(start, end, type)
+
+    if (currParagraphSpans.isEmpty()) {
+      return
+    }
+
+    val currSpan = currParagraphSpans[0]
+    val nextSpan = getNextParagraphSpan(s, end, type)
+
+    if (nextSpan == null) {
+      return
+    }
+
+    val newStart = s.getSpanStart(currSpan)
+    val newEnd = s.getSpanEnd(nextSpan)
+
+    s.removeSpan(nextSpan)
+    s.removeSpan(currSpan)
+
+    val (safeStart, safeEnd) = s.getSafeSpanBoundaries(newStart, newEnd)
+    val span = type.getDeclaredConstructor(HtmlStyle::class.java).newInstance(view.htmlStyle)
+
+    s.setSpan(span, safeStart, safeEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+  }
+
   fun afterTextChanged(s: Editable, endPosition: Int, previousTextLength: Int) {
     var endCursorPosition = endPosition
     val isBackspace = s.length < previousTextLength
@@ -101,7 +201,14 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
 
     for ((style, config) in EnrichedSpans.paragraphSpans) {
       val spanState = view.spanState ?: continue
-      val styleStart = spanState.getStart(style) ?: continue
+      val styleStart = spanState.getStart(style)
+
+      if (styleStart == null) {
+        if (config.isContinuous) {
+          mergeAdjacentStyleSpans(s, endCursorPosition, config.clazz)
+        }
+        continue
+      }
 
       if (isNewLine) {
         if (!config.isContinuous) {
@@ -154,8 +261,8 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
 
     if (start == end) {
       spannable.insert(start, "\u200B")
-      view.spanState?.setStart(name, start + 1)
       setAndMergeSpans(spannable, type, start, end + 1)
+      view.selection.validateStyles()
 
       return
     }
@@ -170,8 +277,8 @@ class ParagraphStyles(private val view: EnrichedTextInputView) {
       currentStart = currentEnd + 1
     }
 
-    view.spanState?.setStart(name, start)
     setAndMergeSpans(spannable, type, start, currentEnd)
+    view.selection.validateStyles()
   }
 
   fun getStyleRange(): Pair<Int, Int> {