@apollohg/react-native-rich-text-editor 2.0.0

package/android/src/main/java/com/apollohg/editor/ImageResizeOverlayView.kt

@@ -0,0 +1,266 @@
+package com.apollohg.editor
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Rect
+import android.graphics.RectF
+import android.os.Build
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+import kotlin.math.ceil
+import kotlin.math.floor
+import kotlin.math.max
+
+internal class ImageResizeOverlayView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : View(context, attrs, defStyleAttr) {
+    private enum class Corner {
+        TOP_LEFT,
+        TOP_RIGHT,
+        BOTTOM_LEFT,
+        BOTTOM_RIGHT
+    }
+
+    private data class DragState(
+        val corner: Corner,
+        val originalRect: RectF,
+        val docPos: Int,
+        val maximumWidthPx: Float,
+        var previewRect: RectF
+    )
+
+    private var editorView: RichTextEditorView? = null
+    private var currentGeometry: EditorEditText.SelectedImageGeometry? = null
+    private var dragState: DragState? = null
+
+    private val density = resources.displayMetrics.density
+    private val handleRadiusPx = 10f * density
+    private val handleTouchRadiusPx = 24f * density
+    private val minimumImageSizePx = 48f * density
+    private val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.parseColor("#0A84FF")
+        style = Paint.Style.STROKE
+        strokeWidth = max(2f, density)
+    }
+    private val handleFillPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.WHITE
+        style = Paint.Style.FILL
+    }
+    private val handleStrokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.parseColor("#0A84FF")
+        style = Paint.Style.STROKE
+        strokeWidth = max(2f, density)
+    }
+
+    init {
+        setWillNotDraw(false)
+        visibility = INVISIBLE
+    }
+
+    fun bind(editorView: RichTextEditorView) {
+        if (this.editorView !== editorView) cancelActiveResize()
+        this.editorView = editorView
+    }
+
+    fun refresh() {
+        val nextGeometry = editorView?.selectedImageGeometry()
+        if (nextGeometry == null) {
+            cancelActiveResize()
+            return
+        }
+        if (currentGeometry?.docPos != nextGeometry.docPos) cancelActiveResize()
+        currentGeometry = nextGeometry
+        visibility = VISIBLE
+        bringToFront()
+        updateSystemGestureExclusionRects()
+        invalidate()
+    }
+
+    fun cancelActiveResize() {
+        dragState = null
+        currentGeometry = null
+        parent?.requestDisallowInterceptTouchEvent(false)
+        visibility = INVISIBLE
+        updateSystemGestureExclusionRects()
+        invalidate()
+    }
+
+    fun visibleRectForTesting(): RectF? = currentGeometry?.rect?.let(::RectF)
+
+    fun simulateResizeForTesting(widthPx: Float, heightPx: Float) {
+        val geometry = currentGeometry ?: return
+        editorView?.resizeImage(geometry.docPos, widthPx, heightPx)
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        val geometry = currentGeometry ?: return
+        canvas.drawRoundRect(geometry.rect, 8f * density, 8f * density, borderPaint)
+        for (corner in Corner.entries) {
+            val center = handleCenter(corner, geometry.rect)
+            canvas.drawCircle(center.x, center.y, handleRadiusPx, handleFillPaint)
+            canvas.drawCircle(center.x, center.y, handleRadiusPx, handleStrokePaint)
+        }
+    }
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        val geometry = currentGeometry ?: return false
+
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                val corner = cornerAt(event.x, event.y, geometry.rect) ?: return false
+                dragState = DragState(
+                    corner = corner,
+                    originalRect = RectF(geometry.rect),
+                    docPos = geometry.docPos,
+                    maximumWidthPx = editorView?.maximumImageWidthPx() ?: geometry.rect.width(),
+                    previewRect = RectF(geometry.rect)
+                )
+                parent?.requestDisallowInterceptTouchEvent(true)
+                return true
+            }
+
+            MotionEvent.ACTION_MOVE -> {
+                val state = dragState ?: return false
+                val nextRect = resizedRect(
+                    originalRect = state.originalRect,
+                    corner = state.corner,
+                    deltaX = event.x - handleCenter(state.corner, state.originalRect).x,
+                    deltaY = event.y - handleCenter(state.corner, state.originalRect).y,
+                    maximumWidthPx = state.maximumWidthPx
+                )
+                state.previewRect = RectF(nextRect)
+                currentGeometry = EditorEditText.SelectedImageGeometry(state.docPos, nextRect)
+                updateSystemGestureExclusionRects()
+                invalidate()
+                return true
+            }
+
+            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+                val state = dragState ?: return false
+                if (event.actionMasked == MotionEvent.ACTION_UP) {
+                    editorView?.resizeImage(
+                        state.docPos,
+                        state.previewRect.width(),
+                        state.previewRect.height()
+                    )
+                }
+                dragState = null
+                parent?.requestDisallowInterceptTouchEvent(false)
+                post { refresh() }
+                return true
+            }
+        }
+
+        return false
+    }
+
+    override fun onDetachedFromWindow() {
+        cancelActiveResize()
+        super.onDetachedFromWindow()
+    }
+
+    override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
+        super.onSizeChanged(width, height, oldWidth, oldHeight)
+        updateSystemGestureExclusionRects()
+    }
+
+    private fun cornerAt(x: Float, y: Float, rect: RectF): Corner? =
+        Corner.entries.firstOrNull { corner ->
+            val center = handleCenter(corner, rect)
+            val dx = x - center.x
+            val dy = y - center.y
+            (dx * dx) + (dy * dy) <= handleTouchRadiusPx * handleTouchRadiusPx
+        }
+
+    private fun updateSystemGestureExclusionRects() {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
+        val geometry = currentGeometry
+        val nextRects = if (geometry == null || visibility != VISIBLE || width == 0 ||
+            height == 0
+        ) {
+            emptyList()
+        } else {
+            Corner.entries.map { corner ->
+                val center = handleCenter(corner, geometry.rect)
+                Rect(
+                    floor(center.x - handleTouchRadiusPx).toInt().coerceIn(0, width),
+                    floor(center.y - handleTouchRadiusPx).toInt().coerceIn(0, height),
+                    ceil(center.x + handleTouchRadiusPx).toInt().coerceIn(0, width),
+                    ceil(center.y + handleTouchRadiusPx).toInt().coerceIn(0, height)
+                )
+            }
+        }
+        if (systemGestureExclusionRects != nextRects) {
+            systemGestureExclusionRects = nextRects
+        }
+    }
+
+    private fun handleCenter(corner: Corner, rect: RectF) = when (corner) {
+        Corner.TOP_LEFT -> android.graphics.PointF(rect.left, rect.top)
+        Corner.TOP_RIGHT -> android.graphics.PointF(rect.right, rect.top)
+        Corner.BOTTOM_LEFT -> android.graphics.PointF(rect.left, rect.bottom)
+        Corner.BOTTOM_RIGHT -> android.graphics.PointF(rect.right, rect.bottom)
+    }
+
+    private fun anchorPoint(corner: Corner, rect: RectF) = when (corner) {
+        Corner.TOP_LEFT -> android.graphics.PointF(rect.right, rect.bottom)
+        Corner.TOP_RIGHT -> android.graphics.PointF(rect.left, rect.bottom)
+        Corner.BOTTOM_LEFT -> android.graphics.PointF(rect.right, rect.top)
+        Corner.BOTTOM_RIGHT -> android.graphics.PointF(rect.left, rect.top)
+    }
+
+    private fun resizedRect(
+        originalRect: RectF,
+        corner: Corner,
+        deltaX: Float,
+        deltaY: Float,
+        maximumWidthPx: Float?
+    ): RectF {
+        val aspectRatio = max(originalRect.width() / max(originalRect.height(), 1f), 0.1f)
+        val signedDx = if (corner == Corner.TOP_RIGHT ||
+            corner == Corner.BOTTOM_RIGHT
+        ) {
+            deltaX
+        } else {
+            -deltaX
+        }
+        val signedDy = if (corner == Corner.BOTTOM_LEFT ||
+            corner == Corner.BOTTOM_RIGHT
+        ) {
+            deltaY
+        } else {
+            -deltaY
+        }
+        val widthScale = (originalRect.width() + signedDx) / max(originalRect.width(), 1f)
+        val heightScale = (originalRect.height() + signedDy) / max(originalRect.height(), 1f)
+        val scale = max(
+            max(widthScale, heightScale),
+            minimumImageSizePx / max(originalRect.width(), 1f)
+        )
+        val unclampedWidth = max(minimumImageSizePx, originalRect.width() * scale)
+        val unclampedHeight = max(minimumImageSizePx / aspectRatio, unclampedWidth / aspectRatio)
+        val (width, height) = editorView?.let { boundEditor ->
+            maximumWidthPx?.let { maxWidth ->
+                boundEditor.clampImageSize(
+                    widthPx = unclampedWidth,
+                    heightPx = unclampedHeight,
+                    maximumWidthPx = maxWidth
+                )
+            } ?: boundEditor.clampImageSize(unclampedWidth, unclampedHeight)
+        } ?: (unclampedWidth to unclampedHeight)
+        val anchor = anchorPoint(corner, originalRect)
+
+        return when (corner) {
+            Corner.TOP_LEFT -> RectF(anchor.x - width, anchor.y - height, anchor.x, anchor.y)
+            Corner.TOP_RIGHT -> RectF(anchor.x, anchor.y - height, anchor.x + width, anchor.y)
+            Corner.BOTTOM_LEFT -> RectF(anchor.x - width, anchor.y, anchor.x, anchor.y + height)
+            Corner.BOTTOM_RIGHT -> RectF(anchor.x, anchor.y, anchor.x + width, anchor.y + height)
+        }
+    }
+}

