react-native-marcus 0.1.0 → 0.2.0

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownBulletSpan.kt

@@ -0,0 +1,78 @@
+package app.getbullet.marcus.spans
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.text.style.ReplacementSpan
+import androidx.annotation.ColorInt
+
+/**
+ * The bullet drawn in place of an unordered item's marker.
+ *
+ * The marker character stays in the string -- it is what a reader copies and
+ * what TalkBack announces -- and this takes over drawing it, which is what a
+ * `ReplacementSpan` is for: the circle is drawn in the advance the glyph would
+ * have taken, and the glyph itself never reaches the canvas.
+ *
+ * [diameter] comes from the base font size rather than from a length of its own,
+ * so a list marks itself in proportion to the prose it marks. The circle is
+ * centred on the line's own height rather than sat on the baseline, because a
+ * bullet marks the line rather than being a letter on it -- iOS draws it from
+ * the same two numbers in `MarkdownParagraphLayoutManager`.
+ *
+ * @param box the advance to report, which is the diameter as a whole pixel: the
+ *   formatter indents the text past exactly this, so the two have to agree.
+ */
+class MarkdownBulletSpan(
+  @ColorInt private val color: Int,
+  private val diameter: Float,
+  private val box: Int
+) : ReplacementSpan(), MarkdownSpan {
+
+  /**
+   * Room held open after the bullet, for the padding around a marker and for a
+   * nested container's gutter.
+   *
+   * Carried here rather than by a `MarkdownGapSpan` of its own because two
+   * replacement spans cannot share a character: an item written with nothing
+   * after its marker has no other character to put one on.
+   */
+  var trailing = 0f
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?
+  ): Int {
+    // The line keeps the height the text gives it: the circle is drawn inside
+    // what the line already is, never by pushing it open.
+    if (fm != null) {
+      val metrics = paint.fontMetricsInt
+      fm.top = metrics.top
+      fm.ascent = metrics.ascent
+      fm.descent = metrics.descent
+      fm.bottom = metrics.bottom
+      fm.leading = metrics.leading
+    }
+
+    return box + trailing.toInt()
+  }
+
+  override fun draw(
+    canvas: Canvas,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    x: Float,
+    top: Int,
+    y: Int,
+    bottom: Int,
+    paint: Paint
+  ) {
+    val originalColor = paint.color
+    paint.color = color
+    canvas.drawCircle(x + box / 2f, (top + bottom) / 2f, diameter / 2f, paint)
+    paint.color = originalColor
+  }
+}

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownCodeBlockSpan.kt

