mobie: enable search in readonly mode (#2659)

apps/mobile/app/screens/editor/index.tsx

@@ -46,6 +46,7 @@ import { useEditor } from "./tiptap/use-editor";
 import { useEditorEvents } from "./tiptap/use-editor-events";
 import { editorController } from "./tiptap/utils";
 import { useLayoutEffect } from "react";
+import useKeyboard from "../../hooks/use-keyboard";
 
 const style: ViewStyle = {
   height: "100%",
@@ -232,6 +233,8 @@ const AppSection = ({
 
 const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
   const readonly = useEditorStore((state) => state.readonly);
+  const keyboard = useKeyboard();
+
   const onPress = async () => {
     if (editor.note.current) {
       await db.notes?.note(editor.note.current.id).readonly();
@@ -241,7 +244,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
     }
   };
 
-  return readonly && IconButton ? (
+  return readonly && IconButton && !keyboard.keyboardShown ? (
     <IconButton
       name="pencil-lock"
       type="grayBg"
@@ -249,7 +252,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
       color="accent"
       customStyle={{
         position: "absolute",
-        bottom: 20,
+        bottom: 60,
         width: 60,
         height: 60,
         right: 12,

apps/mobile/app/screens/editor/tiptap/commands.ts

@@ -217,7 +217,7 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     );
   };
 
-  updateWebclip = async ({ src, hash }: ImageAttributes) => {
+  updateWebclip = async ({ src, hash }: Partial<ImageAttributes>) => {
     await this.doAsync(
       `editor && editor.commands.updateWebClip(${JSON.stringify({
         hash
@@ -225,7 +225,7 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     );
   };
 
-  updateImage = async ({ src, hash }: ImageAttributes) => {
+  updateImage = async ({ src, hash }: Partial<ImageAttributes>) => {
     await this.doAsync(
       `editor && editor.commands.updateImage(${JSON.stringify({
         hash

packages/editor-mobile/src/components/editor.tsx

@@ -251,9 +251,14 @@ const Tiptap = ({
           />
         </div>
 
-        {settings.noToolbar || !layout ? null : (
+        {!layout ? null : (
           <Toolbar
-            sx={{ pl: "10px", pt: "5px", minHeight: 45 }}
+            sx={{
+              pl: "10px",
+              pt: "5px",
+              minHeight: 45,
+              display: settings.noToolbar ? "none" : "flex"
+            }}
             theme={toolbarTheme}
             editor={_editor}
             location="bottom"