fix: load new content through state

packages/editor-mobile/package-lock.json

@@ -34153,7 +34153,7 @@
     },
     "notesnook-editor": {
       "version": "git+ssh://git@github.com/streetwriters/notesnook-editor.git#97094dba0bfdaaede6ab24e65079d6b305fe471c",
-      "from": "notesnook-editor@https://github.com/streetwriters/notesnook-editor.git#develop",
+      "from": "notesnook-editor@github:streetwriters/notesnook-editor#develop",
       "requires": {
         "@_ueberdosis/prosemirror-tables": "^1.1.3",
         "@mdi/js": "^6.9.96",

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

@@ -4,9 +4,15 @@ import {
   PortalProvider,
   Toolbar,
   usePermissionHandler,
-  useTiptap,
+  useTiptap
 } from "notesnook-editor";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  useState
+} from "react";
 import { useEditorController } from "../hooks/useEditorController";
 import { useSettings } from "../hooks/useSettings";
 import { useEditorThemeStore } from "../state/theme";
@@ -18,6 +24,7 @@ import Title from "./title";
 
 const Tiptap = () => {
   const settings = useSettings();
+  const [tick, setTick] = useState(0);
   const theme = useEditorThemeStore((state) => state.colors);
   const [initialProps, setInitialProps] = useState<Partial<Settings>>({
     readonly: global.readonly || settings.readonly,
@@ -26,7 +33,7 @@ const Tiptap = () => {
       global.noToolbar ||
       settings.noToolbar ||
       global.readonly ||
-      settings.readonly,
+      settings.readonly
   });
   const contentRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -35,14 +42,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];
@@ -54,37 +61,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(
     {
@@ -106,14 +113,14 @@ 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]
+    [layout, initialProps.readonly, tick]
   );
-  const controller = useEditorController(editor);
+  const controller = useEditorController(editor, setTick);
   const controllerRef = useRef(controller);
   globalThis.editorController = controller;
   globalThis.editor = editor;
@@ -134,10 +141,15 @@ const Tiptap = () => {
           flex: 1,
           flexDirection: "column",
           maxWidth: "100vw",
-          marginBottom: "5px",
+          marginBottom: "5px"
         }}
       >
-        <Header settings={settings} noHeader={initialProps.noHeader || false} />
+        <Header
+          hasRedo={false}
+          hasUndo={false}
+          settings={settings}
+          noHeader={initialProps.noHeader || false}
+        />
         <div
           onScroll={controller.scroll}
           ref={containerRef}
@@ -147,7 +159,7 @@ const Tiptap = () => {
             height: "100%",
             flexGrow: 1,
             flexShrink: 1,
-            display: "flex",
+            display: "flex"
           }}
         >
           {initialProps.noHeader ? null : (
@@ -167,7 +179,7 @@ const Tiptap = () => {
               padding: 12,
               paddingTop: 0,
               color: theme?.pri,
-              flex: 1,
+              flex: 1
             }}
           />
         </div>

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

@@ -1,10 +1,12 @@
 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";
@@ -40,14 +42,18 @@ export type EditorController = {
   openFilePicker: (type: "image" | "file" | "camera") => void;
   downloadAttachment: (attachment: Attachment) => void;
   content: MutableRefObject<string | null>;
+  onUpdate: () => void;
 };
 
-export function useEditorController(editor: Editor | null): EditorController {
+export function useEditorController(
+  editor: Editor | null,
+  update: Dispatch<SetStateAction<number>>
+): EditorController {
   const [title, setTitle] = useState("");
   const htmlContentRef = useRef<string | null>(null);
   const timers = useRef<Timers>({
     selectionChange: null,
-    change: null,
+    change: null
   });
 
   const selectionChange = useCallback((editor: Editor) => {
@@ -112,6 +118,10 @@ export function useEditorController(editor: Editor | null): EditorController {
     []
   );
 
+  const onUpdate = () => {
+    update((tick) => tick + 1);
+  };
+
   const onMessage = useCallback(
     (data: Event) => {
       //@ts-ignore
@@ -122,9 +132,7 @@ export function useEditorController(editor: Editor | null): EditorController {
       switch (type) {
         case "native:html":
           htmlContentRef.current = value;
-          editor?.commands.setContent(htmlContentRef.current, false, {
+          update((tick) => tick + 1);
-            preserveWhitespace: true,
-          });
           break;
         case "native:theme":
           useEditorThemeStore.getState().setColors(message.value);
@@ -141,7 +149,7 @@ export function useEditorController(editor: Editor | null): EditorController {
       }
       post(type); // Notify that message was delivered successfully.
     },
-    [editor]
+    [update]
   );
 
   // useEffect(() => {
@@ -186,5 +194,6 @@ export function useEditorController(editor: Editor | null): EditorController {
     openFilePicker,
     downloadAttachment,
     content: htmlContentRef,
+    onUpdate: onUpdate
   };
 }