Share excalidrawings as links! (#356)

* shareable links

* fix

* review comments

* json-excaliber (#464)

* draw

* Boom

* backend

* Remove local

Co-authored-by: Lipis <lipiridis@gmail.com>

src/components/ExportDialog.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef } from "react";
 
 import { Modal } from "./Modal";
 import { ToolIcon } from "./ToolIcon";
-import { clipboard, exportFile, downloadFile } from "./icons";
+import { clipboard, exportFile, downloadFile, link } from "./icons";
 import { Island } from "./Island";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
@@ -30,7 +30,8 @@ export function ExportDialog({
   actionManager,
   syncActionResult,
   onExportToPng,
-  onExportToClipboard
+  onExportToClipboard,
+  onExportToBackend
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
@@ -39,6 +40,7 @@ export function ExportDialog({
   syncActionResult: UpdaterFn;
   onExportToPng: ExportCB;
   onExportToClipboard: ExportCB;
+  onExportToBackend: ExportCB;
 }) {
   const someElementIsSelected = elements.some(element => element.isSelected);
   const [modalIsShown, setModalIsShown] = useState(false);
@@ -108,7 +110,6 @@ export function ExportDialog({
                     aria-label="Export to PNG"
                     onClick={() => onExportToPng(exportedElements, scale)}
                   />
-
                   {probablySupportsClipboard && (
                     <ToolIcon
                       type="button"
@@ -120,6 +121,13 @@ export function ExportDialog({
                       }
                     />
                   )}
+                  <ToolIcon
+                    type="button"
+                    icon={link}
+                    title="Get shareable link"
+                    aria-label="Get shareable link"
+                    onClick={() => onExportToBackend(exportedElements, 1)}
+                  />
                 </Stack.Row>
 
                 {actionManager.renderAction(