feat: support custom markdown syntax for iframe embeds#12
Merged
wendyyuchensun merged 9 commits intocoseeing:mainfrom Jan 2, 2026
Merged
feat: support custom markdown syntax for iframe embeds#12wendyyuchensun merged 9 commits intocoseeing:mainfrom
wendyyuchensun merged 9 commits intocoseeing:mainfrom
Conversation
wendyyuchensun
force-pushed
the
custom-syntax-1-iframes
branch
from
2bb4dec to
9f1ea02
Compare
wendyyuchensun
force-pushed
the
custom-syntax-1-iframes
branch
from
9f1ea02 to
614e4c7
Compare
wendyyuchensun
force-pushed
the
custom-syntax-1-iframes
branch
from
0b09e33 to
a4e73b9
Compare
jamliaoo
reviewed
Dec 29, 2025
Comment on lines
+27
to
+35
| const determineIframeType = (source) => { | ||
| if (YOUTUBE_REGEXP.test(source)) { | ||
| return SUPPORTED_COMPONENT_TYPES.YOUTUBE; | ||
| } | ||
| if (CODEPEN_REGEXP.test(source)) { | ||
| return SUPPORTED_COMPONENT_TYPES.CODEPEN; | ||
| } | ||
| return SUPPORTED_COMPONENT_TYPES.IFRAME; | ||
| }; |
Contributor
There was a problem hiding this comment.
如果不是 youtube 和 codepen 的話，是不是可以驗證一下是合法的 url 以及使用 http 或 https protocol 呢？因為 IFRAME_REGEXP 只是確認格式，但並不會確保是 url
Collaborator
Author
There was a problem hiding this comment.
Youtube 和 codepen 兩個 type 有驗證 source 需是 https:// 開頭～
const YOUTUBE_REGEXP = /^https:\/\/www\.youtube\.com\/embed\/.*/;
const CODEPEN_REGEXP = /^https:\/\/codepen\.io\/.*\/embed\/.*/;
Contributor
There was a problem hiding this comment.
哦哦不好意思我可能沒講清楚，我的意思是如果是 youtube 和 codepen 以外的連結是不是也需要驗證呢？
Youtube 和 codepen 有透過 regex 驗證我覺得沒問題～
Collaborator
Author
There was a problem hiding this comment.
理解。好問題，我想了一下：
覺得「驗證 iframe 的 source 是合法的 URL，不合法就完全跳過 markdown 轉換」，這個功能若有需求，在實作上沒問題，可以達成～
但是印象原本的 Markdown 本身的語法（像是連結）通常也不會去檢查 input，所以我目前偏向也比照辦理，讓行為統一。
可以晚上再討論看看 :)
Comment on lines
+67
to
+79
| renderer: createRenderer(SUPPORTED_COMPONENT_TYPES.IFRAME), | ||
| }, | ||
| // YouTube renderer extension | ||
| { | ||
| name: SUPPORTED_COMPONENT_TYPES.YOUTUBE, | ||
| level: 'inline', | ||
| renderer: createRenderer(SUPPORTED_COMPONENT_TYPES.YOUTUBE), | ||
| }, | ||
| // Codepen renderer extension | ||
| { | ||
| name: SUPPORTED_COMPONENT_TYPES.CODEPEN, | ||
| level: 'inline', | ||
| renderer: createRenderer(SUPPORTED_COMPONENT_TYPES.CODEPEN), |
Contributor
There was a problem hiding this comment.
createRenderer 的 options parseChildren 應該可以給 false? 因為應該是和 image extension 一樣不會有 children 需要處理了～
jamliaoo
approved these changes
Jan 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add support for custom iframe syntax, with type detection for YouTube, CodePen, and generic embeds.
Syntax
@Examples
@@@Type Detection Logic
The extension detects the iframe type based on the source URL:
https://www.youtube.com/embed/.*https://codepen.io/.*/embed/.*