react-native-enriched-markdown-scaffold 0.7.4-scaffold.1 → 0.7.4-scaffold.2

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

@@ -848,18 +848,36 @@ class EnrichedMarkdownTextInputView(
     return true
   }
 
-  private fun computeChipBounds(
+  /** Chip glyph rect in [Layout] coordinates — no padding, no scroll offset. */
+  private fun chipBoundsInLayout(
     layout: Layout,
     start: Int,
   ): Rect {
     val line = layout.getLineForOffset(start)
-    val xStart = (layout.getPrimaryHorizontal(start)).toInt() + totalPaddingLeft - scrollX
-    val xEnd = (layout.getPrimaryHorizontal(start + 1)).toInt() + totalPaddingLeft - scrollX
-    val top = layout.getLineTop(line) + totalPaddingTop - scrollY
-    val bottom = layout.getLineBottom(line) + totalPaddingTop - scrollY
-    return Rect(xStart, top, xEnd, bottom)
+    val xStart = layout.getPrimaryHorizontal(start).toInt()
+    val xEnd = layout.getPrimaryHorizontal(start + 1).toInt()
+    // Ordered, not raw start/end: in an RTL run xStart > xEnd, which would make an
+    // inverted Rect that contains() always rejects.
+    val left = xStart.coerceAtMost(xEnd)
+    var right = xStart.coerceAtLeast(xEnd)
+    if (right <= left) {
+      // A chip that is the last character has start + 1 == length, where some layouts
+      // report the same horizontal for both offsets. Fall back to the line's content edge
+      // so the rect keeps a real width instead of collapsing.
+      right = layout.getLineRight(line).toInt()
+    }
+    return Rect(left, layout.getLineTop(line), right, layout.getLineBottom(line))
   }
 
+  /** Chip glyph rect in view coordinates, for reporting to JS. */
+  private fun computeChipBounds(
+    layout: Layout,
+    start: Int,
+  ): Rect =
+    chipBoundsInLayout(layout, start).apply {
+      offset(totalPaddingLeft - scrollX, totalPaddingTop - scrollY)
+    }
+
   fun mathChipPositionAtTouch(
     x: Float,
     y: Float,
@@ -869,13 +887,21 @@ class EnrichedMarkdownTextInputView(
     val layoutNow = layout ?: return -1
     val adjustedX = (x - totalPaddingLeft + scrollX).toInt()
     val adjustedY = (y - totalPaddingTop + scrollY).toInt()
-    if (adjustedY < 0) return -1
+    // getLineForVertical and getOffsetForHorizontal both clamp into the laid-out text, so
+    // a touch in the padding or in the blank space below the last line resolves onto the
+    // nearest character. Bound the touch to the text box, then require it to land inside
+    // the chip's own rect — otherwise a tap beside a chip reads as a tap on it.
+    if (adjustedY < 0 || adjustedY > layoutNow.height) return -1
     val line = layoutNow.getLineForVertical(adjustedY)
     val offset = layoutNow.getOffsetForHorizontal(line, adjustedX.toFloat())
-    if (offset < 0 || offset >= editable.length) return -1
+    if (offset < 0) return -1
     val candidates = intArrayOf(offset, offset - 1).filter { it in 0 until editable.length }
     for (candidate in candidates) {
       val range = controller.chipRangeAt(editable, candidate) ?: continue
+      // An empty rect means the layout could not give us the chip's extent; accept the
+      // candidate then, rather than making the chip untappable.
+      val bounds = chipBoundsInLayout(layoutNow, range.first)
+      if (!bounds.isEmpty && !bounds.contains(adjustedX, adjustedY)) continue
       return range.first
     }
     return -1

package/ios/input/EnrichedMarkdownTextInput.mm

@@ -253,6 +253,20 @@ using namespace facebook::react;
 
 #if ENRICHED_MARKDOWN_MATH && !TARGET_OS_OSX
 
+// Glyph rect of the chip at `index`, in _textView coordinates (the same space
+// `locationInView:_textView` reports). Single source of truth for both the tap
+// hit-test and the rect reported to JS.
+- (CGRect)mathChipRectInTextViewAtIndex:(NSUInteger)index layoutManager:(NSLayoutManager *)lm
+{
+  if (lm == nil)
+    return CGRectNull;
+  NSRange glyphRange = [lm glyphRangeForCharacterRange:NSMakeRange(index, 1) actualCharacterRange:NULL];
+  CGRect rect = [lm boundingRectForGlyphRange:glyphRange inTextContainer:_textView.textContainer];
+  rect.origin.x += _textView.textContainerInset.left;
+  rect.origin.y += _textView.textContainerInset.top;
+  return rect;
+}
+
 - (void)handleTapForMathChip:(UITapGestureRecognizer *)gesture
 {
   if (gesture.state != UIGestureRecognizerStateRecognized)
@@ -265,23 +279,28 @@ using namespace facebook::react;
   if (idx < 0)
     return;
   NSTextStorage *storage = _textView.textStorage;
-  // The closest position can land just past the chip; probe both `idx` and `idx-1`.
+  NSLayoutManager *lm = storage.layoutManagers.firstObject;
+  // The closest position can land just past the chip, so probe both `idx` and `idx-1`.
+  // `closestPositionToPoint:` has no distance bound — it clamps a tap anywhere in the
+  // text view (blank space past the text, textContainerInset padding) onto the nearest
+  // character. Requiring the touch to fall inside the chip's own glyph rect is what
+  // keeps a tap beside a chip from reading as a tap on it.
   ENRMMathInlineAttachment *att = nil;
   NSUInteger chipIdx = NSNotFound;
-  if ((NSUInteger)idx < storage.length) {
-    id v = [storage attribute:NSAttachmentAttributeName atIndex:(NSUInteger)idx effectiveRange:NULL];
-    if ([v isKindOfClass:[ENRMMathInlineAttachment class]]) {
-      att = v;
-      chipIdx = (NSUInteger)idx;
-    }
-  }
-  if (!att && idx > 0) {
-    NSUInteger probe = (NSUInteger)idx - 1;
-    id v = [storage attribute:NSAttachmentAttributeName atIndex:probe effectiveRange:NULL];
-    if ([v isKindOfClass:[ENRMMathInlineAttachment class]]) {
-      att = v;
-      chipIdx = probe;
-    }
+  for (NSInteger probe = idx; probe >= idx - 1; probe--) {
+    if (probe < 0 || (NSUInteger)probe >= storage.length)
+      continue;
+    id v = [storage attribute:NSAttachmentAttributeName atIndex:(NSUInteger)probe effectiveRange:NULL];
+    if (![v isKindOfClass:[ENRMMathInlineAttachment class]])
+      continue;
+    // An empty rect means the layout could not give us the chip's extent; accept the
+    // candidate then, rather than making the chip untappable.
+    CGRect rect = [self mathChipRectInTextViewAtIndex:(NSUInteger)probe layoutManager:lm];
+    if (!CGRectIsEmpty(rect) && !CGRectContainsPoint(rect, loc))
+      continue;
+    att = v;
+    chipIdx = (NSUInteger)probe;
+    break;
   }
   if (!att)
     return;
@@ -290,7 +309,6 @@ using namespace facebook::react;
   [self clearMathChipSelectionsExcept:chipRange];
   att.isSelected = YES;
   [att invalidateRender];
-  NSLayoutManager *lm = storage.layoutManagers.firstObject;
   if (lm) {
     [lm invalidateLayoutForCharacterRange:chipRange actualCharacterRange:NULL];
     [lm ensureLayoutForCharacterRange:chipRange];
@@ -306,10 +324,8 @@ using namespace facebook::react;
   _suppressMathChipClearOnce = YES;
   _textView.selectedRange = NSMakeRange(caretIndex, 0);
 
-  NSRange glyphRange = [lm glyphRangeForCharacterRange:chipRange actualCharacterRange:NULL];
-  CGRect glyphRect = [lm boundingRectForGlyphRange:glyphRange inTextContainer:_textView.textContainer];
-  glyphRect.origin.x += _textView.textContainerInset.left;
-  glyphRect.origin.y += _textView.textContainerInset.top;
+  // Recomputed rather than reused from the hit-test: the layout was invalidated above.
+  CGRect glyphRect = [self mathChipRectInTextViewAtIndex:chipIdx layoutManager:lm];
   CGRect rectInSelf = [self.contentView convertRect:glyphRect fromView:_textView];
 
   [self emitOnMathPressWithLatex:att.latex start:chipIdx end:chipIdx + 1 displayMode:att.displayMode rect:rectInSelf];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-enriched-markdown-scaffold",
-  "version": "0.7.4-scaffold.1",
+  "version": "0.7.4-scaffold.2",
   "description": "Markdown Text component for React Native",
   "main": "./lib/module/index",
   "module": "./lib/module/index",