react-native-jet-markdown 0.2.0-beta.7

package/android/src/main/java/com/jetmarkdown/JetMarkdownNative.kt

@@ -0,0 +1,114 @@
+package com.jetmarkdown
+
+import com.jetmarkdown.measure.MarkdownMeasurer
+import com.jetmarkdown.parser.AstDecoder
+import com.jetmarkdown.parser.MdNode
+
+/**
+ * JNI bridge into the shared C++ core. The natives are linked into the app's
+ * `libappmodules.so` (loaded by React Native at startup), so no explicit
+ * `System.loadLibrary` is required.
+ */
+object JetMarkdownNative {
+  @Volatile private var installed = false
+
+  fun ensureInstalled() {
+    if (!installed) {
+      synchronized(this) {
+        if (!installed) {
+          // libappmodules.so may not be loaded yet at package-construction
+          // time; callers retry from later lifecycle points.
+          installed = runCatching { installMeasurer(MarkdownMeasurer) }.isSuccess
+        }
+      }
+    }
+  }
+
+  fun parseMarkdown(markdown: String): MdNode {
+    return AstDecoder.decode(parse(markdown.toByteArray(Charsets.UTF_8)))
+  }
+
+
+  /** Decoded editor content: text, inline-mark runs, line blocks, links. */
+  class EditorContent(
+    val text: String,
+    /** Flat `[start, end, flags]` triples in UTF-16 offsets. */
+    val runs: IntArray,
+    /** Flat `[type, level]` pairs, one per text line. */
+    val lineBlocks: IntArray,
+    /** Flat `[start, end]` pairs, aligned with [linkUrls]. */
+    val linkRanges: IntArray,
+    val linkUrls: List<String>,
+  )
+
+  /**
+   * Editor: markdown from text + inline-mark runs + per-line blocks +
+   * links. Runs are flat `[start, end, flags]` triples in UTF-16 offsets
+   * (Spannable indices); lineBlocks are `[type, level]` pairs per line;
+   * links are `[start, end]` pairs with URLs joined by '\n'.
+   */
+  fun markdownFromEditor(
+    text: String,
+    runs: IntArray,
+    lineBlocks: IntArray,
+    linkRanges: IntArray = IntArray(0),
+    linkUrls: List<String> = emptyList(),
+  ): String {
+    return markdownFromEditorContent(
+      text.toByteArray(Charsets.UTF_8),
+      runs,
+      lineBlocks,
+      linkRanges,
+      linkUrls.joinToString("\n").toByteArray(Charsets.UTF_8),
+    ).toString(Charsets.UTF_8)
+  }
+
+  /**
+   * Editor: markdown parsed into editor content. The native payload is
+   * `[int32 runCount][triples][int32 lineCount][pairs][int32 linkCount]
+   * [(start, end, urlLen) triples][url bytes][utf8 text]`, little-endian.
+   */
+  fun editorFromMarkdown(markdown: String): EditorContent {
+    val bytes = editorFromMarkdownContent(markdown.toByteArray(Charsets.UTF_8))
+    val buffer = java.nio.ByteBuffer.wrap(bytes).order(java.nio.ByteOrder.LITTLE_ENDIAN)
+    val runs = IntArray(buffer.int * 3)
+    for (i in runs.indices) {
+      runs[i] = buffer.int
+    }
+    val lineBlocks = IntArray(buffer.int * 2)
+    for (i in lineBlocks.indices) {
+      lineBlocks[i] = buffer.int
+    }
+    val linkCount = buffer.int
+    val linkRanges = IntArray(linkCount * 2)
+    val urlLengths = IntArray(linkCount)
+    for (i in 0 until linkCount) {
+      linkRanges[i * 2] = buffer.int
+      linkRanges[i * 2 + 1] = buffer.int
+      urlLengths[i] = buffer.int
+    }
+    val linkUrls = ArrayList<String>(linkCount)
+    for (i in 0 until linkCount) {
+      val urlBytes = ByteArray(urlLengths[i])
+      buffer.get(urlBytes)
+      linkUrls.add(urlBytes.toString(Charsets.UTF_8))
+    }
+    val text = ByteArray(buffer.remaining())
+    buffer.get(text)
+    return EditorContent(text.toString(Charsets.UTF_8), runs, lineBlocks, linkRanges, linkUrls)
+  }
+
+  @JvmStatic private external fun parse(markdown: ByteArray): ByteArray
+
+  @JvmStatic private external fun markdownFromEditorContent(
+    text: ByteArray,
+    runs: IntArray,
+    lineBlocks: IntArray,
+    linkRanges: IntArray,
+    linkUrls: ByteArray,
+  ): ByteArray
+
+  @JvmStatic private external fun editorFromMarkdownContent(markdown: ByteArray): ByteArray
+
+  @JvmStatic private external fun installMeasurer(measurer: MarkdownMeasurer)
+}

