fix: Pass proper file id in all scenarios

lib/Controller/WhiteboardController.php

@@ -37,7 +37,11 @@ public function show(int $fileId): DataResponse {
 		$userFolder = $this->rootFolder->getUserFolder($user?->getUID());
 		$file = $userFolder->getById($fileId)[0];
 
-		$data = json_decode($file->getContent(), true, 512, JSON_THROW_ON_ERROR);
+		$fileContent = $file->getContent();
+		if ($fileContent === '') {
+			$fileContent = '{"elements":[],"scrollToContent":true}';
+		}
+		$data = json_decode($fileContent, true, 512, JSON_THROW_ON_ERROR);
 
 		return new DataResponse([
 			'data' => $data,

src/App.tsx

@@ -51,14 +51,16 @@ const COMMENT_ICON_DIMENSION = 32
 const COMMENT_INPUT_HEIGHT = 50
 const COMMENT_INPUT_WIDTH = 150
 
-/**
- *
- */
-export default function App() {
+interface WhiteboardAppProps {
+	fileId: number;
+	isEmbedded: boolean;
+}
+
+export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
 	const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
 	const appRef = useRef<any>(null)
-	const [viewModeEnabled, setViewModeEnabled] = useState(false)
-	const [zenModeEnabled, setZenModeEnabled] = useState(false)
+	const [viewModeEnabled, setViewModeEnabled] = useState(isEmbedded)
+	const [zenModeEnabled, setZenModeEnabled] = useState(isEmbedded)
 	const [gridModeEnabled, setGridModeEnabled] = useState(false)
 	const [blobUrl, setBlobUrl] = useState<string>('')
 	const [canvasUrl, setCanvasUrl] = useState<string>('')
@@ -84,7 +86,7 @@ export default function App() {
 	] = useState<ExcalidrawImperativeAPI | null>(null)
 	const [collab, setCollab] = useState<Collab | null>(null)
 
-	if (excalidrawAPI && !collab) setCollab(new Collab(excalidrawAPI))
+	if (excalidrawAPI && !collab) setCollab(new Collab(excalidrawAPI, fileId))
 	if (collab && !collab.portal.socket) collab.startCollab()
 
 	useHandleLibrary({excalidrawAPI})

src/collaboration/collab.ts

@@ -14,16 +14,9 @@ export class Collab {
 	lastBroadcastedOrReceivedSceneVersion: number = -1
 	private collaborators = new Map<string, Collaborator>()
 
-	constructor(excalidrawAPI: ExcalidrawImperativeAPI) {
+	constructor(excalidrawAPI: ExcalidrawImperativeAPI, fileId: number) {
 		this.excalidrawAPI = excalidrawAPI
-		const url = window.location.href
-		const fileIdMatch = url.match(/\/files\/(\d+)\?/)
-
-		if (fileIdMatch) {
-			this.portal = new Portal(fileIdMatch[1], '1', this)
-		} else {
-			throw new Error('No FileId found in URL')
-		}
+		this.portal = new Portal(String(fileId), '1', this)
 	}
 
 	startCollab() {

src/main.tsx

@@ -29,20 +29,22 @@ const Component = {
 	name: 'Whiteboard',
 	render(createElement: (arg0: string, arg1: { attrs: { id: string } }, arg2: string) => any) {
 		this.$emit('update:loaded', true)
+		const randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
 		this.$nextTick(() => {
-			const rootElement = document.getElementById('whiteboard')
+			const rootElement = document.getElementById('whiteboard-' + randomId)
 			const root = createRoot(rootElement)
 
 			root.render(
 				<StrictMode>
-					<App />
+					<App fileId={this.fileid} isEmbedded={this.isEmbedded}/>
 				</StrictMode>,
 			)
 		})
 		return createElement('div', {
 			attrs: {
-				id: 'whiteboard',
+				id: 'whiteboard-' + randomId,
 			},
+			class: ['whiteboard', { 'whiteboard-viewer__embedding': this.isEmbedded }],
 		}, 'Hello whiteboard')
 	},
 	props: {
@@ -54,6 +56,10 @@ const Component = {
 			type: Number,
 			default: null,
 		},
+		isEmbedded: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {}

src/viewer.css

@@ -1,6 +1,11 @@
-#whiteboard {
+.whiteboard {
 	width: 100%;
 	height: calc(100% + 50px);
 	position: absolute;
 	top: 0;
 }
+
+.whiteboard-viewer__embedding {
+	min-height: min(200px, 50vh);
+	position: relative;
+}