react-native-enriched-markdown-scaffold 1.0.2-scaffold.4 → 1.0.2-scaffold.5

package/android/src/main/java/com/swmansion/enriched/markdown/events/SelectionChangeEvent.kt

@@ -0,0 +1,42 @@
+package com.swmansion.enriched.markdown.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.enriched.markdown.utils.text.view.SelectionRect
+import com.swmansion.enriched.markdown.utils.text.view.SelectionSnapshot
+
+class SelectionChangeEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val snapshot: SelectionSnapshot,
+) : Event<SelectionChangeEvent>(surfaceId, viewId) {
+  override fun getEventName(): String = EVENT_NAME
+
+  // Every state is distinct (active/inactive flips must all arrive), so never merge.
+  override fun canCoalesce(): Boolean = false
+
+  override fun getEventData(): WritableMap =
+    Arguments.createMap().apply {
+      putBoolean("active", snapshot.active)
+      putString("source", snapshot.source)
+      putString("text", snapshot.text)
+      putString("markdown", snapshot.markdown)
+      putBoolean("whole", snapshot.whole)
+      putMap("rect", snapshot.rect.toWritableMap())
+      putMap("startRect", snapshot.startRect.toWritableMap())
+      putMap("endRect", snapshot.endRect.toWritableMap())
+    }
+
+  private fun SelectionRect.toWritableMap(): WritableMap =
+    Arguments.createMap().apply {
+      putDouble("x", x.toDouble())
+      putDouble("y", y.toDouble())
+      putDouble("width", width.toDouble())
+      putDouble("height", height.toDouble())
+    }
+
+  companion object {
+    const val EVENT_NAME: String = "onSelectionChange"
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/utils/common/MarkdownViewManagerUtils.kt

@@ -11,10 +11,12 @@ import com.swmansion.enriched.markdown.events.CopyRequestEvent
 import com.swmansion.enriched.markdown.events.LinkLayoutEvent
 import com.swmansion.enriched.markdown.events.LinkLongPressEvent
 import com.swmansion.enriched.markdown.events.LinkPressEvent
+import com.swmansion.enriched.markdown.events.SelectionChangeEvent
 import com.swmansion.enriched.markdown.events.TaskListItemPressEvent
 import com.swmansion.enriched.markdown.parser.Md4cFlags
 import com.swmansion.enriched.markdown.utils.text.view.LinkLayoutFragment
 import com.swmansion.enriched.markdown.utils.text.view.SelectionMenuConfig
+import com.swmansion.enriched.markdown.utils.text.view.SelectionSnapshot
 
 fun markdownEventTypeConstants(): MutableMap<String, Any> {
   val map = mutableMapOf<String, Any>()
@@ -31,6 +33,8 @@ fun markdownEventTypeConstants(): MutableMap<String, Any> {
     mapOf("registrationName" to ContextMenuItemPressEvent.EVENT_NAME)
   map[LinkLayoutEvent.EVENT_NAME] =
     mapOf("registrationName" to LinkLayoutEvent.EVENT_NAME)
+  map[SelectionChangeEvent.EVENT_NAME] =
+    mapOf("registrationName" to SelectionChangeEvent.EVENT_NAME)
   return map
 }
 
@@ -44,6 +48,16 @@ fun emitLinkLayout(
   eventDispatcher?.dispatchEvent(LinkLayoutEvent(surfaceId, view.id, fragments))
 }
 
+fun emitSelectionChange(
+  view: View,
+  snapshot: SelectionSnapshot,
+) {
+  val context = view.context as com.facebook.react.bridge.ReactContext
+  val surfaceId = UIManagerHelper.getSurfaceId(context)
+  val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, view.id)
+  eventDispatcher?.dispatchEvent(SelectionChangeEvent(surfaceId, view.id, snapshot))
+}
+
 fun emitLinkPress(
   view: View,
   url: String,

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/SelectionChangeReporter.kt

@@ -0,0 +1,230 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.text.Layout
+import android.text.Selection
+import android.text.Spannable
+import android.view.View
+import android.widget.TextView
+import com.facebook.react.uimanager.PixelUtil
+import com.swmansion.enriched.markdown.spans.LinkSpacers
+import com.swmansion.enriched.markdown.utils.text.conversion.MarkdownExtractor
+import kotlin.math.max
+import kotlin.math.min
+
+/** A rect in dp, relative to the reporting view. */
+data class SelectionRect(
+  val x: Float,
+  val y: Float,
+  val width: Float,
+  val height: Float,
+) {
+  companion object {
+    val ZERO = SelectionRect(0f, 0f, 0f, 0f)
+
+    /** Converts a px rect (already in the reporting view's coordinates) to dp. */
+    fun fromPx(
+      left: Float,
+      top: Float,
+      right: Float,
+      bottom: Float,
+    ) = SelectionRect(
+      PixelUtil.toDIPFromPixel(min(left, right)),
+      PixelUtil.toDIPFromPixel(min(top, bottom)),
+      PixelUtil.toDIPFromPixel(kotlin.math.abs(right - left)),
+      PixelUtil.toDIPFromPixel(kotlin.math.abs(bottom - top)),
+    )
+  }
+}
+
+/** Payload of `onSelectionChange`. Compared structurally for deduplication. */
+data class SelectionSnapshot(
+  val active: Boolean,
+  val source: String,
+  val text: String,
+  val markdown: String,
+  val whole: Boolean,
+  val rect: SelectionRect,
+  val startRect: SelectionRect,
+  val endRect: SelectionRect,
+) {
+  companion object {
+    val INACTIVE =
+      SelectionSnapshot(false, "selection", "", "", false, SelectionRect.ZERO, SelectionRect.ZERO, SelectionRect.ZERO)
+
+    /** A long-pressed block: `whole`, and every rect is the block's frame. */
+    fun block(
+      source: String,
+      markdown: String,
+      text: String,
+      rect: SelectionRect,
+    ) = SelectionSnapshot(true, source, text, markdown, true, rect, rect, rect)
+  }
+}
+
+/** A text view's current selection, before the owner applies its `whole` rule. */
+data class TextSelection(
+  val text: String,
+  val markdown: String,
+  // Same threshold MarkdownExtractor uses to return the original markdown.
+  val fullSelection: Boolean,
+  val rect: SelectionRect,
+  val startRect: SelectionRect,
+  val endRect: SelectionRect,
+)
+
+/**
+ * Reads the selection of this text view with its rects offset by [offsetXPx]/[offsetYPx]
+ * (a segment's position inside its container). `rect` spans the full content width when the
+ * selection covers several lines; `startRect`/`endRect` cover the selected part of the first
+ * and last line. Returns null when nothing is selected.
+ */
+fun TextView.currentTextSelection(
+  offsetXPx: Int = 0,
+  offsetYPx: Int = 0,
+): TextSelection? {
+  val start = selectionStart
+  val end = selectionEnd
+  if (start < 0 || end <= start) return null
+  val layout = layout ?: return null
+  val content = text ?: return null
+
+  val selectedText = LinkSpacers.strip(content.subSequence(start, end)).toString()
+  val markdown = MarkdownExtractor.getMarkdownForSelection(this) ?: selectedText
+
+  val originX = (offsetXPx + totalPaddingLeft - scrollX).toFloat()
+  val originY = (offsetYPx + totalPaddingTop - scrollY).toFloat()
+
+  val startLine = layout.getLineForOffset(start)
+  // An end at a line break belongs to the line it closes, not the next one.
+  val endLine = layout.getLineForOffset(max(start, end - 1))
+  val startX = layout.getPrimaryHorizontal(start)
+  val endX = lineEndHorizontal(layout, endLine, end)
+
+  fun lineRect(
+    line: Int,
+    left: Float,
+    right: Float,
+  ) = SelectionRect.fromPx(
+    left + originX,
+    layout.getLineTop(line) + originY,
+    right + originX,
+    layout.getLineBottom(line) + originY,
+  )
+
+  val startRect: SelectionRect
+  val endRect: SelectionRect
+  val rect: SelectionRect
+  if (startLine == endLine) {
+    startRect = lineRect(startLine, startX, endX)
+    endRect = startRect
+    rect = startRect
+  } else {
+    startRect = lineRect(startLine, startX, layout.getLineRight(startLine))
+    endRect = lineRect(endLine, layout.getLineLeft(endLine), endX)
+    rect =
+      SelectionRect.fromPx(
+        originX,
+        layout.getLineTop(startLine) + originY,
+        layout.width + originX,
+        layout.getLineBottom(endLine) + originY,
+      )
+  }
+
+  return TextSelection(
+    text = selectedText,
+    markdown = markdown,
+    fullSelection = start == 0 && end >= content.length - 1,
+    rect = rect,
+    startRect = startRect,
+    endRect = endRect,
+  )
+}
+
+/** Clears this text view's selection, which also ends its selection ActionMode. */
+fun TextView.clearTextSelection() {
+  val spannable = text as? Spannable ?: return
+  Selection.removeSelection(spannable)
+}
+
+/**
+ * x of [offset] on [line]. At a line's end offset `getPrimaryHorizontal` reports the start
+ * of the next line, so a selection ending there uses the line's right edge.
+ */
+private fun lineEndHorizontal(
+  layout: Layout,
+  line: Int,
+  offset: Int,
+): Float =
+  if (offset >= layout.getLineEnd(line) && line < layout.lineCount - 1) {
+    layout.getLineRight(line)
+  } else {
+    layout.getPrimaryHorizontal(offset)
+  }
+
+/**
+ * Coalesces selection changes into at most one `onSelectionChange` per frame. The payload is
+ * read when the frame fires, so the latest state always reaches JS; a cleared selection is
+ * reported right away and drops any pending update. Identical payloads are sent once, so the
+ * `setText` passes of streaming don't repeat `active: false`.
+ */
+class SelectionChangeReporter(
+  private val view: View,
+  private val snapshot: () -> SelectionSnapshot,
+  private val emit: (SelectionSnapshot) -> Unit,
+) {
+  var enabled = false
+    set(value) {
+      if (field == value) return
+      field = value
+      cancel()
+      lastReported = SelectionSnapshot.INACTIVE
+      if (value) schedule()
+    }
+
+  private var lastReported = SelectionSnapshot.INACTIVE
+  private var pending = false
+  private val flushRunnable =
+    Runnable {
+      pending = false
+      report()
+    }
+
+  /** Reports the current state on the next frame. */
+  fun schedule() {
+    if (!enabled || pending) return
+    pending = true
+    view.postOnAnimation(flushRunnable)
+  }
+
+  fun onSelectionChanged(hasSelection: Boolean) {
+    if (hasSelection) schedule() else flushNow()
+  }
+
+  /** Reports the current state right away, dropping any pending frame. */
+  fun flushNow() {
+    cancel()
+    report()
+  }
+
+  /**
+   * Makes the next report go out even if it equals the last one — a block long-pressed
+   * again is a new request for the app's menu, not a repeat.
+   */
+  fun forgetLastReported() {
+    lastReported = SelectionSnapshot.INACTIVE
+  }
+
+  fun cancel() {
+    if (!pending) return
+    pending = false
+    view.removeCallbacks(flushRunnable)
+  }
+
+  private fun report() {
+    if (!enabled) return
+    val current = snapshot()
+    if (current == lastReported) return
+    lastReported = current
+    emit(current)
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/views/CodeBlockContainerView.kt

@@ -70,6 +70,10 @@ class CodeBlockContainerView(
   // control, not a context menu, and stays.
   var contextMenuHidden: Boolean = false
 
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
+
   // Copy / Copy as Markdown visibility, Copy format and the header copy button.
   // The header button always copies the raw code.
   var menuOptions: BlockMenuOptions = BlockMenuOptions()
@@ -259,7 +263,13 @@ class CodeBlockContainerView(
   // the event when there is one (a pending block has no menu yet, and a hidden
   // one never does).
   private fun showContextMenu(anchor: View): Boolean {
-    if (pending || contextMenuHidden || !menuOptions.hasItems) return false
+    if (pending) return false
+    if (contextMenuHidden) {
+      val onSuppressed = onMenuSuppressed ?: return false
+      onSuppressed(CodeBlockNode.fencedMarkdown(code, language, fenceChar), code)
+      return true
+    }
+    if (!menuOptions.hasItems) return false
     ContextMenuPopup.show(anchor, this) {
       blockCopyItems(
         menuOptions,

package/android/src/main/java/com/swmansion/enriched/markdown/views/TableContainerView.kt

@@ -67,6 +67,10 @@ class TableContainerView(
   var contextMenuHidden: Boolean = false
   var menuOptions: BlockMenuOptions = BlockMenuOptions()
 
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
+
   private val scrollView =
     HorizontalScrollView(context).apply {
       isHorizontalScrollBarEnabled = true
@@ -378,7 +382,10 @@ class TableContainerView(
   }
 
   private fun showContextMenu(anchor: View) {
-    if (contextMenuHidden) return
+    if (contextMenuHidden) {
+      onMenuSuppressed?.invoke(tableMarkdown, buildPlainText())
+      return
+    }
     val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
     ContextMenuPopup.show(anchor, this) {
       blockCopyItems(menuOptions, copyLabel, copyAsMarkdownLabel, markdown = { tableMarkdown }, rawText = ::buildPlainText, copyRaw = {

package/android/src/math/java/com/swmansion/enriched/markdown/views/MathContainerView.kt

@@ -44,6 +44,10 @@ class MathContainerView(
   var contextMenuHidden: Boolean = false
   var menuOptions: BlockMenuOptions = BlockMenuOptions()
 
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
+
   override val segmentMarginTop: Int get() = mathStyle.marginTop.toInt()
   override val segmentMarginBottom: Int get() = mathStyle.marginBottom.toInt()
 
@@ -119,7 +123,10 @@ class MathContainerView(
   }
 
   private fun showContextMenu(anchor: View) {
-    if (contextMenuHidden) return
+    if (contextMenuHidden) {
+      onMenuSuppressed?.invoke("$$\n$cachedLatex\n$$", cachedLatex)
+      return
+    }
     val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
     ContextMenuPopup.show(anchor, this) {
       blockCopyItems(menuOptions, copyLabel, copyAsMarkdownLabel, markdown = {

package/docs/API_REFERENCE.md

@@ -223,6 +223,62 @@ import * as Clipboard from 'expo-clipboard';
 />
 ```
 
+### `onSelectionChange`
+
+Reports the text selection so the app can draw its own selection menu. Pair it with [`contextMenuHidden`](#contextmenuhidden) to replace the native menu entirely.
+
+| Type                                     | Default Value | Platform |
+| ---------------------------------------- | ------------- | -------- |
+| `(event: SelectionChangeEvent) => void`  | -             | Both     |
+
+```ts
+interface SelectionRect { x: number; y: number; width: number; height: number }
+
+interface SelectionChangeEvent {
+  /** `false` once the selection is gone; every other field is then empty / zero. */
+  active: boolean;
+  /** `'selection'` for text, or the kind of a long-pressed block. */
+  source: 'selection' | 'math' | 'table' | 'code';
+  /** Same as `CopyEvent.text` / `CopyEvent.markdown` / `CopyEvent.whole`. */
+  text: string;
+  markdown: string;
+  whole: boolean;
+  /** Bounding box (full content width when it spans several lines). */
+  rect: SelectionRect;
+  /** Selected part of the first / last line — anchor a menu above the start or below the end. */
+  startRect: SelectionRect;
+  endRect: SelectionRect;
+}
+```
+
+- Fires at most once per frame while the selection changes (payloads are deduplicated), and with `active: false` right away once it is gone — including when new `markdown` replaces the text.
+- Rects are in dp, relative to the component's native view: add the origin from `ref.current.measureInWindow` to get window coordinates. Re-measure after scrolling instead of waiting for a new event.
+- With `contextMenuHidden`, a long press on a table, math or code block (`flavor="github"`) fires the event with `source` set to the block kind, `whole: true` and every rect set to the block's frame. These blocks have no text selection, so without this they would offer no way to copy. Without `contextMenuHidden` the block menu shows as usual and no event fires.
+- There is no "dragging" flag. Debounce before showing your menu, so it doesn't flicker while a handle is dragged.
+- Within one component only one part holds a selection at a time: selecting in another text segment clears the previous one. To keep a single selection across several components, call `clearSelection()` on the previous one.
+- Ignored on macOS and web.
+
+**Imperative handle.** `ref` exposes `clearSelection()`, which clears the selection (and any long-pressed block) and fires `active: false`. It also forwards `measure`, `measureInWindow` and `measureLayout`.
+
+```tsx
+const ref = useRef<EnrichedMarkdownTextInstance>(null);
+
+<EnrichedMarkdownText
+  ref={ref}
+  markdown={content}
+  contextMenuHidden
+  onSelectionChange={(e) => {
+    if (!e.active) return hideMenu();
+    ref.current?.measureInWindow((x, y) =>
+      showMenuDebounced({ x: x + e.startRect.x, y: y + e.startRect.y }, e.markdown)
+    );
+  }}
+/>;
+
+// After the menu action:
+ref.current?.clearSelection();
+```
+
 ### `enableLinkPreview`
 
 Controls the native link preview on long press (iOS only). Automatically set to `false` when `onLinkLongPress` is provided.
@@ -281,6 +337,8 @@ Notes:
   prop suppresses it the same way.
 - Applies to `EnrichedMarkdownText` only — it does not affect
   `EnrichedMarkdownTextInput`.
+- To show your own menu instead, use [`onSelectionChange`](#onselectionchange);
+  with this prop on, block long-presses are reported through it as well.
 
 ### `selectionColor`