From e2642526a0a7a4ee017280d3f65e0fc420dfc8e3 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 20 Aug 2020 17:53:28 +0200
Subject: [PATCH] add export html or json example

---
 .../Examples/ExportHtmlOrJson/index.spec.js   |  5 +
 .../demos/Examples/ExportHtmlOrJson/index.vue | 96 +++++++++++++++++++
 .../Examples/ExportHtmlOrJson/style.scss      | 12 +++
 3 files changed, 113 insertions(+)
 create mode 100644 docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
 create mode 100644 docs/src/demos/Examples/ExportHtmlOrJson/index.vue
 create mode 100644 docs/src/demos/Examples/ExportHtmlOrJson/style.scss

diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js b/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
new file mode 100644
index 00000000..6f8fde42
--- /dev/null
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
@@ -0,0 +1,5 @@
+context('export-html-or-json', () => {
+  beforeEach(() => {
+    cy.visit('/examples/export-html-or-json')
+  })
+})
\ No newline at end of file
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
new file mode 100644
index 00000000..a42ed69a
--- /dev/null
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+
+    <div class="actions">
+      <button class="button" @click="clearContent">
+        Clear Content
+      </button>
+      <button class="button" @click="setContent">
+        Set Content
+      </button>
+    </div>
+
+    <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 { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+      json: null,
+      html: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: `
+        <h2>
+          Export HTML or JSON
+        </h2>
+        <p>
+          You are able to export your data as <code>HTML</code> or <code>JSON</code>.
+        </p>
+      `,
+      extensions: defaultExtensions(),
+    })
+
+    this.json = this.editor.json()
+    this.html = this.editor.html()
+
+    this.editor.on('update', () => {
+      this.json = this.editor.json()
+      this.html = this.editor.html()
+    })
+
+    window.editor = this.editor
+  },
+
+  methods: {
+    clearContent() {
+      this.editor.clearContent(true)
+      this.editor.focus()
+    },
+
+    setContent() {
+      // you can pass a json document
+      this.editor.setContent({
+        type: 'document',
+        content: [{
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is some inserted text. 👋',
+            },
+          ],
+        }],
+      }, true)
+      // HTML string is also supported
+      // this.editor.setContent('<p>This is some inserted text. 👋</p>')
+      this.editor.focus()
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss">
\ No newline at end of file
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/style.scss b/docs/src/demos/Examples/ExportHtmlOrJson/style.scss
new file mode 100644
index 00000000..5d0cae1c
--- /dev/null
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/style.scss
@@ -0,0 +1,12 @@
+.export {
+  pre {
+    border-radius: 5px;
+    font-size: 0.8rem;
+    color: rgba($colorBlack, 0.8);
+  }
+
+  code {
+    display: block;
+    white-space: pre-wrap;
+  }
+}
\ No newline at end of file