Check stateId before editing tldraw store (#142)

* if localStateId = propStateId don't update store

* 1.10.9

* match nanoid dependancy

* splice refactor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.10.8",
+  "version": "1.10.9",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {
@@ -30,6 +30,7 @@
     "@tldraw/tldraw": "^2.0.0-alpha.12",
     "contrast-color": "^1.0.1",
     "cytoscape-navigator": "^2.0.1",
+    "nanoid": "2.0.4",
     "react-charts": "^3.0.0-beta.48",
     "react-draggable": "^4.4.5",
     "react-in-viewport": "^1.0.0-alpha.20",

src/components/TldrawCanvas.tsx

@@ -88,6 +88,7 @@ import getDiscourseContextResults from "../utils/getDiscourseContextResults";
 import { StoreSnapshot } from "@tldraw/tlstore";
 import setInputSetting from "roamjs-components/util/setInputSetting";
 import ContrastColor from "contrast-color";
+import nanoid from "nanoid";
 
 declare global {
   interface Window {
@@ -1208,6 +1209,7 @@ const TldrawCanvas = ({ title }: Props) => {
   }, [tree, pageUid]);
   const containerRef = useRef<HTMLDivElement>(null);
   const [maximized, setMaximized] = useState(false);
+  const localStateIds: string[] = [];
   const store = useMemo(() => {
     const _store = customTldrawConfig.createStore({
       initialData: initialState.data,
@@ -1232,19 +1234,22 @@ const TldrawCanvas = ({ title }: Props) => {
           typeof props["roamjs-query-builder"] === "object"
             ? props["roamjs-query-builder"]
             : {};
-        // we need this bc Roam doesn't update edit/user or edit/time when we just edit block/props
         await setInputSetting({
           blockUid: pageUid,
           key: "timestamp",
           value: new Date().valueOf().toString(),
         });
+        const newstateId = nanoid();
+        localStateIds.push(newstateId);
+        localStateIds.splice(0, localStateIds.length - 25);
         window.roamAlphaAPI.updateBlock({
           block: {
             uid: pageUid,
             props: {
               ...props,
               ["roamjs-query-builder"]: {
                 ...rjsqb,
+                stateId: newstateId,
                 tldraw: state,
               },
             },
@@ -1264,6 +1269,8 @@ const TldrawCanvas = ({ title }: Props) => {
           (after?.[":block/props"] || {}) as json
         ) as Record<string, json>;
         const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
+        const propsStateId = rjsqb?.stateId as string;
+        if (localStateIds.some((s) => s === propsStateId)) return;
         const newState = rjsqb?.tldraw as Parameters<
           typeof store.deserialize
         >[0];