web: content overlaps on switching notes very fast

apps/web/src/components/editor/context.ts

@@ -67,6 +67,12 @@ export function useConfigureEditor() {
   return useEditorContext((store) => store.configure);
 }
 
+export const configureEditor = (
+  partial:
+    | Partial<EditorSubState>
+    | ((oldState: EditorSubState) => Partial<EditorSubState>)
+) => useEditorContext.getState().configure(partial);
+
 export function useHistory() {
   return useEditorContext(
     (store) =>

apps/web/src/components/editor/header.js

@@ -37,7 +37,7 @@ function Header({ readonly }) {
   return (
     <>
       {!readonly && id && (
-        <Flex flexWrap="wrap" sx={{ lineHeight: 2.5, alignItems: "center" }}>
+        <Flex sx={{ lineHeight: 2.5, alignItems: "center", flexWrap: "wrap" }}>
           {tags?.map((tag) => (
             <IconTag
               testId={`tag-${tag}`}

apps/web/src/components/editor/index.tsx

@@ -64,7 +64,6 @@ function onTitleChange(noteId: string, title: string) {
   editorstore.get().setTitle(noteId, title);
 }
 
-const debouncedOnEditorChange = debounceWithId(onEditorChange, 100);
 const debouncedOnTitleChange = debounceWithId(onTitleChange, 100);
 
 export default function EditorManager({
@@ -185,9 +184,9 @@ type EditorOptions = {
   onLoadMedia?: () => void;
 };
 type EditorProps = {
+  content: string;
   title?: string;
   nonce?: number;
-  content: string;
   options?: EditorOptions;
 };
 export function Editor(props: EditorProps) {
@@ -244,10 +243,7 @@ export function Editor(props: EditorProps) {
         onLoad={() => {
           if (onLoadMedia) onLoadMedia();
         }}
-        onChange={(content) => {
-          const { id, sessionId } = editorstore.get().session;
-          debouncedOnEditorChange(sessionId, id, sessionId, content);
-        }}
+        onChange={onEditorChange}
         onDownloadAttachment={(attachment) =>
           downloadAttachment(attachment.hash)
         }

apps/web/src/components/editor/tiptap.tsx

@@ -30,26 +30,32 @@ import {
   PortalProvider,
   Editor,
   AttachmentType,
-  usePermissionHandler
+  usePermissionHandler,
+  getHTMLFromFragment
 } from "@notesnook/editor";
 import { Box, Flex } from "@theme-ui/components";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
 import useMobile from "../../hooks/use-mobile";
 import { Attachment } from "./picker";
 import { IEditor } from "./types";
-import { useConfigureEditor, useSearch, useToolbarConfig } from "./context";
+import {
+  useConfigureEditor,
+  useSearch,
+  useToolbarConfig,
+  configureEditor
+} from "./context";
 import { createPortal } from "react-dom";
 import { getCurrentPreset } from "../../common/toolbar-config";
 import { useIsUserPremium } from "../../hooks/use-is-user-premium";
 import { showBuyDialog } from "../../common/dialog-controller";
 import { useStore as useSettingsStore } from "../../stores/setting-store";
+import { debounceWithId } from "../../utils/debounce";
+import { store as editorstore } from "../../stores/editor-store";
 
-const SAVE_INTERVAL = process.env.REACT_APP_TEST ? 0 : 300;
-let saveTimeout = 0;
 type TipTapProps = {
   editorContainer: HTMLElement;
   onLoad?: () => void;
-  onChange?: (content: string) => void;
+  onChange?: (id: string, sessionId: string, content: string) => void;
   onInsertAttachment?: (type: AttachmentType) => void;
   onDownloadAttachment?: (attachment: Attachment) => void;
   onAttachFile?: (file: File) => void;
@@ -61,6 +67,21 @@ type TipTapProps = {
   theme: Theme;
 };
 
+const SAVE_INTERVAL = process.env.REACT_APP_TEST ? 100 : 300;
+
+function save(text: string, onChange: () => void) {
+  onChange();
+  configureEditor({
+    statistics: {
+      words: {
+        total: countWords(text),
+        selected: 0
+      }
+    }
+  });
+}
+const deferredSave = debounceWithId(save, SAVE_INTERVAL);
+
 function TipTap(props: TipTapProps) {
   const {
     onLoad,
@@ -134,20 +155,14 @@ function TipTap(props: TipTapProps) {
       },
       onUpdate: ({ editor }) => {
         if (!editor.isEditable) return;
+        const { id, sessionId } = editorstore.get().session;
+        const content = editor.state.doc.content;
+        const text = editor.view.dom.innerText;
 
-        clearTimeout(saveTimeout);
-        saveTimeout = setTimeout(() => {
-          if (onChange) onChange(editor.getHTML());
-
-          configure({
-            statistics: {
-              words: {
-                total: countWords(editor.view.dom.innerText),
-                selected: 0
-              }
-            }
-          });
-        }, SAVE_INTERVAL) as unknown as number;
+        deferredSave(sessionId, text, () => {
+          const html = getHTMLFromFragment(content, editor.schema);
+          onChange?.(id, sessionId, html);
+        });
       },
       onDestroy: () => {
         configure({

apps/web/src/stores/editor-store.js

@@ -147,8 +147,10 @@ class EditorStore extends BaseStore {
     this.setSaveState(0);
     try {
       const id = await this._getSaveFn()({ ...session, id: sessionId });
-      if (currentSession && currentSession.id !== sessionId)
+      if (currentSession && currentSession.id !== sessionId) {
+        noteStore.refresh();
         throw new Error("Aborting save operation: old session.");
+      }
 
       let note = db.notes.note(id)?.data;
       if (!note) throw new Error("Note not saved.");

packages/editor/src/index.ts

@@ -62,7 +62,8 @@ import { useToolbarStore } from "./toolbar/stores/toolbar-store";
 import { useEditor } from "./hooks/use-editor";
 import {
   EditorOptions,
-  extensions as TiptapCoreExtensions
+  extensions as TiptapCoreExtensions,
+  getHTMLFromFragment
 } from "@tiptap/core";
 import { usePermissionHandler } from "./hooks/use-permission-handler";
 import { Highlight } from "./extensions/highlight";
@@ -223,7 +224,7 @@ const useTiptap = (
   return editor;
 };
 
-export { useTiptap, Toolbar, usePermissionHandler };
+export { useTiptap, Toolbar, usePermissionHandler, getHTMLFromFragment };
 export * from "./types";
 export * from "./extensions/react";
 export * from "./toolbar";