Improved iframe embed interaction within editor

TODO

@@ -7,7 +7,6 @@
 ### In-Progress
 
 - Tables
-- Iframe/Media
 
 ### Features
 
@@ -33,8 +32,9 @@
 - Clear formatting, If no selection range, clear the formatting of parent block.
   - If no marks, clear the block type if text type?
 - Remove links button? (Action already in place if link href is empty).
-- Links - Limit target attribute options and validate URL.
+- Links - Validate URL.
 - Links - Integrate entity picker.
+- iFrame - Parse iframe HTML & auto-convert youtube/vimeo urls to embeds. 
 
 ### Notes
 

resources/js/editor/menu/item-iframe-button.js

@@ -107,6 +107,7 @@ function iframeButtonItem() {
         title: "Embed Content",
         run: onPress,
         enable: state => true,
+        active: state => (state.selection.node || {type: ''}).type === schema.nodes.iframe,
         icon: icons.iframe,
     });
 }

resources/js/editor/node-views/IframeView.js

@@ -0,0 +1,26 @@
+class IframeView {
+    /**
+     * @param {PmNode} node
+     * @param {PmView} view
+     * @param {(function(): number)} getPos
+     */
+    constructor(node, view, getPos) {
+        this.dom = document.createElement('div');
+        this.dom.classList.add('ProseMirror-iframewrap');
+
+        this.iframe = document.createElement("iframe");
+        for (const [key, value] of Object.entries(node.attrs)) {
+            if (value) {
+                this.iframe.setAttribute(key, value);
+            }
+        }
+
+        this.dom.appendChild(this.iframe);
+    }
+
+    stopEvent() {
+        return false;
+    }
+}
+
+export default IframeView;

resources/js/editor/node-views/index.js

@@ -1,7 +1,9 @@
 import ImageView from "./ImageView";
+import IframeView from "./IframeView";
 
 const views = {
     image: (node, view, getPos) => new ImageView(node, view, getPos),
+    iframe: (node, view, getPos) => new IframeView(node, view, getPos),
 };
 
 export default views;

resources/sass/_editor.scss

@@ -517,7 +517,7 @@ img.ProseMirror-separator {
   }
 }
 
-.ProseMirror-imagewrap {
+.ProseMirror-imagewrap, .ProseMirror-iframewrap {
   display: inline-block;
   line-height: 0;
   font-size: 0;
@@ -532,6 +532,10 @@ img.ProseMirror-separator {
   outline: 4px solid #000;
 }
 
+.ProseMirror .ProseMirror-iframewrap iframe {
+  pointer-events: none !important;
+}
+
 .ProseMirror-dragdummy {
   position: absolute;
   z-index: 2;