add embed example

examples/Components/Navigation/index.vue

@@ -37,6 +37,9 @@
 			<router-link class="navigation__link" to="/read-only">
 				Read-Only
 			</router-link>
+			<router-link class="navigation__link" to="/embeds">
+				Embeds
+			</router-link>
 		</div>
 
 	</div>

examples/Components/Routes/Embeds/Iframe.js

@@ -0,0 +1,62 @@
+import { Node } from 'tiptap/utils'
+
+export default class IframeNode 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',
+			}],
+		}
+	}
+
+	get view() {
+		return {
+			props: ['node', 'updateAttrs', 'editable'],
+			data() {
+				return {
+					url: this.node.attrs.src,
+				}
+			},
+			methods: {
+				onChange(event) {
+					if (!this.editable) {
+						return
+					}
+
+					this.url = event.target.value
+
+					this.updateAttrs({
+						url: this.url,
+					})
+				},
+			},
+			template: `
+				<div class="iframe">
+					<iframe class="iframe__embed" :src="url"></iframe>
+					<input class="iframe__input" type="text" :value="url" @input="onChange" v-if="editable" />
+				</div>
+			`,
+		}
+	}
+
+}

examples/Components/Routes/Embeds/index.vue

@@ -0,0 +1,62 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h1>
+					Embeds
+				</h1>
+				<p>
+					This is an example of a custom iframe node. This iframe is rendered as a vue component. You can change its source with the input below.
+				</p>
+				<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
+			</div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import Iframe from './Iframe.js'
+
+export default {
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			extensions: [new Iframe()],
+		}
+	},
+	methods: {
+		onUpdate(state) {
+			// console.log(state.doc.toJSON())
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+@import "~variables";
+
+.iframe {
+	&__embed {
+		width: 100%;
+		height: 15rem;
+		border: 0;
+	}
+
+	&__input {
+		display: block;
+		width: 100%;
+		font: inherit;
+		border: 0;
+		border-radius: 5px;
+		background-color: rgba($color-black, 0.1);
+		padding: 0.3rem 0.5rem;
+	}
+}
+</style>

examples/main.js

@@ -10,6 +10,7 @@ import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
 import RouteTodoList from 'Components/Routes/TodoList'
 import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
 import RouteReadOnly from 'Components/Routes/ReadOnly'
+import RouteEmbeds from 'Components/Routes/Embeds'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -68,6 +69,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/ReadOnly',
     },
   },
+  {
+    path: '/embeds',
+    component: RouteEmbeds,
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds',
+    },
+  },
 ]
 
 const router = new VueRouter({