feat: youtube 삽입 설정 변경 및 HTML 변환 추가

src/components/editor/common/extractPaywallData.ts

@@ -52,6 +52,28 @@ const extractPaywallData = (editor: Editor): PaywallData => {
             whiteSpace: node.attrs.whiteSpace,
           } as LinkAttributes);
           tempDiv.appendChild(linkElement);
+        } else if (node.type === 'oembed' && node.attrs?.src) {
+          const oembedWrapper = document.createElement('div');
+          oembedWrapper.className = `relative mt-5 ${node.attrs.alignment}`;
+
+          const moduleElement = document.createElement('div');
+          moduleElement.className = 'relative';
+          moduleElement.style.paddingTop = '75%';
+
+          const iframeElement = document.createElement('iframe');
+          iframeElement.width = node.attrs.width;
+          iframeElement.height = node.attrs.height;
+          iframeElement.src = node.attrs.src;
+          iframeElement.setAttribute('frameborder', node.attrs.frameborder);
+          iframeElement.allow = node.attrs.allow;
+          iframeElement.referrerPolicy = node.attrs.referrerpolicy;
+          iframeElement.allowFullscreen = node.attrs.allowfullscreen;
+          iframeElement.title = node.attrs.title;
+          iframeElement.className = 'absolute top-0 left-0 w-full h-full';
+
+          moduleElement.appendChild(iframeElement);
+          oembedWrapper.appendChild(moduleElement);
+          tempDiv.appendChild(oembedWrapper);
         } else if (node.type === 'table') {
           const tableWrapper = document.createElement('div');
           tableWrapper.className = 'mt-5 relative mx-auto w-full';
@@ -110,15 +132,10 @@ const extractPaywallData = (editor: Editor): PaywallData => {
     if (!imageLink) {
       if (node.type === 'photo' && node.attrs?.src) {
         imageLink = node.attrs.src;
-      } else if (
-        (node.type === 'photoGroup' || node.type === 'photoStrip') &&
-        node.content
-      ) {
-        const firstImgNode = node.content.find(
-          (childNode) => childNode.type === 'image',
-        );
-        if (firstImgNode && firstImgNode.attrs?.src) {
-          imageLink = firstImgNode.attrs.src;
+      } else if (node.type === 'photoGroup' || node.type === 'photoStrip') {
+        const firstImage = node.attrs?.images?.[0];
+        if (firstImage && firstImage.src) {
+          imageLink = firstImage.src;
         }
       }
     }

src/components/editor/handler/AddYoutube.tsx

@@ -37,22 +37,55 @@ const AddYoutube: React.FC<{ editor: Editor }> = ({ editor }) => {
           throw new Error('YouTube oEmbed에서 iframe src를 찾을 수 없습니다.');
         }
 
-        editor
-          .chain()
-          .focus()
-          .insertContent({
-            type: 'oembed',
-            attrs: {
-              src: iframeSrc,
-              width: data.thumbnail_width || '400',
-              height: data.thumbnail_height || '300',
-              frameborder: frameborder,
-              allow: allow,
-              allowfullscreen: allowfullscreen,
-              title: data.title || 'Untitled',
-            },
-          })
-          .run();
+        const { state } = editor.view;
+        const { selection } = state;
+
+        const isInsideCustomBlock =
+          selection.$from.node(1)?.type.name === 'customBlock';
+
+        if (isInsideCustomBlock) {
+          const customBlockPos =
+            selection.$from.start(1) + selection.$from.node(1).nodeSize;
+
+          editor
+            .chain()
+            .focus()
+            .command(({ tr }) => {
+              tr.insertText('\n', state.selection.from);
+              return true;
+            })
+            .exitCode()
+            .insertContentAt(customBlockPos, {
+              type: 'oembed',
+              attrs: {
+                src: iframeSrc,
+                width: data.thumbnail_width || '400',
+                height: data.thumbnail_height || '300',
+                frameborder: frameborder,
+                allow: allow,
+                allowfullscreen: allowfullscreen,
+                title: data.title || 'Untitled',
+              },
+            })
+            .run();
+        } else {
+          editor
+            .chain()
+            .focus()
+            .insertContent({
+              type: 'oembed',
+              attrs: {
+                src: iframeSrc,
+                width: data.thumbnail_width || '400',
+                height: data.thumbnail_height || '300',
+                frameborder: frameborder,
+                allow: allow,
+                allowfullscreen: allowfullscreen,
+                title: data.title || 'Untitled',
+              },
+            })
+            .run();
+        }
       } catch (error) {
         console.error('Failed to fetch YouTube oEmbed API:', error);
       }