From 02cee263b2f1dda948d535a048d3623a6f7a64d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 28 Aug 2018 09:31:08 +0200
Subject: [PATCH] add export

---
 README.md                                     |   2 +-
 examples/Components/Routes/Basic/index.vue    |   7 +-
 examples/Components/Routes/Embeds/index.vue   |   7 +-
 examples/Components/Routes/Export/index.vue   | 190 ++++++++++++++++++
 .../Components/Routes/HidingMenuBar/index.vue |   7 +-
 examples/Components/Routes/Links/index.vue    |   5 +-
 .../Routes/MarkdownShortcuts/index.vue        |   7 +-
 .../Components/Routes/MenuBubble/index.vue    |   7 +-
 examples/Components/Routes/ReadOnly/index.vue |   7 +-
 examples/Components/Routes/TodoList/index.vue |   7 +-
 examples/Components/Subnavigation/index.vue   |   3 +
 examples/main.js                              |   8 +
 packages/tiptap/src/components/editor.js      |  15 +-
 13 files changed, 224 insertions(+), 48 deletions(-)
 create mode 100644 examples/Components/Routes/Export/index.vue

diff --git a/README.md b/README.md
index c9b869c4..c1034bd4 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ export default {
 | `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
 | `doc` | `Object` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
 | `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
-| `@update` | `Function` | `undefined` | This will return the current `state` of Prosemirror on every change. |
+| `@update` | `Object` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function on every change. |
 
 ## Scoped Slots
 
diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index 073c7f85..c1293cd6 100644
--- a/examples/Components/Routes/Basic/index.vue
+++ b/examples/Components/Routes/Basic/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions">
 
 			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">
@@ -160,10 +160,5 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/Embeds/index.vue b/examples/Components/Routes/Embeds/index.vue
index ac5276c1..0e85c1a5 100644
--- a/examples/Components/Routes/Embeds/index.vue
+++ b/examples/Components/Routes/Embeds/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
@@ -64,11 +64,6 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
 
diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue
new file mode 100644
index 00000000..62b89f82
--- /dev/null
+++ b/examples/Components/Routes/Export/index.vue
@@ -0,0 +1,190 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
+
+			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
+				<div v-if="nodes && marks">
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.bold.active() }"
+						@click="marks.bold.command"
+					>
+						<icon name="bold" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.italic.active() }"
+						@click="marks.italic.command"
+					>
+						<icon name="italic" />
+					</button>
+
+					<button
+						class="menubar__button"
+						@click="marks.code.command"
+						:class="{ 'is-active': marks.code.active() }
+					">
+						<icon name="code" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.paragraph.active() }"
+						@click="nodes.paragraph.command"
+					>
+						<icon name="paragraph" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+						@click="nodes.heading.command({ level: 1 })"
+					>
+						H1
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+						@click="nodes.heading.command({ level: 2 })"
+					>
+						H2
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+						@click="nodes.heading.command({ level: 3 })"
+					>
+						H3
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.bullet_list.active() }"
+						@click="nodes.bullet_list.command"
+					>
+						<icon name="ul" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.ordered_list.active() }"
+						@click="nodes.ordered_list.command"
+					>
+						<icon name="ol" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.code_block.active() }"
+						@click="nodes.code_block.command"
+					>
+						<icon name="code" />
+					</button>
+
+				</div>
+			</div>
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h2>
+					Export HTML or JSON
+				</h2>
+				<p>
+					You are able to export your data as <code>HTML</code> or <code>JSON</code>. To pass <code>HTML</code> to the editor use the <code>content</code> slot. To pass <code>JSON</code> to the editor use the <code>doc</code> prop.
+				</p>
+			</div>
+
+		</editor>
+
+		<div class="export">
+			<h3>JSON</h3>
+			<pre><code v-html="json"></code></pre>
+
+			<h3>HTML</h3>
+			<pre><code>{{ html }}</code></pre>
+		</div>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import {
+	BlockquoteNode,
+	BulletListNode,
+	CodeBlockNode,
+	HardBreakNode,
+	HeadingNode,
+	ListItemNode,
+	OrderedListNode,
+	TodoItemNode,
+	TodoListNode,
+	BoldMark,
+	CodeMark,
+	ItalicMark,
+	LinkMark,
+	HistoryExtension,
+} from 'tiptap-extensions'
+
+export default {
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			extensions: [
+				new BlockquoteNode(),
+				new BulletListNode(),
+				new CodeBlockNode(),
+				new HardBreakNode(),
+				new HeadingNode({ maxLevel: 3 }),
+				new ListItemNode(),
+				new OrderedListNode(),
+				new TodoItemNode(),
+				new TodoListNode(),
+				new BoldMark(),
+				new CodeMark(),
+				new ItalicMark(),
+				new LinkMark(),
+				new HistoryExtension(),
+			],
+			json: 'Update content to see changes',
+			html: 'Update content to see changes',
+		}
+	},
+	methods: {
+		onUpdate({ getJSON, getHTML }) {
+			this.json = getJSON()
+			this.html = getHTML()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~variables";
+
+.export {
+
+	max-width: 30rem;
+	margin: 0 auto 5rem auto;
+
+	pre {
+		padding: 1rem;
+		border-radius: 5px;
+		font-size: 0.8rem;
+		font-weight: bold;
+		background: rgba($color-black, 0.05);
+		color: rgba($color-black, 0.8);
+	}
+
+	code {
+		display: block;
+		white-space: pre-wrap;
+	}
+}
+</style>
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index 7dfc46b3..056f8b9e 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions">
 
 			<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
 				<div v-if="nodes && marks">
@@ -146,10 +146,5 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/Links/index.vue b/examples/Components/Routes/Links/index.vue
index 01e0d95a..54f174e0 100644
--- a/examples/Components/Routes/Links/index.vue
+++ b/examples/Components/Routes/Links/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions">
 			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
 				<template v-if="marks">
 
@@ -100,9 +100,6 @@ export default {
 			this.hideLinkMenu()
 			focus()
 		},
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
 	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/MarkdownShortcuts/index.vue b/examples/Components/Routes/MarkdownShortcuts/index.vue
index 5b1dc654..31666bf1 100644
--- a/examples/Components/Routes/MarkdownShortcuts/index.vue
+++ b/examples/Components/Routes/MarkdownShortcuts/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
@@ -63,10 +63,5 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index ecaa26e4..fd5e11ef 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" :extensions="extensions" @update="onUpdate">
+		<editor class="editor" :extensions="extensions">
 
 			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
 				<template v-if="marks">
@@ -90,10 +90,5 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/ReadOnly/index.vue b/examples/Components/Routes/ReadOnly/index.vue
index 7f73e673..5b631cf4 100644
--- a/examples/Components/Routes/ReadOnly/index.vue
+++ b/examples/Components/Routes/ReadOnly/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :editable="false" :extensions="extensions" class="editor" @update="onUpdate">
+		<editor :editable="false" :extensions="extensions" class="editor">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
@@ -60,10 +60,5 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index 950a7d52..d736c1e5 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :extensions="extensions" class="editor" @update="onUpdate">
+		<editor :extensions="extensions" class="editor">
 
 			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">
@@ -112,10 +112,5 @@ export default {
 			],
 		}
 	},
