feat: ✨ add iframe extension to insert embeds

src/components/ElementTiptap.vue

@@ -422,6 +422,22 @@ export default {
       width: 4px;
       z-index: 20;
     }
+
+    .iframe {
+      height: 0;
+      padding-bottom: 56.25%;
+      position: relative;
+      width: 100%;
+
+      &__embed {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+    }
   }
 
   &__placeholder {

src/components/MenuCommands/CommandButton.vue

@@ -23,6 +23,7 @@ import 'vue-awesome/icons/italic';
 import 'vue-awesome/icons/strikethrough';
 import 'vue-awesome/icons/link';
 import 'vue-awesome/icons/image';
+import 'vue-awesome/icons/video';
 import 'vue-awesome/icons/code';
 import 'vue-awesome/icons/quote-right';
 import 'vue-awesome/icons/align-left';

src/components/MenuCommands/IframeCommandButton.vue

@@ -0,0 +1,41 @@
+<template>
+  <command-button
+    :command="openInsertVideoControl"
+    tooltip="Insert Video"
+    icon="video"
+  />
+</template>
+
+<script>
+import CommandButton from './CommandButton.vue';
+
+export default {
+  name: 'IframeCommandButton',
+
+  components: {
+    CommandButton,
+  },
+
+  props: {
+    editorContext: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    openInsertVideoControl () {
+      this.$prompt('', 'Insert Video', {
+        confirmButtonText: 'Insert',
+        cancelButtonText: 'Cancel',
+        inputPlaceholder: 'Href',
+        roundButton: true,
+      }).then(({ value: href }) => {
+        this.editorContext.commands.iframe({ src: href });
+      }).catch(() => {
+
+      });
+    },
+  },
+};
+</script>

src/extensions/iframe.js

@@ -0,0 +1,73 @@
+import { Node } from 'tiptap';
+import IframeCommandButton from '../components/MenuCommands/IframeCommandButton.vue';
+
+export default class Iframe extends Node {
+  get name () {
+    return 'iframe';
+  }
+
+  get schema () {
+    return {
+      attrs: {
+        src: {
+          default: null,
+        },
+      },
+      group: 'block',
+      selectable: false,
+      parseDOM: [{
+        tag: 'iframe',
+        getAttrs: dom => ({
+          src: dom.getAttribute('src'),
+        }),
+      }],
+      toDOM: node => ['iframe', {
+        src: node.attrs.src,
+        frameborder: 0,
+        allowfullscreen: 'true',
+      }],
+    };
+  }
+
+  commands ({ type }) {
+    return attrs => (state, dispatch) => {
+      const { selection } = state;
+      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
+      const node = type.create(attrs);
+      const transaction = state.tr.insert(position, node);
+      dispatch(transaction);
+    };
+  }
+
+  get view () {
+    return {
+      props: ['node', 'updateAttrs', 'view'],
+      computed: {
+        src: {
+          get () {
+            return this.node.attrs.src;
+          },
+          set (src) {
+            this.updateAttrs({
+              src,
+            });
+          },
+        },
+      },
+      template: `
+        <div class="iframe">
+          <iframe class="iframe__embed" :src="src"></iframe>
+        </div>
+      `,
+    };
+  }
+
+  menuBtnView (editorContext) {
+    return {
+      component: IframeCommandButton,
+      componentProps: {
+        editorContext,
+      },
+    };
+  }
+}

src/extensions/index.js

@@ -21,6 +21,7 @@ export { default as Image } from './image';
 export { default as TodoItem } from './todo_item';
 export { default as TodoList } from './todo_list';
 export { default as Table } from './table';
+export { default as Iframe } from './iframe';
 
 // marks
 export { default as Bold } from './bold';