smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Implement the Web Share API for the collaboration dialog (#3222)

Browse source 
* feat: Implement the Web Share API for the collaboration dialog

* Make requested changes
This commit is contained in:
Arun 2021-03-11 16:51:17 +05:30 • committed by GitHub
parent bb612fd768
commit 6252b22b42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/excalidraw-app/collab/RoomDialog.tsx
View file

@ -1,10 +1,17 @@
import React, { useRef } from "react";
import { copyTextToSystemClipboard } from "../../clipboard";
import { Dialog } from "../../components/Dialog";
import { clipboard, start, stop } from "../../components/icons";
import {
clipboard,
start,
stop,
share,
shareIOS,
} from "../../components/icons";
import { ToolButton } from "../../components/ToolButton";
import { t } from "../../i18n";
import "./RoomDialog.scss";
import Stack from "../../components/Stack";
const RoomDialog = ({
handleClose,
@ -24,6 +31,8 @@ const RoomDialog = ({
setErrorMessage: (message: string) => void;
}) => {
const roomLinkInput = useRef<HTMLInputElement>(null);
const navigator = window.navigator as any;
const isAppleBrowser = /Apple/.test(navigator.vendor);
const copyRoomLink = async () => {
try {
@ -36,6 +45,18 @@ const RoomDialog = ({
}
};
const shareRoomLink = async () => {
try {
await navigator.share({
title: t("roomDialog.shareTitle"),
text: t("roomDialog.shareTitle"),
url: activeRoomLink,
});
} catch (error) {
// Just ignore.
}
};
const selectInput = (event: React.MouseEvent<HTMLInputElement>) => {
if (event.target !== document.activeElement) {
event.preventDefault();
@ -68,13 +89,24 @@ const RoomDialog = ({
<p>{t("roomDialog.desc_inProgressIntro")}</p>
<p>{t("roomDialog.desc_shareLink")}</p>
<div className="RoomDialog-linkContainer">
<ToolButton
type="button"
icon={clipboard}
title={t("labels.copy")}
aria-label={t("labels.copy")}
onClick={copyRoomLink}
/>
<Stack.Row gap={2}>
{"share" in navigator ? (
<ToolButton
type="button"
icon={isAppleBrowser ? shareIOS : share}
title={t("labels.share")}
aria-label={t("labels.share")}
onClick={shareRoomLink}
/>
) : null}
<ToolButton
type="button"
icon={clipboard}
title={t("labels.copy")}
aria-label={t("labels.copy")}
onClick={copyRoomLink}
/>
</Stack.Row>
<input
value={activeRoomLink}
readOnly={true}