added remove iframe button

src/extensions/Iframe.js

@@ -21,6 +21,18 @@ const Iframe = Node.create({
                     console.log(this)
                 },
             },
+            "setInnerModalType" : {
+                default: null
+            },
+            "setModalIsOpen" : {
+                default: null
+            },
+            "setModalTitle" : {
+                default: null
+            },
+            "setCurrentRemoveIframe" : {
+                default: null
+            }
         }
     },
 
@@ -38,21 +50,35 @@ const Iframe = Node.create({
 
     addNodeView() {
         return ({ editor, node, ...a }) => {
+            const container = document.createElement('div');
 
-
-            // div.className = 'aspect-w-16 aspect-h-9' + (editor.isEditable ? ' cursor-pointer' : '');
             const iframe = document.createElement('iframe');
-            if (editor.isEditable) {
-                iframe.className = 'pointer-events-none';
-            }
-
             iframe.src = node.attrs.src;
-            iframe.frameBorder = node.attrs.frameborder;
             iframe.allowfullscreen = node.attrs.allowfullscreen;
-            iframe.style = 'width:1280px;height:auto;aspect-ratio: 16 / 9;';
-            // div.append(video);
+            iframe.classList.add('customIframe');
+
+            const closeBtn = document.createElement('button');
+            closeBtn.textContent = 'X';
+            closeBtn.classList.add('closeBtn');
+            closeBtn.addEventListener('click', function () {
+                try {
+                    node.attrs.setModalTitle('Вы уверены, что хотите удалить?');
+                    node.attrs.setInnerModalType('remove_iframe');
+                    node.attrs.setModalIsOpen(true);
+                    node.attrs.setCurrentRemoveIframe(container);
+                } catch {
+                    container.remove();
+                }
+            });
+
+            // if (editor.isEditable) {
+            //     container.classList.add('pointer-events-none');
+            // }
+
+            container.append(closeBtn, iframe);
+
             return {
-                dom: iframe,
+                dom: container,
             }
         }
     },
@@ -62,7 +88,7 @@ const Iframe = Node.create({
             setIframe: (options) => ({ tr, dispatch }) => {
                 const { selection } = tr
                 const node = this.type.create(options)
-                //
+
                 if (dispatch) {
                     tr.replaceRangeWith(selection.from, selection.to, node)
                 }

src/index.scss

@@ -1022,4 +1022,25 @@ body{
     .qseparator{
         width: 16px;
     }
+
+    .closeBtn {
+        position: relative;
+        display: flex;
+        justify-content: end;
+        border-radius: 50%;
+        border: none;
+        background-color: #2677e3;
+        color: #fff;
+        font-size: 0.5rem;
+        padding: 4px 6px;
+        top: 10px;
+        cursor: pointer;
+        right: 8px;
+    }
+
+    .customIframe {
+        width:1280px;
+        height:auto;
+        aspect-ratio: 16 / 9;
+    }
 }

src/modals/IframeCustomModal.js

+import React, { Fragment } from "react";
+
+export default function IframeCustomModal ({embedContent, setEmbedContent}) {
+    return (
+        <Fragment>
+            <textarea
+                style={{width: '100%', height: '100%'}}
+                rows={18}
+                value={embedContent}
+                placeholder={'<iframe></iframe>'}
+                onInput={(e) => setEmbedContent(e.target.value)}
+            />
+        </Fragment>
+    )
+}

src/modals/IframeModal.js

+import React, { Fragment } from "react";
+
+export default function IframeModal ({embedContent, setEmbedContent}) {
+    return (
+        <Fragment>
+            <input type="text" value={embedContent} placeholder={'https://'}
+                   onInput={(e) => setEmbedContent(e.target.value)
+                   }/>
+            <ul className={'atma-editor-soc-video'}>
+                <li className={'youtube'}/>
+                <li className={'vimeo'}/>
+                {/* <li className={'vk'}/> */}
+                <li className={'ok'}/>
+                <li className={'rutube'}/>
+            </ul>
+        </Fragment>
+    )
+}

src/modals/RemoveIframeModal.js

+import React, { Fragment } from "react";
+
+export default function RemoveIframeModal(){
+    return (
+        <Fragment>
+
+        </Fragment>
+    )
+}