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

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

@@ -4,8 +4,10 @@ import android.content.ClipboardManager
 import android.content.Context
 import android.graphics.Typeface
 import android.graphics.Rect
+import android.graphics.RectF
 import android.text.Editable
 import android.text.Layout
+import android.text.Spanned
 import android.text.StaticLayout
 import android.text.TextWatcher
 import android.util.AttributeSet
@@ -16,6 +18,7 @@ import android.view.MotionEvent
 import android.view.inputmethod.EditorInfo
 import android.view.inputmethod.InputConnection
 import androidx.appcompat.widget.AppCompatEditText
+import kotlin.math.roundToInt
 import uniffi.editor_core.*  // UniFFI-generated bindings
 
 /**
@@ -48,6 +51,16 @@ class EditorEditText @JvmOverloads constructor(
     attrs: AttributeSet? = null,
     defStyleAttr: Int = android.R.attr.editTextStyle
 ) : AppCompatEditText(context, attrs, defStyleAttr) {
+    data class SelectedImageGeometry(
+        val docPos: Int,
+        val rect: RectF
+    )
+
+    private data class ImageSelectionRange(
+        val start: Int,
+        val end: Int
+    )
+
     /**
      * Listener interface for editor events, parallel to iOS's EditorTextViewDelegate.
      */
