refactor: enhance mobile toolbar and editable document control logic

- Updated ToolbarMobile to conditionally render based on keyboard state.
- Improved useEditableDocControl to manage editor's editable state based on keyboard visibility.
- Cleaned up MobileLayout by removing unnecessary line breaks.

Author: HMarzban

packages/webapp/src/components/pages/document/components/toolbarMobile/ToolbarMobile.tsx

@@ -14,16 +14,15 @@ const ToolbarMobile = () => {
   } = useStore((state) => state.settings)
 
   const { createComment } = useTurnSelectedTextIntoComment()
+  const { isKeyboardOpen } = useStore((state) => state)
 
   useEffect(() => {
     if (isEditable) {
       setIsFormatSelectionVisible(false)
     }
   }, [isEditable])
 
-  if (!editor) {
-    return null
-  }
+  if (!editor || !isKeyboardOpen) return null
 
   const buttons = [
     {

packages/webapp/src/components/pages/document/hooks/useEditableDocControl.tsx

@@ -7,31 +7,33 @@ const useEditableDocControl = () => {
     editor: { instance: editor, loading }
   } = useStore((state) => state.settings)
   const setWorkspaceEditorSetting = useStore((state) => state.setWorkspaceEditorSetting)
+  const { isKeyboardOpen } = useStore((state) => state)
 
   useEffect(() => {
     if (!editor) return
-      const isKeyboardOpen = useStore.getState().isKeyboardOpen
 
     // TODO: update text selection, when editable change to false, scrolling is getting hard when we have a text range selected
     const timeout = setTimeout(() => {
+      const { isKeyboardOpen } = useStore.getState()
 
-      if (isKeyboardOpen) {
+      if (!isKeyboardOpen) {
         const divProseMirror = document.querySelector('.tiptap.ProseMirror') as HTMLElement
         divProseMirror?.setAttribute('contenteditable', 'false')
-        useStore.getState().setWorkspaceEditorSetting('isEditable', false)
         editor?.setEditable(false)
       } else {
         const divProseMirror = document.querySelector('.tiptap.ProseMirror') as HTMLElement
         divProseMirror?.setAttribute('contenteditable', 'true')
-        setWorkspaceEditorSetting('isEditable', true)
         editor?.setEditable(true)
       }
-
     }, 500)
     return () => {
       clearTimeout(timeout)
     }
   }, [deviceDetect, editor, loading])
+
+  useEffect(() => {
+    setWorkspaceEditorSetting('isEditable', !isKeyboardOpen ? false : true)
+  }, [isKeyboardOpen, setWorkspaceEditorSetting])
 }
 
 export default useEditableDocControl

packages/webapp/src/components/pages/document/layouts/MobileLayout.tsx

@@ -35,8 +35,6 @@ const MobileLayout = () => {
   if (isHistoryView) return <MobileHistory />
 
   return (
-
-
     <div
       className={`tiptap relative flex w-full flex-col ${deviceClass}`}
       style={{
@@ -49,7 +47,7 @@ const MobileLayout = () => {
       <MobileEditor />
       <BigPencilBtn />
       <BottomSheet />
-      <div className="sticky mobileToolbarBottom bottom-0 left-0 z-20 w-full bg-white">
+      <div className="mobileToolbarBottom sticky bottom-0 left-0 z-20 w-full bg-white">
         <ToolbarMobile />
       </div>
     </div>