use NcReferenceList in whiteboard

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

src/App.tsx

@@ -26,6 +26,8 @@ import { distance2d, resolvablePromise, withBatchedUpdates, withBatchedUpdatesTh
 
 import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
 import { Collab } from './collaboration/collab'
+import Embeddable from './Embeddable'
+import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 
 declare global {
 	interface Window {
@@ -467,10 +469,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" ref={appRef}>
 			<div className="excalidraw-wrapper">
 				<Excalidraw
+					validateEmbeddable={()=>true}
+					renderEmbeddable={(element) => renderEmbeddableTest(element)}
 					excalidrawAPI={(api: ExcalidrawImperativeAPI) => {
 						console.log(api)
 						console.log('Setting API')
@@ -491,7 +499,7 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
 							loadScene: false,
 						},
 					}}
-					renderTopRightUI={renderTopRightUI}
+					// renderTopRightUI={renderTopRightUI}
 					onLinkOpen={onLinkOpen}
 					onPointerDown={onPointerDown}
 					onScrollChange={rerenderCommentIcons}

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

src/sidebar/ExampleSidebar.tsx

@@ -5,33 +5,38 @@
 
 // https://github.com/excalidraw/excalidraw/blob/4dc4590f247a0a0d9c3f5d39fe09c00c5cef87bf/examples/excalidraw
 
-import { useState } from "react";
-import "./ExampleSidebar.scss";
+import { useEffect, useState } from 'react'
+import './ExampleSidebar.scss'
+/**
+ *
+ * @param root0
+ * @param root0.children
+ */
 export default function Sidebar({ children }: { children: React.ReactNode }) {
-  const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(false)
 
-  return (
-    <>
-      <div id="mySidebar" className={`sidebar ${open ? "open" : ""}`}>
-        <button className="closebtn" onClick={() => setOpen(false)}>
+	return (
+		<>
+			<div id="mySidebar" className={`sidebar ${open ? 'open' : ''}`}>
+				<button className="closebtn" onClick={() => setOpen(false)}>
           x
-        </button>
-        <div className="sidebar-links">
-          <button>Dummy Home</button>
-          <button>Dummy About</button>{" "}
-        </div>
-      </div>
-      <div className={`${open ? "sidebar-open" : ""}`}>
-        <button
-          className="openbtn"
-          onClick={() => {
-            setOpen(!open);
-          }}
-        >
+				</button>
+				<div className="sidebar-links">
+					<button>Dummy Home</button>
+					<button>Dummy About</button>{' '}
+				</div>
+			</div>
+			<div className={`${open ? 'sidebar-open' : ''}`}>
+				<button
+					className="openbtn"
+					onClick={() => {
+						setOpen(!open)
+					}}
+				>
           Open Sidebar
-        </button>
-        {children}
-      </div>
-    </>
-  );
+				</button>
+				{children}
+			</div>
+		</>
+	)
 }