refactor(mobile): centralize caret positioning and smart calc to set caret in right position

- Rename BigPencilBtn to EditFAB following Material Design naming conventions
- Create useCaretPosition hook for centralized caret management:
  - getViewportBounds() - calculates safe viewport area accounting for keyboard
  - getTargetCaretPos() - determines optimal caret position
  - ensureCaretVisible() - handles iOS keyboard animation delays
  - useEditorFocusScroll() - auto-scroll caret on any editor focus
- Create useEnableEditor hook for editor enable/focus operations
- Merge scrollCaretIntoViewPlugin into useCaretPosition hook
- Remove DOM manipulation hacks (dataset.doubleTap, programmatic clicks)
- Decouple EditorContent from EditFAB - each handles its own behavior

Author: HMarzban

packages/webapp/src/components/TipTap/TipTap.tsx

@@ -65,7 +65,6 @@ import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table
 import { Indent } from '@docs.plus/extension-indent'
 
 import ChatCommentExtension from './extentions/ChatCommentExtension'
-import { createScrollCaretIntoViewPlugin } from './plugins/scrollCaretIntoViewPlugin'
 import { IOSCaretFix } from './plugins/iosCaretFixPlugin'
 
 import { InlineCode } from '@docs.plus/extension-inline-code'
@@ -223,8 +222,6 @@ const Editor = ({
       showOnlyWhenEditable: false,
       placeholder: (data: any) => generatePlaceholderText(data) || ''
     }),
-    // iOS Safari: Scroll caret into view when keyboard opens
-    ...(isMobile ? [createScrollCaretIntoViewPlugin()] : []),
     // iOS Safari: Fix caret positioning when tapping in middle of words
     IOSCaretFix
   ]

packages/webapp/src/components/TipTap/plugins/scrollCaretIntoViewPlugin.ts

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react'
+import { Pencil } from '@icons'
+import { useCaretPosition, useEnableEditor } from '@hooks/useCaretPosition'
+
+/**
+ * Floating Action Button for entering edit mode.
+ * Places caret at optimal viewport position and opens keyboard.
+ */
+const EditFAB = () => {
+  const { isKeyboardOpen, getTargetCaretPos } = useCaretPosition()
+  const { enableAndFocusAt } = useEnableEditor()
+
+  const handleClick = useCallback(() => {
+    const targetPos = getTargetCaretPos()
+    enableAndFocusAt(targetPos)
+  }, [getTargetCaretPos, enableAndFocusAt])
+
+  if (isKeyboardOpen) return null
+
+  return (
+    <button
+      onClick={handleClick}
+      className="edit-fab btn btn-circle border-docsy bg-docsy active fixed right-6 bottom-8 z-20 size-16 text-white">
+      <Pencil size={28} />
+    </button>
+  )
+}
+
+export default EditFAB

packages/webapp/src/components/pages/document/components/BigPencilBtn.tsx

@@ -5,6 +5,7 @@ import { useStore } from '@stores'
 import { twMerge } from 'tailwind-merge'
 import { useRef, useCallback } from 'react'
 import useDoubleTap from '@hooks/useDoubleTap'
+import { useEnableEditor, useEditorFocusScroll } from '@hooks/useCaretPosition'
 
 const RenderLoader = ({ className }: { className?: string }) => {
   return (
@@ -20,19 +21,20 @@ const EditorContent = ({ className }: { className?: string }) => {
   const {
     editor: { instance: editor, loading, providerSyncing, applyingFilters }
   } = useStore((state) => state.settings)
-  const { isKeyboardOpen } = useStore((state) => state)
   const editorElement = useRef<HTMLDivElement>(null)
-
-  // Focus handler
-  const handleFocus = useCallback(() => {
-    if (!editor) return
-    const btnBigBluePencil = document.querySelector('.btn_bigBluePencil') as HTMLButtonElement
-
-    if (btnBigBluePencil && !isKeyboardOpen) btnBigBluePencil.click()
-  }, [editor, isKeyboardOpen])
-
-  // Double tap handler
-  const handleDoubleTap = useDoubleTap(handleFocus)
+  const { enableAndFocus, isKeyboardOpen } = useEnableEditor()
+
+  // Auto-scroll caret into view on any focus (direct tap, etc.)
+  useEditorFocusScroll()
+
+  // Double-tap: enable editor and focus (caret already at tap position via iOS fix)
+  const handleDoubleTap = useDoubleTap(
+    useCallback(() => {
+      if (!isKeyboardOpen) {
+        enableAndFocus()
+      }
+    }, [isKeyboardOpen, enableAndFocus])
+  )
 
   if (loading || providerSyncing || !editor) {
     return <RenderLoader className={className} />

packages/webapp/src/components/pages/document/components/EditFAB.tsx

@@ -3,7 +3,7 @@ import MobilePadTitle from '@components/TipTap/pad-title-section/MobilePadTitle'
 import MobileEditor from '../components/MobileEditor'
 import { useStore } from '@stores'
 import TocModal from '@components/pages/document/components/TocModal'
-import BigPencilBtn from '@components/pages/document/components/BigPencilBtn'
+import EditFAB from '@components/pages/document/components/EditFAB'
 import { ModalDrawer } from '@components/ui/ModalDrawer'
 import { useHashRouter } from '@hooks/useHashRouter'
 import MobileHistory from '@components/pages/history/mobile/MobileHistory'
@@ -41,7 +41,7 @@ const MobileLayout = () => {
       </div>
       <MobileLeftSidePanel filterModalRef={filterModalRef} />
       <MobileEditor />
-      <BigPencilBtn />
+      <EditFAB />
       <BottomSheet />
       <div className="mobileToolbarBottom sticky bottom-0 left-0 z-20 w-full bg-white">
         <ToolbarMobile />