use NcReferenceList in whiteboard

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

src/App.tsx

@@ -20,6 +20,8 @@ import type {
 	ExcalidrawInitialDataState,
 } 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 {
@@ -122,10 +124,16 @@ 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)}
 					excalidrawAPI={(api: ExcalidrawImperativeAPI) => {
 						console.log(api)
 						console.log('Setting API')

src/Embeddable.tsx

@@ -0,0 +1,20 @@
+import VueWrapper from "./VueWrapper"
+
+/**
+ *
+ */
+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} />
+    )
+}

src/VueWrapper.tsx

@@ -0,0 +1,47 @@
+import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
+import Vue from 'vue'
+
+const VueWrapper = function(
+	{ componentProps }) {
+	const vueRef = React.useRef(null)
+	const [vueInstance, setVueInstance] = React.useState(undefined)
+
+	React.useEffect(() => {
+		/**
+		 *
+		 */
+		async function createVueInstance() {
+		}
+
+		createVueInstance()
+
+		setVueInstance(new Vue({
+			el: vueRef.current,
+			data() {
+				return {
+					props: componentProps,
+				}
+			},
+			render(h) {
+				return h(NcReferenceList, {
+					props: this.props,
+				})
+			},
+		}))
+
+		return () => {
+			vueInstance?.$destroy()
+		}
+	}, [])
+
+	React.useEffect(() => {
+		if (vueInstance) {
+			const keys = Object.keys(componentProps)
+			keys.forEach(key => vueInstance.props[key] = componentProps[key])
+		}
+	}, [Object.values(componentProps)])
+
+	return <div id="vue-component" ref={vueRef}></div>
+}
+
+export default VueWrapper