Notion: import YouTube videos and blockquotes

[madebyisaacr]

Description

This pull request adds support for importing YouTube videos and blockquotes from Notion in formatted text.

Blockquotes are added with the <blockquote> HTML element.

YouTube videos are added with the <template> element and the YouTube component's identifier, which is the same way the CMS Export plugin exports YouTube videos to HTML. Having a component identifier hardcoded in the plugin may not be ideal, but as far as I can tell it works without any issues.

Other Notion video types (Vimeo and file upload) are not imported because Framer does not support those in formatted text yet.

Testing

• Create a Notion page in a database.
• Add a blockquote to the page content.
• Add a YouTube video embed to the page content.

[triozer]

Thanks for the PR!

We recently updated our CMS export, could you please update the implementation to match the newest formats?

[triozer]

We could potentially rely on RegEx to simplify this logic:

const VIMEO_ID_REGEX = /vimeo\.com\/(?<videoId>[^?]+)/u
const YOUTUBE_ID_REGEX = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))(?<videoId>[^?&]+)/u

I'll let you adjust the embed src for Vimeo, or you can use Framer's default by not passing any query variables.

Suggested change

	const url = block.video.external.url
	if (url && (url.includes("youtube.com") || url.includes("youtu.be"))) {
	try {
	const urlObj = new URL(url)
	let videoId = ""
	if (urlObj.hostname === "youtube.com" || urlObj.hostname === "www.youtube.com") {
	videoId = urlObj.searchParams.get("v") || ""
	} else if (urlObj.hostname === "youtu.be") {
	videoId = urlObj.pathname.slice(1)
	}
	if (videoId && /^[a-zA-Z0-9_-]{11}$/.test(videoId)) {
	const embedUrl = `https://www.youtube.com/embed/${encodeURIComponent(
	videoId
	)}?controls=0&autoplay=0&loop=0&mute=1`
	htmlContent += `<iframe src="${embedUrl}"></iframe>`
	}
	} catch (error) {
	console.warn("Invalid YouTube URL:", url)
	}
	const url = block.video.external.url
	const vimeoId = url.match(VIMEO_ID_REGEX)?.groups?.videoId
	const youtubeId = url.match(YOUTUBE_ID_REGEX)?.groups?.videoId
	if (vimeoId) {
	htmlContent += `<iframe src="https://player.vimeo.com/video/${vimeoId}"></iframe>`
	break
	} else if (youtubeId) {
	htmlContent += `<iframe src="https://www.youtube.com/embed/${youtubeId}"></iframe>`
	break
	}
	console.warn("Unsupported video URL:", block.video.external.url)

[madebyisaacr]

Great, this is much simpler. I updated it to use your code for YouTube videos, but left Vimeo videos out because it shows this in the formatted text when importing videos from Vimeo:

Since Vimeo videos aren't supported in the formatted text editor yet, we can leave it out for now and add it later when it becomes officially supported.