package/android/src/main/java/com/apollohg/editor/ImeTextCoordinateMapper.kt

@@ -0,0 +1,102 @@
+package com.apollohg.editor
+
+import android.text.Annotation
+import android.text.NoCopySpan
+import android.text.Selection
+import android.text.SpannableString
+import android.text.Spanned
+
+internal class ImeTextCoordinateMapper private constructor(
+    val visibleText: CharSequence,
+    val generation: Long,
+    private val rawToImeOffsets: IntArray,
+    private val imeToRawBeforeOffsets: IntArray,
+    private val imeToRawAfterOffsets: IntArray
+) {
+    enum class Affinity {
+        BEFORE,
+        AFTER
+    }
+
+    fun rawToIme(offset: Int): Int = rawToImeOffsets[offset.coerceIn(0, rawToImeOffsets.lastIndex)]
+
+    fun imeToRaw(offset: Int, affinity: Affinity): Int {
+        val clamped = offset.coerceIn(0, imeToRawBeforeOffsets.lastIndex)
+        return when (affinity) {
+            Affinity.BEFORE -> imeToRawBeforeOffsets[clamped]
+            Affinity.AFTER -> imeToRawAfterOffsets[clamped]
+        }
+    }
+
+    companion object {
+        fun build(raw: CharSequence, generation: Long): ImeTextCoordinateMapper {
+            val rawToIme = IntArray(raw.length + 1)
+            val visible = StringBuilder(raw.length)
+            val generatedMarkers = BooleanArray(raw.length)
+            if (raw is Spanned) {
+                raw.getSpans(0, raw.length, Annotation::class.java)
+                    .filter { it.key == RenderBridge.NATIVE_LIST_MARKER_ANNOTATION }
+                    .forEach { marker ->
+                        for (offset in raw.getSpanStart(marker) until raw.getSpanEnd(marker)) {
+                            generatedMarkers[offset] = true
+                        }
+                    }
+            }
+            var visibleOffset = 0
+            rawToIme[0] = 0
+            for (rawOffset in raw.indices) {
+                if (!isInvisiblePlaceholder(raw[rawOffset]) && !generatedMarkers[rawOffset]) {
+                    visible.append(raw[rawOffset])
+                    visibleOffset += 1
+                }
+                rawToIme[rawOffset + 1] = visibleOffset
+            }
+
+            val imeToRawBefore = IntArray(visibleOffset + 1) { Int.MAX_VALUE }
+            val imeToRawAfter = IntArray(visibleOffset + 1) { -1 }
+            for (rawOffset in rawToIme.indices) {
+                val imeOffset = rawToIme[rawOffset]
+                imeToRawBefore[imeOffset] = minOf(imeToRawBefore[imeOffset], rawOffset)
+                imeToRawAfter[imeOffset] = maxOf(imeToRawAfter[imeOffset], rawOffset)
+            }
+
+            val visibleText = if (raw is Spanned) {
+                SpannableString(visible.toString()).apply {
+                    raw.getSpans(0, raw.length, Any::class.java).forEach { span ->
+                        val rawStart = raw.getSpanStart(span)
+                        val rawEnd = raw.getSpanEnd(span)
+                        val flags = raw.getSpanFlags(span)
+                        if (
+                            rawStart >= 0 &&
+                            rawEnd >= rawStart &&
+                            span !is NoCopySpan &&
+                            span !== Selection.SELECTION_START &&
+                            span !== Selection.SELECTION_END &&
+                            flags and Spanned.SPAN_COMPOSING == 0
+                        ) {
+                            setSpan(
+                                span,
+                                rawToIme[rawStart.coerceIn(0, raw.length)],
+                                rawToIme[rawEnd.coerceIn(0, raw.length)],
+                                flags
+                            )
+                        }
+                    }
+                }
+            } else {
+                visible.toString()
+            }
+
+            return ImeTextCoordinateMapper(
+                visibleText = visibleText,
+                generation = generation,
+                rawToImeOffsets = rawToIme,
+                imeToRawBeforeOffsets = imeToRawBefore,
+                imeToRawAfterOffsets = imeToRawAfter
+            )
+        }
+
+        private fun isInvisiblePlaceholder(character: Char): Boolean =
+            character == LayoutConstants.SYNTHETIC_PLACEHOLDER_CHARACTER[0]
+    }
+}

