fix ui for ios editor

packages/editor-mobile/package.json

@@ -6,7 +6,7 @@
     "@notesnook/theme": "github:streetwriters/themeprovider",
     "framer-motion": "^4.1.17",
     "mdi-react": "^8.4.0",
-    "notesnook-editor": "github:streetwriters/notesnook-editor#develop",
+    "notesnook-editor": "file:../notesnook-editor",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "zustand": "^3.6.8"
@@ -23,6 +23,7 @@
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "patch-package": "^6.4.7",
     "react-error-overlay": "6.0.9",
     "react-scripts": "^4.0.3",
     "typescript": "^4.7.2",

packages/editor-mobile/public/styles.css

@@ -10,6 +10,16 @@
   background-color: var(--bgSecondary);
 }
 
+.ProseMirror:first-child {
+  margin-top: 10px;
+}
+
+.ProseMirror hr {
+  background-color: var(--border);
+  border-width: 0;
+  height: 2px;
+}
+
 .ProseMirror code:not(pre code) {
   background-color: var(--bgSecondary);
   border: 1px solid var(--border);

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

@@ -4,7 +4,7 @@ import {
   PortalProvider,
   Toolbar,
   usePermissionHandler,
-  useTiptap,
+  useTiptap
 } from "notesnook-editor";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useEditorController } from "../hooks/useEditorController";
@@ -27,7 +27,7 @@ const Tiptap = () => {
       global.noToolbar ||
       settings.noToolbar ||
       global.readonly ||
-      settings.readonly,
+      settings.readonly
   });
   const contentRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -36,14 +36,14 @@ const Tiptap = () => {
     //todo
     accent: "green",
     scale: 1,
-    theme: theme?.night ? "dark" : "light",
+    theme: theme?.night ? "dark" : "light"
   });
 
   const editorTheme = useTheme({
     //todo
     accent: "green",
     scale: 1,
-    theme: theme?.night ? "dark" : "light",
+    theme: theme?.night ? "dark" : "light"
   });
 
   editorTheme.space = [0, 10, 12, 20];
@@ -55,37 +55,37 @@ const Tiptap = () => {
     ...toolbarTheme.buttons.menuitem,
     height: "50px",
     paddingX: "20px",
-    borderBottomWidth: 0,
+    borderBottomWidth: 0
   };
 
   toolbarTheme.iconSizes = {
     big: 20,
     medium: 18,
-    small: 18,
+    small: 18
   };
   toolbarTheme.fontSizes = {
     ...toolbarTheme.fontSizes,
     subBody: "0.8rem",
-    body: "0.9rem",
+    body: "0.9rem"
   };
 
   toolbarTheme.radii = {
     ...toolbarTheme.radii,
-    small: 5,
+    small: 5
   };
 
   toolbarTheme.buttons.menuitem = {
     ...toolbarTheme.buttons.menuitem,
     px: 5,
-    height: "45px",
+    height: "45px"
   };
   usePermissionHandler({
     claims: {
-      premium: settings.premium,
+      premium: settings.premium
     },
     onPermissionDenied: () => {
       post(EventTypes.pro);
-    },
+    }
   });
   const _editor = useTiptap(
     {
@@ -107,10 +107,10 @@ const Tiptap = () => {
       element: !layout ? undefined : contentRef.current || undefined,
       editable: !initialProps.readonly,
       editorProps: {
-        editable: () => !initialProps.readonly,
+        editable: () => !initialProps.readonly
       },
       content: global.editorController?.content?.current,
-      isMobile: true,
+      isMobile: true
     },
     [layout, initialProps.readonly, tick]
   );
@@ -143,7 +143,7 @@ const Tiptap = () => {
           flex: 1,
           flexDirection: "column",
           maxWidth: "100vw",
-          marginBottom: "5px",
+          marginBottom: "5px"
         }}
       >
         <Header
@@ -161,7 +161,7 @@ const Tiptap = () => {
             height: "100%",
             flexGrow: 1,
             flexShrink: 1,
-            display: "flex",
+            display: "flex"
           }}
         >
           {initialProps.noHeader ? null : (
@@ -182,7 +182,7 @@ const Tiptap = () => {
               padding: 12,
               paddingTop: 0,
               color: theme?.pri,
-              flex: 1,
+              flex: 1
             }}
           />
           <div
@@ -193,7 +193,7 @@ const Tiptap = () => {
                 ?.chain()
                 .focus()
                 .insertContentAt(lastPosition - 1, "<p></p>", {
-                  updateSelection: true,
+                  updateSelection: true
                 })
                 .run();
             }}

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

