react-native-marcus 0.1.1 → 0.2.0

package/android/src/main/java/app/getbullet/marcus/MarcusTextInputDecoratorView.kt

@@ -7,12 +7,23 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.view.ReactViewGroup
 
+/**
+ * Formats the editable of the `TextInput` it wraps, and paints the backgrounds
+ * that would otherwise cover the caret.
+ */
 class MarcusTextInputDecoratorView(context: Context) : ReactViewGroup(context) {
 
   private var markdownUtils: MarkdownUtils? = null
   private var reactEditText: ReactEditText? = null
   private var textWatcher: TextWatcher? = null
 
+  /**
+   * Paints the markdown backgrounds before the text does, so that the caret --
+   * which Android draws before either -- is not covered by them.
+   */
+  private val backgroundPass = MarkdownBackgroundPass()
+  private val backgroundPainter = MarkdownBackgroundPainter(backgroundPass)
+
   var markdownStyle: MarkdownStyle? = null
     set(value) {
       field = value
@@ -32,12 +43,13 @@ class MarcusTextInputDecoratorView(context: Context) : ReactViewGroup(context) {
 
     val child = getChildAt(0)
     if (child is ReactEditText) {
-      val utils = MarkdownUtils(context as ReactContext, child.paint)
+      val utils = MarkdownUtils(context as ReactContext, child.paint, backgroundPass)
       utils.markdownStyle = markdownStyle
       utils.parserId = parserId
       markdownUtils = utils
       reactEditText = child
       textWatcher = MarkdownTextWatcher(utils).also { child.addTextChangedListener(it) }
+      backgroundPainter.attachTo(child)
       applyNewStyles()
     }
   }
@@ -46,6 +58,7 @@ class MarcusTextInputDecoratorView(context: Context) : ReactViewGroup(context) {
     super.onDetachedFromWindow()
     reactEditText?.let { editText ->
       textWatcher?.let { editText.removeTextChangedListener(it) }
+      editText.setCompoundDrawables(null, null, null, null)
       reactEditText = null
       textWatcher = null
       markdownUtils = null
@@ -55,6 +68,15 @@ class MarcusTextInputDecoratorView(context: Context) : ReactViewGroup(context) {
   fun applyNewStyles() {
     val editText = reactEditText ?: return
     val utils = markdownUtils ?: return
+
+    // Puts the painter back if something else took the compound drawable slot it
+    // lives in. Only `inlineImageLeft` does, and it clears all four; checked here
+    // rather than per frame, where asking for it would cost a layout pass every
+    // time something wrapped our drawable rather than replacing it.
+    if (editText.compoundDrawables[3] == null) {
+      backgroundPainter.attachTo(editText)
+    }
+
     val editable = editText.text
     if (editable is SpannableStringBuilder) {
       utils.applyMarkdownFormatting(editable)

package/android/src/main/java/app/getbullet/marcus/MarkdownBackgroundPainter.kt

@@ -0,0 +1,147 @@
+package app.getbullet.marcus
+
+import android.graphics.Canvas
+import android.graphics.ColorFilter
+import android.graphics.PixelFormat
+import android.graphics.Rect
+import android.graphics.drawable.Drawable
+import android.text.Layout
+import android.text.Spanned
+import android.text.style.LineBackgroundSpan
+import android.widget.TextView
+import app.getbullet.marcus.spans.MarkdownSpan
+import java.lang.ref.WeakReference
+
+/**
+ * Paints the markdown backgrounds before the caret is drawn.
+ *
+ * A `TextView` draws its caret first and its text layout -- line backgrounds and
+ * all -- over the top, so anything opaque behind the text hides the caret.
+ * Android's own `BackgroundColorSpan` has the same effect; with a code block's
+ * box covering the width of every line it is impossible to miss.
+ *
+ * The one thing a `TextView` draws earlier, and that can be handed to a view we
+ * did not create, is a compound drawable: they are painted at the top of
+ * `onDraw`, before the cursor and before the text. So this is a drawable of no
+ * size, in the one slot React Native never uses, whose only job is to run the
+ * line background spans early. They are the same spans a `Text` paints through
+ * the layout -- one implementation, drawn at two different moments -- and
+ * [MarkdownBackgroundPass] is what keeps them from painting twice.
+ *
+ * The line walk mirrors `Layout.drawBackground`, which is not public until API
+ * 29 and would paint every line background rather than only ours.
+ */
+class MarkdownBackgroundPainter(private val pass: MarkdownBackgroundPass) : Drawable() {
+
+  private var textView: WeakReference<TextView>? = null
+  private val clip = Rect()
+
+  /**
+   * Takes the bottom compound drawable slot: `inlineImageLeft` is the only one
+   * React Native sets, and it sets the left.
+   */
+  fun attachTo(view: TextView) {
+    textView = WeakReference(view)
+    setBounds(0, 0, 0, 0)
+    view.compoundDrawablePadding = 0
+    view.setCompoundDrawables(null, null, null, this)
+  }
+
+  override fun draw(canvas: Canvas) {
+    val view = textView?.get() ?: return
+    val layout = view.layout ?: return
+    val text = layout.text as? Spanned ?: return
+
+    val spans = text.getSpans(0, text.length, LineBackgroundSpan::class.java)
+    if (spans.isEmpty()) {
+      return
+    }
+
+    canvas.save()
+    // From where a compound drawable is drawn to where the text is: the slot is
+    // pinned to the view and centred in the space between the compound paddings,
+    // while the layout hangs off the padding and scrolls.
+    val horizontalSpace = view.width - view.compoundPaddingLeft - view.compoundPaddingRight
+    canvas.translate(
+      (-view.scrollX - horizontalSpace / 2).toFloat(),
+      (view.totalPaddingTop - view.scrollY - view.height + view.paddingBottom).toFloat(),
+    )
+
+    pass.painting = true
+    try {
+      paint(canvas, layout, text, spans)
+    } finally {
+      pass.painting = false
+      canvas.restore()
+    }
+  }
+
+  private fun paint(
+    canvas: Canvas,
+    layout: Layout,
+    text: Spanned,
+    spans: Array<out LineBackgroundSpan>
+  ) {
+    // Only what the frame is about to show: a long document would otherwise pay
+    // for every line of it on every draw.
+    val firstLine: Int
+    val lastLine: Int
+    if (canvas.getClipBounds(clip)) {
+      firstLine = layout.getLineForVertical(clip.top)
+      lastLine = layout.getLineForVertical(clip.bottom)
+    } else {
+      firstLine = 0
+      lastLine = layout.lineCount - 1
+    }
+
+    val paint = layout.paint
+    val width = layout.width
+    var top = layout.getLineTop(firstLine)
+
+    for (line in firstLine..lastLine) {
+      val start = layout.getLineStart(line)
+      val end = layout.getLineEnd(line)
+      // The next line's top rather than this line's bottom, so consecutive
+      // fills tile through the line spacing exactly as the layout's own pass
+      // makes them.
+      val bottom = layout.getLineTop(line + 1)
+      val baseline = bottom - layout.getLineDescent(line)
+
+      for (span in spans) {
+        // Ours only: anything else is still painted by the layout's own pass,
+        // where it belongs, and painting it here as well would double it.
+        if (span is MarkdownSpan &&
+          text.getSpanStart(span) < end &&
+          text.getSpanEnd(span) > start
+        ) {
+          span.drawBackground(
+            canvas,
+            paint,
+            0,
+            width,
+            top,
+            baseline,
+            bottom,
+            text,
+            start,
+            end,
+            line,
+          )
+        }
+      }
+
+      top = bottom
+    }
+  }
+
+  override fun getIntrinsicWidth(): Int = 0
+
+  override fun getIntrinsicHeight(): Int = 0
+
+  override fun setAlpha(alpha: Int) = Unit
+
+  override fun setColorFilter(colorFilter: ColorFilter?) = Unit
+
+  @Deprecated("Deprecated in Drawable", ReplaceWith("PixelFormat.TRANSLUCENT"))
+  override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
+}

package/android/src/main/java/app/getbullet/marcus/MarkdownBackgroundPass.kt

@@ -0,0 +1,19 @@
+package app.getbullet.marcus
+
+/**
+ * Whether the view is painting the markdown backgrounds itself.
+ *
+ * A `Text` lets the layout paint them, in the pass Android runs for
+ * `LineBackgroundSpan`. A `TextInput` cannot: that pass happens after the caret
+ * is drawn, so anything opaque in it hides the caret ([[MarkdownBackgroundPainter]]
+ * explains the rest). There the painter runs the spans itself, earlier, and this
+ * is what tells them which of the two moments they are in -- painting on both
+ * would put the background back over the caret.
+ *
+ * One instance per input. A spannable formatted for a `Text` carries none, and
+ * its spans paint whenever they are asked to.
+ */
+class MarkdownBackgroundPass {
+  /** True only while the painter is driving the spans. */
+  var painting = false
+}

package/android/src/main/java/app/getbullet/marcus/MarkdownCopy.kt

@@ -0,0 +1,87 @@
+package app.getbullet.marcus
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableType
+
+/** One placeholder character, and the markdown it was written as. */
+data class MarkdownSubstitution(val index: Int, val text: String)
+
+/**
+ * What a selection copies as.
+ *
+ * A view nested in a `Text` -- a drawn equation, an image -- is one U+FFFC in the spannable the
+ * `TextView` lays out, and U+FFFC is what the platform's own copy puts on the clipboard: a message
+ * with an equation in it arrives in the next application with a box where the maths was. So the
+ * copy is taken over and the placeholders are written back out as the source they stand for.
+ *
+ * Offsets are the ones JavaScript measured against the stripped text, which is the very string the
+ * `TextView` holds -- the ranges are measured against it too -- so a selection's start and end
+ * index into the same coordinates with nothing to remap.
+ */
+object MarkdownCopy {
+
+  @JvmStatic
+  fun read(array: ReadableArray?): List<MarkdownSubstitution> {
+    if (array == null || array.size() == 0) {
+      return emptyList()
+    }
+
+    val substitutions = ArrayList<MarkdownSubstitution>(array.size())
+
+    for (i in 0 until array.size()) {
+      if (array.getType(i) != ReadableType.Map) {
+        continue
+      }
+
+      val map = array.getMap(i) ?: continue
+
+      substitutions.add(
+        MarkdownSubstitution(index = map.getInt("index"), text = map.getString("text") ?: "")
+      )
+    }
+
+    return substitutions
+  }
+
+  /**
+   * The text between two offsets with every placeholder in it replaced by its source.
+   *
+   * Substitutions arrive in text order and each covers exactly one character, so one walk is
+   * enough. One that falls outside the selection is skipped rather than clipped: half an equation
+   * is not worth pasting, and a selection that stops in the middle of a drawing stops at its edge
+   * as far as the `TextView` is concerned anyway.
+   */
+  fun substitute(
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    substitutions: List<MarkdownSubstitution>,
+  ): String {
+    val from = start.coerceIn(0, text.length)
+    val to = end.coerceIn(from, text.length)
+    val copied = StringBuilder(to - from)
+    var cursor = from
+
+    for (substitution in substitutions) {
+      val index = substitution.index
+
+      if (index < cursor) {
+        continue
+      }
+
+      if (index >= to) {
+        break
+      }
+
+      copied.append(text, cursor, index)
+      copied.append(substitution.text)
+      cursor = index + 1
+    }
+
+    if (cursor < to) {
+      copied.append(text, cursor, to)
+    }
+
+    return copied.toString()
+  }
+}