filter out spammed updates on embeddables

stop infinite rerending when collaborating

Signed-off-by: grnd-alt <[email protected]>

package.json

@@ -26,6 +26,7 @@
     "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/router": "^3.0.1",
+    "@nextcloud/vue": "^8.14.0",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",

src/App.scss

@@ -34,7 +34,6 @@
 }
 
 .App {
-  text-align: center;
   position: relative;
   height: 100%;
   width: 100%;

src/App.tsx

@@ -21,7 +21,6 @@ import type {
 } from '@excalidraw/excalidraw/types/types'
 import { Collab } from './collaboration/collab'
 import Embeddable from './Embeddable'
-import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import type { ResolvablePromise } from '@excalidraw/excalidraw/types/utils'
 import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 interface WhiteboardAppProps {
@@ -124,16 +123,12 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
 		)
 	}
 
-	const renderEmbeddableTest = (element: NonDeletedExcalidrawElement) => {
-		return React.createElement(Embeddable,{react: React, url: element.link})
-	}
-
 	return (
 		<div className="App">
 			<div className="excalidraw-wrapper">
 				<Excalidraw
-					validateEmbeddable={()=>true}
-					renderEmbeddable={(element) => renderEmbeddableTest(element)}
+					validateEmbeddable={() => true}
+					renderEmbeddable={ Embeddable }
 					excalidrawAPI={(api: ExcalidrawImperativeAPI) => {
 						console.log(api)
 						console.log('Setting API')

src/Embeddable.tsx

@@ -1,20 +1,16 @@
-import VueWrapper from "./VueWrapper"
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
+
+import VueWrapper from './VueWrapper'
 
 /**
  *
+ * @param props componentProps and component to be rendered in Vue
  */
 export default function(props) {
-    const {react} = props
-    let testing = react.useRef('')
-
-    react.useEffect(()=> {
-        fetch("/").then(async resp => {
-            testing.current = await resp.text()
-        })
-    },[])
-
-    const referenceProps = {text: props.url, limit: "1", interactive: true}
-	return (
-        <VueWrapper componentProps={referenceProps} />
-    )
+	const referenceProps = { text: props.link, limit: '1', interactive: true }
+	return React.createElement(VueWrapper, { componentProps: referenceProps, component: NcReferenceList })
 }

src/VueWrapper.tsx

@@ -1,8 +1,11 @@
-import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
 import Vue from 'vue'
 
 const VueWrapper = function(
-	{ componentProps }) {
+	{ componentProps, component }) {
 	const vueRef = React.useRef(null)
 	const [vueInstance, setVueInstance] = React.useState(undefined)
 
@@ -23,7 +26,7 @@ const VueWrapper = function(
 				}
 			},
 			render(h) {
-				return h(NcReferenceList, {
+				return h(component, {
 					props: this.props,
 				})
 			},
@@ -37,7 +40,7 @@ const VueWrapper = function(
 	React.useEffect(() => {
 		if (vueInstance) {
 			const keys = Object.keys(componentProps)
-			keys.forEach(key => vueInstance.props[key] = componentProps[key])
+			keys.forEach(key => { vueInstance.props[key] = componentProps[key] })
 		}
 	}, [Object.values(componentProps)])
 

src/collaboration/util.ts

@@ -5,6 +5,7 @@
 
 import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import type { AppState } from '@excalidraw/excalidraw/types/types'
+import { isObject } from 'lodash'
 
 /**
  * Hashes elements' versionNonce (using djb2 algo). Order of elements matters.
@@ -16,6 +17,35 @@ export const hashElementsVersion = (
 	return elements.reduce((acc, el) => acc + el.version, 0)
 }
 
+/**
+ *
+ * @param obj1 object 1 to compare
+ * @param obj2 object 2 to compare
+ * @param exceptions keys that are not required to be equal
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isDeepEqual(obj1:any, obj2: any, exceptions: Array<string>) {
+
+	const keys1 = Object.keys(obj1)
+	const keys2 = Object.keys(obj2)
+
+	if (keys1.length !== keys2.length) return false
+
+	for (const key of keys1) {
+		const val1 = obj1[key]
+		const val2 = obj2[key]
+
+		const areObjects = isObject(val1) && isObject(val2)
+
+		if ((areObjects && !isDeepEqual(val1, val2, exceptions)) || (!areObjects && val1 !== val2)) {
+			if (!exceptions.includes(key)) {
+				return false
+			}
+		}
+	}
+	return true
+}
+
 /**
  * decides if remote or local element should be kept
  * @param localAppState state of the app
@@ -38,6 +68,13 @@ export function shouldDiscardRemoteElement(localAppState: Readonly<AppState>, lo
 	) {
 		return true
 	}
+
+	// embeddables get updated a lot by the excalidraw library when collaboration is active
+	// we need to filter out useless updates to not rerender every millisecond.
+	// current master of the excalidraw library probably fixes this issue but it's not available in excalidraw@latest (0.17.6)
+	if (localElement && localElement.type === 'embeddable' && isDeepEqual(localElement, remoteElement, ['versionNonce', 'version', 'updated', 'validated'])) {
+		return true
+	}
 	return false
 }