diff --git a/apps/dotcom/src/components/DocumentName/DocumentName.tsx b/apps/dotcom/src/components/DocumentName/DocumentName.tsx index f17daf422..c51bb396c 100644 --- a/apps/dotcom/src/components/DocumentName/DocumentName.tsx +++ b/apps/dotcom/src/components/DocumentName/DocumentName.tsx @@ -26,6 +26,7 @@ import { useActions, useBreakpoint, useEditor, + useToasts, useTranslation, } from 'tldraw' import { FORK_PROJECT_ACTION } from '../../utils/sharing' @@ -66,6 +67,7 @@ export const DocumentNameInner = track(function DocumentNameInner() { const saveFileAction = actions[SAVE_FILE_COPY_ACTION] const editor = useEditor() const msg = useTranslation() + const toasts = useToasts() return (
@@ -243,7 +266,7 @@ export const ShareMenu = React.memo(function ShareMenu() { await shareSnapshot.onSelect('share-menu') setIsUploadingSnapshot(false) setDidCopySnapshotLink(true) - setTimeout(() => setDidCopySnapshotLink(false), 1000) + setTimeout(() => setDidCopySnapshotLink(false), COPY_LINK_TIMEOUT) }} spinner={isUploadingSnapshot} /> @@ -260,6 +283,7 @@ export const ShareMenu = React.memo(function ShareMenu() { readonlyOk label="share-menu.share-project" icon="share-1" + disabled={isUploading} onSelect={async () => { if (isUploading) return setIsUploading(true) @@ -289,7 +313,7 @@ export const ShareMenu = React.memo(function ShareMenu() { await shareSnapshot.onSelect('share-menu') setIsUploadingSnapshot(false) setDidCopySnapshotLink(true) - setTimeout(() => setDidCopySnapshotLink(false), 1000) + setTimeout(() => setDidCopySnapshotLink(false), COPY_LINK_TIMEOUT) }} spinner={isUploadingSnapshot} /> @@ -305,23 +329,3 @@ export const ShareMenu = React.memo(function ShareMenu() { ) }) - -export function getShareUrl(url: string, readonly: boolean) { - if (!readonly) { - return url - } - - const segs = url.split('/') - - // Change the r for a v - segs[segs.length - 2] = 'v' - - // A url might be something like https://www.tldraw.com/r/123?pageId=myPageId - // we want it instead to be https://www.tldraw.com/v/312?pageId=myPageId, ie - // the scrambled room id but not scrambled query params - const [roomId, params] = segs[segs.length - 1].split('?') - segs[segs.length - 1] = lns(roomId) - if (params) segs[segs.length - 1] += '?' + params - - return segs.join('/') -} diff --git a/apps/dotcom/src/utils/sharing.ts b/apps/dotcom/src/utils/sharing.ts index 86c9bc3ae..aa0e0d5ef 100644 --- a/apps/dotcom/src/utils/sharing.ts +++ b/apps/dotcom/src/utils/sharing.ts @@ -104,7 +104,7 @@ export function useSharing(): TLUiOverrides { return useMemo( (): TLUiOverrides => ({ - actions(editor, actions, { addToast, msg, addDialog }) { + actions(editor, actions, { addToast, clearToasts, msg, addDialog }) { actions[LEAVE_SHARED_PROJECT_ACTION] = { id: LEAVE_SHARED_PROJECT_ACTION, label: 'action.leave-shared-project', @@ -124,6 +124,12 @@ export function useSharing(): TLUiOverrides { readonlyOk: true, onSelect: async (source) => { try { + addToast({ + title: msg('share-menu.creating-project'), + severity: 'info', + keepOpen: true, + }) + handleUiEvent('share-project', { source }) const data = await getRoomData(editor, addToast, msg, uploadFileToAsset) if (!data) return @@ -147,6 +153,7 @@ export function useSharing(): TLUiOverrides { const pathname = decodeURIComponent( `/${ROOM_PREFIX}/${response.slug}?${new URLSearchParams(query ?? {}).toString()}` ) + clearToasts() if (runningInIFrame) { window.open(`${origin}${pathname}`) } else { @@ -187,6 +194,10 @@ export function useSharing(): TLUiOverrides { if (link === '') return navigator.clipboard.writeText(await link.text()) } + addToast({ + title: msg('share-menu.copied'), + severity: 'success', + }) }, } actions[FORK_PROJECT_ACTION] = { diff --git a/assets/icons/icon/clipboard-copied.svg b/assets/icons/icon/clipboard-copied.svg index 1860e1516..5bc86e6b8 100644 --- a/assets/icons/icon/clipboard-copied.svg +++ b/assets/icons/icon/clipboard-copied.svg @@ -1,4 +1,4 @@ -