From 487addd2e8de26dd80feea0533535c3b7d7954da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Mon, 29 Apr 2024 22:25:32 +0100 Subject: [PATCH] embed: allow embeds like YouTube to link back to its site (#3609) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes https://github.com/tldraw/tldraw/issues/3593 (some drive-by spelling/grammar cleanup) ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `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 - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `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 ### Release Notes - Embeds: fix being able to click on links that go back to the embed's site (e.g. YouTube) --------- Co-authored-by: Steve Ruiz --- packages/tlschema/api-report.md | 10 +++++ packages/tlschema/src/shapes/TLEmbedShape.ts | 40 ++++++++++++-------- 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/tlschema/api-report.md b/packages/tlschema/api-report.md index 979b14ae0..3835c64e5 100644 --- a/packages/tlschema/api-report.md +++ b/packages/tlschema/api-report.md @@ -256,6 +256,9 @@ export const EMBED_DEFINITIONS: readonly [{ readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["google.*"]; + readonly overridePermissions: { + readonly 'allow-presentation': true; + }; readonly title: "Google Maps"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "google_maps"; @@ -309,6 +312,7 @@ export const EMBED_DEFINITIONS: readonly [{ readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"]; readonly isAspectRatioLocked: true; readonly overridePermissions: { + readonly 'allow-popups-to-escape-sandbox': true; readonly 'allow-presentation': true; }; readonly title: "YouTube"; @@ -323,6 +327,9 @@ export const EMBED_DEFINITIONS: readonly [{ readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en"; readonly minHeight: 360; readonly minWidth: 460; + readonly overridePermissions: { + readonly 'allow-popups-to-escape-sandbox': true; + }; readonly title: "Google Calendar"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "google_calendar"; @@ -334,6 +341,9 @@ export const EMBED_DEFINITIONS: readonly [{ readonly hostnames: readonly ["docs.google.*"]; readonly minHeight: 360; readonly minWidth: 460; + readonly overridePermissions: { + readonly 'allow-popups-to-escape-sandbox': true; + }; readonly title: "Google Slides"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "google_slides"; diff --git a/packages/tlschema/src/shapes/TLEmbedShape.ts b/packages/tlschema/src/shapes/TLEmbedShape.ts index ad70e1cc2..0d6a8eee5 100644 --- a/packages/tlschema/src/shapes/TLEmbedShape.ts +++ b/packages/tlschema/src/shapes/TLEmbedShape.ts @@ -83,6 +83,9 @@ export const EMBED_DEFINITIONS = [ width: 720, height: 500, doesResize: true, + overridePermissions: { + 'allow-presentation': true, + }, toEmbedUrl: (url) => { if (url.includes('/maps/')) { const match = url.match(/@(.*),(.*),(.*)z/) @@ -123,8 +126,8 @@ export const EMBED_DEFINITIONS = [ doesResize: true, toEmbedUrl: (url) => { const urlObj = safeParseUrl(url) - // e.g. extract "steveruizok.mathFact" from https://www.val.town/v/steveruizok.mathFact - const matches = urlObj && urlObj.pathname.match(/\/v\/([^/]+)\/?/) + // e.g. extract "steveruizok/mathFact" from https://www.val.town/v/steveruizok/mathFact + const matches = urlObj && urlObj.pathname.match(/\/v\/(.+)\/?/) if (matches) { return `https://www.val.town/embed/${matches[1]}` } @@ -132,8 +135,8 @@ export const EMBED_DEFINITIONS = [ }, fromEmbedUrl: (url) => { const urlObj = safeParseUrl(url) - // e.g. extract "steveruizok.mathFact" from https://www.val.town/v/steveruizok.mathFact - const matches = urlObj && urlObj.pathname.match(/\/embed\/([^/]+)\/?/) + // e.g. extract "steveruizok/mathFact" from https://www.val.town/v/steveruizok/mathFact + const matches = urlObj && urlObj.pathname.match(/\/embed\/(.+)\/?/) if (matches) { return `https://www.val.town/v/${matches[1]}` } @@ -229,6 +232,7 @@ export const EMBED_DEFINITIONS = [ doesResize: true, overridePermissions: { 'allow-presentation': true, + 'allow-popups-to-escape-sandbox': true, }, isAspectRatioLocked: true, toEmbedUrl: (url) => { @@ -272,6 +276,9 @@ export const EMBED_DEFINITIONS = [ minHeight: 360, doesResize: true, instructionLink: 'https://support.google.com/calendar/answer/41207?hl=en', + overridePermissions: { + 'allow-popups-to-escape-sandbox': true, + }, toEmbedUrl: (url) => { const urlObj = safeParseUrl(url) const cidQs = urlObj?.searchParams.get('cid') @@ -313,6 +320,9 @@ export const EMBED_DEFINITIONS = [ minWidth: 460, minHeight: 360, doesResize: true, + overridePermissions: { + 'allow-popups-to-escape-sandbox': true, + }, toEmbedUrl: (url) => { const urlObj = safeParseUrl(url) @@ -571,37 +581,37 @@ export const embedShapePermissionDefaults = { // Disabled permissions // ======================================================================================== // [MDN] Experimental: Allows for downloads to occur without a gesture from the user. - // [REASON] Disabled because otherwise the