Merge branch '2694_iframe_remove_button' into tiptap

# Conflicts:
#	src/QEditor.jsx

src/extensions/Iframe.js

 import { Node, mergeAttributes } from '@tiptap/core'
 
 const Iframe = Node.create({
-    name: 'iframe',
-    group: 'block',
-    selectable: false,
-    draggable: true,
-    atom: true,
+  name: 'iframe',
+  group: 'block',
+  selectable: false,
+  draggable: true,
+  atom: true,
 
-    addAttributes() {
-        return {
-            "src": {
-                default: null
-            },
-            "frameborder": {
-                default: 0,
-            },
-            "allowfullscreen": {
-                default: true,
-                parseHTML: () => {
-                    console.log(this)
-                },
-            },
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      frameborder: {
+        default: 0
+      },
+      allowfullscreen: {
+        default: true,
+        parseHTML: () => {
+          console.log(this)
         }
-    },
+      }
+    }
+  },
 
-    parseHTML() {
-        return [
-            {
-                tag: 'iframe',
-            },
-        ]
-    },
+  parseHTML() {
+    return [
+      {
+        tag: 'iframe'
+      }
+    ]
+  },
 
-    renderHTML({ HTMLAttributes }) {
-        return ['iframe', mergeAttributes(HTMLAttributes)];
-    },
+  renderHTML({ HTMLAttributes }) {
+    return ['iframe', mergeAttributes(HTMLAttributes)]
+  },
 
-    addNodeView() {
-        return ({ editor, node, ...a }) => {
+  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()
+      })
 
-            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,
-            }
-        }
-    },
+      // if (editor.isEditable) {
+      //     container.classList.add('pointer-events-none');
+      // }
+
+      container.append(closeBtn, iframe)
+
+      return {
+        dom: container
+      }
+    }
+  },
 
-    addCommands() {
-        return {
-            setIframe: (options) => ({ tr, dispatch }) => {
-                const { selection } = tr
-                const node = this.type.create(options)
-                //
-                if (dispatch) {
-                    tr.replaceRangeWith(selection.from, selection.to, node)
-                }
+  addCommands() {
+    return {
+      setIframe:
+        (options) =>
+        ({ tr, dispatch }) => {
+          const { selection } = tr
+          const node = this.type.create(options)
 
-                return true
-            },
+          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>
+  )
+}