add experiment demos

2021-08-25 17:53:02 +02:00
parent 2498c24186
commit 6ab708b1a2
43 changed files with 3090 additions and 0 deletions
--- a/demos/src/Experiments/Embeds/Vue/iframe.ts
+++ b/demos/src/Experiments/Embeds/Vue/iframe.ts
@@ -0,0 +1,78 @@
+import { Node } from '@tiptap/core'
+
+export interface IframeOptions {
+  allowFullscreen: boolean,
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    iframe: {
+      /**
+       * Add an iframe
+       */
+      setIframe: (options: { src: string }) => ReturnType,
+    }
+  }
+}
+
+export default Node.create({
+  name: 'iframe',
+
+  group: 'block',
+
+  atom: true,
+
+  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]]
+  },
+
+  addCommands() {
+    return {
+      setIframe: (options: { src: string }) => ({ tr, dispatch }) => {
+        const { selection } = tr
+        const node = this.type.create(options)
+
+        if (dispatch) {
+          tr.replaceRangeWith(selection.from, selection.to, node)
+        }
+
+        return true
+      },
+    }
+  },
+})
--- a/demos/src/Experiments/Embeds/Vue/index.html
+++ b/demos/src/Experiments/Embeds/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Experiments/Embeds', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Experiments/Embeds/Vue/index.vue
+++ b/demos/src/Experiments/Embeds/Vue/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div v-if="editor">
+    <button @click="addIframe">
+      add iframe
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Iframe from './iframe'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        Iframe,
+      ],
+      content: `
+        <p>Here is an exciting video:</p>
+        <iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
+      `,
+    })
+  },
+
+  methods: {
+    addIframe() {
+      const url = window.prompt('URL')
+
+      if (url) {
+        this.editor.chain().focus().setIframe({ src: url }).run()
+      }
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+@use "sass:math";
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.iframe-wrapper {
+  position: relative;
+  padding-bottom: math.div(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>