feat: support YouTube watch URL in iframe markdown syntax

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coseeing/see-mark",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A markdown parser for a11y",
   "main": "./lib/see-mark.cjs",
   "files": [

src/markdown-processor/markdown-processor.test.js

@@ -387,7 +387,7 @@ describe('markdownProcessor', () => {
     });
   });
 
-  it('should process YouTube iframe with correct type', () => {
+  it('should process YouTube embed iframe with correct type', () => {
     const markdownContent =
       '@![video](https://www.youtube.com/embed/4mBrMhczurY)';
     const options = {
@@ -423,6 +423,42 @@ describe('markdownProcessor', () => {
     });
   });
 
+  it('should process iframe markdown with YouTube watch URL as source', () => {
+    const markdownContent =
+      '@![video](https://www.youtube.com/watch?v=ZblZKSZqHJc)';
+    const options = {
+      latexDelimiter: 'bracket',
+      documentFormat: 'inline',
+      imageFiles: {},
+    };
+
+    const result = markdownProcessor(markdownContent, options);
+
+    const container = createDOMFromHTML(result);
+
+    const youtubeContainer = getElementByType(
+      container,
+      SUPPORTED_COMPONENT_TYPES.YOUTUBE
+    );
+
+    expect(youtubeContainer).toBeTruthy();
+
+    const payloadString = youtubeContainer.getAttribute(
+      SEE_MARK_PAYLOAD_DATA_ATTRIBUTES
+    );
+
+    const payload = JSON.parse(payloadString);
+
+    expect(payload).toEqual({
+      position: {
+        end: 54,
+        start: 0,
+      },
+      title: 'video',
+      source: 'https://www.youtube.com/embed/ZblZKSZqHJc',
+    });
+  });
+
   it('should process Codepen iframe with correct type', () => {
     const markdownContent =
       '@![My Pen](https://codepen.io/username/embed/abc123)';

src/markdown-processor/marked-extentions/iframe.js

@@ -21,11 +21,20 @@ import { createRenderer } from './helpers';
 // Regex exported for test
 export const IFRAME_REGEXP = /^@!\[([^\]]+)\]\(([^)]+)\)/;
 
-const YOUTUBE_REGEXP = /^https:\/\/www\.youtube\.com\/embed\/.*/;
+const YOUTUBE_EMBED_REGEXP = /^https:\/\/www\.youtube\.com\/embed\/.*/;
+const YOUTUBE_WATCH_REGEXP = /^https:\/\/www\.youtube\.com\/watch\?v=([^&]+)/;
 const CODEPEN_REGEXP = /^https:\/\/codepen\.io\/.*\/embed\/.*/;
 
+const normalizeYoutubeSource = (source) => {
+  const match = source.match(YOUTUBE_WATCH_REGEXP);
+  if (match) {
+    return `https://www.youtube.com/embed/${match[1]}`;
+  }
+  return source;
+};
+
 const determineIframeType = (source) => {
-  if (YOUTUBE_REGEXP.test(source)) {
+  if (YOUTUBE_EMBED_REGEXP.test(source) || YOUTUBE_WATCH_REGEXP.test(source)) {
     return SUPPORTED_COMPONENT_TYPES.YOUTUBE;
   }
   if (CODEPEN_REGEXP.test(source)) {
@@ -49,8 +58,12 @@ const markedIframe = () => {
 
           if (match) {
             const title = match[1];
-            const source = match[2];
-            const type = determineIframeType(source);
+            const rawSource = match[2];
+            const type = determineIframeType(rawSource);
+            const source =
+              type === SUPPORTED_COMPONENT_TYPES.YOUTUBE
+                ? normalizeYoutubeSource(rawSource)
+                : rawSource;
 
             return {
               type,