add embed example

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>