Open share menu when navigating from create new shared project button (#3898)
This PR ensures that the share menu is open when navigating from the create new shared project button. This could be achieved by calling ```editor.addOpenMenu('share-menu')``` after ```navigate('/new')``` , but that opens the menu on the local editor first so you get a flash of that before the multiplayer editor loads. Instead I've used the state prop on the Navigate component/function to pass a property called shouldOpenShareMenu. If the user presses the back button to return to the local editor instance then the open state of the share menu is preserved, which is actually something we don't want in this case. Not sure how to deal with that without adding a ton more complexity, is it worth it? ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [ ] `sdk` — Changes the tldraw SDK - [x] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Click create new shared project from the file menu 2. Share menu should open after navigating to the new room ### Release Notes - Open share menu when navigating from the create new shared project button. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
parent
6745f2cbcf
commit
4dab25be57
5 changed files with 29 additions and 29 deletions
|
@ -21,8 +21,6 @@ import { createQRCodeImageDataString } from '../utils/qrcode'
|
|||
import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
|
||||
import { ShareButton } from './ShareButton'
|
||||
|
||||
const COPY_LINK_TIMEOUT = 1000
|
||||
|
||||
const SHARE_CURRENT_STATE = {
|
||||
OFFLINE: 'offline',
|
||||
SHARED_READ_WRITE: 'shared-read-write',
|
||||
|
@ -126,9 +124,6 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
const currentQrCodeUrl = isReadOnlyLink
|
||||
? shareState.readonlyQrCodeDataUrl
|
||||
: shareState.qrCodeDataUrl
|
||||
const [didCopy, setDidCopy] = useState(false)
|
||||
const [didCopyReadonlyLink, setDidCopyReadonlyLink] = useState(false)
|
||||
const [didCopySnapshotLink, setDidCopySnapshotLink] = useState(false)
|
||||
const toasts = useToasts()
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -207,8 +202,6 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
)}
|
||||
onClick={() => {
|
||||
if (!currentShareLinkUrl) return
|
||||
setDidCopy(true)
|
||||
setTimeout(() => setDidCopy(false), COPY_LINK_TIMEOUT)
|
||||
navigator.clipboard.writeText(currentShareLinkUrl)
|
||||
toasts.addToast({
|
||||
title: msg('share-menu.copied'),
|
||||
|
@ -221,13 +214,11 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
{shareState.state === SHARE_CURRENT_STATE.SHARED_READ_WRITE && (
|
||||
<TldrawUiMenuItem
|
||||
id="copy-to-clipboard"
|
||||
readonlyOk
|
||||
icon={didCopy ? 'clipboard-copied' : 'clipboard-copy'}
|
||||
readonlyOk={false}
|
||||
label="share-menu.copy-link"
|
||||
icon="clipboard-copy"
|
||||
onSelect={() => {
|
||||
if (!shareState.url) return
|
||||
setDidCopy(true)
|
||||
setTimeout(() => setDidCopy(false), COPY_LINK_TIMEOUT)
|
||||
navigator.clipboard.writeText(shareState.url)
|
||||
toasts.addToast({
|
||||
title: msg('share-menu.copied'),
|
||||
|
@ -239,12 +230,10 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
<TldrawUiMenuItem
|
||||
id="copy-readonly-to-clipboard"
|
||||
readonlyOk
|
||||
icon={didCopyReadonlyLink ? 'clipboard-copied' : 'clipboard-copy'}
|
||||
label="share-menu.copy-readonly-link"
|
||||
icon="clipboard-copy"
|
||||
onSelect={() => {
|
||||
if (!shareState.readonlyUrl) return
|
||||
setDidCopyReadonlyLink(true)
|
||||
setTimeout(() => setDidCopyReadonlyLink(false), COPY_LINK_TIMEOUT)
|
||||
navigator.clipboard.writeText(shareState.readonlyUrl)
|
||||
toasts.addToast({
|
||||
title: msg('share-menu.copied'),
|
||||
|
@ -260,13 +249,11 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
<TldrawUiMenuGroup id="snapshot">
|
||||
<TldrawUiMenuItem
|
||||
{...shareSnapshot}
|
||||
icon={didCopySnapshotLink ? 'clipboard-copied' : 'clipboard-copy'}
|
||||
icon="clipboard-copy"
|
||||
onSelect={async () => {
|
||||
setIsUploadingSnapshot(true)
|
||||
await shareSnapshot.onSelect('share-menu')
|
||||
setIsUploadingSnapshot(false)
|
||||
setDidCopySnapshotLink(true)
|
||||
setTimeout(() => setDidCopySnapshotLink(false), COPY_LINK_TIMEOUT)
|
||||
}}
|
||||
spinner={isUploadingSnapshot}
|
||||
/>
|
||||
|
@ -306,14 +293,12 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
<TldrawUiMenuItem
|
||||
id="copy-snapshot-link"
|
||||
readonlyOk
|
||||
icon={didCopySnapshotLink ? 'clipboard-copied' : 'clipboard-copy'}
|
||||
icon="clipboard-copy"
|
||||
label={unwrapLabel(shareSnapshot.label)}
|
||||
onSelect={async () => {
|
||||
setIsUploadingSnapshot(true)
|
||||
await shareSnapshot.onSelect('share-menu')
|
||||
setIsUploadingSnapshot(false)
|
||||
setDidCopySnapshotLink(true)
|
||||
setTimeout(() => setDidCopySnapshotLink(false), COPY_LINK_TIMEOUT)
|
||||
}}
|
||||
spinner={isUploadingSnapshot}
|
||||
/>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { useEffect, useRef } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { atom, useMenuIsOpen, useValue } from 'tldraw'
|
||||
|
||||
// When people click the 'create shared project' in the share menu we want to make sure that
|
||||
|
@ -12,17 +13,22 @@ export function useShareMenuIsOpen() {
|
|||
const isOpen = useValue('is menu open', () => persistentShareMenuOpenAtom.get(), [])
|
||||
const [isShareMenuOpen, onOpenChange] = useMenuIsOpen('share menu')
|
||||
// on initial render the persistent option takes effect
|
||||
|
||||
const location = useLocation()
|
||||
const isFirst = useRef(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (isFirst.current) {
|
||||
isFirst.current = false
|
||||
if (location.state?.shouldOpenShareMenu) {
|
||||
// if we are navigating from the new shared project button then
|
||||
// we always open the share menu
|
||||
persistentShareMenuOpenAtom.set(true)
|
||||
}
|
||||
onOpenChange(persistentShareMenuOpenAtom.get())
|
||||
} else {
|
||||
persistentShareMenuOpenAtom.set(isShareMenuOpen)
|
||||
}
|
||||
}, [isShareMenuOpen, onOpenChange])
|
||||
}, [isShareMenuOpen, location.state, onOpenChange])
|
||||
|
||||
return [isOpen, onOpenChange] as const
|
||||
}
|
||||
|
|
|
@ -35,5 +35,14 @@ export function Component() {
|
|||
}}
|
||||
/>
|
||||
)
|
||||
return <Navigate replace to={`/${ROOM_PREFIX}/${data.slug}`} />
|
||||
|
||||
return (
|
||||
<Navigate
|
||||
replace
|
||||
state={{
|
||||
shouldOpenShareMenu: true,
|
||||
}}
|
||||
to={`/${ROOM_PREFIX}/${data.slug}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -256,18 +256,18 @@
|
|||
"share-menu.fork-note": "Create a new shared project based on this snapshot.",
|
||||
"share-menu.share-project": "Share this project",
|
||||
"share-menu.default-project-name": "Shared Project",
|
||||
"share-menu.copy-link": "Copy share link",
|
||||
"share-menu.copy-link": "Copy editor link",
|
||||
"share-menu.readonly-link": "Read-only",
|
||||
"share-menu.create-snapshot-link": "Copy snapshot link",
|
||||
"share-menu.snapshot-link-note": "Capture and share this project as a read-only snapshot link.",
|
||||
"share-menu.copy-readonly-link": "Copy read-only link",
|
||||
"share-menu.copy-readonly-link": "Copy viewer link",
|
||||
"share-menu.offline-note": "Create a new shared project based on your current project.",
|
||||
"share-menu.copy-link-note": "Anyone with the link will be able to view and edit this project.",
|
||||
"share-menu.copy-readonly-link-note": "Anyone with the link will be able to access this project.",
|
||||
"share-menu.project-too-large": "Sorry, this project can't be shared because it's too large. We're working on it!",
|
||||
"share-menu.upload-failed": "Sorry, we couldn't upload your project at the moment. Please try again or let us know if the problem persists.",
|
||||
"share-menu.creating-project": "Creating the new project…",
|
||||
"share-menu.copied": "Copied link!",
|
||||
"share-menu.copied": "Copied link",
|
||||
"status.offline": "Offline",
|
||||
"status.online": "Online",
|
||||
"people-menu.title": "People",
|
||||
|
|
|
@ -260,11 +260,11 @@ export const DEFAULT_TRANSLATION = {
|
|||
'share-menu.fork-note': 'Create a new shared project based on this snapshot.',
|
||||
'share-menu.share-project': 'Share this project',
|
||||
'share-menu.default-project-name': 'Shared Project',
|
||||
'share-menu.copy-link': 'Copy share link',
|
||||
'share-menu.copy-link': 'Copy editor link',
|
||||
'share-menu.readonly-link': 'Read-only',
|
||||
'share-menu.create-snapshot-link': 'Copy snapshot link',
|
||||
'share-menu.snapshot-link-note': 'Capture and share this project as a read-only snapshot link.',
|
||||
'share-menu.copy-readonly-link': 'Copy read-only link',
|
||||
'share-menu.copy-readonly-link': 'Copy viewer link',
|
||||
'share-menu.offline-note': 'Create a new shared project based on your current project.',
|
||||
'share-menu.copy-link-note': 'Anyone with the link will be able to view and edit this project.',
|
||||
'share-menu.copy-readonly-link-note': 'Anyone with the link will be able to access this project.',
|
||||
|
@ -273,7 +273,7 @@ export const DEFAULT_TRANSLATION = {
|
|||
'share-menu.upload-failed':
|
||||
"Sorry, we couldn't upload your project at the moment. Please try again or let us know if the problem persists.",
|
||||
'share-menu.creating-project': 'Creating the new project…',
|
||||
'share-menu.copied': 'Copied link!',
|
||||
'share-menu.copied': 'Copied link',
|
||||
'status.offline': 'Offline',
|
||||
'status.online': 'Online',
|
||||
'people-menu.title': 'People',
|
||||
|
|
Loading…
Reference in a new issue