Mobile: Fixes #8687: Hide markdown toolbar completely when low on vertical space (#8688)

packages/app-mobile/components/NoteEditor/NoteEditor.tsx

@@ -8,7 +8,7 @@ import ExtendedWebView from '../ExtendedWebView';
 const React = require('react');
 import { forwardRef, RefObject, useImperativeHandle } from 'react';
 import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
-import { View, ViewStyle } from 'react-native';
+import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
 const { editorFont } = require('../global-style');
 
 import SelectionFormatting from './SelectionFormatting';
@@ -368,6 +368,19 @@ function NoteEditor(props: Props, ref: any) {
 		console.error('NoteEditor: webview error');
 	}, []);
 
+	const [hasSpaceForToolbar, setHasSpaceForToolbar] = useState(true);
+	const toolbarEnabled = props.toolbarEnabled && hasSpaceForToolbar;
+
+	const onContainerLayout = useCallback((event: LayoutChangeEvent) => {
+		const containerHeight = event.nativeEvent.layout.height;
+
+		if (containerHeight < 140) {
+			setHasSpaceForToolbar(false);
+		} else {
+			setHasSpaceForToolbar(true);
+		}
+	}, []);
+
 	const toolbar = <MarkdownToolbar
 		style={{
 			// Don't show the markdown toolbar if there isn't enough space
@@ -385,10 +398,14 @@ function NoteEditor(props: Props, ref: any) {
 	// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
 	//    when an editable region (e.g. a the full-screen NoteEditor) is focused.
 	return (
-		<View style={{
-			...props.style,
-			flexDirection: 'column',
-		}}>
+		<View
+			testID='note-editor-root'
+			onLayout={onContainerLayout}
+			style={{
+				...props.style,
+				flexDirection: 'column',
+			}}
+		>
 			<EditLinkDialog
 				visible={linkDialogVisible}
 				themeId={props.themeId}
@@ -419,7 +436,7 @@ function NoteEditor(props: Props, ref: any) {
 				searchState={searchState}
 			/>
 
-			{props.toolbarEnabled ? toolbar : null}
+			{toolbarEnabled ? toolbar : null}
 		</View>
 	);
 }