package/android/src/main/java/com/jetmarkdown/JetMarkdownPackage.kt

@@ -0,0 +1,22 @@
+package com.jetmarkdown
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+import com.jetmarkdown.editor.JetMarkdownEditorManager
+
+class JetMarkdownViewPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    // Fabric measures shadow nodes before the first view instance exists;
+    // font/color resolution must work from the very first measure. The view
+    // managers re-install with the themed context on view creation.
+    com.jetmarkdown.style.PlatformColorResolver.install(reactContext)
+    return listOf(JetMarkdownViewManager(), JetMarkdownEditorManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}

package/android/src/main/java/com/jetmarkdown/JetMarkdownView.kt

@@ -0,0 +1,235 @@
+package com.jetmarkdown
+
+import android.content.Context
+import android.graphics.Color
+import android.view.ViewGroup
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.jetmarkdown.render.ContentCache
+import com.jetmarkdown.style.StyleConfig
+import com.jetmarkdown.views.BlockStackView
+import com.jetmarkdown.views.MarkdownHost
+
+/**
+ * Host view: one nested block stack. Fabric supplies the final frame (the
+ * C++ shadow node measured the same cached content), so onLayout only
+ * distributes frames.
+ */
+class JetMarkdownView(context: Context) : ViewGroup(context), MarkdownHost {
+  private var markdown: String = ""
+  private var stylesJson: String = ""
+
+  var allowFontScaling = true
+    set(value) {
+      if (field != value) {
+        field = value
+        boundKey = null
+        requestLayout()
+      }
+    }
+  private var boundKey: List<Any>? = null
+  private var boundWidth: Int = 0
+  private val stack = BlockStackView(context)
+
+  /** url -> [w, h] dp: from the images prop (wins) and loaded bitmaps. */
+  private val propImageSizes = HashMap<String, FloatArray>()
+  private val loadedImageSizes = HashMap<String, FloatArray>()
+  var stateWrapper: StateWrapper? = null
+
+  private val revealedSpoilers = HashSet<Int>()
+
+  init {
+    addView(stack)
+    stack.host = this
+  }
+
+  /** Fabric view recycling: clear all per-content state. */
+  fun resetForRecycle() {
+    markdown = ""
+    stylesJson = ""
+    allowFontScaling = true
+    stateWrapper = null
+    boundKey = null
+    boundWidth = 0
+    propImageSizes.clear()
+    loadedImageSizes.clear()
+    revealedSpoilers.clear()
+    stack.setBlocks(emptyList(), 0f)
+  }
+
+  override fun onImageIntrinsicSize(url: String, widthDp: Float, heightDp: Float) {
+    if (!propImageSizes.containsKey(url) && !loadedImageSizes.containsKey(url)) {
+      loadedImageSizes[url] = floatArrayOf(widthDp, heightDp)
+      publishImageSizes()
+      requestLayout()
+    }
+  }
+
+  override fun isSpoilerRevealed(id: Int): Boolean = revealedSpoilers.contains(id)
+
+  override fun toggleSpoiler(id: Int) {
+    if (!revealedSpoilers.add(id)) {
+      revealedSpoilers.remove(id)
+    }
+    invalidateDeep(this)
+  }
+
+  override fun onLinkPress(url: String) = emitUrlEvent("topLinkPress", url)
+
+  override fun onLinkLongPress(url: String) = emitUrlEvent("topLinkLongPress", url)
+
+  override fun onImagePress(url: String, xDp: Float, yDp: Float, widthDp: Float, heightDp: Float) =
+    emitEvent("topImagePress") {
+      putString("url", url)
+      putDouble("x", xDp.toDouble())
+      putDouble("y", yDp.toDouble())
+      putDouble("width", widthDp.toDouble())
+      putDouble("height", heightDp.toDouble())
+    }
+
+  private fun emitUrlEvent(name: String, url: String) =
+    emitEvent(name) { putString("url", url) }
+
+  private fun emitEvent(name: String, data: WritableMap.() -> Unit) {
+    val reactContext = context as? com.facebook.react.bridge.ReactContext ?: return
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id) ?: return
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    dispatcher.dispatchEvent(object : Event<Nothing>(surfaceId, id) {
+      override fun getEventName(): String = name
+
+      override fun getEventData(): WritableMap = Arguments.createMap().apply(data)
+    })
+  }
+
+  private fun invalidateDeep(view: android.view.View) {
+    view.invalidate()
+    if (view is ViewGroup) {
+      for (i in 0 until view.childCount) {
+        invalidateDeep(view.getChildAt(i))
+      }
+    }
+  }
+
+  fun setImages(value: ReadableArray?) {
+    propImageSizes.clear()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        val entry = value.getMap(i) ?: continue
+        val url = entry.getString("url") ?: continue
+        propImageSizes[url] = floatArrayOf(
+          entry.getDouble("width").toFloat(),
+          entry.getDouble("height").toFloat(),
+        )
+      }
+    }
+    requestLayout()
+    invalidate()
+  }
+
+  // Pushes discovered sizes into the shadow-node state so measure() grows
+  // the component. The prop entries stay out (already known to C++).
+  private fun publishImageSizes() {
+    val wrapper = stateWrapper ?: return
+    val sizes = Arguments.createMap()
+    for ((url, size) in loadedImageSizes) {
+      val entry = Arguments.createMap()
+      entry.putDouble("width", size[0].toDouble())
+      entry.putDouble("height", size[1].toDouble())
+      sizes.putMap(url, entry)
+    }
+    val state = Arguments.createMap()
+    state.putMap("imageSizes", sizes)
+    wrapper.updateState(state)
+  }
+
+  private fun mergedImageSizes(): Map<String, FloatArray> {
+    if (loadedImageSizes.isEmpty() && propImageSizes.isEmpty()) {
+      return emptyMap()
+    }
+    val merged = HashMap<String, FloatArray>(loadedImageSizes)
+    merged.putAll(propImageSizes)
+    return merged
+  }
+
+  fun setMarkdown(value: String?) {
+    val next = value ?: ""
+    if (next != markdown) {
+      markdown = next
+      // Spoiler ids are render-order counters; carrying revealed indices
+      // into different content would pre-reveal the wrong spans.
+      revealedSpoilers.clear()
+      // Sizes learned for the old document may not apply to the new one.
+      loadedImageSizes.clear()
+      requestLayout()
+      invalidate()
+    }
+  }
+
+  fun setStylesJson(value: String?) {
+    val next = value ?: ""
+    if (next != stylesJson) {
+      stylesJson = next
+      requestLayout()
+      invalidate()
+    }
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    // Fabric passes exact dimensions computed by the shadow node.
+    setMeasuredDimension(
+      MeasureSpec.getSize(widthMeasureSpec),
+      MeasureSpec.getSize(heightMeasureSpec),
+    )
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    val density = resources.displayMetrics.density
+    // Must match the shadow node's LayoutContext::fontSizeMultiplier
+    // (Android's system font scale).
+    val fontScale =
+      if (allowFontScaling) resources.configuration.fontScale else 1.0f
+    val styles = StyleConfig.from(stylesJson)
+
+    setBackgroundColor(styles.backgroundColor ?: Color.TRANSPARENT)
+
+    val paddingLeftPx = (styles.paddingLeft * density).toInt()
+    val paddingRightPx = (styles.paddingRight * density).toInt()
+    val paddingTopPx = (styles.paddingTop * density).toInt()
+    val contentWidthPx = (r - l) - paddingLeftPx - paddingRightPx
+    if (contentWidthPx <= 0 || markdown.isEmpty()) {
+      stack.setBlocks(emptyList(), 0f)
+      boundKey = null
+      return
+    }
+
+    val content = ContentCache.get(markdown, stylesJson, fontScale)
+    val imageSizes = mergedImageSizes()
+    val layout = content.layoutFor(contentWidthPx, imageSizes)
+
+    val key = listOf(markdown, stylesJson, imageSizes.hashCode(), fontScale)
+    if (boundKey != key || boundWidth != contentWidthPx) {
+      boundKey = key
+      boundWidth = contentWidthPx
+      stack.setBlocks(layout.measured, content.gap)
+    }
+
+    val contentHeight =
+      (layout.totalHeightPx - (styles.paddingTop + styles.paddingBottom) * density).toInt()
+    stack.measure(
+      MeasureSpec.makeMeasureSpec(contentWidthPx, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(contentHeight, MeasureSpec.EXACTLY),
+    )
+    stack.layout(
+      paddingLeftPx,
+      paddingTopPx,
+      paddingLeftPx + contentWidthPx,
+      paddingTopPx + contentHeight,
+    )
+  }
+
+  override fun shouldDelayChildPressedState(): Boolean = false
+}

