diff --git a/src/components/editor/common/extractPaywallData.ts b/src/components/editor/common/extractPaywallData.ts index 6392dd6..b61620c 100644 --- a/src/components/editor/common/extractPaywallData.ts +++ b/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; } } } diff --git a/src/components/editor/handler/AddYoutube.tsx b/src/components/editor/handler/AddYoutube.tsx index f9c6e3c..409e352 100644 --- a/src/components/editor/handler/AddYoutube.tsx +++ b/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); }