editor: fix keyboard focus issues on mobile

packages/editor/src/components/button.tsx

@@ -33,7 +33,9 @@ const _Button = (
     if (!buttonRef.current) return;
 
     function onMouseDown(e: MouseEvent) {
-      e.preventDefault();
+      if (globalThis.keyboardShown) {
+        e.preventDefault();
+      }
     }
 
     buttonRef.current.addEventListener("mousedown", onMouseDown, {

packages/editor/src/components/popup-presenter/index.tsx

@@ -56,6 +56,7 @@ export function PopupWrapper(props: PropsWithChildren<PopupWrapperProps>) {
       position={position}
       blocking
       focusOnRender
+      className={isMobile ? "editor-mobile-toolbar-popup" : undefined}
       isMobile={isMobile}
       {...presenterProps}
       isOpen={isPopupOpen}

packages/editor/src/extensions/keep-in-view/keep-in-view.ts

@@ -64,9 +64,14 @@ export function keepLastLineInView(
 ) {
   if (!editor.state.selection.empty) return;
 
+  const isPopupVisible = document.getElementsByClassName(
+    "editor-mobile-toolbar-popup"
+  );
+
   const node = editor.state.selection.$from;
   const { top } = posToDOMRect(editor.view, node.pos, node.pos + 1);
-  const isBelowThreshold = window.innerHeight - top < THRESHOLD;
+  const isBelowThreshold =
+    window.innerHeight - top < (isPopupVisible ? THRESHOLD + 60 : THRESHOLD);
   const isAboveThreshold = top < THRESHOLD;
   const DIFF_BOTTOM = THRESHOLD - (window.innerHeight - top);
 
@@ -83,7 +88,9 @@ export function keepLastLineInView(
       const container = findScrollContainer(domNode);
       if (container) {
         container.scrollBy({
-          top: isAboveThreshold ? DIFF_TOP + 10 : DIFF_BOTTOM,
+          top: isAboveThreshold
+            ? DIFF_TOP + 10
+            : DIFF_BOTTOM + (isPopupVisible ? 60 : 0),
           behavior: "smooth"
         });
       } else domNode.scrollIntoView({ behavior: "smooth", block: "center" });

packages/editor/src/extensions/task-item/component.tsx

@@ -103,7 +103,7 @@ export function TaskItemComponent(
           fontFamily: "inherit"
         }}
         onMouseDown={(e) => {
-          if (globalThis["keyboardShown"]) {
+          if (globalThis.keyboardShown) {
             e.preventDefault();
           }
           toggle();

packages/editor/src/toolbar/components/popup.tsx

@@ -17,12 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Button, Flex, Text } from "@theme-ui/components";
+import { EmotionThemeProvider } from "@notesnook/theme";
 import { Icon } from "@notesnook/ui";
-import { Icons } from "../icons";
+import { Button, Flex, Text } from "@theme-ui/components";
 import { PropsWithChildren } from "react";
 import { DesktopOnly, MobileOnly } from "../../components/responsive";
-import { EmotionThemeProvider } from "@notesnook/theme";
+import { Icons } from "../icons";
 
 type Action = {
   title: string;

packages/editor/src/toolbar/components/tool-button.tsx

@@ -74,7 +74,11 @@ export const ToolButton = React.memo(
               },
           ...sx
         }}
-        onMouseDown={(e) => e.preventDefault()}
+        onMouseDown={(e) => {
+          if (globalThis.keyboardShown) {
+            e.preventDefault();
+          }
+        }}
         {...buttonProps}
       >
         <Icon

packages/editor/src/toolbar/popups/color-picker.tsx

@@ -28,6 +28,7 @@ import { Button } from "../../components/button";
 import { debounce } from "../../utils/debounce";
 import { Popup } from "../components/popup";
 import { SchemeColors } from "@notesnook/theme";
+import { Editor } from "../../types";
 
 export const DEFAULT_COLORS = [
   "#e91e63",
@@ -47,6 +48,7 @@ export const DEFAULT_COLORS = [
 ];
 
 type ColorPickerProps = {
+  editor: Editor;
   colors?: string[];
   color?: string;
   onClear: () => void;
@@ -69,7 +71,8 @@ export function ColorPicker(props: ColorPickerProps) {
     expanded,
     onSave,
     colors = [],
-    onDelete
+    onDelete,
+    editor
   } = props;
   const ref = useRef<HTMLDivElement>(null);
   const [isPickerOpen, setIsPickerOpen] = useState(expanded || false);
@@ -205,7 +208,23 @@ export function ColorPicker(props: ColorPickerProps) {
               <PaletteButton
                 icon={Icons.palette}
                 iconColor={tColor.isDark() ? "white" : "icon"}
-                onClick={() => setIsPickerOpen((s) => !s)}
+                onClick={() => {
+                  setIsPickerOpen((s) => {
+                    if (s) {
+                      editor.current?.commands.focus();
+                    } else {
+                      const onSelectionChange = () => {
+                        setIsPickerOpen(false);
+                        editor.current?.off(
+                          "selectionUpdate",
+                          onSelectionChange
+                        );
+                      };
+                      editor.current?.on("selectionUpdate", onSelectionChange);
+                    }
+                    return !s;
+                  });
+                }}
                 title="Choose custom color"
                 iconSize={18}
                 bg={currentColor}

packages/editor/src/toolbar/tools/block.tsx

@@ -72,7 +72,11 @@ export function InsertBlock(props: ToolProps) {
             mr: 0
           }
         }}
-        onMouseDown={(e) => e.preventDefault()}
+        onMouseDown={(e) => {
+          if (globalThis.keyboardShown) {
+            e.preventDefault();
+          }
+        }}
         onClick={() => setIsOpen((s) => !s)}
       >
         <Icon path={Icons.plus} size="medium" color={"accent"} />

packages/editor/src/toolbar/tools/colors.tsx

@@ -89,6 +89,7 @@ export function ColorTool(props: ColorToolProps) {
       >
         <ColorPicker
           color={activeColor}
+          editor={props.editor}
           colors={colors}
           onDelete={(color) => {
             if (DEFAULT_COLORS.includes(color)) return;
@@ -114,7 +115,9 @@ export function ColorTool(props: ColorToolProps) {
               config.set(cacheKey, color);
             }
           }}
-          onClose={() => setIsOpen(false)}
+          onClose={() => {
+            setIsOpen(false);
+          }}
           title={title}
         />
       </PopupWrapper>
@@ -132,8 +135,8 @@ export function Highlight(props: ToolProps) {
       title={"Background color"}
       onColorChange={(color) =>
         color
-          ? editor.current?.chain().focus().setHighlight(color).run()
-          : editor.current?.chain().focus().unsetHighlight().run()
+          ? editor.current?.chain().setHighlight(color).run()
+          : editor.current?.chain().unsetHighlight().run()
       }
     />
   );
@@ -149,8 +152,8 @@ export function TextColor(props: ToolProps) {
       title="Text color"
       onColorChange={(color) =>
         color
-          ? editor.current?.chain().focus().setColor(color).run()
-          : editor.current?.chain().focus().unsetColor().run()
+          ? editor.current?.chain().setColor(color).run()
+          : editor.current?.chain().unsetColor().run()
       }
     />
   );

packages/editor/src/toolbar/tools/lists.tsx

@@ -223,7 +223,11 @@ function ListThumbnail(props: ListThumbnailProps) {
         listStyleType,
         gap: 1
       }}
-      onMouseDown={(e) => e.preventDefault()}
+      onMouseDown={(e) => {
+        if (globalThis.keyboardShown) {
+          e.preventDefault();
+        }
+      }}
     >
       {[0, 1, 2].map((i) => (
         <Box