@@ -0,0 +1,177 @@
+package app.getbullet.marcus.spans
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.text.style.LineBackgroundSpan
+import android.text.style.LineHeightSpan
+import androidx.annotation.ColorInt
+import app.getbullet.marcus.MarkdownBackgroundPass
+
+/**
+ * The box behind a fenced or indented code block: one fill for the whole block,
+ * from its first line to its last.
+ *
+ * A background colour would follow the glyphs -- leaving the line spacing above
+ * and below each line unpainted, and stopping wherever the code happens to end
+ * -- so the fill is drawn per line here instead, across the width the line was
+ * laid out in. Two lines' rects abut on whole pixels, so what they read as is
+ * one box. iOS draws the same shape from the same numbers in
+ * `MarkdownTextLayoutFragment` and `MarkdownParagraphLayoutManager`.
+ *
+ * The vertical padding and margin are held open by the same span: [chooseHeight]
+ * grows the first line upwards and the last line downwards, so the box has room
+ * to breathe without overlapping the lines around it. The horizontal ones are
+ * indent, which is `MarkdownBlockIndentSpan`'s job -- one authority for how far
+ * a line starts in. Nothing is reserved on the far side: a paragraph cannot be
+ * given a trailing indent, so a line long enough to wrap reaches the padding
+ * there.
+ *
+ * @param leadingInset where the box's near edge sits, measured from the edge the
+ *   block's lines begin at
+ * @param rightToLeft which edge that is, and the one value here left readable:
+ *   nothing else about the box records the decision, so this is where a test
+ *   asks what the formatter settled on. A `LineBackgroundSpan` is handed the
+ *   line's two sides and nothing to tell them apart -- unlike a
+ *   `LeadingMarginSpan`, which the framework hands the direction outright -- so
+ *   this is settled while formatting and carried in, the way iOS carries the
+ *   same answer on `MarkdownCodeBlock.rightToLeft`.
+ * @param blockStart first character of the block, for the corners and the space
+ * @param blockEnd one past its last character
+ * @param pass set in an input, where the view paints the backgrounds itself so
+ *   that the caret stays visible; null in a `Text`, which has no caret and lets
+ *   the layout paint them
+ */
+class MarkdownCodeBlockSpan(
+  @ColorInt private val backgroundColor: Int,
+  private val borderRadius: Float,
+  private val paddingVertical: Float,
+  private val marginHorizontal: Float,
+  private val marginVertical: Float,
+  private val leadingInset: Float,
+  val rightToLeft: Boolean,
+  private val blockStart: Int,
+  private val blockEnd: Int,
+  @ColorInt private val borderColor: Int? = null,
+  private val borderWidth: Float = 0f,
+  private val pass: MarkdownBackgroundPass? = null
+) : MarkdownSpan, LineBackgroundSpan, LineHeightSpan {
+
+  private val rect = RectF()
+  private val path = Path()
+
+  override fun drawBackground(
+    canvas: Canvas,
+    paint: Paint,
+    left: Int,
+    right: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    lnum: Int
+  ) {
+    if (pass != null && !pass.painting) {
+      return
+    }
+
+    val opens = start <= blockStart
+    val closes = end >= blockEnd
+
+    // The insets are measured from the edge the block's lines begin at, so in a
+    // right-to-left block they swap sides: the padded one is the right, and the
+    // bare margin is all that is left on the far side.
+    val near = if (rightToLeft) marginHorizontal else leadingInset
+    val far = if (rightToLeft) leadingInset else marginHorizontal
+
+    rect.set(
+      left + near,
+      top + if (opens) marginVertical else 0f,
+      right - far,
+      bottom - if (closes) marginVertical else 0f,
+    )
+
+    if (rect.width() <= 0f || rect.height() <= 0f) {
+      return
+    }
+
+    path.reset()
+    path.addRoundRect(rect, radii(opens, closes), Path.Direction.CW)
+
+    val originalColor = paint.color
+    val originalStyle = paint.style
+    val originalWidth = paint.strokeWidth
+
+    paint.style = Paint.Style.FILL
+    paint.color = backgroundColor
+    canvas.drawPath(path, paint)
+
+    // Stroked at twice the width and clipped to the box, so the outer half is
+    // trimmed away and a bordered block covers exactly the room an unbordered
+    // one does. `MarkdownFormatter.swift` draws its border the same way.
+    if (borderColor != null && borderWidth > 0f) {
+      canvas.save()
+      canvas.clipPath(path)
+      paint.style = Paint.Style.STROKE
+      paint.strokeWidth = borderWidth * 2f
+      paint.color = borderColor
+      canvas.drawPath(path, paint)
+      canvas.restore()
+    }
+
+    paint.color = originalColor
+    paint.style = originalStyle
+    paint.strokeWidth = originalWidth
+  }
+
+  /**
+   * Room above the block's first line and below its last, for the padding
+   * inside the box and the margin outside it.
+   *
+   * Called for every line the span covers, so the two ends are picked out by
+   * where the line falls in the block rather than by the span's own extent.
+   */
+  override fun chooseHeight(
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    spanstartv: Int,
+    lineHeight: Int,
+    fm: Paint.FontMetricsInt
+  ) {
+    val inset = (paddingVertical + marginVertical).toInt()
+
+    if (start <= blockStart) {
+      fm.top -= inset
+      fm.ascent -= inset
+    }
+    if (end >= blockEnd) {
+      fm.descent += inset
+      fm.bottom += inset
+    }
+  }
+
+  /** Corners of one line's rect: only the ends of the block are rounded. */
+  private fun radii(roundedTop: Boolean, roundedBottom: Boolean): FloatArray {
+    val radii = FloatArray(8)
+
+    if (roundedTop) {
+      radii[1] = borderRadius // top-left
+      radii[0] = radii[1]
+      radii[3] = borderRadius // top-right
+      radii[2] = radii[3]
+    }
+
+    if (roundedBottom) {
+      radii[5] = borderRadius // bottom-right
+      radii[4] = radii[5]
+      radii[7] = borderRadius // bottom-left
+      radii[6] = radii[7]
+    }
+
+    return radii
+  }
+}

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownFontStyleSpan.kt

