Fix many syncing issues (#952)

src/element/mutateElement.ts

@@ -1,4 +1,5 @@
 import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+import { randomSeed } from "roughjs/bin/math";
 
 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
@@ -10,17 +11,25 @@ type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
 // the same drawing.
 export function mutateElement(
   element: ExcalidrawElement,
-  updates: ElementUpdate<ExcalidrawElement>,
+  updates?: ElementUpdate<ExcalidrawElement>,
 ) {
-  Object.assign(element, updates);
+  if (updates) {
+    Object.assign(element, updates);
+  }
   (element as any).version++;
+  (element as any).versionNonce = randomSeed();
 }
 
 export function newElementWith(
   element: ExcalidrawElement,
   updates: ElementUpdate<ExcalidrawElement>,
 ): ExcalidrawElement {
-  return { ...element, ...updates, version: element.version + 1 };
+  return {
+    ...element,
+    ...updates,
+    version: element.version + 1,
+    versionNonce: randomSeed(),
+  };
 }
 
 // This function tracks updates of text elements for the purposes for collaboration.
@@ -32,11 +41,17 @@ export function mutateTextElement(
 ): void {
   Object.assign(element, updates);
   (element as any).version++;
+  (element as any).versionNonce = randomSeed();
 }
 
 export function newTextElementWith(
   element: ExcalidrawTextElement,
   updates: ElementUpdate<ExcalidrawTextElement>,
 ): ExcalidrawTextElement {
-  return { ...element, ...updates, version: element.version + 1 };
+  return {
+    ...element,
+    ...updates,
+    version: element.version + 1,
+    versionNonce: randomSeed(),
+  };
 }