web: add toggle to enable/disable realtime sync

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

@@ -27,7 +27,10 @@ import {
 import { Box, Button, Flex, Text } from "@theme-ui/components";
 import Properties from "../properties";
 import { useStore, store as editorstore } from "../../stores/editor-store";
-import { useStore as useAppStore } from "../../stores/app-store";
+import {
+  useStore as useAppStore,
+  store as appstore
+} from "../../stores/app-store";
 import Toolbar from "./toolbar";
 import { AppEventManager, AppEvents } from "../../common/app-events";
 import { FlexScrollContainer } from "../scroll-container";
@@ -96,7 +99,8 @@ export default function EditorManager({
         if (
           !item ||
           lastSavedTime.current >= item.dateEdited ||
-          isPreviewSession
+          isPreviewSession ||
+          !appstore.get().isRealtimeSyncEnabled
         )
           return;
 

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

@@ -44,6 +44,7 @@ class AppStore extends BaseStore {
   isVaultCreated = false;
   isAutoSyncEnabled = Config.get("autoSyncEnabled", true);
   isSyncEnabled = Config.get("syncEnabled", true);
+  isRealtimeSyncEnabled = Config.get("isRealtimeSyncEnabled", true);
   syncStatus = {
     key: "synced",
     progress: null,
@@ -154,6 +155,14 @@ class AppStore extends BaseStore {
     }
   };
 
+  toggleRealtimeSync = () => {
+    const { isRealtimeSyncEnabled } = this.get();
+    Config.set("realtimeSyncEnabled", !isRealtimeSyncEnabled);
+    this.set(
+      (state) => (state.isRealtimeSyncEnabled = !state.isRealtimeSyncEnabled)
+    );
+  };
+
   toggleSideMenu = (toggleState) => {
     this.set(
       (state) =>

apps/web/src/views/settings.js

@@ -148,9 +148,13 @@ function Settings() {
   });
   const isVaultCreated = useAppStore((store) => store.isVaultCreated);
   const isSyncEnabled = useAppStore((store) => store.isSyncEnabled);
+  const isRealtimeSyncEnabled = useAppStore(
+    (store) => store.isRealtimeSyncEnabled
+  );
   const isAutoSyncEnabled = useAppStore((store) => store.isAutoSyncEnabled);
   const toggleAutoSync = useAppStore((store) => store.toggleAutoSync);
   const toggleSync = useAppStore((store) => store.toggleSync);
+  const toggleRealtimeSync = useAppStore((store) => store.toggleRealtimeSync);
   const setIsVaultCreated = useAppStore((store) => store.setIsVaultCreated);
   const refreshApp = useAppStore((store) => store.refresh);
   const refreshNotes = useNoteStore((store) => store.refresh);
@@ -425,6 +429,13 @@ function Settings() {
             />
             {groups.sync && (
               <>
+                <Toggle
+                  title="Disable realtime sync in editor"
+                  onTip="All changes in the editor will be synced & updated in realtime."
+                  offTip="You will have to manually open/close a note to see new changes."
+                  onToggled={toggleRealtimeSync}
+                  isToggled={!isRealtimeSyncEnabled}
+                />
                 <Toggle
                   title="Disable sync"
                   onTip="Changes on this device won't sync to your other devices."