System clipboard (#2117)

src/components/App.tsx

@@ -100,8 +100,8 @@ import { getDefaultAppState } from "../appState";
 import { t, getLanguage } from "../i18n";
 
 import {
-  copyToAppClipboard,
-  getClipboardContent,
+  copyToClipboard,
+  parseClipboard,
   probablySupportsClipboardBlob,
   probablySupportsClipboardWriteText,
 } from "../clipboard";
@@ -174,6 +174,7 @@ import {
   shouldEnableBindingForPointerEvent,
 } from "../element/binding";
 import { MaybeTransformHandleType } from "../element/transformHandles";
+import { renderSpreadsheet } from "../charts";
 
 /**
  * @param func handler taking at most single parameter (event).
@@ -872,7 +873,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   });
 
   private copyAll = () => {
-    copyToAppClipboard(this.scene.getElements(), this.state);
+    copyToClipboard(this.scene.getElements(), this.state);
   };
 
   private copyToClipboardAsPng = () => {
@@ -960,14 +961,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       ) {
         return;
       }
-      const data = await getClipboardContent(
-        this.state,
-        cursorX,
-        cursorY,
-        event,
-      );
-      if (data.error) {
-        alert(data.error);
+      const data = await parseClipboard(event);
+      if (data.errorMessage) {
+        this.setState({ errorMessage: data.errorMessage });
+      } else if (data.spreadsheet) {
+        this.addElementsFromPasteOrLibrary(
+          renderSpreadsheet(this.state, data.spreadsheet, cursorX, cursorY),
+        );
       } else if (data.elements) {
         this.addElementsFromPasteOrLibrary(data.elements);
       } else if (data.text) {

src/components/LayerUI.tsx

@@ -371,6 +371,9 @@ const LayerUI = ({
               onUsernameChange={onUsernameChange}
               onRoomCreate={onRoomCreate}
               onRoomDestroy={onRoomDestroy}
+              setErrorMessage={(message: string) =>
+                setAppState({ errorMessage: message })
+              }
             />
           </Stack.Row>
           <BackgroundPickerAndDarkModeToggle

src/components/MobileMenu.tsx

@@ -100,6 +100,9 @@ export const MobileMenu = ({
                   onUsernameChange={onUsernameChange}
                   onRoomCreate={onRoomCreate}
                   onRoomDestroy={onRoomDestroy}
+                  setErrorMessage={(message: string) =>
+                    setAppState({ errorMessage: message })
+                  }
                 />
                 <BackgroundPickerAndDarkModeToggle
                   actionManager={actionManager}

src/components/RoomDialog.tsx

@@ -16,6 +16,7 @@ const RoomModal = ({
   onRoomCreate,
   onRoomDestroy,
   onPressingEnter,
+  setErrorMessage,
 }: {
   activeRoomLink: string;
   username: string;
@@ -23,11 +24,16 @@ const RoomModal = ({
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
   onPressingEnter: () => void;
+  setErrorMessage: (message: string) => void;
 }) => {
   const roomLinkInput = useRef<HTMLInputElement>(null);
 
-  const copyRoomLink = () => {
-    copyTextToSystemClipboard(activeRoomLink);
+  const copyRoomLink = async () => {
+    try {
+      await copyTextToSystemClipboard(activeRoomLink);
+    } catch (error) {
+      setErrorMessage(error.message);
+    }
     if (roomLinkInput.current) {
       roomLinkInput.current.select();
     }
@@ -127,6 +133,7 @@ export const RoomDialog = ({
   onUsernameChange,
   onRoomCreate,
   onRoomDestroy,
+  setErrorMessage,
 }: {
   isCollaborating: AppState["isCollaborating"];
   collaboratorCount: number;
@@ -134,6 +141,7 @@ export const RoomDialog = ({
   onUsernameChange: (username: string) => void;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
+  setErrorMessage: (message: string) => void;
 }) => {
   const [modalIsShown, setModalIsShown] = useState(false);
   const [activeRoomLink, setActiveRoomLink] = useState("");
@@ -182,6 +190,7 @@ export const RoomDialog = ({
             onRoomCreate={onRoomCreate}
             onRoomDestroy={onRoomDestroy}
             onPressingEnter={handleClose}
+            setErrorMessage={setErrorMessage}
           />
         </Dialog>
       )}