Merge branch 'mitja/readonly-url' into mime/iframe-protector-updates

apps/dotcom/src/components/IFrameProtector.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useState, version } from 'react'
 import { LoadingScreen } from 'tldraw'
 import { useUrl } from '../hooks/useUrl'
+import { isInIframe } from '../utils/iFrame'
 import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'
 
 /*
@@ -50,10 +51,6 @@ const WHITELIST_CONTEXT = [
 const EXPECTED_QUESTION = 'are we cool?'
 const EXPECTED_RESPONSE = 'yes' + version
 
-const isInIframe = () => {
-	return typeof window !== 'undefined' && (window !== window.top || window.self !== window.parent)
-}
-
 export function IFrameProtector({
 	slug,
 	context,

apps/dotcom/src/components/ShareMenu.tsx

@@ -182,10 +182,10 @@ export const ShareMenu = React.memo(function ShareMenu() {
 											icon={didCopy ? 'clipboard-copied' : 'clipboard-copy'}
 											label="share-menu.copy-link"
 											onSelect={() => {
-												if (!currentShareLinkUrl) return
+												if (!shareState.url) return
 												setDidCopy(true)
 												setTimeout(() => setDidCopy(false), 750)
-												navigator.clipboard.writeText(currentShareLinkUrl)
+												navigator.clipboard.writeText(shareState.url)
 											}}
 										/>
 									)}
@@ -195,10 +195,10 @@ export const ShareMenu = React.memo(function ShareMenu() {
 										icon={didCopyReadonlyLink ? 'clipboard-copied' : 'clipboard-copy'}
 										label="share-menu.copy-readonly-link"
 										onSelect={() => {
-											if (!currentShareLinkUrl) return
+											if (!shareState.readonlyUrl) return
 											setDidCopyReadonlyLink(true)
 											setTimeout(() => setDidCopyReadonlyLink(false), 750)
-											navigator.clipboard.writeText(currentShareLinkUrl)
+											navigator.clipboard.writeText(shareState.readonlyUrl)
 										}}
 									/>
 									<p className="tlui-menu__group tlui-share-zone__details">

apps/dotcom/src/utils/iFrame.ts

@@ -0,0 +1,3 @@
+export const isInIframe = () => {
+	return typeof window !== 'undefined' && (window !== window.top || window.self !== window.parent)
+}

apps/dotcom/src/utils/sharing.ts

@@ -20,6 +20,7 @@ import { useMultiplayerAssets } from '../hooks/useMultiplayerAssets'
 import { getViewportUrlQuery } from '../hooks/useUrlState'
 import { cloneAssetForShare } from './cloneAssetForShare'
 import { ASSET_UPLOADER_URL } from './config'
+import { isInIframe } from './iFrame'
 import { shouldLeaveSharedProject } from './shouldLeaveSharedProject'
 import { trackAnalyticsEvent } from './trackAnalyticsEvent'
 import { UI_OVERRIDE_TODO_EVENT, useHandleUiEvents } from './useHandleUiEvent'
@@ -95,6 +96,7 @@ export function useSharing(): TLUiOverrides {
 	const id = useSearchParams()[0].get('id') ?? undefined
 	const uploadFileToAsset = useMultiplayerAssets(ASSET_UPLOADER_URL)
 	const handleUiEvent = useHandleUiEvents()
+	const runningInIFrame = isInIframe()
 
 	return useMemo(
 		(): TLUiOverrides => ({
@@ -140,8 +142,13 @@ export function useSharing(): TLUiOverrides {
 							}
 
 							const query = getViewportUrlQuery(editor)
-
-							navigate(`/r/${response.slug}?${new URLSearchParams(query ?? {}).toString()}`)
+							const origin = window.location.origin
+							const pathname = `/r/${response.slug}?${new URLSearchParams(query ?? {}).toString()}`
+							if (runningInIFrame) {
+								window.open(`${origin}${pathname}`)
+							} else {
+								navigate(pathname)
+							}
 						} catch (error) {
 							console.error(error)
 							addToast({
@@ -182,12 +189,12 @@ export function useSharing(): TLUiOverrides {
 				actions[FORK_PROJECT_ACTION] = {
 					...actions[SHARE_PROJECT_ACTION],
 					id: FORK_PROJECT_ACTION,
-					label: 'action.fork-project',
+					label: runningInIFrame ? 'action.fork-project-on-tldraw' : 'action.fork-project',
 				}
 				return actions
 			},
 		}),
-		[handleUiEvent, navigate, uploadFileToAsset, id]
+		[handleUiEvent, navigate, uploadFileToAsset, id, runningInIFrame]
 	)
 }
 

assets/translations/main.json

@@ -48,6 +48,7 @@
 	"action.flip-horizontal.short": "Flip H",
 	"action.flip-vertical.short": "Flip V",
 	"action.fork-project": "Fork this project",
+	"action.fork-project-on-tldraw": "Fork project on tldraw",
 	"action.group": "Group",
 	"action.insert-embed": "Insert embed",
 	"action.insert-media": "Upload media",

packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -52,6 +52,7 @@ export type TLUiTranslationKey =
 	| 'action.flip-horizontal.short'
 	| 'action.flip-vertical.short'
 	| 'action.fork-project'
+	| 'action.fork-project-on-tldraw'
 	| 'action.group'
 	| 'action.insert-embed'
 	| 'action.insert-media'

packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -52,6 +52,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.flip-horizontal.short': 'Flip H',
 	'action.flip-vertical.short': 'Flip V',
 	'action.fork-project': 'Fork this project',
+	'action.fork-project-on-tldraw': 'Fork project on tldraw',
 	'action.group': 'Group',
 	'action.insert-embed': 'Insert embed',
 	'action.insert-media': 'Upload media',