Merge pull request #325 from nextcloud/feat/screenshot

feat: Add option to take screenshot of the visible area

src/App.tsx

@@ -9,7 +9,7 @@
 /* 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 { mdiSlashForwardBox, mdiMonitorScreenshot } from '@mdi/js'
 import { createRoot } from 'react-dom'
 import {
 	Excalidraw,
@@ -212,13 +212,28 @@ export default function App({
 			addWebEmbed(link)
 		})
 	}
+
+	const takeScreenshot = () => {
+		const dataUrl = document.querySelector('.excalidraw__canvas').toDataURL('image/png')
+		const downloadLink = document.createElement('a')
+		downloadLink.href = dataUrl
+		downloadLink.download = `${fileNameWithoutExtension} Screenshot.png`
+		document.body.appendChild(downloadLink)
+		downloadLink.click()
+	}
+
 	const renderMenu = () => {
 		return (
 			<MainMenu>
 				<MainMenu.DefaultItems.ToggleTheme />
 				<MainMenu.DefaultItems.ChangeCanvasBackground />
 				<MainMenu.Separator />
 				<MainMenu.DefaultItems.SaveAsImage />
+				<MainMenu.Item
+					icon={<Icon path={mdiMonitorScreenshot} size="16px" />}
+					onSelect={() => takeScreenshot()}>
+					{ 'Download screenshot' }
+				</MainMenu.Item>
 			</MainMenu>
 		)
 	}