Merge pull request #108 from nextcloud/feat/74-smart-picker-for-inser…

…ting-embeddings

add smartPicker for file embeddings

package.json

@@ -18,9 +18,12 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "^0.17.6",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "@mdi/svg": "^7.4.47",
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.0",
+    "@nextcloud/dialogs": "^5.3.5",
     "@nextcloud/event-bus": "^3.3.1",
     "@nextcloud/files": "^3.8.0",
     "@nextcloud/initial-state": "^2.2.0",
@@ -78,4 +81,4 @@
     "node": "^20",
     "npm": "^9"
   }
-}
+}

src/App.tsx

@@ -8,10 +8,14 @@
 /* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { Icon } from '@mdi/react'
+import { mdiSlashForwardBox } from '@mdi/js'
+import { createRoot } from 'react-dom'
 import {
 	Excalidraw,
 	MainMenu,
 	useHandleLibrary,
+	viewportCoordsToSceneCoords,
 } from '@excalidraw/excalidraw'
 import './App.scss'
 import { resolvablePromise } from './utils'
@@ -23,6 +27,7 @@ import { Collab } from './collaboration/collab'
 import Embeddable from './Embeddable'
 import type { ResolvablePromise } from '@excalidraw/excalidraw/types/utils'
 import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
 interface WhiteboardAppProps {
 	fileId: number;
 	fileName: string;
@@ -72,6 +77,16 @@ export default function App({ fileId, isEmbedded, fileName }: WhiteboardAppProps
 
 	if (excalidrawAPI && !collab) setCollab(new Collab(excalidrawAPI, fileId))
 	if (collab && !collab.portal.socket) collab.startCollab()
+	useEffect(() => {
+		const extraTools = document.getElementsByClassName('App-toolbar__extra-tools-trigger')[0]
+		const smartPick = document.createElement('label')
+		smartPick.classList.add(...['ToolIcon', 'Shape'])
+		if (extraTools) {
+			extraTools.parentNode?.insertBefore(smartPick, extraTools.nextElementSibling)
+			const root = createRoot(smartPick)
+			root.render(renderSmartPicker())
+		}
+	})
 
 	useEffect(() => {
 		return () => {
@@ -114,7 +129,49 @@ export default function App({ fileId, isEmbedded, fileName }: WhiteboardAppProps
 		},
 		[],
 	)
-
+	const addWebEmbed = (link:string) => {
+		let cords: { x: any; y: any }
+		if (excalidrawAPI) {
+			cords = viewportCoordsToSceneCoords({ clientX: 100, clientY: 100 }, excalidrawAPI.getAppState())
+		} else {
+			cords = { x: 0, y: 0 }
+		}
+		const elements = excalidrawAPI?.getSceneElementsIncludingDeleted().slice()
+		elements?.push({
+			link,
+			id: (Math.random() + 1).toString(36).substring(7),
+			x: cords.x,
+			y: cords.y,
+			strokeColor: '#1e1e1e',
+			backgroundColor: 'transparent',
+			fillStyle: 'solid',
+			strokeWidth: 2,
+			strokeStyle: 'solid',
+			roundness: null,
+			roughness: 1,
+			opacity: 100,
+			width: 400,
+			height: 200,
+			angle: 0,
+			seed: 0,
+			version: 0,
+			versionNonce: 0,
+			isDeleted: false,
+			groupIds: [],
+			frameId: null,
+			boundElements: null,
+			updated: 0,
+			locked: false,
+			type: 'embeddable',
+			validated: true,
+		})
+		excalidrawAPI?.updateScene({ elements })
+	}
+	const pickFile = () => {
+		getLinkWithPicker(null, true).then((link: string) => {
+			addWebEmbed(link)
+		})
+	}
 	const renderMenu = () => {
 		return (
 			<MainMenu>
@@ -126,6 +183,14 @@ export default function App({ fileId, isEmbedded, fileName }: WhiteboardAppProps
 		)
 	}
 
+	const renderSmartPicker = () => {
+		return (
+			<button className="dropdown-menu-button App-toolbar__extra-tools-trigger" aria-label="Smart picker" aria-keyshortcuts="0" onClick={pickFile} title='Smart picker'>
+				<Icon path={mdiSlashForwardBox} size={1} />
+			</button>
+		)
+	}
+
 	return (
 		<div className="App">
 			<div className="excalidraw-wrapper">