From b1a87e4ad61629be72c395d2099cc6c68a9d1c9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 25 Aug 2021 18:27:05 +0200
Subject: [PATCH] add GuideGettingStarted demos

---
 .../GuideGettingStarted/VModel/Vue/Editor.vue | 63 +++++++++++++++++++
 .../GuideGettingStarted/VModel/Vue/index.html | 15 +++++
 .../VModel/Vue/index.spec.js                  |  7 +++
 .../GuideGettingStarted/VModel/Vue/index.vue  | 62 ++++++++++++++++++
 4 files changed, 147 insertions(+)
 create mode 100644 demos/src/GuideGettingStarted/VModel/Vue/Editor.vue
 create mode 100644 demos/src/GuideGettingStarted/VModel/Vue/index.html
 create mode 100644 demos/src/GuideGettingStarted/VModel/Vue/index.spec.js
 create mode 100644 demos/src/GuideGettingStarted/VModel/Vue/index.vue
diff --git a/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue b/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue
new file mode 100644
index 00000000..39265c13
--- /dev/null
+++ b/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue
@@ -0,0 +1,63 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  watch: {
+    modelValue(value) {
+      // HTML
+      const isSame = this.editor.getHTML() === value
+
+      // JSON
+      // const isSame = this.editor.getJSON().toString() === value.toString()
+
+      if (isSame) {
+        return
+      }
+
+      this.editor.commands.setContent(this.value, false)
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+      ],
+      content: this.modelValue,
+      onUpdate: () => {
+        // HTML
+        this.$emit('update:modelValue', this.editor.getHTML())
+
+        // JSON
+        // this.$emit('update:modelValue', this.editor.getJSON())
+      },
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/demos/src/GuideGettingStarted/VModel/Vue/index.html b/demos/src/GuideGettingStarted/VModel/Vue/index.html
new file mode 100644
index 00000000..62fd588c
--- /dev/null
+++ b/demos/src/GuideGettingStarted/VModel/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideGettingStarted/VModel', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideGettingStarted/VModel/Vue/index.spec.js b/demos/src/GuideGettingStarted/VModel/Vue/index.spec.js
new file mode 100644
index 00000000..49a2d60f
--- /dev/null
+++ b/demos/src/GuideGettingStarted/VModel/Vue/index.spec.js
@@ -0,0 +1,7 @@
+context('/demos/Examples/VModel', () => {
+  before(() => {
+    cy.visit('/demos/Examples/VModel')
+  })
+
+  // TODO: Write tests
+})
diff --git a/demos/src/GuideGettingStarted/VModel/Vue/index.vue b/demos/src/GuideGettingStarted/VModel/Vue/index.vue
new file mode 100644
index 00000000..ac622664
--- /dev/null
+++ b/demos/src/GuideGettingStarted/VModel/Vue/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <editor v-model="content" />
+
+    <div class="content">
+      <h3>Content</h3>
+      <pre><code>{{ content }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import Editor from './Editor.vue'
+
+export default {
+  components: {
+    Editor,
+  },
+
+  data() {
+    return {
+      content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+}
+
+.content {
+  padding: 1rem 0 0;
+
+  h3 {
+    margin: 1rem 0 0.5rem;
+  }
+
+  pre {
+    border-radius: 5px;
+    color: #333;
+  }
+
+  code {
+    display: block;
+    white-space: pre-wrap;
+    font-size: 0.8rem;
+    padding: 0.75rem 1rem;
+    background-color:#e9ecef;
+    color: #495057;
+  }
+}
+</style>
