From 9792e16c8f52b78a26978e528fd53064d526b0d0 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 12 May 2025 18:46:50 +0530
Subject: [PATCH] chore: add safe area padding to editor content + only send
 resize event on android if edge-to-edge [skip e2e]

---
 packages/mobile/src/MobileWebAppContainer.tsx |  7 ++--
 .../EditorContentWithSafeAreaPadding.tsx      | 38 +++++++++++++++++++
 .../Components/NoteView/NoteView.tsx          | 21 ++--------
 3 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 packages/web/src/javascripts/Components/NoteView/EditorContentWithSafeAreaPadding.tsx

diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx
index 1068a6bfa..346aa9d13 100644
--- a/packages/mobile/src/MobileWebAppContainer.tsx
+++ b/packages/mobile/src/MobileWebAppContainer.tsx
@@ -44,6 +44,8 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
   const [showAndroidWebviewUpdatePrompt, setShowAndroidWebviewUpdatePrompt] = useState(false)
 
+  const insets = useSafeAreaInsets()
+
   useEffect(() => {
     const removeStateServiceListener = stateService.addEventObserver((event: ReactNativeToWebEvent) => {
       webViewRef.current?.postMessage(JSON.stringify({ reactNativeEvent: event, messageType: 'event' }))
@@ -95,7 +97,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
     const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
       // iOS handles this using the `willChangeFrame` event instead
-      if (Platform.OS === 'android') {
+      if (Platform.OS === 'android' && insets.bottom > 0) {
         fireKeyboardSizeChangeEvent(e)
         webViewRef.current?.postMessage(
           JSON.stringify({
@@ -109,7 +111,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
     const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
       // iOS handles this using the `willChangeFrame` event instead
-      if (Platform.OS === 'android') {
+      if (Platform.OS === 'android' && insets.bottom > 0) {
         webViewRef.current?.postMessage(
           JSON.stringify({
             reactNativeEvent: ReactNativeToWebEvent.KeyboardDidHide,
@@ -362,7 +364,6 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     })
   }, [device])
 
-  const insets = useSafeAreaInsets()
   useEffect(() => {
     if (!didAppLaunch) {
       return
diff --git a/packages/web/src/javascripts/Components/NoteView/EditorContentWithSafeAreaPadding.tsx b/packages/web/src/javascripts/Components/NoteView/EditorContentWithSafeAreaPadding.tsx
new file mode 100644
index 000000000..caa6e8f5e
--- /dev/null
+++ b/packages/web/src/javascripts/Components/NoteView/EditorContentWithSafeAreaPadding.tsx
@@ -0,0 +1,38 @@
+import { ElementIds } from '@/Constants/ElementIDs'
+import { classNames, EditorLineWidth } from '@standardnotes/snjs'
+import { CSSProperties, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { EditorMargins, EditorMaxWidths } from '../EditorWidthSelectionModal/EditorWidths'
+import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
+
+export const EditorContentWithSafeAreaPadding = forwardRef(function EditorContentWithSafeAreaPadding(
+  {
+    editorLineWidth,
+    children,
+  }: {
+    editorLineWidth: EditorLineWidth
+    children: NonNullable<ReactNode>
+  },
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const { hasBottomInset } = useAvailableSafeAreaPadding()
+
+  return (
+    <div
+      id={ElementIds.EditorContent}
+      className={classNames(
+        ElementIds.EditorContent,
+        'z-editor-content overflow-auto sm:[&>*]:mx-[var(--editor-margin)] sm:[&>*]:max-w-[var(--editor-max-width)]',
+        hasBottomInset && 'pb-safe-bottom',
+      )}
+      style={
+        {
+          '--editor-margin': EditorMargins[editorLineWidth],
+          '--editor-max-width': EditorMaxWidths[editorLineWidth],
+        } as CSSProperties
+      }
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 8bbfc1c49..c7c1b7009 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -30,7 +30,7 @@ import {
   LocalPrefKey,
 } from '@standardnotes/snjs'
 import { confirmDialog, DELETE_NOTE_KEYBOARD_COMMAND, KeyboardKey } from '@standardnotes/ui-services'
-import { ChangeEventHandler, createRef, CSSProperties, FocusEvent, KeyboardEventHandler, RefObject } from 'react'
+import { ChangeEventHandler, createRef, FocusEvent, KeyboardEventHandler, RefObject } from 'react'
 import { SuperEditor } from '../SuperEditor/SuperEditor'
 import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
@@ -47,13 +47,13 @@ import {
 import { SuperEditorContentId } from '../SuperEditor/Constants'
 import { NoteViewController } from './Controller/NoteViewController'
 import { PlainEditor, PlainEditorInterface } from './PlainEditor/PlainEditor'
-import { EditorMargins, EditorMaxWidths } from '../EditorWidthSelectionModal/EditorWidths'
 import NoteStatusIndicator, { NoteStatus } from './NoteStatusIndicator'
 import CollaborationInfoHUD from './CollaborationInfoHUD'
 import Button from '../Button/Button'
 import ModalOverlay from '../Modal/ModalOverlay'
 import NoteConflictResolutionModal from './NoteConflictResolutionModal/NoteConflictResolutionModal'
 import Icon from '../Icon/Icon'
+import { EditorContentWithSafeAreaPadding } from './EditorContentWithSafeAreaPadding'
 
 function sortAlphabetically(array: ComponentInterface[]): ComponentInterface[] {
   return array.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1))
@@ -955,20 +955,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
           </div>
         )}
 
-        <div
-          id={ElementIds.EditorContent}
-          className={classNames(
-            ElementIds.EditorContent,
-            'z-editor-content overflow-auto sm:[&>*]:mx-[var(--editor-margin)] sm:[&>*]:max-w-[var(--editor-max-width)]',
-          )}
-          style={
-            {
-              '--editor-margin': EditorMargins[this.state.editorLineWidth],
-              '--editor-max-width': EditorMaxWidths[this.state.editorLineWidth],
-            } as CSSProperties
-          }
-          ref={this.editorContentRef}
-        >
+        <EditorContentWithSafeAreaPadding editorLineWidth={this.state.editorLineWidth} ref={this.editorContentRef}>
           {editorMode === 'component' && this.state.editorComponentViewer && (
             <div className="component-view relative flex-grow">
               {this.state.paneGestureEnabled && <div className="absolute left-0 top-0 h-full w-[20px] md:hidden" />}
@@ -1009,7 +996,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
               />
             </div>
           )}
-        </div>
+        </EditorContentWithSafeAreaPadding>
 
         <div id="editor-pane-component-stack">
           {this.state.availableStackComponents.length > 0 && (