feat: iframe/youtube/codepen apply 16:9 sizing in preview panel

src/components/parser-components/codepen/codepen.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// adapted from CodePen official embed
+const CodePen = ({ title = '', source = '' }) => (
+  <iframe
+    src={source}
+    title={title}
+    scrolling="no"
+    frameBorder="no"
+    loading="lazy"
+    // eslint-disable-next-line react/no-unknown-property
+    allowTransparency="true"
+    className="block w-full aspect-video border-0"
+  />
+);
+
+CodePen.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.string,
+};
+
+export default CodePen;

src/components/parser-components/iframe/iframe.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Iframe = ({ title = '', source = '' }) => (
+  <iframe title={title} src={source} className="block w-full aspect-video border-0" />
+);
+
+Iframe.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.string,
+};
+
+export default Iframe;

src/components/parser-components/youtube/youtube.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// adapted from YouTube official embed
+const YouTube = ({ title = '', source = '' }) => (
+  <iframe
+    src={source}
+    title={title}
+    frameBorder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerPolicy="strict-origin-when-cross-origin"
+    allowFullScreen
+    className="block w-full aspect-video border-0"
+  />
+);
+
+YouTube.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.string,
+};
+
+export default YouTube;

src/pages/home/useSeeMarkParse.js

@@ -14,6 +14,9 @@ import Image, {
   ImageLink,
 } from '@/components/parser-components/image/image';
 import InternalLink from '@/components/parser-components/internal-link/internal-link';
+import Iframe from '@/components/parser-components/iframe/iframe';
+import YouTube from '@/components/parser-components/youtube/youtube';
+import CodePen from '@/components/parser-components/codepen/codepen';
 
 const useSeeMarkParse = ({ latexDelimiter, documentFormat, imageFiles }) => {
   const seeMarkReactParse = useCallback(
@@ -35,6 +38,9 @@ const useSeeMarkParse = ({ latexDelimiter, documentFormat, imageFiles }) => {
           imageLink: ImageLink,
           imageDisplay: ImageDisplay,
           imageDisplayLink: ImageDisplayLink,
+          iframe: Iframe,
+          youtube: YouTube,
+          codepen: CodePen,
         },
       })(markdown);
     },