package/android/src/main/java/com/apollohg/editor/KeyboardToolbarImeAnimationController.kt

@@ -0,0 +1,101 @@
+package com.apollohg.editor
+
+import android.view.View
+import androidx.core.view.WindowInsetsAnimationCompat
+import androidx.core.view.WindowInsetsCompat
+
+internal class KeyboardToolbarImeAnimationController(
+    private val toolbarView: View,
+    private val onTargetImeBottomChanged: (Int) -> Unit,
+    private val onImeAnimationSettled: (Int) -> Unit
+) {
+    private var activeImeAnimation: WindowInsetsAnimationCompat? = null
+    private var displayedImeBottom = 0
+    private var startImeBottom = 0
+    private var targetImeBottom = 0
+
+    val animationCallback = object : WindowInsetsAnimationCompat.Callback(
+        DISPATCH_MODE_CONTINUE_ON_SUBTREE
+    ) {
+        override fun onPrepare(animation: WindowInsetsAnimationCompat) {
+            if (!animation.affectsIme()) return
+            activeImeAnimation = animation
+            startImeBottom = displayedImeBottom
+        }
+
+        override fun onStart(
+            animation: WindowInsetsAnimationCompat,
+            bounds: WindowInsetsAnimationCompat.BoundsCompat
+        ): WindowInsetsAnimationCompat.BoundsCompat {
+            if (animation !== activeImeAnimation) return bounds
+            updateToolbarForAnimatedImeBottom(startImeBottom)
+            return bounds
+        }
+
+        override fun onProgress(
+            insets: WindowInsetsCompat,
+            runningAnimations: MutableList<WindowInsetsAnimationCompat>
+        ): WindowInsetsCompat {
+            if (
+                activeImeAnimation != null &&
+                runningAnimations.any { it.affectsIme() }
+            ) {
+                updateToolbarForAnimatedImeBottom(insets.imeBottom())
+            }
+            return insets
+        }
+
+        override fun onEnd(animation: WindowInsetsAnimationCompat) {
+            if (animation !== activeImeAnimation) return
+            activeImeAnimation = null
+            settleAtTargetImeBottom()
+        }
+    }
+
+    fun onApplyWindowInsets(insets: WindowInsetsCompat) {
+        targetImeBottom = insets.imeBottom()
+        onTargetImeBottomChanged(targetImeBottom)
+        if (activeImeAnimation == null) {
+            settleAtTargetImeBottom()
+        } else if (startImeBottom > 0 || targetImeBottom > 0) {
+            toolbarView.visibility = View.VISIBLE
+        }
+    }
+
+    fun cancel() {
+        activeImeAnimation = null
+        displayedImeBottom = targetImeBottom
+        startImeBottom = targetImeBottom
+        toolbarView.translationY = 0f
+    }
+
+    fun reset() {
+        activeImeAnimation = null
+        displayedImeBottom = 0
+        startImeBottom = 0
+        targetImeBottom = 0
+        toolbarView.translationY = 0f
+    }
+
+    private fun updateToolbarForAnimatedImeBottom(animatedImeBottom: Int) {
+        displayedImeBottom = animatedImeBottom
+        toolbarView.translationY = (targetImeBottom - animatedImeBottom).toFloat()
+        if (displayedImeBottom > 0 || startImeBottom > 0 || targetImeBottom > 0) {
+            toolbarView.visibility = View.VISIBLE
+        }
+    }
+
+    private fun settleAtTargetImeBottom() {
+        displayedImeBottom = targetImeBottom
+        startImeBottom = targetImeBottom
+        toolbarView.translationY = 0f
+        toolbarView.visibility = if (targetImeBottom > 0) View.VISIBLE else View.INVISIBLE
+        onImeAnimationSettled(targetImeBottom)
+    }
+
+    private fun WindowInsetsAnimationCompat.affectsIme(): Boolean =
+        typeMask and WindowInsetsCompat.Type.ime() != 0
+
+    private fun WindowInsetsCompat.imeBottom(): Int =
+        getInsets(WindowInsetsCompat.Type.ime()).bottom
+}