@@ -14,7 +14,7 @@ const Button = ({
   onPress,
   children,
   style,
-  preventDefault = true,
+  preventDefault = true
 }: {
   onPress: () => void;
   children: React.ReactNode;
@@ -40,7 +40,7 @@ export default React.memo(
     noHeader,
     settings,
     hasUndo,
-    hasRedo,
+    hasRedo
   }: {
     noHeader: boolean;
     settings: Settings;
@@ -56,7 +56,7 @@ export default React.memo(
           height: noHeader ? `${insets.top}px` : `${50 + insets.top}px`,
           backgroundColor: "var(--nn_bg)",
           position: "sticky",
-          width: "100vw",
+          width: "100vw"
         }}
       >
         {noHeader ? null : (
@@ -68,7 +68,7 @@ export default React.memo(
               flexDirection: "row",
               paddingTop: insets.top,
               height: 50,
-              alignItems: "center",
+              alignItems: "center"
             }}
           >
             <Button
@@ -85,18 +85,25 @@ export default React.memo(
                 height: 40,
                 display: "flex",
                 justifyContent: "center",
-                alignItems: "start",
+                alignItems: "center",
                 flexDirection: "column",
+                position: "relative"
               }}
             >
-              <ArrowBackIcon size={28} color="var(--nn_pri)" />
+              <ArrowBackIcon
+                size={27}
+                style={{
+                  position: "absolute"
+                }}
+                color="var(--nn_pri)"
+              />
             </Button>
 
             <div
               style={{
                 display: "flex",
                 alignItems: "center",
-                flexDirection: "row",
+                flexDirection: "row"
               }}
             >
               <Button
@@ -113,11 +120,15 @@ export default React.memo(
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
+                  position: "relative"
                 }}
               >
                 <ArrowULeftTopIcon
-                  size={28}
                   color={!hasUndo ? "var(--nn_nav)" : "var(--nn_pri)"}
+                  size={25}
+                  style={{
+                    position: "absolute"
+                  }}
                 />
               </Button>
 
@@ -135,11 +146,15 @@ export default React.memo(
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
+                  position: "relative"
                 }}
               >
                 <ArrowURightTopIcon
-                  size={28}
                   color={!hasRedo ? "var(--nn_nav)" : "var(--nn_pri)"}
+                  size={25}
+                  style={{
+                    position: "absolute"
+                  }}
                 />
               </Button>
               {!settings.premium && (
@@ -158,9 +173,16 @@ export default React.memo(
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
+                    position: "relative"
                   }}
                 >
-                  <CrownIcon size={28} color="orange" />
+                  <CrownIcon
+                    size={25}
+                    style={{
+                      position: "absolute"
+                    }}
+                    color="orange"
+                  />
                 </Button>
               )}
               <Button
@@ -172,15 +194,21 @@ export default React.memo(
                   borderRadius: 100,
                   color: "var(--nn_icon)",
                   marginRight: 10,
-
                   width: 39,
                   height: 39,
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
+                  position: "relative"
                 }}
               >
-                <MagnifyIcon size={28} color="var(--nn_pri)" />
+                <MagnifyIcon
+                  size={25}
+                  style={{
+                    position: "absolute"
+                  }}
+                  color="var(--nn_pri)"
+                />
               </Button>
               <Button
                 onPress={() => {
@@ -197,9 +225,16 @@ export default React.memo(
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
+                  position: "relative"
                 }}
               >
-                <CloudUploadOutlineIcon size={28} color="var(--nn_pri)" />
+                <CloudUploadOutlineIcon
+                  size={25}
+                  style={{
+                    position: "absolute"
+                  }}
+                  color="var(--nn_pri)"
+                />
               </Button>
 
               <Button
@@ -217,9 +252,16 @@ export default React.memo(
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
+                  position: "relative"
                 }}
               >
-                <DotsHorizontalIcon size={28} color="var(--nn_pri)" />
+                <DotsHorizontalIcon
+                  size={25}
+                  style={{
+                    position: "absolute"
+                  }}
+                  color="var(--nn_pri)"
+                />
               </Button>
             </div>
           </div>

packages/editor-mobile/src/hooks/useEditorController.ts

@@ -1,12 +1,10 @@
 import { Editor } from "notesnook-editor";
 import {
-  Dispatch,
   MutableRefObject,
-  SetStateAction,
   useCallback,
   useEffect,
   useRef,
-  useState,
+  useState
 } from "react";
 import { useEditorThemeStore } from "../state/theme";
 import { EventTypes, isReactNative, post, timerFn } from "../utils";
@@ -56,7 +54,7 @@ export function useEditorController(
   const htmlContentRef = useRef<string | null>(null);
   const timers = useRef<Timers>({
     selectionChange: null,
-    change: null,
+    change: null
   });
 
   const selectionChange = useCallback((editor: Editor) => {
@@ -127,6 +125,10 @@ export function useEditorController(
 
   const onMessage = useCallback(
     (data: Event) => {
+      console.log(data);
+
+      //@ts-ignore
+      if (data?.data[0] !== "{") return;
       //@ts-ignore
       let message = JSON.parse(data.data);
       let type = message.type;
@@ -200,6 +202,6 @@ export function useEditorController(
     openFilePicker,
     downloadAttachment,
     content: htmlContentRef,
-    onUpdate: onUpdate,
+    onUpdate: onUpdate
   };
 }