@@ -0,0 +1,32 @@
+package app.getbullet.marcus.spans
+
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.facebook.react.common.assets.ReactFontManager
+import com.facebook.react.views.text.ReactTypefaceUtils
+
+/**
+ * Draws a run upright or slanted, keeping the face and the weight it inherited.
+ *
+ * The weight has to be carried over by hand rather than left alone, because the
+ * only way to change one of the two is to ask for both: a typeface is created
+ * from a weight and a slant together.
+ */
+class MarkdownFontStyleSpan(fontStyle: String) : MetricAffectingSpan(), MarkdownSpan {
+
+  val italic: Boolean = ReactTypefaceUtils.parseFontStyle(fontStyle) == Typeface.ITALIC
+
+  override fun updateMeasureState(textPaint: TextPaint) = apply(textPaint)
+
+  override fun updateDrawState(tp: TextPaint) = apply(tp)
+
+  private fun apply(textPaint: TextPaint) {
+    val current = textPaint.typeface
+    val bold = ((current?.style ?: Typeface.NORMAL) and Typeface.BOLD) != 0
+    val weight =
+      if (bold) ReactFontManager.TypefaceStyle.BOLD else ReactFontManager.TypefaceStyle.NORMAL
+
+    textPaint.typeface = ReactFontManager.TypefaceStyle(weight, italic).apply(current)
+  }
+}

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownFontWeightSpan.kt

@@ -0,0 +1,34 @@
+package app.getbullet.marcus.spans
+
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.facebook.react.common.assets.ReactFontManager
+import com.facebook.react.views.text.ReactTypefaceUtils
+
+/**
+ * Draws a run at a given weight, keeping the face and the slant it inherited.
+ *
+ * React Native's own spelling of a weight -- `bold`, `600`, `semibold` -- is
+ * resolved by React Native, so a numeric weight lands on the nearest variant a
+ * font actually has rather than on a synthesised bold.
+ *
+ * [weight] is readable so the render model can name what this draws without
+ * reaching into the span: a weight of bold or heavier is the `bold` the shared
+ * model already had a word for.
+ */
+class MarkdownFontWeightSpan(fontWeight: String) : MetricAffectingSpan(), MarkdownSpan {
+
+  val weight: Int = ReactTypefaceUtils.parseFontWeight(fontWeight)
+
+  override fun updateMeasureState(textPaint: TextPaint) = apply(textPaint)
+
+  override fun updateDrawState(tp: TextPaint) = apply(tp)
+
+  private fun apply(textPaint: TextPaint) {
+    val current = textPaint.typeface
+    val italic = ((current?.style ?: Typeface.NORMAL) and Typeface.ITALIC) != 0
+
+    textPaint.typeface = ReactFontManager.TypefaceStyle(weight, italic).apply(current)
+  }
+}

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownGapSpan.kt