package/android/src/main/java/com/apollohg/editor/MentionSuggestionChipView.kt

@@ -0,0 +1,234 @@
+package com.apollohg.editor
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.widget.LinearLayout
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.appcompat.widget.AppCompatTextView
+import androidx.core.view.setPadding
+import com.google.android.material.R as MaterialR
+import kotlin.math.roundToInt
+import org.json.JSONObject
+
+internal fun withAlpha(color: Int, alphaFraction: Float): Int {
+    val alpha = (alphaFraction.coerceIn(0f, 1f) * 255).roundToInt()
+    return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color))
+}
+
+internal class MentionSuggestionChipView(
+    context: Context,
+    suggestion: NativeMentionSuggestion,
+    trigger: String = "@"
+) : LinearLayout(context) {
+    private val titleView = AppCompatTextView(context)
+    private val subtitleView = AppCompatTextView(context)
+    private var theme: EditorMentionTheme? = null
+    private var toolbarAppearance: EditorToolbarAppearance = EditorToolbarAppearance.CUSTOM
+    private val density = resources.displayMetrics.density
+    var suggestion: NativeMentionSuggestion = suggestion
+        private set
+    private var trigger: String = trigger
+
+    init {
+        orientation = VERTICAL
+        gravity = Gravity.CENTER_VERTICAL
+        minimumHeight = dp(40)
+        setPadding(dp(12), dp(8), dp(12), dp(8))
+        isClickable = true
+        isFocusable = true
+
+        titleView.apply {
+            text = suggestion.displayLabel(trigger)
+            setTypeface(typeface, Typeface.BOLD)
+            textSize = 14f
+            includeFontPadding = false
+        }
+        addView(
+            titleView,
+            LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+        )
+
+        subtitleView.apply {
+            text = suggestion.subtitle
+            textSize = 12f
+            includeFontPadding = false
+            visibility = if (suggestion.subtitle.isNullOrBlank()) View.GONE else View.VISIBLE
+        }
+        addView(
+            subtitleView,
+            LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+        )
+
+        setOnTouchListener { _, motionEvent ->
+            when (motionEvent.actionMasked) {
+                android.view.MotionEvent.ACTION_DOWN,
+                android.view.MotionEvent.ACTION_MOVE -> updateAppearance(highlighted = true)
+
+                android.view.MotionEvent.ACTION_CANCEL,
+                android.view.MotionEvent.ACTION_UP -> updateAppearance(highlighted = false)
+            }
+            false
+        }
+
+        applyTheme(null)
+    }
+
+    fun updateSuggestion(suggestion: NativeMentionSuggestion, trigger: String) {
+        this.suggestion = suggestion
+        this.trigger = trigger
+        titleView.text = suggestion.displayLabel(trigger)
+        subtitleView.text = suggestion.subtitle
+        subtitleView.visibility =
+            if (suggestion.subtitle.isNullOrBlank()) View.GONE else View.VISIBLE
+    }
+
+    fun applyTheme(
+        theme: EditorMentionTheme?,
+        toolbarAppearance: EditorToolbarAppearance = EditorToolbarAppearance.CUSTOM
+    ) {
+        this.theme = theme
+        this.toolbarAppearance = toolbarAppearance
+        val option = theme?.suggestions?.option
+        val hasSubtitle = !suggestion.subtitle.isNullOrBlank()
+        subtitleView.visibility = if (hasSubtitle) View.VISIBLE else View.GONE
+        background = GradientDrawable().apply {
+            shape = GradientDrawable.RECTANGLE
+            cornerRadius =
+                (
+                    if (toolbarAppearance ==
+                        EditorToolbarAppearance.NATIVE
+                    ) {
+                        20f
+                    } else {
+                        (option?.borderRadius ?: 12f)
+                    }
+                    ) *
+                density
+            setColor(
+                if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+                    Color.TRANSPARENT
+                } else {
+                    option?.backgroundColor ?: resolveColorAttr(
+                        MaterialR.attr.colorSurfaceContainerLow,
+                        MaterialR.attr.colorSurfaceVariant,
+                        MaterialR.attr.colorSurface,
+                        android.R.attr.colorBackground
+                    )
+                }
+            )
+            val strokeWidth = if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+                0
+            } else {
+                ((option?.borderWidth ?: 0f) * density).toInt()
+            }
+            if (strokeWidth > 0) {
+                setStroke(strokeWidth, option?.borderColor ?: Color.TRANSPARENT)
+            }
+        }
+        updateAppearance(highlighted = false)
+    }
+
+    private fun updateAppearance(highlighted: Boolean) {
+        val optionTheme = theme?.suggestions?.option
+        val backgroundDrawable = background as? GradientDrawable
+        val backgroundColor = if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+            if (highlighted) {
+                resolveColorAttr(
+                    MaterialR.attr.colorSecondaryContainer,
+                    MaterialR.attr.colorPrimaryContainer,
+                    MaterialR.attr.colorSurfaceVariant,
+                    android.R.attr.colorAccent
+                )
+            } else {
+                Color.TRANSPARENT
+            }
+        } else if (highlighted) {
+            optionTheme?.highlightedBackgroundColor ?: resolveColorAttr(
+                MaterialR.attr.colorSecondaryContainer,
+                MaterialR.attr.colorPrimaryContainer,
+                MaterialR.attr.colorSurfaceVariant,
+                android.R.attr.colorAccent
+            )
+        } else {
+            optionTheme?.backgroundColor ?: resolveColorAttr(
+                MaterialR.attr.colorSurfaceContainerLow,
+                MaterialR.attr.colorSurfaceVariant,
+                MaterialR.attr.colorSurface,
+                android.R.attr.colorBackground
+            )
+        }
+        backgroundDrawable?.setColor(backgroundColor)
+        titleView.setTextColor(
+            if (toolbarAppearance == EditorToolbarAppearance.NATIVE && !highlighted) {
+                resolveColorAttr(
+                    MaterialR.attr.colorOnSurface,
+                    android.R.attr.textColorPrimary
+                )
+            } else if (highlighted) {
+                optionTheme?.highlightedTextColor
+                    ?: optionTheme?.textColor
+                    ?: resolveColorAttr(
+                        MaterialR.attr.colorOnSecondaryContainer,
+                        MaterialR.attr.colorOnPrimaryContainer,
+                        MaterialR.attr.colorOnSurface,
+                        android.R.attr.textColorPrimary
+                    )
+            } else {
+                optionTheme?.textColor
+                    ?: resolveColorAttr(
+                        MaterialR.attr.colorOnSurface,
+                        android.R.attr.textColorPrimary
+                    )
+            }
+        )
+        subtitleView.setTextColor(
+            if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+                resolveColorAttr(
+                    MaterialR.attr.colorOnSurfaceVariant,
+                    android.R.attr.textColorSecondary
+                )
+            } else {
+                optionTheme?.secondaryTextColor ?: resolveColorAttr(
+                    MaterialR.attr.colorOnSurfaceVariant,
+                    android.R.attr.textColorSecondary
+                )
+            }
+        )
+    }
+
+    fun usesNativeAppearanceForTesting(): Boolean =
+        toolbarAppearance == EditorToolbarAppearance.NATIVE
+
+    fun titleTextForTesting(): String = titleView.text.toString()
+
+    private fun dp(value: Int): Int = (value * density).toInt()
+
+    private fun resolveColorAttr(vararg attrs: Int): Int {
+        val typedValue = TypedValue()
+        for (attr in attrs) {
+            if (!context.theme.resolveAttribute(attr, typedValue, true)) {
+                continue
+            }
+            if (typedValue.resourceId != 0) {
+                AppCompatResources.getColorStateList(context, typedValue.resourceId)
+                    ?.defaultColor
+                    ?.let { return it }
+            } else if (typedValue.type in
+                TypedValue.TYPE_FIRST_COLOR_INT..TypedValue.TYPE_LAST_COLOR_INT
+            ) {
+                return typedValue.data
+            }
+        }
+        return Color.TRANSPARENT
+    }
+}
+
+internal fun NativeMentionSuggestion.displayLabel(trigger: String): String {
+    val label = this.label.trim()
+    return if (trigger.isNotEmpty() && !label.startsWith(trigger)) "$trigger$label" else label
+}