-
Notifications
You must be signed in to change notification settings - Fork 54
Notion: import YouTube videos and blockquotes #116
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -92,7 +92,38 @@ export function blocksToHtml(blocks: BlockObjectResponse[]) { | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| break | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| case "code": | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| htmlContent += `<pre><code class="language-${block.code.language.replace(" ", "-")}">${richTextToHTML(block.code.rich_text)}</code></pre>` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| htmlContent += `<pre data-language="${ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| CODE_LANGUAGE_MAPPING[block.code.language] || "JavaScript" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| }"><code>${richTextToHTML(block.code.rich_text)}</code></pre>` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| break | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
madebyisaacr marked this conversation as resolved.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| case "quote": | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| htmlContent += `<blockquote>${richTextToHTML(block.quote.rich_text)}</blockquote>` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| break | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| case "video": | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| if (block.video.type === "external") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 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) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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>[^?&]+)/uI'll let you adjust the embed src for Vimeo, or you can use Framer's default by not passing any query variables.
Suggested change
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| break | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
madebyisaacr marked this conversation as resolved.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| default: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| // TODO: More block types can be added here! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -102,3 +133,78 @@ export function blocksToHtml(blocks: BlockObjectResponse[]) { | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| return htmlContent | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| const CODE_LANGUAGE_MAPPING = { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| abap: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| arduino: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| bash: "Shell", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| basic: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| c: "C", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| clojure: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| coffeescript: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "c++": "C++", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "c#": "C#", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| css: "CSS", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| dart: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| diff: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| docker: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| elixir: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| elm: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| erlang: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| flow: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fortran: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "f#": null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| gherkin: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| glsl: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| go: "Go", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| graphql: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| groovy: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| haskell: "Haskell", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| html: "HTML", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| java: "Java", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| javascript: "JavaScript", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| json: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| julia: "Julia", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| kotlin: "Kotlin", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| latex: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| less: "Less", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| lisp: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| livescript: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| lua: "Lua", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| makefile: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| markdown: "Markdown", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| markup: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| matlab: "MATLAB", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| mermaid: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| nix: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "objective-c": "Objective-C", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ocaml: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| pascal: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| perl: "Perl", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| php: "PHP", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "plain text": null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| powershell: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| prolog: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| protobuf: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| python: "Python", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| r: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| reason: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ruby: "Ruby", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rust: "Rust", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| sass: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| scala: "Scala", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| scheme: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| scss: "SCSS", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| shell: "Shell", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| sql: "SQL", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| swift: "Swift", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typescript: "TypeScript", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "vb.net": null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| verilog: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| vhdl: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "visual basic": null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| webassembly: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| xml: null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| yaml: "YAML", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "java/c/c++/c#": null, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Uh oh!
There was an error while loading. Please reload this page.