Improved iframe embed interaction within editor

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;