-	methods: {
-		onUpdate(state) {
-			// console.log(state.doc.toJSON())
-		},
-	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index a52c5314..9989d6bb 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/examples/Components/Subnavigation/index.vue
@@ -24,6 +24,9 @@
 		<router-link class="subnavigation__link" to="/embeds">
 			Embeds
 		</router-link>
+		<router-link class="subnavigation__link" to="/export">
+			Export HTML or JSON
+		</router-link>
 	</div>
 </template>
 
diff --git a/examples/main.js b/examples/main.js
index 6cca7044..68f88ebf 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -11,6 +11,7 @@ import RouteTodoList from 'Components/Routes/TodoList'
 import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
 import RouteReadOnly from 'Components/Routes/ReadOnly'
 import RouteEmbeds from 'Components/Routes/Embeds'
+import RouteExport from 'Components/Routes/Export'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -76,6 +77,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds',
     },
   },
+  {
+    path: '/export',
+    component: RouteExport,
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Export',
+    },
+  },
 ]
 
 const router = new VueRouter({
diff --git a/packages/tiptap/src/components/editor.js b/packages/tiptap/src/components/editor.js
index 509bdbfb..7ffd9f82 100644
--- a/packages/tiptap/src/components/editor.js
+++ b/packages/tiptap/src/components/editor.js
@@ -202,9 +202,22 @@ export default {
 		dispatchTransaction(transaction) {
 			this.state = this.state.apply(transaction)
 			this.view.updateState(this.state)
-			this.$emit('update', this.state)
+			this.$emit('update', {
+				getHTML: this.getHTML,
+				getJSON: this.getJSON,
+				state: this.state,
+			})
 			this.updateMenuActions()
 		},
+
+		getHTML() {
+			return this.contentNode.elm.innerHTML
+		},
+
+		getJSON() {
+			return this.state.doc.toJSON()
+		},
+
 	},
 
 	mounted() {