react-native-enriched-markdown-scaffold 0.6.0-scaffold.4

package/android/src/main/java/com/swmansion/enriched/markdown/input/formatting/InputRemend.kt

@@ -0,0 +1,120 @@
+package com.swmansion.enriched.markdown.input.formatting
+
+object InputRemend {
+  private data class DelimiterPair(
+    val open: String,
+    val close: String,
+    val symmetric: Boolean,
+  )
+
+  private val DELIMITER_PAIRS =
+    arrayOf(
+      DelimiterPair("**", "**", true),
+      DelimiterPair("*", "*", true),
+      DelimiterPair("_", "_", true),
+      DelimiterPair("~~", "~~", true),
+      DelimiterPair("||", "||", true),
+      DelimiterPair("`", "`", true),
+      DelimiterPair("[", "]", false),
+    )
+
+  fun complete(markdown: String): String {
+    if (markdown.isEmpty()) return markdown
+
+    val stack = mutableListOf<String>()
+    var inLinkParen = false
+    val length = markdown.length
+    var i = 0
+
+    while (i < length) {
+      val c = markdown[i]
+
+      if (c == '\\' && i + 1 < length) {
+        i += 2
+        continue
+      }
+
+      if (c == ']' && !inLinkParen && i + 1 < length && markdown[i + 1] == '(') {
+        val bracketIndex = stack.lastIndexOf("[")
+        if (bracketIndex != -1) {
+          stack.subList(bracketIndex, stack.size).clear()
+        }
+        inLinkParen = true
+        i += 2
+        continue
+      }
+
+      if (inLinkParen && c == ')') {
+        inLinkParen = false
+        i++
+        continue
+      }
+
+      if (inLinkParen) {
+        i++
+        continue
+      }
+
+      var matched = false
+      for (pair in DELIMITER_PAIRS) {
+        val openLen = pair.open.length
+
+        if (i + openLen > length) continue
+
+        val substring = markdown.substring(i, i + openLen)
+
+        if (pair.symmetric) {
+          if (substring == pair.open) {
+            if (stack.isNotEmpty() && stack.last() == pair.open) {
+              stack.removeAt(stack.lastIndex)
+            } else {
+              stack.add(pair.open)
+            }
+            i += openLen
+            matched = true
+            break
+          }
+        } else {
+          if (substring == pair.open) {
+            stack.add(pair.open)
+            i += openLen
+            matched = true
+            break
+          }
+          val closeLen = pair.close.length
+          if (i + closeLen <= length) {
+            val closeSub = markdown.substring(i, i + closeLen)
+            if (closeSub == pair.close) {
+              if (stack.isNotEmpty() && stack.last() == pair.open) {
+                stack.removeAt(stack.lastIndex)
+              }
+              i += closeLen
+              matched = true
+              break
+            }
+          }
+        }
+      }
+
+      if (!matched) {
+        i++
+      }
+    }
+
+    val suffix = StringBuilder()
+
+    if (inLinkParen) {
+      suffix.append(")")
+    }
+
+    for (entry in stack.reversed()) {
+      suffix.append(closingFor(entry))
+    }
+
+    if (suffix.isEmpty()) return markdown
+
+    return markdown + suffix.toString()
+  }
+
+  private fun closingFor(entry: String): String = DELIMITER_PAIRS.firstOrNull { it.open == entry }?.close ?: entry
+}

package/android/src/main/java/com/swmansion/enriched/markdown/input/formatting/MarkdownSerializer.kt

