add basic iframe experiment

docs/src/demos/Experiments/Embeds/iframe.ts

@@ -0,0 +1,70 @@
+import { Node, Command } from '@tiptap/core'
+
+export interface IframeOptions {
+  allowFullscreen: boolean,
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+
+export default Node.create({
+  name: 'iframe',
+
+  group: 'block',
+
+  // selectable: false,
+
+  defaultOptions: <IframeOptions>{
+    allowFullscreen: true,
+    HTMLAttributes: {
+      class: 'iframe-wrapper',
+    },
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      frameborder: {
+        default: 0,
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => {
+          return {
+            allowfullscreen: this.options.allowFullscreen,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'iframe',
+    }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes, 0]]
+  },
+
+  addCommands() {
+    return {
+      /**
+       * Add an iframe
+       */
+      setIframe: (options: { src: string }): Command => ({ tr, dispatch }) => {
+        const { selection } = tr
+        const node = this.type.create(options)
+
+        if (dispatch) {
+          tr.replaceRangeWith(selection.from, selection.to, node)
+        }
+
+        return true
+      },
+    }
+  },
+})

docs/src/demos/Experiments/Embeds/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="editor">
+    <button @click="addImage">
+      add iframe
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import {
+  Editor, EditorContent, defaultExtensions,
+} from '@tiptap/vue-starter-kit'
+import Iframe from './iframe'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        Iframe,
+      ],
+      content: `
+        <p>Here is an exciting video:</p>
+        <iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
+      `,
+    })
+  },
+
+  methods: {
+    addImage() {
+      const url = window.prompt('URL')
+
+      if (url) {
+        this.editor.chain().focus().setIframe({ src: url }).run()
+      }
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  .iframe-wrapper {
+    position: relative;
+    padding-bottom: 100/16*9%;
+    height: 0;
+    overflow: hidden;
+    width: 100%;
+    height: auto;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid #68CEF8;
+    }
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

docs/src/docPages/experiments.md

@@ -7,6 +7,7 @@ Congratulations! You’ve found our secret playground with a list of experiments
 * [Comments](/experiments/comments)
 * [Color](/experiments/color)
 * [Commands](/experiments/commands)
+* [Embeds](/experiments/embeds)
 
 ## Waiting for approval
 * [Placeholder](/experiments/placeholder)

docs/src/docPages/experiments/embeds.md

@@ -0,0 +1,5 @@
+# Embeds
+
+⚠️ Experiment
+
+<demo name="Experiments/Embeds" highlight="" />