package/android/src/main/java/com/jetmarkdown/JetMarkdownViewManager.kt

@@ -0,0 +1,75 @@
+package com.jetmarkdown
+
+import com.jetmarkdown.style.PlatformColorResolver
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.JetMarkdownViewManagerDelegate
+import com.facebook.react.viewmanagers.JetMarkdownViewManagerInterface
+
+@ReactModule(name = JetMarkdownViewManager.NAME)
+class JetMarkdownViewManager : SimpleViewManager<JetMarkdownView>(),
+  JetMarkdownViewManagerInterface<JetMarkdownView> {
+  private val delegate: ViewManagerDelegate<JetMarkdownView> =
+    JetMarkdownViewManagerDelegate(this)
+
+  init {
+    JetMarkdownNative.ensureInstalled()
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<JetMarkdownView> = delegate
+
+  override fun getName(): String = NAME
+
+  public override fun createViewInstance(context: ThemedReactContext): JetMarkdownView {
+    JetMarkdownNative.ensureInstalled()
+    PlatformColorResolver.install(context)
+    return JetMarkdownView(context)
+  }
+
+  @ReactProp(name = "allowFontScaling")
+  override fun setAllowFontScaling(view: JetMarkdownView?, value: Boolean) {
+    view?.allowFontScaling = value
+  }
+
+  @ReactProp(name = "markdown")
+  override fun setMarkdown(view: JetMarkdownView?, value: String?) {
+    view?.setMarkdown(value)
+  }
+
+  @ReactProp(name = "stylesJson")
+  override fun setStylesJson(view: JetMarkdownView?, value: String?) {
+    view?.setStylesJson(value)
+  }
+
+  @ReactProp(name = "images")
+  override fun setImages(view: JetMarkdownView?, value: ReadableArray?) {
+    view?.setImages(value)
+  }
+
+  override fun prepareToRecycleView(
+    reactContext: ThemedReactContext,
+    view: JetMarkdownView,
+  ): JetMarkdownView {
+    view.resetForRecycle()
+    return view
+  }
+
+  override fun updateState(
+    view: JetMarkdownView,
+    props: com.facebook.react.uimanager.ReactStylesDiffMap,
+    stateWrapper: StateWrapper?,
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
+  companion object {
+    const val NAME = "JetMarkdownView"
+  }
+}

package/android/src/main/java/com/jetmarkdown/editor/EditorSpans.kt

@@ -0,0 +1,217 @@
+package com.jetmarkdown.editor
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.Layout
+import android.text.TextPaint
+import android.text.style.LeadingMarginSpan
+import android.text.style.MetricAffectingSpan
+
+/** Inline mark bits; mirrors jetmarkdown::EditorMark in cpp/core/EditorRuns.h. */
+object EditorMarks {
+  const val BOLD = 1
+  const val ITALIC = 1 shl 1
+  const val STRIKETHROUGH = 1 shl 2
+  const val INLINE_CODE = 1 shl 3
+  const val SPOILER = 1 shl 4
+  const val SUPERSCRIPT = 1 shl 5
+  const val SUBSCRIPT = 1 shl 6
+
+  val ALL = intArrayOf(
+    BOLD, ITALIC, STRIKETHROUGH, INLINE_CODE, SPOILER, SUPERSCRIPT, SUBSCRIPT,
+  )
+}
+
+/** Per-line block types; mirrors jetmarkdown::EditorBlockType. */
+object EditorBlocks {
+  const val HEADING = 1
+  const val QUOTE = 2
+  const val CODE = 3
+  const val BULLET = 4
+  const val ORDERED = 5
+
+  fun pack(type: Int, level: Int): Int = (type shl 8) or level
+
+  fun type(packed: Int): Int = packed shr 8
+
+  fun level(packed: Int): Int = packed and 0xFF
+
+}
+
+/** Marker for every derived visual span; removed wholesale on rebuild. */
+interface EditorDerivedSpan
+
+/**
+ * Data-only source of truth for one inline mark over a range. Visual styling
+ * is carried by derived spans rebuilt from these after every change.
+ */
+class EditorMarkSpan(val mark: Int)
+
+/**
+ * Data-only linked range. Mentions carry an app-scheme URL and `atomic`
+ * (the token edits as one unit).
+ */
+class LinkDataSpan(val url: String, val atomic: Boolean)
+
+/** Derived link appearance. */
+class LinkDisplaySpan(private val color: Int) :
+  android.text.style.CharacterStyle(),
+  EditorDerivedSpan {
+  override fun updateDrawState(paint: TextPaint) {
+    paint.color = color
+    paint.isUnderlineText = true
+  }
+}
+
+/** Derived visual styling for the combined mark flags of a range. */
+class EditorDisplaySpan(private val flags: Int) : MetricAffectingSpan(), EditorDerivedSpan {
+  override fun updateMeasureState(paint: TextPaint) {
+    apply(paint)
+  }
+
+  override fun updateDrawState(paint: TextPaint) {
+    apply(paint)
+    if (flags and EditorMarks.STRIKETHROUGH != 0) {
+      paint.isStrikeThruText = true
+    }
+    if (flags and EditorMarks.INLINE_CODE != 0) {
+      paint.bgColor = 0x26808080
+    }
+    if (flags and EditorMarks.SPOILER != 0) {
+      paint.bgColor = 0x40595959
+    }
+  }
+
+  private fun apply(paint: TextPaint) {
+    var style = paint.typeface?.style ?: Typeface.NORMAL
+    if (flags and EditorMarks.BOLD != 0) {
+      style = style or Typeface.BOLD
+    }
+    if (flags and EditorMarks.ITALIC != 0) {
+      style = style or Typeface.ITALIC
+    }
+    val base =
+      if (flags and EditorMarks.INLINE_CODE != 0) Typeface.MONOSPACE else paint.typeface
+    paint.typeface = Typeface.create(base, style)
+
+    // Sup/sub match the viewer's 0.7 scaling.
+    if (flags and (EditorMarks.SUPERSCRIPT or EditorMarks.SUBSCRIPT) != 0) {
+      val size = paint.textSize
+      paint.textSize = size * 0.7f
+      if (flags and EditorMarks.SUPERSCRIPT != 0) {
+        paint.baselineShift -= (size * 0.33f).toInt()
+      } else {
+        paint.baselineShift += (size * 0.15f).toInt()
+      }
+    }
+  }
+}
+
+/** Heading lines scale up and embolden. */
+class HeadingDisplaySpan(level: Int) : MetricAffectingSpan(), EditorDerivedSpan {
+  private val scale = when (level) {
+    1 -> 2f
+    2 -> 1.5f
+    3 -> 1.25f
+    4 -> 1.125f
+    5 -> 1f
+    else -> 0.875f
+  }
+
+  override fun updateMeasureState(paint: TextPaint) = apply(paint)
+
+  override fun updateDrawState(paint: TextPaint) = apply(paint)
+
+  private fun apply(paint: TextPaint) {
+    paint.textSize = paint.textSize * scale
+    paint.isFakeBoldText = true
+  }
+}
+
+/**
+ * Code lines: monospace glyphs. The full-width background stripe is drawn
+ * by the view (spans cannot cover empty lines).
+ */
+class CodeLineDisplaySpan : MetricAffectingSpan(), EditorDerivedSpan {
+  override fun updateMeasureState(paint: TextPaint) {
+    paint.typeface = Typeface.MONOSPACE
+  }
+
+  override fun updateDrawState(paint: TextPaint) {
+    paint.typeface = Typeface.MONOSPACE
+  }
+}
+
+/** Quote lines: leading margin with a vertical bar. */
+class QuoteDisplaySpan(private val density: Float) : LeadingMarginSpan, EditorDerivedSpan {
+  override fun getLeadingMargin(first: Boolean): Int = (16 * density).toInt()
+
+  override fun drawLeadingMargin(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    first: Boolean,
+    layout: Layout,
+  ) {
+    val previous = paint.color
+    val width = 3 * density
+    paint.color = (paint.color and 0x00FFFFFF) or -0x67000000
+    val barLeft = x + dir * 4 * density
+    canvas.drawRect(barLeft, top.toFloat(), barLeft + dir * width, bottom.toFloat(), paint)
+    paint.color = previous
+  }
+}
+
+/** Line-height span the display refresh can remove wholesale. */
+class EditorLineHeightSpan(heightPx: Int) :
+  com.jetmarkdown.render.spans.MarkdownLineHeightSpan(heightPx),
+  EditorDerivedSpan
+
+/**
+ * No-op run splitter for a heading's newline: keeps it out of the
+ * heading's font run so the trailing empty line's caret doesn't inherit
+ * heading metrics.
+ */
+class NewlineResetSpan : MetricAffectingSpan(), EditorDerivedSpan {
+  override fun updateMeasureState(paint: TextPaint) = Unit
+
+  override fun updateDrawState(paint: TextPaint) = Unit
+}
+
+/** List lines: leading margin drawing the bullet or the item number. */
+class ListMarkerDisplaySpan(
+  private val marker: String,
+  private val density: Float,
+) : LeadingMarginSpan, EditorDerivedSpan {
+  override fun getLeadingMargin(first: Boolean): Int = (28 * density).toInt()
+
+  override fun drawLeadingMargin(
+    canvas: Canvas,
+    paint: Paint,
+    x: Int,
+    dir: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    first: Boolean,
+    layout: Layout,
+  ) {
+    if (!first) {
+      return
+    }
+    val width = paint.measureText(marker)
+    val position = x + dir * ((24 * density) - width - (6 * density))
+    canvas.drawText(marker, position, baseline.toFloat(), paint)
+  }
+}