@@ -0,0 +1,176 @@
+package com.swmansion.enriched.markdown.input.formatting
+
+import android.text.Spanned
+import com.swmansion.enriched.markdown.input.math.MathChipController
+import com.swmansion.enriched.markdown.input.model.FormattingRange
+import com.swmansion.enriched.markdown.input.model.StyleType
+
+object MarkdownSerializer {
+  private const val ATTACHMENT_CHAR = ''
+
+  /**
+   * Serialize a [Spanned] view of the storage back to markdown. Math chips
+   * (the `` placeholder + a controller-tracked chip) become `$latex$` or
+   * `$$latex$$` depending on the chip's display mode. Inline formatting
+   * ranges are still applied to character offsets in the underlying text.
+   */
+  fun serialize(
+    text: Spanned,
+    ranges: List<FormattingRange>,
+    mathChipController: MathChipController?,
+  ): String {
+    if (mathChipController == null || text.length == 0) {
+      return serialize(text.toString(), ranges)
+    }
+    val chips = mathChipController.allChips(text)
+    if (chips.isEmpty()) {
+      return serialize(text.toString(), ranges)
+    }
+
+    val expanded = StringBuilder(text.length)
+    val positionMap = IntArray(text.length + 1)
+    val chipByPosition = chips.associateBy { it.position }
+    var expandedPos = 0
+    var i = 0
+    while (i < text.length) {
+      positionMap[i] = expandedPos
+      val c = text[i]
+      val chip = chipByPosition[i]
+      if (c == ATTACHMENT_CHAR && chip != null) {
+        val delim = if (chip.displayMode) "$$" else "$"
+        expanded.append(delim)
+        expanded.append(chip.latex)
+        expanded.append(delim)
+        expandedPos += delim.length * 2 + chip.latex.length
+      } else {
+        expanded.append(c)
+        expandedPos += 1
+      }
+      i++
+    }
+    positionMap[text.length] = expandedPos
+
+    val shifted =
+      ranges.map { range ->
+        val rangeStart = range.start.coerceIn(0, text.length)
+        val rangeEnd = range.end.coerceIn(0, text.length)
+        FormattingRange(
+          range.type,
+          positionMap[rangeStart],
+          positionMap[rangeEnd],
+          range.url,
+        )
+      }
+
+    return serialize(expanded.toString(), shifted)
+  }
+
+  fun serialize(
+    text: String,
+    ranges: List<FormattingRange>,
+  ): String {
+    if (ranges.isEmpty()) return text
+
+    val events = ArrayList<BoundaryEvent>(ranges.size * 2)
+    for (range in ranges) {
+      var start = range.start.coerceIn(0, text.length)
+      var end = range.end.coerceIn(0, text.length)
+
+      if (start >= end) continue
+
+      // Trim leading/trailing whitespace so delimiters hug non-whitespace content
+      while (start < end && text[start].isWhitespace()) start++
+      while (end > start && text[end - 1].isWhitespace()) end--
+
+      if (start >= end) continue
+
+      events.add(BoundaryEvent(start, true, range.type, range.url))
+      events.add(BoundaryEvent(end, false, range.type, range.url))
+    }
+
+    events.sortWith(BOUNDARY_COMPARATOR)
+
+    val markdown = StringBuilder(text.length + events.size * 4)
+    var lastPosition = 0
+
+    for (event in events) {
+      val position = event.position.coerceAtMost(text.length)
+
+      if (position > lastPosition) {
+        markdown.append(text, lastPosition, position)
+        lastPosition = position
+      }
+
+      if (event.isOpening) {
+        markdown.append(openingDelimiter(event.type))
+      } else {
+        markdown.append(closingDelimiter(event.type, event.url))
+      }
+    }
+
+    if (lastPosition < text.length) {
+      markdown.append(text, lastPosition, text.length)
+    }
+
+    return markdown.toString()
+  }
+
+  private fun openingDelimiter(type: StyleType): String =
+    when (type) {
+      StyleType.BOLD -> "**"
+      StyleType.ITALIC -> "*"
+      StyleType.UNDERLINE -> "_"
+      StyleType.STRIKETHROUGH -> "~~"
+      StyleType.LINK -> "["
+      StyleType.SPOILER -> "||"
+    }
+
+  private fun closingDelimiter(
+    type: StyleType,
+    url: String?,
+  ): String =
+    when (type) {
+      StyleType.BOLD -> "**"
+      StyleType.ITALIC -> "*"
+      StyleType.UNDERLINE -> "_"
+      StyleType.STRIKETHROUGH -> "~~"
+      StyleType.LINK -> "](${url ?: ""})"
+      StyleType.SPOILER -> "||"
+    }
+
+  // Lower value = outermost wrapper. Font styles wrap around structural styles (link).
+  private fun nestingPriority(type: StyleType): Int =
+    when (type) {
+      StyleType.ITALIC -> 0
+      StyleType.BOLD -> 1
+      StyleType.UNDERLINE -> 2
+      StyleType.STRIKETHROUGH -> 3
+      StyleType.SPOILER -> 4
+      StyleType.LINK -> 5
+    }
+
+  private data class BoundaryEvent(
+    val position: Int,
+    val isOpening: Boolean,
+    val type: StyleType,
+    val url: String?,
+  )
+
+  private val BOUNDARY_COMPARATOR =
+    Comparator<BoundaryEvent> { a, b ->
+      if (a.position != b.position) {
+        return@Comparator a.position - b.position
+      }
+      // Closing events before opening events at the same position
+      if (a.isOpening != b.isOpening) {
+        return@Comparator if (a.isOpening) 1 else -1
+      }
+      // Among openings: outer first (lower priority emitted first)
+      // Among closings: inner first (higher priority emitted first) — LIFO order
+      if (a.isOpening) {
+        nestingPriority(a.type) - nestingPriority(b.type)
+      } else {
+        nestingPriority(b.type) - nestingPriority(a.type)
+      }
+    }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/input/layout/InputEventEmitter.kt

@@ -0,0 +1,216 @@
+package com.swmansion.enriched.markdown.input.layout
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.enriched.markdown.input.EnrichedMarkdownTextInputView
+import com.swmansion.enriched.markdown.input.events.OnCaretRectChangeEvent
+import com.swmansion.enriched.markdown.input.events.OnChangeMarkdownEvent
+import com.swmansion.enriched.markdown.input.events.OnChangeMentionEvent
+import com.swmansion.enriched.markdown.input.events.OnChangeSelectionEvent
+import com.swmansion.enriched.markdown.input.events.OnChangeStateEvent
+import com.swmansion.enriched.markdown.input.events.OnChangeTextEvent
+import com.swmansion.enriched.markdown.input.events.OnContextMenuItemPressEvent
+import com.swmansion.enriched.markdown.input.events.OnEndMentionEvent
+import com.swmansion.enriched.markdown.input.events.OnInputBlurEvent
+import com.swmansion.enriched.markdown.input.events.OnInputFocusEvent
+import com.swmansion.enriched.markdown.input.events.OnLinkDetectedEvent
+import com.swmansion.enriched.markdown.input.events.OnMathPressEvent
+import com.swmansion.enriched.markdown.input.events.OnRequestCaretRectResultEvent
+import com.swmansion.enriched.markdown.input.events.OnRequestMarkdownResultEvent
+import com.swmansion.enriched.markdown.input.events.OnStartMentionEvent
+import com.swmansion.enriched.markdown.input.formatting.MarkdownSerializer
+import com.swmansion.enriched.markdown.input.model.CaretRect
+import com.swmansion.enriched.markdown.input.model.StyleType
+
+class InputEventEmitter(
+  private val view: EnrichedMarkdownTextInputView,
+) {
+  private var prevState: Map<StyleType, Boolean> = emptyMap()
+  private var prevCaretRect: CaretRect? = null
+
+  fun emitChangeText() {
+    val plainText = view.text?.toString() ?: ""
+    dispatch(OnChangeTextEvent(surfaceId(), view.id, plainText))
+  }
+
+  fun emitChangeMarkdown() {
+    dispatch(OnChangeMarkdownEvent(surfaceId(), view.id, serializeToMarkdown()))
+  }
+
+  fun emitSelection(
+    start: Int,
+    end: Int,
+  ) {
+    dispatch(OnChangeSelectionEvent(surfaceId(), view.id, start, end))
+  }
+
+  fun emitState() {
+    val pos = view.selectionStart
+    val current =
+      StyleType.entries.associateWith { style ->
+        isStyleEffectivelyActive(style, pos)
+      }
+
+    if (current == prevState) return
+    prevState = current
+
+    dispatch(
+      OnChangeStateEvent(
+        surfaceId(),
+        view.id,
+        current[StyleType.BOLD] ?: false,
+        current[StyleType.ITALIC] ?: false,
+        current[StyleType.UNDERLINE] ?: false,
+        current[StyleType.STRIKETHROUGH] ?: false,
+        current[StyleType.SPOILER] ?: false,
+        current[StyleType.LINK] ?: false,
+      ),
+    )
+  }
+
+  fun emitFocus() {
+    dispatch(OnInputFocusEvent(surfaceId(), view.id))
+  }
+
+  fun emitBlur() {
+    dispatch(OnInputBlurEvent(surfaceId(), view.id))
+  }
+
+  fun emitLinkDetected(
+    text: String,
+    url: String,
+    start: Int,
+    end: Int,
+  ) {
+    dispatch(OnLinkDetectedEvent(surfaceId(), view.id, text, url, start, end))
+  }
+
+  fun emitMathPress(
+    latex: String,
+    start: Int,
+    end: Int,
+    displayMode: Boolean,
+    x: Double,
+    y: Double,
+    width: Double,
+    height: Double,
+  ) {
+    dispatch(OnMathPressEvent(surfaceId(), view.id, latex, start, end, displayMode, x, y, width, height))
+  }
+
+  fun emitStartMention(indicator: String) {
+    dispatch(OnStartMentionEvent(surfaceId(), view.id, indicator))
+  }
+
+  fun emitChangeMention(
+    indicator: String,
+    text: String,
+  ) {
+    dispatch(OnChangeMentionEvent(surfaceId(), view.id, indicator, text))
+  }
+
+  fun emitEndMention(indicator: String) {
+    dispatch(OnEndMentionEvent(surfaceId(), view.id, indicator))
+  }
+
+  fun emitRequestMarkdownResult(requestId: Int) {
+    dispatch(OnRequestMarkdownResultEvent(surfaceId(), view.id, requestId, serializeToMarkdown()))
+  }
+
+  fun emitRequestCaretRectResult(requestId: Int) {
+    val rect = computeCaretRect()
+    dispatch(OnRequestCaretRectResultEvent(surfaceId(), view.id, requestId, rect))
+  }
+
+  fun emitCaretRectChangeIfNeeded() {
+    val rect = computeCaretRect()
+    if (rect == prevCaretRect) return
+
+    prevCaretRect = rect
+    dispatch(OnCaretRectChangeEvent(surfaceId(), view.id, rect))
+  }
+
+  private fun computeCaretRect(): CaretRect {
+    val textLayout = view.layout
+    val cursorOffset = view.selectionStart
+
+    if (textLayout == null || cursorOffset < 0) {
+      return CaretRect(0f, 0f, 0f, 0f)
+    }
+
+    val line = textLayout.getLineForOffset(cursorOffset)
+    val rawX = textLayout.getPrimaryHorizontal(cursorOffset) + view.paddingLeft
+    val rawY = (textLayout.getLineTop(line) + view.paddingTop).toFloat()
+    val rawBottom = (textLayout.getLineBottom(line) + view.paddingTop).toFloat()
+    val density = view.resources.displayMetrics.density
+
+    return CaretRect(
+      x = rawX / density,
+      y = rawY / density,
+      width = 2f / density,
+      height = (rawBottom - rawY) / density,
+    )
+  }
+
+  fun emitContextMenuItemPress(
+    itemText: String,
+    selectedText: String,
+    selectionStart: Int,
+    selectionEnd: Int,
+  ) {
+    val store = view.formattingStore
+    val isSelection = selectionStart < selectionEnd
+
+    fun isActive(type: StyleType) =
+      if (isSelection) {
+        store.isStyleActiveInRange(type, selectionStart, selectionEnd)
+      } else {
+        isStyleEffectivelyActive(type, selectionStart)
+      }
+
+    dispatch(
+      OnContextMenuItemPressEvent(
+        surfaceId(),
+        view.id,
+        itemText,
+        selectedText,
+        selectionStart,
+        selectionEnd,
+        isBold = isActive(StyleType.BOLD),
+        isItalic = isActive(StyleType.ITALIC),
+        isUnderline = isActive(StyleType.UNDERLINE),
+        isStrikethrough = isActive(StyleType.STRIKETHROUGH),
+        isSpoiler = isActive(StyleType.SPOILER),
+        isLink = isActive(StyleType.LINK),
+      ),
+    )
+  }
+
+  private fun isStyleEffectivelyActive(
+    style: StyleType,
+    pos: Int,
+  ): Boolean =
+    view.pendingStyles.contains(style) ||
+      (
+        !view.pendingStyleRemovals.contains(style) &&
+          view.formattingStore.isStyleActive(style, pos)
+      )
+
+  private fun serializeToMarkdown(): String {
+    val editable = view.text ?: return ""
+    return MarkdownSerializer.serialize(editable, view.allFormattingRangesForSerialization(), view.mathChipController)
+  }
+
+  private fun surfaceId(): Int {
+    val reactContext = view.context as? ReactContext ?: return -1
+    return UIManagerHelper.getSurfaceId(reactContext)
+  }
+
+  private fun dispatch(event: Event<*>) {
+    if (view.blockEmitting) return
+    val reactContext = view.context as? ReactContext ?: return
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+    dispatcher?.dispatchEvent(event)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/input/layout/InputLayoutManager.kt

@@ -0,0 +1,28 @@
+package com.swmansion.enriched.markdown.input.layout
+
+import com.facebook.react.bridge.Arguments
+import com.swmansion.enriched.markdown.input.EnrichedMarkdownTextInputView
+
+class InputLayoutManager(
+  private val view: EnrichedMarkdownTextInputView,
+) {
+  private var forceHeightRecalculationCounter = 0
+
+  fun invalidateLayout() {
+    if (view.stateWrapper == null) return
+
+    val text = view.text
+    val paint = view.paint
+
+    val needUpdate = InputMeasurementStore.store(view.id, text, paint)
+    if (!needUpdate) return
+
+    val state = Arguments.createMap()
+    state.putInt("forceHeightRecalculationCounter", forceHeightRecalculationCounter++)
+    view.stateWrapper?.updateState(state)
+  }
+
+  fun release() {
+    InputMeasurementStore.release(view.id)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/input/layout/InputMeasurementStore.kt

@@ -0,0 +1,137 @@
+package com.swmansion.enriched.markdown.input.layout
+
+import android.content.Context
+import android.os.Build
+import android.text.StaticLayout
+import android.text.TextPaint
+import androidx.appcompat.widget.AppCompatEditText
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.yoga.YogaMeasureMode
+import com.facebook.yoga.YogaMeasureOutput
+import java.util.concurrent.ConcurrentHashMap
+
+object InputMeasurementStore {
+  private data class PaintParams(
+    val typeface: android.graphics.Typeface?,
+    val fontSize: Float,
+  )
+
+  private data class MeasurementParams(
+    val cachedWidth: Float,
+    val cachedSize: Long,
+    val text: CharSequence?,
+    val paintParams: PaintParams,
+  )
+
+  private val data = ConcurrentHashMap<Int, MeasurementParams>()
+
+  fun store(
+    id: Int,
+    text: CharSequence?,
+    paint: TextPaint,
+  ): Boolean {
+    val cachedWidth = data[id]?.cachedWidth ?: 0f
+    val cachedSize = data[id]?.cachedSize ?: 0L
+
+    val size = measure(cachedWidth, text, paint)
+    val paintParams = PaintParams(paint.typeface, paint.textSize)
+
+    data[id] = MeasurementParams(cachedWidth, size, text, paintParams)
+    return size != cachedSize
+  }
+
+  fun release(id: Int) {
+    data.remove(id)
+  }
+
+  fun getMeasureById(
+    context: Context,
+    id: Int?,
+    width: Float,
+    height: Float,
+    heightMode: YogaMeasureMode?,
+    props: ReadableMap?,
+  ): Long {
+    val size = getMeasureByIdInternal(context, id, width, props)
+    if (heightMode !== YogaMeasureMode.AT_MOST) {
+      return size
+    }
+
+    val calculatedHeight = YogaMeasureOutput.getHeight(size)
+    val atMostHeight = PixelUtil.toDIPFromPixel(height)
+    val finalHeight = calculatedHeight.coerceAtMost(atMostHeight)
+    return YogaMeasureOutput.make(YogaMeasureOutput.getWidth(size), finalHeight)
+  }
+
+  private fun getMeasureByIdInternal(
+    context: Context,
+    id: Int?,
+    width: Float,
+    props: ReadableMap?,
+  ): Long {
+    if (id == null) return initialMeasure(context, width, props)
+    val value = data[id] ?: return initialMeasure(context, width, props)
+
+    if (width == value.cachedWidth) {
+      return value.cachedSize
+    }
+
+    val paint =
+      TextPaint().apply {
+        typeface = value.paintParams.typeface
+        textSize = value.paintParams.fontSize
+      }
+
+    val size = measure(width, value.text, paint)
+    data[id] = MeasurementParams(width, size, value.text, value.paintParams)
+    return size
+  }
+
+  private fun initialMeasure(
+    context: Context,
+    width: Float,
+    props: ReadableMap?,
+  ): Long {
+    val text = props?.getString("defaultValue") ?: props?.getString("placeholder") ?: "I"
+    val fontSize = props?.getDouble("fontSize")?.toFloat() ?: 16f
+    val spSize = kotlin.math.ceil(PixelUtil.toPixelFromSP(fontSize).toDouble()).toFloat()
+
+    val defaultView = AppCompatEditText(context)
+    val paint =
+      TextPaint(defaultView.paint).apply {
+        textSize = spSize
+        isAntiAlias = true
+      }
+
+    return measure(width, text, paint)
+  }
+
+  private fun measure(
+    maxWidth: Float,
+    text: CharSequence?,
+    paint: TextPaint,
+  ): Long {
+    val content = text ?: ""
+    val widthPx = maxWidth.toInt().coerceAtLeast(0)
+
+    val builder =
+      StaticLayout.Builder
+        .obtain(content, 0, content.length, paint, widthPx)
+        .setIncludePad(true)
+        .setLineSpacing(0f, 1f)
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      builder.setBreakStrategy(android.graphics.text.LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      builder.setUseLineSpacingFromFallbacks(true)
+    }
+
+    val staticLayout = builder.build()
+    val heightInDip = PixelUtil.toDIPFromPixel(staticLayout.height.toFloat())
+    val widthInDip = PixelUtil.toDIPFromPixel(maxWidth)
+    return YogaMeasureOutput.make(widthInDip, heightInDip)
+  }
+}