@@ -6,14 +6,30 @@ import android.text.style.ReplacementSpan
 import androidx.annotation.ColorInt
 
 /**
- * Widens the character it covers by [gap] pixels, leaving the glyph where it is.
+ * Widens the character it covers, leaving the glyph where it belongs.
  *
- * Applied to the last character of a container's marker so that the container
- * nested inside it can put its gutter between that marker and the next one.
+ * Two things need this. A container's marker holds [trailing] space after its
+ * last character, so the container nested inside it can put its gutter between
+ * that marker and the next one. And an inline run of code holds space on both
+ * sides -- [leading] on the character it starts with, [trailing] on the one it
+ * ends with -- so the box drawn behind it has room to breathe without sitting
+ * over the words either side of it.
+ *
+ * The character is drawn here rather than by the layout, because a replacement
+ * takes over its own drawing: metric spans still reach the paint, so whatever
+ * font and size the character had are already in it, but its colour has to be
+ * put back by hand. [color] is the colour that character should have -- a
+ * marker's syntax colour, or the colour of the code it belongs to.
+ *
+ * [trailing] is a `var` because two things can want space after the same
+ * character: the padding around a list's marker, and then the gutter of the
+ * container nested inside it. Only one replacement span on a character is ever
+ * asked for a width, so the second has to add to the first rather than join it.
  */
 class MarkdownGapSpan(
-  private val gap: Float,
-  @ColorInt private val syntaxColor: Int
+  var trailing: Float = 0f,
+  private val leading: Float = 0f,
+  @ColorInt private val color: Int
 ) : ReplacementSpan(), MarkdownSpan {
 
   override fun getSize(
@@ -32,7 +48,7 @@ class MarkdownGapSpan(
       fm.leading = metrics.leading
     }
 
-    return (paint.measureText(text, start, end) + gap).toInt()
+    return (leading + paint.measureText(text, start, end) + trailing).toInt()
   }
 
   override fun draw(
@@ -46,12 +62,9 @@ class MarkdownGapSpan(
     bottom: Int,
     paint: Paint
   ) {
-    // Spans inside a replacement are not applied, so the one colour a marker's
-    // last character can have is restored by hand. It is whitespace whenever the
-    // marker is followed by any, and a syntax character otherwise.
     val originalColor = paint.color
-    paint.color = syntaxColor
-    canvas.drawText(text, start, end, x, y.toFloat(), paint)
+    paint.color = color
+    canvas.drawText(text, start, end, x + leading, y.toFloat(), paint)
     paint.color = originalColor
   }
 }

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownLetterSpacingSpan.kt

@@ -0,0 +1,32 @@
+package app.getbullet.marcus.spans
+
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.facebook.react.uimanager.PixelUtil
+
+/**
+ * Opens the same amount of space after every character of a run.
+ *
+ * The style names a length, as it does everywhere else, and `Paint` wants a
+ * multiple of the text size, so the conversion happens against whatever size the
+ * run ended up being drawn at. A run given a larger font therefore keeps the
+ * spacing it asked for rather than a proportionally larger one, which is what
+ * `letterSpacing` means on the other two platforms.
+ *
+ * @param letterSpacing in dp, as it is written in a style
+ */
+class MarkdownLetterSpacingSpan(private val letterSpacing: Float) :
+  MetricAffectingSpan(), MarkdownSpan {
+
+  override fun updateMeasureState(textPaint: TextPaint) = apply(textPaint)
+
+  override fun updateDrawState(tp: TextPaint) = apply(tp)
+
+  private fun apply(textPaint: TextPaint) {
+    if (textPaint.textSize <= 0f) {
+      return
+    }
+
+    textPaint.letterSpacing = PixelUtil.toPixelFromDIP(letterSpacing) / textPaint.textSize
+  }
+}

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownTextShadowSpan.kt

@@ -0,0 +1,32 @@
+package app.getbullet.marcus.spans
+
+import android.text.TextPaint
+import android.text.style.CharacterStyle
+import androidx.annotation.ColorInt
+import com.facebook.react.uimanager.PixelUtil
+
+/**
+ * The shadow behind a run's glyphs.
+ *
+ * Not metric affecting: a shadow is painted outside the advance it belongs to
+ * and changes nothing about where the text sits, which is also how iOS treats
+ * `NSShadow` and how the browser treats `text-shadow`.
+ *
+ * The offset and the radius arrive in dp, as they are written in a style.
+ */
+class MarkdownTextShadowSpan(
+  @ColorInt private val color: Int,
+  private val offsetX: Float,
+  private val offsetY: Float,
+  private val radius: Float
+) : CharacterStyle(), MarkdownSpan {
+
+  override fun updateDrawState(tp: TextPaint) {
+    tp.setShadowLayer(
+      PixelUtil.toPixelFromDIP(radius),
+      PixelUtil.toPixelFromDIP(offsetX),
+      PixelUtil.toPixelFromDIP(offsetY),
+      color
+    )
+  }
+}

package/android/src/main/new_arch/CMakeLists.txt

@@ -43,6 +43,23 @@ target_link_libraries(
   ReactAndroid::reactnative
 )
 
+# `ParagraphProps.h`, which the paragraph shadow node pulls in, includes
+# `HostPlatformParagraphProps.h` -- a header React Native ships once per
+# platform, under an include root the prefab module does not put on the search
+# path. Add Android's, or including the paragraph at all fails to compile.
+get_target_property(
+  REACTNATIVE_INCLUDE_DIRS ReactAndroid::reactnative INTERFACE_INCLUDE_DIRECTORIES
+)
+
+foreach(include_dir ${REACTNATIVE_INCLUDE_DIRS})
+  set(HOST_PLATFORM_TEXT_DIR
+    "${include_dir}/react/renderer/components/text/platform/android"
+  )
+  if(EXISTS "${HOST_PLATFORM_TEXT_DIR}")
+    target_include_directories(${LIB_TARGET_NAME} PRIVATE "${HOST_PLATFORM_TEXT_DIR}")
+  endif()
+endforeach()
+
 if (ReactAndroid_VERSION_MINOR LESS_EQUAL 80)
   target_compile_options(
     ${LIB_TARGET_NAME}

package/android/src/main/new_arch/RNMarcusSpec.h

@@ -16,6 +16,7 @@
 #include <jsi/jsi.h>
 
 #include <react/renderer/components/RNMarcusSpec/MarcusTextInputDecoratorViewComponentDescriptor.h>
+#include <react/renderer/components/RNMarcusSpec/MarcusTextDecoratorViewComponentDescriptor.h>
 
 namespace facebook {
 namespace react {