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

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

@@ -669,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
         }
@@ -722,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

@@ -64,6 +64,8 @@ class NativeEditorExpoView(
     private var previousWindowCallback: Window.Callback? = 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
@@ -266,6 +268,8 @@ class NativeEditorExpoView(
     }
 
     fun focus() {
+        cancelPendingOutsideTapBlur()
+        cancelPendingKeyboardDismiss()
         richTextView.editorEditText.requestFocus()
         richTextView.editorEditText.post {
             val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
@@ -274,12 +278,55 @@ class NativeEditorExpoView(
     }
 
     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
@@ -296,6 +343,8 @@ class NativeEditorExpoView(
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
+        cancelPendingOutsideTapBlur()
+        cancelPendingKeyboardDismiss()
         uninstallOutsideTapBlurHandler()
         detachKeyboardToolbarIfNeeded()
     }
@@ -430,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
             }
         }
 
@@ -458,6 +510,7 @@ class NativeEditorExpoView(
 
     private fun isTouchOutsideEditor(event: MotionEvent): Boolean {
         if (isTouchInsideKeyboardToolbar(event)) {
+            markRecentToolbarTouch()
             return false
         }
         if (isTouchInsideStandaloneToolbar(event)) {
@@ -553,6 +606,7 @@ class NativeEditorExpoView(
     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? {

package/dist/EditorToolbar.js

@@ -136,6 +136,7 @@ const TOOLBAR_PADDING_H = 12;
 const TOOLBAR_PADDING_V = 4;
 const MENU_MARGIN = 8;
 const MENU_WIDTH = 192;
+const KEYBOARD_FRAME_REMEASURE_DELAYS_MS = [50, 150, 300];
 const ACTIVE_BG = 'rgba(0, 122, 255, 0.12)';
 const ACTIVE_COLOR = '#007AFF';
 const DEFAULT_COLOR = '#666666';
@@ -205,6 +206,8 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
     const [expandedGroupKey, setExpandedGroupKey] = (0, react_1.useState)(null);
     const [menuState, setMenuState] = (0, react_1.useState)(null);
     const toolbarInteractionActiveRef = (0, react_1.useRef)(false);
+    const framePublishAnimationFramesRef = (0, react_1.useRef)([]);
+    const framePublishTimeoutsRef = (0, react_1.useRef)([]);
     const registrationIdRef = (0, react_1.useRef)(null);
     if (registrationIdRef.current == null) {
         registrationIdRef.current = nextEditorToolbarRegistrationId++;
@@ -478,6 +481,23 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             registerEditorToolbarFrame(registrationId, { x, y, width, height });
         });
     }, [preserveEditorFocus]);
+    const cancelScheduledFramePublishes = (0, react_1.useCallback)(() => {
+        framePublishAnimationFramesRef.current.forEach((frame) => cancelAnimationFrame(frame));
+        framePublishAnimationFramesRef.current = [];
+        framePublishTimeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+        framePublishTimeoutsRef.current = [];
+    }, []);
+    const scheduleToolbarFramePublish = (0, react_1.useCallback)(() => {
+        if (!preserveEditorFocus) {
+            return;
+        }
+        cancelScheduledFramePublishes();
+        publishToolbarFrame();
+        framePublishAnimationFramesRef.current.push(requestAnimationFrame(publishToolbarFrame));
+        KEYBOARD_FRAME_REMEASURE_DELAYS_MS.forEach((delay) => {
+            framePublishTimeoutsRef.current.push(setTimeout(publishToolbarFrame, delay));
+        });
+    }, [cancelScheduledFramePublishes, preserveEditorFocus, publishToolbarFrame]);
     const handleToolbarLayout = (0, react_1.useCallback)(() => {
         requestAnimationFrame(publishToolbarFrame);
     }, [publishToolbarFrame]);
@@ -503,6 +523,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
     (0, react_1.useEffect)(() => {
         const registrationId = registrationIdRef.current;
         return () => {
+            cancelScheduledFramePublishes();
             if (toolbarInteractionActiveRef.current) {
                 toolbarInteractionActiveRef.current = false;
                 endEditorToolbarInteraction();
@@ -511,7 +532,22 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                 unregisterEditorToolbarFrame(registrationId);
             }
         };
-    }, []);
+    }, [cancelScheduledFramePublishes]);
+    (0, react_1.useEffect)(() => {
+        if (!preserveEditorFocus) {
+            cancelScheduledFramePublishes();
+            return;
+        }
+        const subscriptions = [
+            react_native_1.Keyboard.addListener('keyboardDidShow', scheduleToolbarFramePublish),
+            react_native_1.Keyboard.addListener('keyboardDidHide', scheduleToolbarFramePublish),
+            react_native_1.Keyboard.addListener('keyboardDidChangeFrame', scheduleToolbarFramePublish),
+        ];
+        return () => {
+            subscriptions.forEach((subscription) => subscription.remove());
+            cancelScheduledFramePublishes();
+        };
+    }, [cancelScheduledFramePublishes, preserveEditorFocus, scheduleToolbarFramePublish]);
     (0, react_1.useEffect)(() => {
         if (expandedGroupKey != null && !groupsByKey.has(expandedGroupKey)) {
             setExpandedGroupKey(null);

package/dist/NativeRichTextEditor.js

@@ -798,7 +798,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         });
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!(showToolbar && toolbarPlacement === 'inline' && isFocused && editable)) {
+        if (!(showToolbar && toolbarPlacement === 'inline' && editable)) {
             setInlineToolbarFrame(null);
             return;
         }
@@ -806,7 +806,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             updateToolbarFrame();
         });
         return () => cancelAnimationFrame(frame);
-    }, [editable, isFocused, showToolbar, toolbarPlacement, updateToolbarFrame]);
+    }, [editable, showToolbar, toolbarPlacement, updateToolbarFrame]);
     (0, react_1.useEffect)(() => {
         if (heightBehavior !== 'autoGrow') {
             setAutoGrowHeight(null);
@@ -1287,7 +1287,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         nativeViewStyleParts.push({ height: autoGrowHeight });
     }
     const nativeViewStyle = nativeViewStyleParts.length <= 1 ? nativeViewStyleParts[0] : nativeViewStyleParts;
-    const toolbarFrameJson = serializeToolbarFrames(isFocused && editable
+    const toolbarFrameJson = serializeToolbarFrames(editable
         ? [
             ...(toolbarPlacement === 'inline' && inlineToolbarFrame != null
                 ? [inlineToolbarFrame]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apollohg/react-native-prose-editor",
-    "version": "0.5.11",
+    "version": "0.5.12",
     "description": "Native rich text editor with Rust core for React Native",
     "license": "Apache-2.0",
     "homepage": "https://github.com/apollohg/react-native-prose-editor",