Merge branch '2694_iframe_remove_button' into tiptap

# Conflicts:
#	src/QEditor.jsx

src/extensions/Iframe.js

@@ -9,68 +9,76 @@ const Iframe = Node.create({
 
   addAttributes() {
     return {
-            "src": {
+      src: {
         default: null
       },
-            "frameborder": {
-                default: 0,
+      frameborder: {
+        default: 0
       },
-            "allowfullscreen": {
+      allowfullscreen: {
         default: true,
         parseHTML: () => {
           console.log(this)
-                },
-            },
+        }
+      }
     }
   },
 
   parseHTML() {
     return [
       {
-                tag: 'iframe',
-            },
+        tag: 'iframe'
+      }
     ]
   },
 
   renderHTML({ HTMLAttributes }) {
-        return ['iframe', mergeAttributes(HTMLAttributes)];
+    return ['iframe', mergeAttributes(HTMLAttributes)]
   },
 
   addNodeView() {
     return ({ editor, node, ...a }) => {
+      const container = document.createElement('div')
 
+      const iframe = document.createElement('iframe')
+      iframe.src = node.attrs.src
+      iframe.allowfullscreen = node.attrs.allowfullscreen
+      iframe.classList.add('customIframe')
 
-            // 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';
-            }
+      const closeBtn = document.createElement('button')
+      closeBtn.textContent = 'X'
+      closeBtn.classList.add('closeBtn')
+      closeBtn.addEventListener('click', function () {
+        container.remove()
+      })
+
+      // if (editor.isEditable) {
+      //     container.classList.add('pointer-events-none');
+      // }
+
+      container.append(closeBtn, iframe)
 
-            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);
       return {
-                dom: iframe,
+        dom: container
       }
     }
   },
 
   addCommands() {
     return {
-            setIframe: (options) => ({ tr, dispatch }) => {
+      setIframe:
+        (options) =>
+        ({ tr, dispatch }) => {
           const { selection } = tr
           const node = this.type.create(options)
-                //
+
           if (dispatch) {
             tr.replaceRangeWith(selection.from, selection.to, node)
           }
-
           return true
-            },
         }
-    },
-});
+    }
+  }
+})
 
-export default Iframe;
+export default Iframe

src/index.scss

@@ -1045,4 +1045,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>
+  )
+}