react-native-marcus 0.1.0 → 0.2.0

package/android/src/test/java/app/getbullet/marcus/MarkdownFormatterTest.kt

@@ -1,7 +1,10 @@
 package app.getbullet.marcus
 
 import android.text.SpannableStringBuilder
+import android.text.Spanned
 import android.text.TextPaint
+import android.text.style.AbsoluteSizeSpan
+import app.getbullet.marcus.spans.MarkdownCodeBlockSpan
 import com.facebook.react.bridge.JavaOnlyMap
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.DisplayMetricsHolder
@@ -9,6 +12,8 @@ import java.io.File
 import org.json.JSONArray
 import org.json.JSONObject
 import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertTrue
 import org.junit.Before
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -26,6 +31,8 @@ import org.robolectric.annotation.Config
  * so the Android and iOS outputs stay diffable against each other in a single
  * comparison. Regenerate with `-Dmarcus.updateBaselines=true`.
  */
+private val INDENT = Regex("""indent\((-?\d+),""")
+
 @RunWith(RobolectricTestRunner::class)
 @Config(sdk = [34])
 class MarkdownFormatterTest {
@@ -81,12 +88,12 @@ class MarkdownFormatterTest {
   }
 
   @Test
-  fun `applies bold across the whole emphasis span`() {
+  fun `applies bold across the whole strong span`() {
     val ssb = SpannableStringBuilder("**bold**")
     formatter.format(
       ssb,
       listOf(
-        MarkdownRange("bold", 0, 8, 0),
+        MarkdownRange("strong", 0, 8, 0),
         MarkdownRange("syntax", 0, 2, 0),
         MarkdownRange("syntax", 6, 2, 0),
       ),
@@ -104,6 +111,85 @@ class MarkdownFormatterTest {
     )
   }
 
+  // The ranges a display is handed for `- one` and `1. one`: the syntax is gone,
+  // and what is left of it is the marker that stands for the bullet or numbers
+  // the item.
+  private val bulletRanges = listOf(
+    MarkdownRange("syntax", 0, 1, 0),
+    MarkdownRange("block-prefix", 0, 2, 0),
+    MarkdownRange("list-unordered", 0, 5, 1),
+  )
+
+  private val numberRanges = listOf(
+    MarkdownRange("syntax", 0, 1, 0),
+    MarkdownRange("syntax", 1, 1, 0),
+    MarkdownRange("block-prefix", 0, 3, 0),
+    MarkdownRange("list-ordered", 0, 6, 1),
+  )
+
+  @Test
+  fun `draws a bullet in place of an unordered marker`() {
+    val model = format("- one", bulletRanges, display = true)
+
+    assertTrue(model, model.contains("bullet"))
+  }
+
+  @Test
+  fun `scales an ordered marker to its own size`() {
+    val model = format("1. one", numberRanges, display = true)
+
+    // 16 * orderedListMarkerScale, over the `1.` and nothing else.
+    assertTrue(model, model.contains("font-size(12)"))
+    assertFalse(model, model.contains("bullet"))
+  }
+
+  @Test
+  fun `shows the marker an input was typed with`() {
+    val bullet = format("- one", bulletRanges, display = false)
+    val number = format("1. one", numberRanges, display = false)
+
+    assertFalse(bullet, bullet.contains("bullet"))
+    assertFalse(number, number.contains("font-size("))
+  }
+
+  @Test
+  fun `indents past the bullet rather than past the marker`() {
+    // The circle is 16 * unorderedListMarkerScale wide and holds a marker's
+    // padding either side of it, so the text starts further in than the `-` it
+    // was written with would have put it.
+    val shown = indentOf(format("- one", bulletRanges, display = false))
+    val drawn = indentOf(format("- one", bulletRanges, display = true))
+
+    assertTrue("$drawn is not past $shown", drawn > shown)
+  }
+
+  @Test
+  fun `takes the base font from the spannable when there is no view to ask`() {
+    // The measure pass runs before there is a view, so the size the text will be
+    // drawn at is only on the spannable. Reading it there is what keeps the
+    // bullet the same size in both passes -- and the paragraph the same height.
+    val measured = SpannableStringBuilder("- one")
+    measured.setSpan(AbsoluteSizeSpan(16, false), 0, measured.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+    MarkdownFormatter(RuntimeEnvironment.getApplication().assets, null, true)
+      .format(measured, bulletRanges, style, null)
+
+    assertEquals(
+      indentOf(format("- one", bulletRanges, display = true)),
+      indentOf(RenderModel.dump("- one", measured)),
+    )
+  }
+
+  @Test
+  fun `takes a box's direction from the code inside it`() {
+    assertTrue(codeBlock("```\nكود\n```").rightToLeft)
+    assertFalse(codeBlock("```\nconst a = 1\n```").rightToLeft)
+    // The whole block rather than its first line: a fence is punctuation and
+    // decides nothing, and it is typed in an input and stripped from a display,
+    // so a rule that stopped at the first line would answer differently in the
+    // two. `MarkdownFormatterTests.swift` pins the same three cases on iOS.
+    assertTrue(codeBlock("\nكود\n").rightToLeft)
+  }
+
   @Test
   fun `leaves plain text unspanned`() {
     val ssb = SpannableStringBuilder("no markdown here")
@@ -112,8 +198,38 @@ class MarkdownFormatterTest {
     assertEquals("(no spans)", RenderModel.dump("no markdown here", ssb))
   }
 
+  /** The box the formatter puts behind a whole string taken as one block. */
+  private fun codeBlock(markdown: String): MarkdownCodeBlockSpan {
+    val ssb = SpannableStringBuilder(markdown)
+    formatter.format(
+      ssb,
+      listOf(MarkdownRange("codeblock", 0, markdown.length, 0)),
+      style,
+      textPaint(),
+    )
+
+    return ssb.getSpans(0, ssb.length, MarkdownCodeBlockSpan::class.java).single()
+  }
+
   private fun textPaint() = TextPaint().apply { textSize = 16f }
 
+  private fun format(markdown: String, ranges: List<MarkdownRange>, display: Boolean): String {
+    val ssb = SpannableStringBuilder(markdown)
+    MarkdownFormatter(RuntimeEnvironment.getApplication().assets, null, display)
+      .format(ssb, ranges, style, textPaint())
+
+    return RenderModel.dump(markdown, ssb)
+  }
+
+  /** The leading margin the first `indent(first,rest)` in a dump reports. */
+  private fun indentOf(model: String): Int {
+    val indent = model.lineSequence()
+      .mapNotNull { INDENT.find(it) }
+      .firstOrNull()
+
+    return requireNotNull(indent) { "no indent in\n$model" }.groupValues[1].toInt()
+  }
+
   private fun rangesOf(array: JSONArray): List<MarkdownRange> =
     (0 until array.length()).map { i ->
       val range = array.getJSONObject(i)
@@ -131,6 +247,12 @@ class MarkdownFormatterTest {
     }.bufferedReader().readText()
 
   /** The same style the web harness pins, so the dumps are comparable. */
+  /**
+   * The style the decorators are handed: the shipped defaults, already resolved
+   * the way `mergeMarkdownStyleWithDefault` resolves them before one is sent --
+   * the per-axis lengths filled in from the single `padding` and `margin`, and
+   * each list's marker filled in from `syntax`.
+   */
   private fun styleMap(): ReadableMap {
     fun group(vararg entries: Pair<String, Any>): JavaOnlyMap = JavaOnlyMap().apply {
       entries.forEach { (key, value) ->
@@ -138,26 +260,51 @@ class MarkdownFormatterTest {
           is Int -> putInt(key, value)
           is Double -> putDouble(key, value)
           is String -> putString(key, value)
+          is JavaOnlyMap -> putMap(key, value)
         }
       }
     }
 
+    val marker = group("color" to 0xFF808080.toInt())
+
     return JavaOnlyMap().apply {
       putMap("syntax", group("color" to 0xFF808080.toInt()))
-      putMap("link", group("color" to 0xFF0000FF.toInt()))
-      putMap("heading", group("fontSize" to 38.0, "scale" to 0.85))
+      putMap("link", group("color" to 0xFF0000FF.toInt(), "textDecorationLine" to "underline"))
+      putMap("strong", group("fontWeight" to "bold"))
+      putMap("emphasis", group("fontStyle" to "italic"))
+      putMap("strikethrough", group("textDecorationLine" to "line-through"))
+      putMap("heading", group("fontSize" to 38.0, "fontWeight" to "bold", "scale" to 0.85))
       putMap("emoji", group("fontSize" to 16.0, "fontFamily" to "System"))
       putMap(
         "blockquote",
         group(
           "borderColor" to 0xFF808080.toInt(),
           "borderWidth" to 6.0,
-          "marginLeft" to 6.0,
-          "paddingLeft" to 6.0,
+          "borderRadius" to 0.0,
+          "marginStart" to 6.0,
+          "paddingStart" to 6.0,
+        ),
+      )
+      putMap(
+        "orderedList",
+        group(
+          "marginStart" to 6.0,
+          "paddingStart" to 18.0,
+          "markerScale" to 0.8,
+          "markerPadding" to 2.0,
+          "marker" to marker,
+        ),
+      )
+      putMap(
+        "unorderedList",
+        group(
+          "marginStart" to 6.0,
+          "paddingStart" to 18.0,
+          "markerScale" to 0.3,
+          "markerPadding" to 2.0,
+          "marker" to marker,
         ),
       )
-      putMap("orderedList", group("marginLeft" to 6.0, "paddingLeft" to 18.0))
-      putMap("unorderedList", group("marginLeft" to 6.0, "paddingLeft" to 18.0))
       putMap(
         "code",
         group(
@@ -165,6 +312,11 @@ class MarkdownFormatterTest {
           "fontSize" to 16.0,
           "color" to 0xFF000000.toInt(),
           "backgroundColor" to 0xFFD3D3D3.toInt(),
+          "borderRadius" to 4.0,
+          "paddingHorizontal" to 2.0,
+          "paddingVertical" to 2.0,
+          "marginHorizontal" to 2.0,
+          "marginVertical" to 2.0,
         ),
       )
       putMap(
@@ -174,30 +326,23 @@ class MarkdownFormatterTest {
           "fontSize" to 16.0,
           "color" to 0xFF000000.toInt(),
           "backgroundColor" to 0xFFD3D3D3.toInt(),
+          "borderRadius" to 4.0,
+          "paddingHorizontal" to 8.0,
+          "paddingVertical" to 8.0,
+          "marginHorizontal" to 4.0,
+          "marginVertical" to 4.0,
         ),
       )
       putMap(
-        "mentionHere",
-        group(
-          "color" to 0xFF008000.toInt(),
-          "backgroundColor" to 0xFF00FF00.toInt(),
-          "borderRadius" to 5.0,
-        ),
-      )
-      putMap(
-        "mentionUser",
+        "mention",
         group(
           "color" to 0xFF0000FF.toInt(),
           "backgroundColor" to 0xFF00FFFF.toInt(),
           "borderRadius" to 5.0,
-        ),
-      )
-      putMap(
-        "mentionReport",
-        group(
-          "color" to 0xFFFF0000.toInt(),
-          "backgroundColor" to 0xFFFFC0CB.toInt(),
-          "borderRadius" to 5.0,
+          "paddingHorizontal" to 2.0,
+          "paddingVertical" to 2.0,
+          "marginHorizontal" to 0.0,
+          "marginVertical" to 0.0,
         ),
       )
     }

package/android/src/test/java/app/getbullet/marcus/RenderModel.kt

@@ -6,13 +6,18 @@ import android.text.style.AbsoluteSizeSpan
 import android.text.style.BackgroundColorSpan
 import android.text.style.ForegroundColorSpan
 import android.text.style.LeadingMarginSpan
+import app.getbullet.marcus.spans.MarkdownAbsoluteLineHeightSpan
 import app.getbullet.marcus.spans.MarkdownBackgroundSpan
-import app.getbullet.marcus.spans.MarkdownBoldSpan
+import app.getbullet.marcus.spans.MarkdownBulletSpan
+import app.getbullet.marcus.spans.MarkdownCodeBlockSpan
 import app.getbullet.marcus.spans.MarkdownFontFamilySpan
+import app.getbullet.marcus.spans.MarkdownFontStyleSpan
+import app.getbullet.marcus.spans.MarkdownFontWeightSpan
 import app.getbullet.marcus.spans.MarkdownGapSpan
-import app.getbullet.marcus.spans.MarkdownItalicSpan
+import app.getbullet.marcus.spans.MarkdownLetterSpacingSpan
 import app.getbullet.marcus.spans.MarkdownLineHeightSpan
 import app.getbullet.marcus.spans.MarkdownStrikethroughSpan
+import app.getbullet.marcus.spans.MarkdownTextShadowSpan
 import app.getbullet.marcus.spans.MarkdownUnderlineSpan
 
 /**
@@ -51,15 +56,27 @@ object RenderModel {
 
   /** The shared attribute name for a span, or null for spans we do not model. */
   private fun describe(span: Any): String? = when (span) {
-    is MarkdownBoldSpan -> "bold"
-    is MarkdownItalicSpan -> "italic"
+    // Named by what the span resolves to rather than by its class, so the two
+    // weights the model already had a word for keep it: iOS reports a bold run
+    // as `bold` whether the style asked for `bold` or for `700`.
+    is MarkdownFontWeightSpan ->
+      if (span.weight >= 700) "bold" else "weight(${span.weight})"
+    is MarkdownFontStyleSpan -> if (span.italic) "italic" else "upright"
     is MarkdownStrikethroughSpan -> "strikethrough"
     is MarkdownUnderlineSpan -> "underline"
     is MarkdownFontFamilySpan -> "font-family"
-    is MarkdownLineHeightSpan -> "line-height"
+    is MarkdownLetterSpacingSpan -> "letter-spacing"
+    is MarkdownTextShadowSpan -> "shadow"
+    is MarkdownLineHeightSpan, is MarkdownAbsoluteLineHeightSpan -> "line-height"
     // The rounded rectangle drawn behind a mention, not a plain background
     // colour -- iOS models the same thing as `MarkdownTextBackground`.
     is MarkdownBackgroundSpan -> "background-shape"
+    // The box behind a whole code block, which iOS models as the
+    // `MarkdownCodeBlock` it stores under `.marcusCodeBlock`.
+    is MarkdownCodeBlockSpan -> "code-block"
+    // The circle drawn in place of an unordered item's marker, which iOS models
+    // as the `MarkdownListBullet` it stores under `.marcusListBullet`.
+    is MarkdownBulletSpan -> "bullet"
     // The space held open after a marker so the next container's gutter lands
     // between the two.
     is MarkdownGapSpan -> "gap"

package/android/src/test/java/app/getbullet/marcus/spans/MarkdownCodeBlockSpanTest.kt

@@ -0,0 +1,91 @@
+package app.getbullet.marcus.spans
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import org.junit.Assert.assertEquals
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.annotation.Config
+
+/**
+ * Where a code block's box lands, which is the one thing about it that a render
+ * model cannot show: the span is handed the line's two sides and decides between
+ * them itself.
+ *
+ * The path it draws is captured rather than the pixels it fills, so the numbers
+ * asserted here are the ones the span computed. iOS proves the same geometry the
+ * other way round, by counting coloured columns, in
+ * `MarkdownParagraphLayoutManagerTests` -- there the shapes are drawn straight
+ * onto the context with no path to intercept.
+ */
+@RunWith(RobolectricTestRunner::class)
+@Config(sdk = [34])
+class MarkdownCodeBlockSpanTest {
+
+  @Test
+  fun `boxes a left-to-right block from the left edge`() {
+    val bounds = box(rightToLeft = false)
+
+    assertEquals(LEADING_INSET, bounds.left, TOLERANCE)
+    assertEquals(WIDTH - MARGIN, bounds.right, TOLERANCE)
+  }
+
+  @Test
+  fun `boxes a right-to-left block from the right edge`() {
+    val bounds = box(rightToLeft = true)
+
+    // The padded edge is now the right one, and the bare margin is all that is
+    // left on the far side -- the mirror of the case above, on the same numbers.
+    assertEquals(MARGIN, bounds.left, TOLERANCE)
+    assertEquals(WIDTH - LEADING_INSET, bounds.right, TOLERANCE)
+  }
+
+  /** One line's fill, for a block whose lines start [LEADING_INSET] in. */
+  private fun box(rightToLeft: Boolean): RectF {
+    val span = MarkdownCodeBlockSpan(
+      backgroundColor = Color.RED,
+      borderRadius = 0f,
+      paddingVertical = 0f,
+      marginHorizontal = MARGIN,
+      marginVertical = 0f,
+      leadingInset = LEADING_INSET,
+      rightToLeft = rightToLeft,
+      blockStart = 0,
+      blockEnd = TEXT.length,
+    )
+
+    val canvas = PathRecordingCanvas()
+    span.drawBackground(
+      canvas, Paint(), 0, WIDTH.toInt(), 0, 16, 20, TEXT, 0, TEXT.length, 0,
+    )
+
+    return requireNotNull(canvas.bounds) { "the span drew nothing" }
+  }
+
+  /**
+   * A canvas that keeps the last path filled on it and paints none of it, so a
+   * rect can be read back without a bitmap to search.
+   */
+  private class PathRecordingCanvas :
+    Canvas(Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888)) {
+
+    var bounds: RectF? = null
+
+    override fun drawPath(path: Path, paint: Paint) {
+      bounds = RectF().also { path.computeBounds(it, true) }
+    }
+  }
+
+  private companion object {
+    const val WIDTH = 300f
+    const val MARGIN = 4f
+    const val LEADING_INSET = 22f
+    const val TOLERANCE = 0.5f
+    const val TEXT = "كود"
+  }
+}