@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

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

@@ -1,17 +1,24 @@
 package com.apollohg.editor
 
 import android.content.Context
+import android.os.Build
 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.view.ViewOutlineProvider
 import android.widget.HorizontalScrollView
 import android.widget.LinearLayout
 import androidx.appcompat.widget.AppCompatButton
 import androidx.appcompat.widget.AppCompatTextView
+import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.view.setPadding
+import com.google.android.material.R as MaterialR
+import com.google.android.material.color.DynamicColors
 import org.json.JSONObject
+import kotlin.math.roundToInt
 
 internal data class NativeToolbarState(
     val marks: Map<String, Boolean>,
@@ -91,6 +98,9 @@ internal enum class ToolbarDefaultIconId {
     italic,
     underline,
     strike,
+    link,
+    image,
+    blockquote,
     bulletList,
     orderedList,
     indentList,
@@ -103,6 +113,7 @@ internal enum class ToolbarDefaultIconId {
 
 internal enum class ToolbarItemKind {
     mark,
+    blockquote,
     list,
     command,
     node,
@@ -122,6 +133,9 @@ internal data class NativeToolbarIcon(
             ToolbarDefaultIconId.italic to "I",
             ToolbarDefaultIconId.underline to "U",
             ToolbarDefaultIconId.strike to "S",
+            ToolbarDefaultIconId.link to "🔗",
+            ToolbarDefaultIconId.image to "🖼",
+            ToolbarDefaultIconId.blockquote to "❝",
             ToolbarDefaultIconId.bulletList to "•≡",
             ToolbarDefaultIconId.orderedList to "1.",
             ToolbarDefaultIconId.indentList to "→",
@@ -136,6 +150,9 @@ internal data class NativeToolbarIcon(
             ToolbarDefaultIconId.italic to "format-italic",
             ToolbarDefaultIconId.underline to "format-underlined",
             ToolbarDefaultIconId.strike to "strikethrough-s",
+            ToolbarDefaultIconId.link to "link",
+            ToolbarDefaultIconId.image to "image",
+            ToolbarDefaultIconId.blockquote to "format-quote",
             ToolbarDefaultIconId.bulletList to "format-list-bulleted",
             ToolbarDefaultIconId.orderedList to "format-list-numbered",
             ToolbarDefaultIconId.indentList to "format-indent-increase",
@@ -279,6 +296,7 @@ internal data class NativeToolbarItem(
             NativeToolbarItem(ToolbarItemKind.mark, label = "Italic", icon = NativeToolbarIcon(defaultId = ToolbarDefaultIconId.italic), mark = "italic"),
             NativeToolbarItem(ToolbarItemKind.mark, label = "Underline", icon = NativeToolbarIcon(defaultId = ToolbarDefaultIconId.underline), mark = "underline"),
             NativeToolbarItem(ToolbarItemKind.mark, label = "Strikethrough", icon = NativeToolbarIcon(defaultId = ToolbarDefaultIconId.strike), mark = "strike"),
+            NativeToolbarItem(ToolbarItemKind.blockquote, label = "Blockquote", icon = NativeToolbarIcon(defaultId = ToolbarDefaultIconId.blockquote)),
             NativeToolbarItem(ToolbarItemKind.separator),
             NativeToolbarItem(ToolbarItemKind.list, label = "Bullet List", icon = NativeToolbarIcon(defaultId = ToolbarDefaultIconId.bulletList), listType = ToolbarListType.bulletList),
             NativeToolbarItem(ToolbarItemKind.list, label = "Ordered List", icon = NativeToolbarIcon(defaultId = ToolbarDefaultIconId.orderedList), listType = ToolbarListType.orderedList),
@@ -313,6 +331,11 @@ internal data class NativeToolbarItem(
                         val label = rawItem.optNullableString("label") ?: continue
                         parsed.add(NativeToolbarItem(type, key, label, icon, mark = mark))
                     }
+                    ToolbarItemKind.blockquote -> {
+                        val icon = NativeToolbarIcon.fromJson(rawItem.optJSONObject("icon")) ?: continue
+                        val label = rawItem.optNullableString("label") ?: continue
+                        parsed.add(NativeToolbarItem(type, key, label, icon))
+                    }
                     ToolbarItemKind.list -> {
                         val icon = NativeToolbarIcon.fromJson(rawItem.optJSONObject("icon")) ?: continue
                         val listType = runCatching {
@@ -358,6 +381,16 @@ internal data class NativeToolbarItem(
 }
 
 internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollView(context) {
+    private companion object {
+        private const val NATIVE_CONTAINER_HEIGHT_DP = 64
+        private const val NATIVE_CONTAINER_HORIZONTAL_PADDING_DP = 16
+        private const val NATIVE_CONTAINER_VERTICAL_PADDING_DP = 12
+        private const val NATIVE_BUTTON_SIZE_DP = 40
+        private const val NATIVE_BUTTON_ICON_SIZE_SP = 24f
+        private const val NATIVE_ITEM_SPACING_DP = 8
+        private const val NATIVE_GROUP_SPACING_DP = 12
+    }
+
     private data class ButtonBinding(
         val item: NativeToolbarItem,
         val button: AppCompatButton
@@ -366,6 +399,7 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
     var onPressItem: ((NativeToolbarItem) -> Unit)? = null
     var onSelectMentionSuggestion: ((NativeMentionSuggestion) -> Unit)? = null
 
+    private val themedContext: Context = DynamicColors.wrapContextIfAvailable(context)
     private val contentRow = LinearLayout(context)
     private var theme: EditorToolbarTheme? = null
     private var mentionTheme: EditorMentionTheme? = null
@@ -375,11 +409,18 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
     private val bindings = mutableListOf<ButtonBinding>()
     private val separators = mutableListOf<View>()
     private val mentionChips = mutableListOf<MentionSuggestionChipView>()
+    private val buttonBackgroundColors = mutableMapOf<AppCompatButton, Int>()
     private val density = resources.displayMetrics.density
+    internal var appliedAppearance: EditorToolbarAppearance = EditorToolbarAppearance.CUSTOM
+        private set
     internal var appliedChromeCornerRadiusPx: Float = 0f
         private set
     internal var appliedChromeStrokeWidthPx: Int = 0
         private set
+    internal var appliedChromeElevationPx: Float = 0f
+        private set
+    internal var appliedChromeColor: Int = Color.TRANSPARENT
+        private set
     internal var appliedButtonCornerRadiusPx: Float = 0f
         private set
     val isShowingMentionSuggestions: Boolean
@@ -390,13 +431,17 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
         overScrollMode = OVER_SCROLL_NEVER
         setBackgroundColor(Color.TRANSPARENT)
         clipToPadding = false
+        clipChildren = false
+        isFillViewport = true
 
         contentRow.orientation = LinearLayout.HORIZONTAL
-        contentRow.gravity = Gravity.CENTER_VERTICAL
+        contentRow.gravity = Gravity.START or Gravity.CENTER_VERTICAL
         contentRow.setPadding(dp(12))
+        contentRow.clipToPadding = false
+        contentRow.clipChildren = false
         addView(
             contentRow,
-            LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+            LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
         )
         rebuildContent()
     }
@@ -412,7 +457,7 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
         this.theme = theme
         updateChrome()
         separators.forEach { separator ->
-            separator.setBackgroundColor(theme?.separatorColor ?: Color.parseColor("#E5E5EA"))
+            separator.setBackgroundColor(resolveSeparatorColor())
         }
         bindings.forEach { binding ->
             updateButtonAppearance(
@@ -422,14 +467,14 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
             )
         }
         mentionChips.forEach { chip ->
-            chip.applyTheme(mentionTheme)
+            chip.applyTheme(mentionTheme, theme?.appearance ?: EditorToolbarAppearance.CUSTOM)
         }
     }
 
     fun applyMentionTheme(theme: EditorMentionTheme?) {
         mentionTheme = theme
         mentionChips.forEach { chip ->
-            chip.applyTheme(theme)
+            chip.applyTheme(theme, this.theme?.appearance ?: EditorToolbarAppearance.CUSTOM)
         }
     }
 
@@ -454,6 +499,18 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
         mentionChips.getOrNull(index)?.performClick()
     }
 
+    internal fun buttonAtForTesting(index: Int): AppCompatButton? =
+        bindings.getOrNull(index)?.button
+
+    internal fun buttonBackgroundColorAtForTesting(index: Int): Int? =
+        bindings.getOrNull(index)?.button?.let { buttonBackgroundColors[it] }
+
+    internal fun mentionChipAtForTesting(index: Int): MentionSuggestionChipView? =
+        mentionChips.getOrNull(index)
+
+    internal fun separatorAtForTesting(index: Int): View? =
+        separators.getOrNull(index)
+
     private fun rebuildContent() {
         bindings.clear()
         separators.clear()
@@ -475,40 +532,36 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
         for (item in compactItems(items)) {
             if (item.type == ToolbarItemKind.separator) {
                 val separator = View(context)
-                val params = LinearLayout.LayoutParams(dp(1), dp(22))
-                params.marginStart = dp(6)
-                params.marginEnd = dp(6)
-                separator.layoutParams = params
-                separator.setBackgroundColor(theme?.separatorColor ?: Color.parseColor("#E5E5EA"))
+                configureSeparator(separator)
                 separators.add(separator)
                 contentRow.addView(separator)
                 continue
             }
 
-            val button = AppCompatButton(context).apply {
-                val resolvedIcon = item.icon?.resolveForAndroid(context)
+            val button = AppCompatButton(themedContext).apply {
+                val resolvedIcon = item.icon?.resolveForAndroid(themedContext)
                     ?: NativeToolbarResolvedIcon("?")
                 text = resolvedIcon.text
                 typeface = resolvedIcon.typeface ?: Typeface.DEFAULT
-                textSize = 16f
-                minWidth = dp(36)
-                minimumWidth = dp(36)
-                minHeight = dp(36)
-                minimumHeight = dp(36)
                 gravity = Gravity.CENTER
-                setPadding(dp(10), dp(8), dp(10), dp(8))
                 background = GradientDrawable()
                 isAllCaps = false
                 includeFontPadding = false
                 contentDescription = item.label
                 setOnClickListener { onPressItem?.invoke(item) }
+                elevation = 0f
+                translationZ = 0f
+                stateListAnimator = null
+            }
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+                button.foreground = resolveDrawableAttr(android.R.attr.selectableItemBackgroundBorderless)
             }
             val params = LinearLayout.LayoutParams(
                 LinearLayout.LayoutParams.WRAP_CONTENT,
                 LinearLayout.LayoutParams.WRAP_CONTENT
             )
-            params.marginEnd = dp(6)
             button.layoutParams = params
+            applyButtonLayout(button, appearance = theme?.appearance ?: EditorToolbarAppearance.CUSTOM)
             bindings.add(ButtonBinding(item, button))
             contentRow.addView(button)
         }
@@ -517,7 +570,7 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
     private fun rebuildMentionSuggestions() {
         for (suggestion in mentionSuggestions) {
             val chip = MentionSuggestionChipView(context, suggestion).apply {
-                applyTheme(mentionTheme)
+                applyTheme(mentionTheme, theme?.appearance ?: EditorToolbarAppearance.CUSTOM)
                 setOnClickListener { onSelectMentionSuggestion?.invoke(suggestion) }
             }
             val params = LinearLayout.LayoutParams(
@@ -542,41 +595,135 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
     }
 
     private fun updateChrome() {
-        val cornerRadiusPx = (theme?.borderRadius ?: 0f) * density
-        val strokeWidthPx = ((theme?.borderWidth ?: 1f) * density).toInt().coerceAtLeast(1)
+        val appearance = theme?.appearance ?: EditorToolbarAppearance.CUSTOM
+        val cornerRadiusPx = (theme?.resolvedBorderRadius() ?: 0f) * density
+        val strokeWidthPx = if (appearance == EditorToolbarAppearance.NATIVE) {
+            0
+        } else {
+            ((theme?.resolvedBorderWidth() ?: 1f) * density).roundToInt().coerceAtLeast(1)
+        }
         val drawable = GradientDrawable().apply {
             shape = GradientDrawable.RECTANGLE
             cornerRadius = cornerRadiusPx
-            setColor(theme?.backgroundColor ?: Color.WHITE)
-            setStroke(strokeWidthPx, theme?.borderColor ?: Color.parseColor("#E5E5EA"))
+            setColor(
+                if (appearance == EditorToolbarAppearance.NATIVE) {
+                    resolveColorAttr(
+                        MaterialR.attr.colorSurfaceContainer,
+                        MaterialR.attr.colorSurfaceContainerLow,
+                        MaterialR.attr.colorSurface,
+                        android.R.attr.colorBackground
+                    )
+                } else {
+                    theme?.backgroundColor ?: resolveColorAttr(
+                        MaterialR.attr.colorSurface,
+                        android.R.attr.colorBackground
+                    )
+                }
+            )
+            if (strokeWidthPx > 0) {
+                setStroke(strokeWidthPx, theme?.borderColor ?: resolveSeparatorColor())
+            }
         }
+        appliedAppearance = appearance
         appliedChromeCornerRadiusPx = cornerRadiusPx
         appliedChromeStrokeWidthPx = strokeWidthPx
+        appliedChromeElevationPx = 0f
+        appliedChromeColor = if (appearance == EditorToolbarAppearance.NATIVE) {
+            resolveColorAttr(
+                MaterialR.attr.colorSurfaceContainer,
+                MaterialR.attr.colorSurfaceContainerLow,
+                MaterialR.attr.colorSurface,
+                android.R.attr.colorBackground
+            )
+        } else {
+            theme?.backgroundColor ?: resolveColorAttr(
+                MaterialR.attr.colorSurface,
+                android.R.attr.colorBackground
+            )
+        }
         background = drawable
-        elevation = 0f
+        outlineProvider = ViewOutlineProvider.BACKGROUND
+        clipToOutline = cornerRadiusPx > 0f
+        elevation = appliedChromeElevationPx
+        updateContainerLayout(appearance)
+        separators.forEach(::configureSeparator)
     }
 
     private fun updateButtonAppearance(button: AppCompatButton, enabled: Boolean, active: Boolean) {
-        val textColor = when {
-            !enabled -> theme?.buttonDisabledColor ?: Color.parseColor("#C7C7CC")
-            active -> theme?.buttonActiveColor ?: Color.parseColor("#007AFF")
-            else -> theme?.buttonColor ?: Color.parseColor("#666666")
+        val appearance = theme?.appearance ?: EditorToolbarAppearance.CUSTOM
+        applyButtonLayout(button, appearance)
+        val textColor = if (appearance == EditorToolbarAppearance.NATIVE) {
+            when {
+                !enabled -> withAlpha(
+                    resolveColorAttr(
+                        MaterialR.attr.colorOnSurface,
+                        android.R.attr.textColorPrimary
+                    ),
+                    0.38f
+                )
+                active -> resolveColorAttr(
+                    MaterialR.attr.colorOnSecondaryContainer,
+                    MaterialR.attr.colorOnPrimaryContainer,
+                    MaterialR.attr.colorOnSurface,
+                    android.R.attr.textColorPrimary
+                )
+                else -> resolveColorAttr(
+                    MaterialR.attr.colorOnSurfaceVariant,
+                    MaterialR.attr.colorOnSurface,
+                    android.R.attr.textColorSecondary
+                )
+            }
+        } else {
+            when {
+                !enabled -> theme?.buttonDisabledColor ?: withAlpha(
+                    resolveColorAttr(MaterialR.attr.colorOnSurface, android.R.attr.textColorPrimary),
+                    0.38f
+                )
+                active -> theme?.buttonActiveColor ?: resolveColorAttr(
+                    MaterialR.attr.colorPrimary,
+                    android.R.attr.textColorPrimary
+                )
+                else -> theme?.buttonColor ?: resolveColorAttr(
+                    MaterialR.attr.colorOnSurfaceVariant,
+                    MaterialR.attr.colorOnSurface,
+                    android.R.attr.textColorSecondary
+                )
+            }
         }
-        val backgroundColor = if (active) {
-            theme?.buttonActiveBackgroundColor ?: Color.parseColor("#1F007AFF")
+        val backgroundColor = if (appearance == EditorToolbarAppearance.NATIVE) {
+            if (active) {
+                resolveColorAttr(
+                    MaterialR.attr.colorSecondaryContainer,
+                    MaterialR.attr.colorPrimaryContainer,
+                    MaterialR.attr.colorSurfaceVariant,
+                    android.R.attr.colorAccent
+                )
+            } else {
+                Color.TRANSPARENT
+            }
+        } else if (active) {
+            theme?.buttonActiveBackgroundColor ?: resolveColorAttr(
+                MaterialR.attr.colorPrimaryContainer,
+                MaterialR.attr.colorSecondaryContainer,
+                MaterialR.attr.colorSurfaceVariant,
+                android.R.attr.colorAccent
+            )
         } else {
             Color.TRANSPARENT
         }
-        val buttonCornerRadiusPx = (theme?.buttonBorderRadius ?: 6f) * density
+        val buttonCornerRadiusPx = (theme?.resolvedButtonBorderRadius() ?: 6f) * density
         val drawable = GradientDrawable().apply {
             shape = GradientDrawable.RECTANGLE
             cornerRadius = buttonCornerRadiusPx
             setColor(backgroundColor)
         }
         appliedButtonCornerRadiusPx = buttonCornerRadiusPx
+        buttonBackgroundColors[button] = backgroundColor
         button.background = drawable
         button.setTextColor(textColor)
-        button.alpha = if (enabled) 1f else 0.7f
+        button.alpha = if (enabled || appearance == EditorToolbarAppearance.NATIVE) 1f else 0.7f
+        button.refreshDrawableState()
+        button.invalidate()
     }
 
     private fun buttonState(
@@ -589,6 +736,10 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
                 val mark = item.mark.orEmpty()
                 Pair(state.allowedMarks.contains(mark), state.marks[mark] == true)
             }
+            ToolbarItemKind.blockquote -> Pair(
+                state.commands["toggleBlockquote"] == true,
+                state.nodes["blockquote"] == true
+            )
             ToolbarItemKind.list -> when (item.listType) {
                 ToolbarListType.bulletList -> Pair(
                     state.commands["wrapBulletList"] == true,
@@ -617,15 +768,133 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
     }
 
     private fun dp(value: Int): Int = (value * density).toInt()
+
+    private fun resolveColorAttr(vararg attrs: Int): Int =
+        resolveColorAttrOrNull(*attrs) ?: Color.TRANSPARENT
+
+    private fun resolveColorAttrOrNull(vararg attrs: Int): Int? {
+        val typedValue = TypedValue()
+        for (attr in attrs) {
+            if (!themedContext.theme.resolveAttribute(attr, typedValue, true)) {
+                continue
+            }
+            if (typedValue.resourceId != 0) {
+                AppCompatResources.getColorStateList(themedContext, 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 null
+    }
+
+    private fun resolveDrawableAttr(attr: Int) =
+        TypedValue().let { typedValue ->
+            if (!themedContext.theme.resolveAttribute(attr, typedValue, true) || typedValue.resourceId == 0) {
+                null
+            } else {
+                AppCompatResources.getDrawable(themedContext, typedValue.resourceId)
+            }
+        }
+
+    private fun resolveSeparatorColor(): Int =
+        theme?.separatorColor
+            ?: theme?.borderColor
+            ?: resolveColorAttr(
+                MaterialR.attr.colorOutlineVariant,
+                MaterialR.attr.colorOutline,
+                android.R.attr.textColorHint
+            )
+
+    private fun updateContainerLayout(appearance: EditorToolbarAppearance) {
+        val isNative = appearance == EditorToolbarAppearance.NATIVE
+        val horizontalPadding = dp(
+            if (isNative) {
+                NATIVE_CONTAINER_HORIZONTAL_PADDING_DP
+            } else {
+                12
+            }
+        )
+        val verticalPadding = dp(
+            if (isNative) {
+                NATIVE_CONTAINER_VERTICAL_PADDING_DP
+            } else {
+                12
+            }
+        )
+        contentRow.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
+        contentRow.gravity = if (isNative) {
+            Gravity.START or Gravity.CENTER_VERTICAL
+        } else {
+            Gravity.CENTER_VERTICAL
+        }
+        contentRow.minimumHeight = dp(
+            if (isNative) {
+                NATIVE_CONTAINER_HEIGHT_DP
+            } else {
+                0
+            }
+        )
+    }
+
+    private fun applyButtonLayout(button: AppCompatButton, appearance: EditorToolbarAppearance) {
+        val isNative = appearance == EditorToolbarAppearance.NATIVE
+        val sizePx = dp(if (isNative) NATIVE_BUTTON_SIZE_DP else 36)
+        button.textSize = if (isNative) NATIVE_BUTTON_ICON_SIZE_SP else 16f
+        button.minWidth = sizePx
+        button.minimumWidth = sizePx
+        button.minHeight = sizePx
+        button.minimumHeight = sizePx
+        button.setPadding(
+            if (isNative) 0 else dp(10),
+            if (isNative) 0 else dp(8),
+            if (isNative) 0 else dp(10),
+            if (isNative) 0 else dp(8)
+        )
+        (button.layoutParams as? LinearLayout.LayoutParams)?.let { params ->
+            params.marginEnd = dp(if (isNative) NATIVE_ITEM_SPACING_DP else 6)
+            button.layoutParams = params
+        }
+    }
+
+    private fun configureSeparator(separator: View) {
+        val appearance = theme?.appearance ?: EditorToolbarAppearance.CUSTOM
+        val params = if (appearance == EditorToolbarAppearance.NATIVE) {
+            LinearLayout.LayoutParams(dp(1), dp(24)).apply {
+                marginStart = dp(NATIVE_GROUP_SPACING_DP / 2)
+                marginEnd = dp(NATIVE_GROUP_SPACING_DP / 2)
+            }
+        } else {
+            LinearLayout.LayoutParams(dp(1), dp(22)).apply {
+                marginStart = dp(6)
+                marginEnd = dp(6)
+            }
+        }
+        separator.layoutParams = params
+        separator.setBackgroundColor(
+            if (appearance == EditorToolbarAppearance.NATIVE) {
+                withAlpha(resolveSeparatorColor(), 0.6f)
+            } else {
+                resolveSeparatorColor()
+            }
+        )
+    }
 }
 
-private class MentionSuggestionChipView(
+private 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,
     val suggestion: NativeMentionSuggestion
 ) : 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
 
     init {
@@ -671,15 +940,34 @@ private class MentionSuggestionChipView(
         applyTheme(null)
     }
 
-    fun applyTheme(theme: EditorMentionTheme?) {
+    fun applyTheme(
+        theme: EditorMentionTheme?,
+        toolbarAppearance: EditorToolbarAppearance = EditorToolbarAppearance.CUSTOM
+    ) {
         this.theme = theme
+        this.toolbarAppearance = toolbarAppearance
         val hasSubtitle = !suggestion.subtitle.isNullOrBlank()
         subtitleView.visibility = if (hasSubtitle) View.VISIBLE else View.GONE
         background = GradientDrawable().apply {
             shape = GradientDrawable.RECTANGLE
-            cornerRadius = (theme?.borderRadius ?: 12f) * density
-            setColor(theme?.backgroundColor ?: Color.parseColor("#F2F2F7"))
-            val strokeWidth = ((theme?.borderWidth ?: 0f) * density).toInt()
+            cornerRadius = (if (toolbarAppearance == EditorToolbarAppearance.NATIVE) 20f else (theme?.borderRadius ?: 12f)) * density
+            setColor(
+                if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+                    Color.TRANSPARENT
+                } else {
+                    theme?.backgroundColor ?: resolveColorAttr(
+                        MaterialR.attr.colorSurfaceContainerLow,
+                        MaterialR.attr.colorSurfaceVariant,
+                        MaterialR.attr.colorSurface,
+                        android.R.attr.colorBackground
+                    )
+                }
+            )
+            val strokeWidth = if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+                0
+            } else {
+                ((theme?.borderWidth ?: 0f) * density).toInt()
+            }
             if (strokeWidth > 0) {
                 setStroke(strokeWidth, theme?.borderColor ?: Color.TRANSPARENT)
             }
@@ -689,23 +977,93 @@ private class MentionSuggestionChipView(
 
     private fun updateAppearance(highlighted: Boolean) {
         val backgroundDrawable = background as? GradientDrawable
-        val backgroundColor = if (highlighted) {
-            theme?.optionHighlightedBackgroundColor ?: Color.parseColor("#1F007AFF")
+        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) {
+            theme?.optionHighlightedBackgroundColor ?: resolveColorAttr(
+                MaterialR.attr.colorSecondaryContainer,
+                MaterialR.attr.colorPrimaryContainer,
+                MaterialR.attr.colorSurfaceVariant,
+                android.R.attr.colorAccent
+            )
         } else {
-            theme?.backgroundColor ?: Color.parseColor("#F2F2F7")
+            theme?.backgroundColor ?: resolveColorAttr(
+                MaterialR.attr.colorSurfaceContainerLow,
+                MaterialR.attr.colorSurfaceVariant,
+                MaterialR.attr.colorSurface,
+                android.R.attr.colorBackground
+            )
         }
         backgroundDrawable?.setColor(backgroundColor)
         titleView.setTextColor(
-            if (highlighted) {
-                theme?.optionHighlightedTextColor ?: theme?.optionTextColor ?: Color.BLACK
+            if (toolbarAppearance == EditorToolbarAppearance.NATIVE && !highlighted) {
+                resolveColorAttr(
+                    MaterialR.attr.colorOnSurface,
+                    android.R.attr.textColorPrimary
+                )
+            } else if (highlighted) {
+                theme?.optionHighlightedTextColor
+                    ?: theme?.optionTextColor
+                    ?: resolveColorAttr(
+                        MaterialR.attr.colorOnSecondaryContainer,
+                        MaterialR.attr.colorOnPrimaryContainer,
+                        MaterialR.attr.colorOnSurface,
+                        android.R.attr.textColorPrimary
+                    )
             } else {
-                theme?.optionTextColor ?: theme?.textColor ?: Color.BLACK
+                theme?.optionTextColor
+                    ?: theme?.textColor
+                    ?: resolveColorAttr(
+                        MaterialR.attr.colorOnSurface,
+                        android.R.attr.textColorPrimary
+                    )
+            }
+        )
+        subtitleView.setTextColor(
+            if (toolbarAppearance == EditorToolbarAppearance.NATIVE) {
+                resolveColorAttr(
+                    MaterialR.attr.colorOnSurfaceVariant,
+                    android.R.attr.textColorSecondary
+                )
+            } else {
+                theme?.optionSecondaryTextColor ?: resolveColorAttr(
+                    MaterialR.attr.colorOnSurfaceVariant,
+                    android.R.attr.textColorSecondary
+                )
             }
         )
-        subtitleView.setTextColor(theme?.optionSecondaryTextColor ?: Color.DKGRAY)
     }
 
+    fun usesNativeAppearanceForTesting(): Boolean =
+        toolbarAppearance == EditorToolbarAppearance.NATIVE
+
     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
+    }
 }
 
 private fun JSONObject.optNullableString(key: String): String? {