diff --git a/packages/editor-mobile/src/components/editor.tsx b/packages/editor-mobile/src/components/editor.tsx index 7481916aa..000d553aa 100644 --- a/packages/editor-mobile/src/components/editor.tsx +++ b/packages/editor-mobile/src/components/editor.tsx @@ -41,6 +41,11 @@ import Header from "./header"; import StatusBar from "./statusbar"; import Tags from "./tags"; import Title from "./title"; +import { keepLastLineInView } from "@notesnook/editor/dist/extensions/keep-in-view/keep-in-view"; + +function isIOSBrowser() { + return /(iphone|applewebkit)/g.test(navigator.userAgent.toLowerCase()); +} const Tiptap = ({ editorTheme, @@ -69,7 +74,15 @@ const Tiptap = ({ global.editorController.contentChange(editor as Editor); }, onSelectionUpdate: (props) => { - props.transaction.scrollIntoView(); + if (props.transaction.docChanged) { + if (isIOSBrowser()) { + setTimeout(() => { + keepLastLineInView(props.editor, 80, 1); + }, 1); + } else { + props.transaction.scrollIntoView(); + } + } }, onOpenAttachmentPicker: (editor, type) => { global.editorController.openFilePicker(type); diff --git a/packages/editor/src/extensions/keep-in-view/keep-in-view.ts b/packages/editor/src/extensions/keep-in-view/keep-in-view.ts index 3728581e3..6cc58929f 100644 --- a/packages/editor/src/extensions/keep-in-view/keep-in-view.ts +++ b/packages/editor/src/extensions/keep-in-view/keep-in-view.ts @@ -49,9 +49,11 @@ export const KeepInView = Extension.create({ } }); -export function keepLastLineInView(editor: Editor) { - const THRESHOLD = 100; - +export function keepLastLineInView( + editor: Editor, + THRESHOLD = 100, + SCROLL_THRESHOLD = 100 +) { const node = editor.state.selection.$from; const { top } = posToDOMRect(editor.view, node.pos, node.pos + 1); const isBelowThreshold = window.innerHeight - top < THRESHOLD; @@ -63,7 +65,7 @@ export function keepLastLineInView(editor: Editor) { if (domNode instanceof HTMLElement) { const container = findScrollContainer(domNode); if (container) { - container.scrollBy({ top: THRESHOLD, behavior: "smooth" }); + container.scrollBy({ top: SCROLL_THRESHOLD, behavior: "smooth" }); } else domNode.scrollIntoView({ behavior: "smooth", block: "center" }); } }