@@ -79,6 +92,7 @@ class EditorEditText @JvmOverloads constructor(
 
     /** Listener for editor events. */
     var editorListener: EditorListener? = null
+    var onSelectionOrContentMayChange: (() -> Unit)? = null
 
     /** The base font size in pixels used for unstyled text. */
     private var baseFontSize: Float = textSize
@@ -101,6 +115,7 @@ class EditorEditText @JvmOverloads constructor(
 
     var heightBehavior: EditorHeightBehavior = EditorHeightBehavior.FIXED
         private set
+    private var imageResizingEnabled = true
 
     private var contentInsets: EditorContentInsets? = null
     private var viewportBottomInsetPx: Int = 0
@@ -120,6 +135,7 @@ class EditorEditText @JvmOverloads constructor(
 
     private var lastHandledHardwareKeyCode: Int? = null
     private var lastHandledHardwareKeyDownTime: Long? = null
+    private var explicitSelectedImageRange: ImageSelectionRange? = null
 
     init {
         // Configure for rich text editing.
@@ -190,6 +206,12 @@ class EditorEditText @JvmOverloads constructor(
     }
 
     override fun onTouchEvent(event: MotionEvent): Boolean {
+        if (event.actionMasked == MotionEvent.ACTION_DOWN && imageSpanHitAt(event.x, event.y) == null) {
+            clearExplicitSelectedImageRange()
+        }
+        if (handleImageTap(event)) {
+            return true
+        }
         if (heightBehavior == EditorHeightBehavior.FIXED) {
             val canScroll = canScrollVertically(-1) || canScrollVertically(1)
             if (canScroll) {
@@ -204,6 +226,10 @@ class EditorEditText @JvmOverloads constructor(
         return super.onTouchEvent(event)
     }
 
+    override fun performClick(): Boolean {
+        return super.performClick()
+    }
+
     private fun isRenderedContentEmpty(content: CharSequence? = text): Boolean {
         val renderedContent = content ?: return true
         if (renderedContent.isEmpty()) return true
@@ -321,6 +347,16 @@ class EditorEditText @JvmOverloads constructor(
         }
     }
 
+    fun setImageResizingEnabled(enabled: Boolean) {
+        if (imageResizingEnabled == enabled) return
+        imageResizingEnabled = enabled
+        if (!enabled) {
+            clearExplicitSelectedImageRange()
+        } else {
+            onSelectionOrContentMayChange?.invoke()
+        }
+    }
+
     fun resolveAutoGrowHeight(): Int {
         val laidOutTextHeight = if (isLaidOut) layout?.height else null
         if (laidOutTextHeight != null && laidOutTextHeight > 0) {
@@ -840,7 +876,12 @@ class EditorEditText @JvmOverloads constructor(
      */
     override fun onSelectionChanged(selStart: Int, selEnd: Int) {
         super.onSelectionChanged(selStart, selEnd)
+        val spannable = text as? Spanned
+        if (spannable != null && isExactImageSpanRange(spannable, selStart, selEnd)) {
+            explicitSelectedImageRange = ImageSelectionRange(selStart, selEnd)
+        }
         ensureSelectionVisible()
+        onSelectionOrContentMayChange?.invoke()
 
         if (isApplyingRustState || editorId == 0L) return
 
@@ -900,6 +941,49 @@ class EditorEditText @JvmOverloads constructor(
         )
     }
 
+    fun selectedImageGeometry(): SelectedImageGeometry? {
+        if (!imageResizingEnabled) return null
+        val spannable = text as? Spanned ?: return null
+        val selection = resolvedSelectedImageRange(spannable) ?: return null
+        val start = selection.start
+        val end = selection.end
+        val imageSpan = spannable
+            .getSpans(start, end, BlockImageSpan::class.java)
+            .firstOrNull() ?: return null
+        val spanStart = spannable.getSpanStart(imageSpan)
+        val spanEnd = spannable.getSpanEnd(imageSpan)
+        if (spanStart != start || spanEnd != end) return null
+
+        val textLayout = layout ?: return null
+        val currentText = text?.toString() ?: return null
+        val scalarPos = PositionBridge.utf16ToScalar(spanStart, currentText)
+        val docPos = if (editorId != 0L) {
+            editorScalarToDoc(editorId.toULong(), scalarPos.toUInt()).toInt()
+        } else {
+            0
+        }
+        val line = textLayout.getLineForOffset(spanStart.coerceAtMost(maxOf(spannable.length - 1, 0)))
+        val rect = resolvedImageRect(textLayout, imageSpan, spanStart, spanEnd)
+        return SelectedImageGeometry(
+            docPos = docPos,
+            rect = rect
+        )
+    }
+
+    fun resizeImageAtDocPos(docPos: Int, widthPx: Float, heightPx: Float) {
+        if (editorId == 0L) return
+        val density = resources.displayMetrics.density
+        val widthDp = maxOf(48, (widthPx / density).roundToInt())
+        val heightDp = maxOf(48, (heightPx / density).roundToInt())
+        val updateJSON = editorResizeImageAtDocPos(
+            editorId.toULong(),
+            docPos.toUInt(),
+            widthDp.toUInt(),
+            heightDp.toUInt()
+        )
+        applyUpdateJSON(updateJSON)
+    }
+
     private fun isSelectionInsideList(): Boolean {
         if (editorId == 0L) return false
 
@@ -954,12 +1038,14 @@ class EditorEditText @JvmOverloads constructor(
             baseFontSize,
             baseTextColor,
             theme,
-            resources.displayMetrics.density
+            resources.displayMetrics.density,
+            this
         )
 
         val previousScrollX = scrollX
         val previousScrollY = scrollY
 
+        explicitSelectedImageRange = null
         isApplyingRustState = true
         setText(spannable)
         lastAuthorizedText = spannable.toString()
@@ -974,6 +1060,7 @@ class EditorEditText @JvmOverloads constructor(
         if (notifyListener) {
             editorListener?.onEditorUpdate(updateJSON)
         }
+        onSelectionOrContentMayChange?.invoke()
         if (heightBehavior == EditorHeightBehavior.AUTO_GROW) {
             requestLayout()
         } else {
@@ -995,16 +1082,19 @@ class EditorEditText @JvmOverloads constructor(
             baseFontSize,
             baseTextColor,
             theme,
-            resources.displayMetrics.density
+            resources.displayMetrics.density,
+            this
         )
 
         val previousScrollX = scrollX
         val previousScrollY = scrollY
 
+        explicitSelectedImageRange = null
         isApplyingRustState = true
         setText(spannable)
         lastAuthorizedText = spannable.toString()
         isApplyingRustState = false
+        onSelectionOrContentMayChange?.invoke()
         if (heightBehavior == EditorHeightBehavior.AUTO_GROW) {
             requestLayout()
         } else {
@@ -1012,6 +1102,142 @@ class EditorEditText @JvmOverloads constructor(
         }
     }
 
+    private fun handleImageTap(event: MotionEvent): Boolean {
+        if (!imageResizingEnabled) {
+            return false
+        }
+        if (event.actionMasked != MotionEvent.ACTION_DOWN && event.actionMasked != MotionEvent.ACTION_UP) {
+            return false
+        }
+        val hit = imageSpanHitAt(event.x, event.y) ?: return false
+        requestFocus()
+        selectExplicitImageRange(hit.first, hit.second)
+        if (event.actionMasked == MotionEvent.ACTION_UP) {
+            performClick()
+        }
+        return true
+    }
+
+    private fun imageSpanHitAt(x: Float, y: Float): Pair<Int, Int>? {
+        val spannable = text as? Spanned ?: return null
+        imageSpanRangeNearTouchOffset(spannable, x, y)?.let { return it }
+        val textLayout = layout ?: return null
+        return imageSpanRectHit(spannable, textLayout, x, y)
+    }
+
+    private fun imageSpanRectHit(
+        spannable: Spanned,
+        textLayout: Layout,
+        x: Float,
+        y: Float
+    ): Pair<Int, Int>? {
+        val candidateSpans = spannable.getSpans(0, spannable.length, BlockImageSpan::class.java)
+        for (span in candidateSpans) {
+            val spanStart = spannable.getSpanStart(span)
+            val spanEnd = spannable.getSpanEnd(span)
+            if (spanStart < 0 || spanEnd <= spanStart) continue
+            val rect = resolvedImageRect(textLayout, span, spanStart, spanEnd)
+            if (rect.contains(x, y)) {
+                return spanStart to spanEnd
+            }
+        }
+        return null
+    }
+
+    override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
+        super.onFocusChanged(focused, direction, previouslyFocusedRect)
+        if (!focused) {
+            clearExplicitSelectedImageRange()
+        }
+    }
+
+    private fun selectExplicitImageRange(start: Int, end: Int) {
+        explicitSelectedImageRange = ImageSelectionRange(start, end)
+        if (selectionStart == start && selectionEnd == end) {
+            onSelectionOrContentMayChange?.invoke()
+            return
+        }
+        setSelection(start, end)
+    }
+
+    private fun clearExplicitSelectedImageRange() {
+        if (explicitSelectedImageRange == null) return
+        explicitSelectedImageRange = null
+        onSelectionOrContentMayChange?.invoke()
+    }
+
+    private fun resolvedSelectedImageRange(spannable: Spanned): ImageSelectionRange? {
+        explicitSelectedImageRange?.let { explicit ->
+            if (isExactImageSpanRange(spannable, explicit.start, explicit.end)) {
+                return explicit
+            }
+            explicitSelectedImageRange = null
+        }
+
+        val start = selectionStart
+        val end = selectionEnd
+        if (!isExactImageSpanRange(spannable, start, end)) return null
+        return ImageSelectionRange(start, end)
+    }
+
+    private fun isExactImageSpanRange(spannable: Spanned, start: Int, end: Int): Boolean {
+        if (start < 0 || end != start + 1) return false
+        val imageSpan = spannable
+            .getSpans(start, end, BlockImageSpan::class.java)
+            .firstOrNull() ?: return false
+        return spannable.getSpanStart(imageSpan) == start && spannable.getSpanEnd(imageSpan) == end
+    }
+
+    private fun imageSpanRangeNearTouchOffset(
+        spannable: Spanned,
+        x: Float,
+        y: Float
+    ): Pair<Int, Int>? {
+        val safeOffset = runCatching { getOffsetForPosition(x, y) }.getOrNull() ?: return null
+        val nearbyOffsets = linkedSetOf(
+            safeOffset,
+            (safeOffset - 1).coerceAtLeast(0),
+            (safeOffset + 1).coerceAtMost(spannable.length)
+        )
+        for (offset in nearbyOffsets) {
+            val searchStart = (offset - 1).coerceAtLeast(0)
+            val searchEnd = (offset + 1).coerceAtMost(spannable.length)
+            val imageSpan = spannable
+                .getSpans(searchStart, searchEnd, BlockImageSpan::class.java)
+                .firstOrNull() ?: continue
+            val spanStart = spannable.getSpanStart(imageSpan)
+            val spanEnd = spannable.getSpanEnd(imageSpan)
+            if (spanStart >= 0 && spanEnd > spanStart) {
+                return spanStart to spanEnd
+            }
+        }
+        return null
+    }
+
+    private fun resolvedImageRect(
+        textLayout: Layout,
+        imageSpan: BlockImageSpan,
+        spanStart: Int,
+        spanEnd: Int
+    ): RectF {
+        imageSpan.currentDrawRect()?.let { drawnRect ->
+            return drawnRect
+        }
+
+        val safeOffset = spanStart.coerceAtMost(maxOf((text?.length ?: 0) - 1, 0))
+        val line = textLayout.getLineForOffset(safeOffset)
+        val startHorizontal = textLayout.getPrimaryHorizontal(spanStart)
+        val endHorizontal = textLayout.getPrimaryHorizontal(spanEnd)
+        val (widthPx, heightPx) = imageSpan.currentSizePx()
+        val left = compoundPaddingLeft + minOf(startHorizontal, endHorizontal)
+        val right = compoundPaddingLeft + maxOf(
+            maxOf(startHorizontal, endHorizontal),
+            minOf(startHorizontal, endHorizontal) + widthPx
+        )
+        val top = extendedPaddingTop + textLayout.getLineBottom(line) - heightPx
+        return RectF(left, top.toFloat(), right, top + heightPx.toFloat())
+    }
+
     /**
      * Apply a selection from a parsed JSON selection object.
      *

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

@@ -0,0 +1,199 @@
+package com.apollohg.editor
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+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 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) {
+        this.editorView = editorView
+    }
+
+    fun refresh() {
+        currentGeometry = editorView?.selectedImageGeometry()
+        visibility = if (currentGeometry == null) INVISIBLE else VISIBLE
+        if (currentGeometry != null) {
+            bringToFront()
+        }
+        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)
+                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
+    }
+
+    private fun cornerAt(x: Float, y: Float, rect: RectF): Corner? {
+        return Corner.entries.firstOrNull { corner ->
+            val center = handleCenter(corner, rect)
+            val dx = x - center.x
+            val dy = y - center.y
+            (dx * dx) + (dy * dy) <= handleRadiusPx * handleRadiusPx * 2
+        }
+    }
+
+    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/NativeEditorExpoView.kt

@@ -170,6 +170,10 @@ class NativeEditorExpoView(
         updateKeyboardToolbarVisibility()
     }
 
+    fun setAllowImageResizing(allowImageResizing: Boolean) {
+        richTextView.setImageResizingEnabled(allowImageResizing)
+    }
+
     fun setToolbarItemsJson(toolbarItemsJson: String?) {
         keyboardToolbarView.setItems(NativeToolbarItem.fromJson(toolbarItemsJson))
     }

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

@@ -294,6 +294,9 @@ class NativeEditorModule : Module() {
             Prop("heightBehavior") { view: NativeEditorExpoView, heightBehavior: String ->
                 view.setHeightBehavior(heightBehavior)
             }
+            Prop("allowImageResizing") { view: NativeEditorExpoView, allowImageResizing: Boolean ->
+                view.setAllowImageResizing(allowImageResizing)
+            }
             Prop("themeJson") { view: NativeEditorExpoView, themeJson: String? ->
                 view.setThemeJson(themeJson)
             }

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

@@ -8,6 +8,7 @@ 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
@@ -98,6 +99,7 @@ internal enum class ToolbarDefaultIconId {
     underline,
     strike,
     link,
+    image,
     blockquote,
     bulletList,
     orderedList,
@@ -132,6 +134,7 @@ internal data class NativeToolbarIcon(
             ToolbarDefaultIconId.underline to "U",
             ToolbarDefaultIconId.strike to "S",
             ToolbarDefaultIconId.link to "🔗",
+            ToolbarDefaultIconId.image to "🖼",
             ToolbarDefaultIconId.blockquote to "❝",
             ToolbarDefaultIconId.bulletList to "•≡",
             ToolbarDefaultIconId.orderedList to "1.",
@@ -148,6 +151,7 @@ internal data class NativeToolbarIcon(
             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",
@@ -638,6 +642,8 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
             )
         }
         background = drawable
+        outlineProvider = ViewOutlineProvider.BACKGROUND
+        clipToOutline = cornerRadiusPx > 0f
         elevation = appliedChromeElevationPx
         updateContainerLayout(appearance)
         separators.forEach(::configureSeparator)