@apollohg/react-native-prose-editor 0.5.10 → 0.5.12

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

@@ -551,6 +551,18 @@ class EditorEditText @JvmOverloads constructor(
         }
     }
 
+    internal fun caretRect(): RectF? {
+        val textLayout = layout ?: return null
+        val selectionOffset = selectionEnd.takeIf { it >= 0 } ?: return null
+        val clampedOffset = selectionOffset.coerceIn(0, textLayout.text.length)
+        val line = textLayout.getLineForOffset(clampedOffset)
+        val caretLeft = textLayout.getPrimaryHorizontal(clampedOffset)
+        val left = totalPaddingLeft + caretLeft - scrollX
+        val top = totalPaddingTop + textLayout.getLineTop(line) - scrollY
+        val bottom = totalPaddingTop + textLayout.getLineBottom(line) - scrollY
+        return RectF(left, top.toFloat(), left + 1f, bottom.toFloat())
+    }
+
     // ── Input Handling: Text Commit ─────────────────────────────────────
 
     /**
@@ -657,7 +669,7 @@ class EditorEditText @JvmOverloads constructor(
             cursor > 0 &&
             currentText.getOrNull(cursor - 1) == EMPTY_BLOCK_PLACEHOLDER
         ) {
-            val scalarCursor = PositionBridge.utf16ToScalar(cursor - 1, currentText)
+            val scalarCursor = PositionBridge.utf16ToScalar(cursor, currentText)
             deleteBackwardAtSelectionScalarInRust(scalarCursor, scalarCursor)
             return
         }
@@ -710,7 +722,7 @@ class EditorEditText @JvmOverloads constructor(
             deleteRangeInRust(scalarStart, scalarEnd)
         } else if (start > 0) {
             if (currentText.getOrNull(start - 1) == EMPTY_BLOCK_PLACEHOLDER) {
-                val scalarCursor = PositionBridge.utf16ToScalar(start - 1, currentText)
+                val scalarCursor = PositionBridge.utf16ToScalar(start, currentText)
                 deleteBackwardAtSelectionScalarInRust(scalarCursor, scalarCursor)
                 return
             }

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

@@ -5,6 +5,7 @@ import android.content.Context
 import android.content.ContextWrapper
 import android.graphics.Rect
 import android.graphics.RectF
+import android.os.SystemClock
 import android.view.Gravity
 import android.view.MotionEvent
 import android.view.View
@@ -61,7 +62,10 @@ class NativeEditorExpoView(
     private var lastEmittedContentHeight = 0
     private var outsideTapWindowCallback: Window.Callback? = null
     private var previousWindowCallback: Window.Callback? = null
-    private var toolbarFrameInWindow: RectF? = null
+    private var toolbarFramesInWindow: List<RectF> = emptyList()
+    private var lastToolbarTouchUptimeMs: Long? = null
+    private var pendingOutsideTapBlur: Runnable? = null
+    private var pendingKeyboardDismiss: Runnable? = null
     private var addons = NativeEditorAddons(null)
     private var mentionQueryState: MentionQueryState? = null
     private var lastMentionEventJson: String? = null
@@ -91,7 +95,7 @@ class NativeEditorExpoView(
         ViewCompat.setOnApplyWindowInsetsListener(keyboardToolbarView) { _, insets ->
             currentImeBottom = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
             updateKeyboardToolbarLayout()
-            updateKeyboardToolbarVisibility()
+            updateAttachedKeyboardToolbarForInsets()
             insets
         }
 
@@ -101,6 +105,12 @@ class NativeEditorExpoView(
                 installOutsideTapBlurHandlerIfNeeded()
                 refreshMentionQuery()
             } else {
+                if (shouldPreserveFocusAfterToolbarTouch()) {
+                    richTextView.editorEditText.post {
+                        focus()
+                    }
+                    return@setOnFocusChangeListener
+                }
                 uninstallOutsideTapBlurHandler()
                 clearMentionQueryState()
             }
@@ -195,23 +205,52 @@ class NativeEditorExpoView(
         if (lastToolbarFrameJson == toolbarFrameJson) return
         lastToolbarFrameJson = toolbarFrameJson
         if (toolbarFrameJson.isNullOrBlank()) {
-            toolbarFrameInWindow = null
+            toolbarFramesInWindow = emptyList()
             return
         }
 
-        toolbarFrameInWindow = try {
+        toolbarFramesInWindow = try {
             val json = JSONObject(toolbarFrameJson)
-            RectF(
-                json.optDouble("x").toFloat(),
-                json.optDouble("y").toFloat(),
-                (json.optDouble("x") + json.optDouble("width")).toFloat(),
-                (json.optDouble("y") + json.optDouble("height")).toFloat()
-            )
+            val frames = json.optJSONArray("frames")
+            if (frames != null) {
+                buildList {
+                    for (index in 0 until frames.length()) {
+                        frames.optJSONObject(index)?.toToolbarFrame()?.let { add(it) }
+                    }
+                }
+            } else {
+                listOfNotNull(json.toToolbarFrame())
+            }
         } catch (_: Throwable) {
-            null
+            emptyList()
         }
     }
 
+    private fun JSONObject.toToolbarFrame(): RectF? {
+        val x = optDouble("x", Double.NaN)
+        val y = optDouble("y", Double.NaN)
+        val width = optDouble("width", Double.NaN)
+        val height = optDouble("height", Double.NaN)
+        if (
+            x.isNaN() || x.isInfinite() ||
+            y.isNaN() || y.isInfinite() ||
+            width.isNaN() || width.isInfinite() ||
+            height.isNaN() || height.isInfinite()
+        ) {
+            return null
+        }
+        if (width <= 0.0 || height <= 0.0) {
+            return null
+        }
+
+        return RectF(
+            x.toFloat(),
+            y.toFloat(),
+            (x + width).toFloat(),
+            (y + height).toFloat()
+        )
+    }
+
     fun setPendingEditorUpdateJson(editorUpdateJson: String?) {
         pendingEditorUpdateJson = editorUpdateJson
     }
@@ -229,17 +268,83 @@ class NativeEditorExpoView(
     }
 
     fun focus() {
+        cancelPendingOutsideTapBlur()
+        cancelPendingKeyboardDismiss()
         richTextView.editorEditText.requestFocus()
+        richTextView.editorEditText.post {
+            val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+            imm?.showSoftInput(richTextView.editorEditText, InputMethodManager.SHOW_IMPLICIT)
+        }
     }
 
     fun blur() {
+        cancelPendingOutsideTapBlur()
+        cancelPendingKeyboardDismiss()
+        clearRecentToolbarTouch()
         richTextView.editorEditText.clearFocus()
         val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
         imm?.hideSoftInputFromWindow(richTextView.editorEditText.windowToken, 0)
     }
 
+    private fun blurWithDeferredKeyboardDismiss() {
+        cancelPendingKeyboardDismiss()
+        clearRecentToolbarTouch()
+        richTextView.editorEditText.clearFocus()
+        val dismiss = Runnable {
+            pendingKeyboardDismiss = null
+            if (!richTextView.editorEditText.hasFocus()) {
+                val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+                imm?.hideSoftInputFromWindow(richTextView.editorEditText.windowToken, 0)
+            }
+        }
+        pendingKeyboardDismiss = dismiss
+        richTextView.editorEditText.post(dismiss)
+    }
+
+    private fun scheduleOutsideTapBlur() {
+        cancelPendingOutsideTapBlur()
+        val blur = Runnable {
+            pendingOutsideTapBlur = null
+            if (richTextView.editorEditText.hasFocus()) {
+                blurWithDeferredKeyboardDismiss()
+            }
+        }
+        pendingOutsideTapBlur = blur
+        richTextView.editorEditText.postDelayed(blur, OUTSIDE_TAP_BLUR_DELAY_MS)
+    }
+
+    private fun cancelPendingOutsideTapBlur() {
+        pendingOutsideTapBlur?.let {
+            richTextView.editorEditText.removeCallbacks(it)
+            pendingOutsideTapBlur = null
+        }
+    }
+
+    private fun cancelPendingKeyboardDismiss() {
+        pendingKeyboardDismiss?.let {
+            richTextView.editorEditText.removeCallbacks(it)
+            pendingKeyboardDismiss = null
+        }
+    }
+
+    fun getCaretRectJson(): String? {
+        if (width <= 0 || height <= 0) return null
+        val rect = richTextView.caretRect() ?: return null
+        val density = resources.displayMetrics.density
+        return JSONObject()
+            .put("x", rect.left / density)
+            .put("y", rect.top / density)
+            .put("width", rect.width() / density)
+            .put("height", rect.height() / density)
+            .put("editorWidth", width / density)
+            .put("editorHeight", height / density)
+            .toString()
+    }
+
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
+        cancelPendingOutsideTapBlur()
+        cancelPendingKeyboardDismiss()
         uninstallOutsideTapBlurHandler()
         detachKeyboardToolbarIfNeeded()
     }
@@ -374,14 +479,17 @@ class NativeEditorExpoView(
 
         val wrappedCallback = object : Window.Callback by currentCallback {
             override fun dispatchTouchEvent(event: MotionEvent): Boolean {
-                if (
+                val shouldBlur =
                     event.action == MotionEvent.ACTION_DOWN &&
                     richTextView.editorEditText.hasFocus() &&
                     isTouchOutsideEditor(event)
-                ) {
-                    blur()
+                val result = currentCallback.dispatchTouchEvent(event)
+                if (shouldBlur) {
+                    scheduleOutsideTapBlur()
+                } else if (event.action == MotionEvent.ACTION_DOWN) {
+                    cancelPendingOutsideTapBlur()
                 }
-                return currentCallback.dispatchTouchEvent(event)
+                return result
             }
         }
 
@@ -402,26 +510,88 @@ class NativeEditorExpoView(
 
     private fun isTouchOutsideEditor(event: MotionEvent): Boolean {
         if (isTouchInsideKeyboardToolbar(event)) {
+            markRecentToolbarTouch()
+            return false
+        }
+        if (isTouchInsideStandaloneToolbar(event)) {
+            markRecentToolbarTouch()
             return false
         }
-        val toolbarFrame = toolbarFrameInWindow
-        if (toolbarFrame != null) {
-            // toolbarFrame is in DP (from React Native's measureInWindow),
-            // but rawX/rawY are in pixels — convert before comparing.
-            val density = resources.displayMetrics.density
-            val frameInPx = RectF(
+        val rect = Rect()
+        richTextView.editorEditText.getGlobalVisibleRect(rect)
+        return !rect.contains(event.rawX.toInt(), event.rawY.toInt())
+    }
+
+    private fun markRecentToolbarTouch() {
+        lastToolbarTouchUptimeMs = SystemClock.uptimeMillis()
+    }
+
+    private fun clearRecentToolbarTouch() {
+        lastToolbarTouchUptimeMs = null
+    }
+
+    private fun shouldPreserveFocusAfterToolbarTouch(): Boolean {
+        val lastToolbarTouch = lastToolbarTouchUptimeMs ?: return false
+        val elapsedMs = SystemClock.uptimeMillis() - lastToolbarTouch
+        return elapsedMs in 0L..TOOLBAR_FOCUS_PRESERVE_MS
+    }
+
+    internal fun markRecentToolbarTouchForTesting() {
+        markRecentToolbarTouch()
+    }
+
+    internal fun shouldPreserveFocusAfterToolbarTouchForTesting(): Boolean =
+        shouldPreserveFocusAfterToolbarTouch()
+
+    private fun isTouchInsideStandaloneToolbar(event: MotionEvent): Boolean {
+        val visibleWindowFrame = Rect()
+        getWindowVisibleDisplayFrame(visibleWindowFrame)
+        return isPointInsideStandaloneToolbar(event.rawX, event.rawY, visibleWindowFrame)
+    }
+
+    internal fun isPointInsideStandaloneToolbarForTesting(
+        rawX: Float,
+        rawY: Float,
+        visibleWindowFrame: Rect
+    ): Boolean = isPointInsideStandaloneToolbar(rawX, rawY, visibleWindowFrame)
+
+    private fun isPointInsideStandaloneToolbar(
+        rawX: Float,
+        rawY: Float,
+        visibleWindowFrame: Rect
+    ): Boolean {
+        if (toolbarFramesInWindow.isEmpty()) {
+            return false
+        }
+        // toolbarFrame is in DP from React Native's measureInWindow. On Android
+        // that is window-relative after visible-window insets are subtracted,
+        // while rawX/rawY are screen pixels. Fabric/newer implementations may
+        // differ here, so accept both window-relative and raw-screen comparisons.
+        val density = resources.displayMetrics.density
+        val hitSlopPx = TOOLBAR_HIT_SLOP_DP * density
+        val eventX = rawX - visibleWindowFrame.left
+        val eventY = rawY - visibleWindowFrame.top
+        for (toolbarFrame in toolbarFramesInWindow) {
+            val windowFrameInPx = RectF(
                 toolbarFrame.left * density,
                 toolbarFrame.top * density,
                 toolbarFrame.right * density,
                 toolbarFrame.bottom * density
-            )
-            if (frameInPx.contains(event.rawX, event.rawY)) {
-                return false
+            ).apply {
+                inset(-hitSlopPx, -hitSlopPx)
+            }
+            val screenFrameInPx = RectF(windowFrameInPx).apply {
+                offset(visibleWindowFrame.left.toFloat(), visibleWindowFrame.top.toFloat())
+            }
+            if (
+                windowFrameInPx.contains(rawX, rawY) ||
+                windowFrameInPx.contains(eventX, eventY) ||
+                screenFrameInPx.contains(rawX, rawY)
+            ) {
+                return true
             }
         }
-        val rect = Rect()
-        richTextView.editorEditText.getGlobalVisibleRect(rect)
-        return !rect.contains(event.rawX.toInt(), event.rawY.toInt())
+        return false
     }
 
     private fun isTouchInsideKeyboardToolbar(event: MotionEvent): Boolean {
@@ -433,6 +603,12 @@ class NativeEditorExpoView(
         return rect.contains(event.rawX.toInt(), event.rawY.toInt())
     }
 
+    private companion object {
+        private const val TOOLBAR_HIT_SLOP_DP = 8f
+        private const val TOOLBAR_FOCUS_PRESERVE_MS = 750L
+        private const val OUTSIDE_TAP_BLUR_DELAY_MS = 100L
+    }
+
     private fun resolveActivity(context: Context): Activity? {
         var current: Context? = context
         while (current is ContextWrapper) {
@@ -658,6 +834,11 @@ class NativeEditorExpoView(
         keyboardToolbarView.layoutParams = params
     }
 
+    private fun updateAttachedKeyboardToolbarForInsets() {
+        keyboardToolbarView.visibility = if (currentImeBottom > 0) View.VISIBLE else View.INVISIBLE
+        updateEditorViewportInset()
+    }
+
     private fun updateKeyboardToolbarVisibility() {
         val shouldAttach =
             showsToolbar &&

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

@@ -380,6 +380,10 @@ class NativeEditorModule : Module() {
                 view.blur()
             }
 
+            AsyncFunction("getCaretRect") { view: NativeEditorExpoView ->
+                view.getCaretRectJson()
+            }
+
             AsyncFunction("applyEditorUpdate") { view: NativeEditorExpoView, updateJson: String ->
                 view.applyEditorUpdate(updateJson)
             }

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

@@ -11,6 +11,7 @@ import android.view.View
 import android.view.ViewOutlineProvider
 import android.widget.HorizontalScrollView
 import android.widget.LinearLayout
+import androidx.appcompat.R as AppCompatR
 import androidx.appcompat.widget.AppCompatButton
 import androidx.appcompat.widget.PopupMenu
 import androidx.appcompat.widget.AppCompatTextView
@@ -834,7 +835,7 @@ internal class EditorKeyboardToolbarView(context: Context) : HorizontalScrollVie
                     0.38f
                 )
                 active -> theme?.buttonActiveColor ?: resolveColorAttr(
-                    MaterialR.attr.colorPrimary,
+                    AppCompatR.attr.colorPrimary,
                     android.R.attr.textColorPrimary
                 )
                 else -> theme?.buttonColor ?: resolveColorAttr(

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

@@ -301,6 +301,16 @@ class RichTextEditorView @JvmOverloads constructor(
         )
     }
 
+    internal fun caretRect(): RectF? {
+        val rect = editorEditText.caretRect() ?: return null
+        return RectF(
+            editorViewport.left + editorScrollView.left + editorEditText.left + rect.left,
+            editorViewport.top + editorScrollView.top + editorEditText.top + rect.top - editorScrollView.scrollY,
+            editorViewport.left + editorScrollView.left + editorEditText.left + rect.right,
+            editorViewport.top + editorScrollView.top + editorEditText.top + rect.bottom - editorScrollView.scrollY
+        )
+    }
+
     internal fun maximumImageWidthPx(): Float {
         val availableWidth =
             maxOf(editorEditText.width, editorEditText.measuredWidth) -

package/dist/EditorToolbar.d.ts

@@ -91,6 +91,18 @@ export type EditorToolbarItem = EditorToolbarLeafItem | EditorToolbarGroupItem |
     type: 'separator';
     key?: string;
 };
+export interface EditorToolbarFrame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function isEditorToolbarFocusPreservationActive(): boolean;
+export declare function useEditorToolbarFrames(): readonly EditorToolbarFrame[];
+export declare function _setEditorToolbarFrameForTests(id: number, frame: EditorToolbarFrame | null): void;
+export declare function _resetEditorToolbarFrameRegistryForTests(): void;
+export declare function _beginEditorToolbarInteractionForTests(): void;
+export declare function _endEditorToolbarInteractionForTests(): void;
 export declare const DEFAULT_EDITOR_TOOLBAR_ITEMS: readonly EditorToolbarItem[];
 export interface EditorToolbarProps {
     /** Currently active marks and nodes from the Rust engine. */
@@ -145,5 +157,10 @@ export interface EditorToolbarProps {
     theme?: EditorToolbarTheme;
     /** Whether to render the built-in top separator line. */
     showTopBorder?: boolean;
+    /**
+     * Keep NativeRichTextEditor focused when this toolbar is rendered outside
+     * the editor wrapper. Defaults to true.
+     */
+    preserveEditorFocus?: boolean;
 }
-export declare function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems, theme, showTopBorder, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems, theme, showTopBorder, preserveEditorFocus, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;