From 35a2aedbcf04668e84d25381c788bb11309620eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 22 Aug 2018 23:12:19 +0200
Subject: [PATCH] add embed example

---
 examples/Components/Navigation/index.vue    |   3 +
 examples/Components/Routes/Embeds/Iframe.js |  62 ++++++++++
 examples/Components/Routes/Embeds/index.vue |  62 ++++++++++
 examples/main.js                            |   8 ++
 src/utils/ComponentView.js                  | 120 ++++++++++----------
 5 files changed, 197 insertions(+), 58 deletions(-)
 create mode 100644 examples/Components/Routes/Embeds/Iframe.js
 create mode 100644 examples/Components/Routes/Embeds/index.vue

diff --git a/examples/Components/Navigation/index.vue b/examples/Components/Navigation/index.vue
index 2456778e..db80fed8 100644
--- a/examples/Components/Navigation/index.vue
+++ b/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>
diff --git a/examples/Components/Routes/Embeds/Iframe.js b/examples/Components/Routes/Embeds/Iframe.js
new file mode 100644
index 00000000..3a819efa
--- /dev/null
+++ b/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>
+			`,
+		}
+	}
+
+}
diff --git a/examples/Components/Routes/Embeds/index.vue b/examples/Components/Routes/Embeds/index.vue
new file mode 100644
index 00000000..437b8fa4
--- /dev/null
+++ b/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>
diff --git a/examples/main.js b/examples/main.js
index 867c6a5e..ad0ed1ac 100644
--- a/examples/main.js
+++ b/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({
diff --git a/src/utils/ComponentView.js b/src/utils/ComponentView.js
index 8943b312..2809d266 100644
--- a/src/utils/ComponentView.js
+++ b/src/utils/ComponentView.js
@@ -2,73 +2,77 @@ import Vue from 'vue'
 
 export default class ComponentView {
 	constructor(component, {
-    node,
-    view,
-    getPos,
-    decorations,
-    editable,
-  }) {
-    this.component = component
-    this.node = node
-    this.view = view
-    this.getPos = getPos
-    this.decorations = decorations
-    this.editable = editable
+		node,
+		view,
+		getPos,
+		decorations,
+		editable,
+	}) {
+		this.component = component
+		this.node = node
+		this.view = view
+		this.getPos = getPos
+		this.decorations = decorations
+		this.editable = editable
 
-    this.dom = this.createDOM()
-    this.contentDOM = this._vm.$refs.content
+		this.dom = this.createDOM()
+		this.contentDOM = this._vm.$refs.content
 	}
 
-  createDOM() {
-    const Component = Vue.extend(this.component)
-    this._vm = new Component({
-      propsData: {
-        node: this.node,
-        view: this.view,
-        getPos: this.getPos,
-        decorations: this.decorations,
-        editable: this.editable,
-        updateAttrs: attrs => this.updateAttrs(attrs),
-        updateContent: content => this.updateContent(content),
-      },
-    }).$mount()
-    return this._vm.$el
-  }
+	createDOM() {
+		const Component = Vue.extend(this.component)
+		this._vm = new Component({
+			propsData: {
+				node: this.node,
+				view: this.view,
+				getPos: this.getPos,
+				decorations: this.decorations,
+				editable: this.editable,
+				updateAttrs: attrs => this.updateAttrs(attrs),
+				updateContent: content => this.updateContent(content),
+			},
+		}).$mount()
+		return this._vm.$el
+	}
 
-  updateAttrs(attrs) {
-    const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), null, {
-      ...this.node.attrs,
-      ...attrs,
-    })
-    this.view.dispatch(transaction)
-  }
+	updateAttrs(attrs) {
+		const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), null, {
+			...this.node.attrs,
+			...attrs,
+		})
+		this.view.dispatch(transaction)
+	}
 
-  updateContent(content) {
+	updateContent(content) {
 		const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), this.node.type, { content })
 		this.view.dispatch(transaction)
-  }
+	}
 
-  ignoreMutation() {
-    return true
-  }
-
-	update(node, decorations) {
-    if (node.type !== this.node.type) {
-      return false
-    }
-
-    if (node === this.node && this.decorations === decorations) {
-			return true
-		}
-
-    this.node = node
-    this.decorations = decorations
-    this._vm._props.node = node
-    this._vm._props.decorations = decorations
+	ignoreMutation() {
 		return true
 	}
 
-  destroy() {
-    this._vm.$destroy()
-  }
+	stopEvent() {
+		return true
+	}
+
+	update(node, decorations) {
+		if (node.type !== this.node.type) {
+			return false
+		}
+
+		if (node === this.node && this.decorations === decorations) {
+			return true
+		}
+
+		this.node = node
+		this.decorations = decorations
+		this._vm._props.node = node
+		this._vm._props.decorations = decorations
+		return true
+	}
+
+	destroy() {
+		this._vm.$destroy()
+	}
 }