From c140d11d7968ef245ef82595b143eb0fbacc93c2 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 11 Feb 2021 22:45:22 +0100
Subject: [PATCH] annotations: improve the example, clean up

---
 .../Experiments/Annotation/index.spec.js      |   4 +-
 .../demos/Experiments/Annotation/index.vue    |  66 +++++++-
 .../demos/Experiments/Comments/index.spec.js  |   7 -
 docs/src/demos/Experiments/Comments/index.vue | 145 ------------------
 docs/src/docPages/experiments.md              |   1 -
 docs/src/docPages/experiments/annotation.md   |   5 -
 docs/src/docPages/experiments/comments.md     |   2 +-
 7 files changed, 63 insertions(+), 167 deletions(-)
 delete mode 100644 docs/src/demos/Experiments/Comments/index.spec.js
 delete mode 100644 docs/src/demos/Experiments/Comments/index.vue
 delete mode 100644 docs/src/docPages/experiments/annotation.md

diff --git a/docs/src/demos/Experiments/Annotation/index.spec.js b/docs/src/demos/Experiments/Annotation/index.spec.js
index 593a5e73..f1b0a3ae 100644
--- a/docs/src/demos/Experiments/Annotation/index.spec.js
+++ b/docs/src/demos/Experiments/Annotation/index.spec.js
@@ -1,6 +1,6 @@
-context('/demos/Extensions/Annotations', () => {
+context('/demos/Experiments/Annotation', () => {
   before(() => {
-    cy.visit('/demos/Extensions/Annotations')
+    cy.visit('/demos/Experiments/Annotation')
   })
 
   // TODO: Write tests
diff --git a/docs/src/demos/Experiments/Annotation/index.vue b/docs/src/demos/Experiments/Annotation/index.vue
index 9ab11811..bc794aa9 100644
--- a/docs/src/demos/Experiments/Annotation/index.vue
+++ b/docs/src/demos/Experiments/Annotation/index.vue
@@ -1,17 +1,33 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="addAnnotation" :disabled="!editor.can().addAnnotation()">
-        add annotation
+      <h2>
+        Original Editor
+      </h2>
+      <button @click="addComment" :disabled="!editor.can().addAnnotation()">
+        comment
       </button>
       <editor-content :editor="editor" />
       <div v-for="comment in comments" :key="comment.type.spec.data.id">
         {{ comment.type.spec.data }}
 
-        <button @click="deleteAnnotation(comment.type.spec.data.id)">
+        <button @click="deleteComment(comment.type.spec.data.id)">
           remove
         </button>
       </div>
+
+      <h2>
+        Another Editor
+      </h2>
+      <button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
+        comment
+      </button>
+      <editor-content :editor="anotherEditor" />
+
+      <h2>
+        Y.js document
+      </h2>
+      {{ json }}
     </div>
   </div>
 </template>
@@ -21,6 +37,10 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import Collaboration from '@tiptap/extension-collaboration'
+import Bold from '@tiptap/extension-bold'
+import Heading from '@tiptap/extension-heading'
+import * as Y from 'yjs'
 import Annotation from './extension'
 
 export default {
@@ -31,19 +51,28 @@ export default {
   data() {
     return {
       editor: null,
+      anotherEditor: null,
       comments: [],
+      ydoc: null,
     }
   },
 
   mounted() {
+    this.ydoc = new Y.Doc()
+
     this.editor = new Editor({
       extensions: [
         Document,
         Paragraph,
         Text,
+        Bold,
+        Heading,
         Annotation.configure({
           onUpdate: items => { this.comments = items },
         }),
+        Collaboration.configure({
+          document: this.ydoc,
+        }),
       ],
       content: `
         <p>
@@ -54,19 +83,44 @@ export default {
         </p>
       `,
     })
+
+    this.anotherEditor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        Heading,
+        Annotation,
+        Collaboration.configure({
+          document: this.ydoc,
+        }),
+      ],
+    })
   },
 
   methods: {
-    addAnnotation() {
-      const content = prompt('Annotation', '')
+    addComment() {
+      const content = prompt('Comment', '')
 
       this.editor.commands.addAnnotation(content)
     },
-    deleteAnnotation(id) {
+    addAnotherComment() {
+      const content = prompt('Comment', '')
+
+      this.anotherEditor.commands.addAnnotation(content)
+    },
+    deleteComment(id) {
       this.editor.commands.deleteAnnotation(id)
     },
   },
 
+  computed: {
+    json() {
+      return this.ydoc.toJSON()
+    },
+  },
+
   beforeDestroy() {
     this.editor.destroy()
   },
diff --git a/docs/src/demos/Experiments/Comments/index.spec.js b/docs/src/demos/Experiments/Comments/index.spec.js
deleted file mode 100644
index 109134a0..00000000
--- a/docs/src/demos/Experiments/Comments/index.spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-context('/demos/Examples/Annotations', () => {
-  before(() => {
-    cy.visit('/demos/Examples/Annotations')
-  })
-
-  // TODO: Write tests
-})
diff --git a/docs/src/demos/Experiments/Comments/index.vue b/docs/src/demos/Experiments/Comments/index.vue
deleted file mode 100644
index c2388200..00000000
--- a/docs/src/demos/Experiments/Comments/index.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <div>
-    <div v-if="editor">
-      <h2>
-        Original
-      </h2>
-      <button @click="addComment" :disabled="!editor.can().addAnnotation()">
-        comment
-      </button>
-      <editor-content :editor="editor" />
-      <div v-for="comment in comments" :key="comment.type.spec.data.id">
-        {{ comment.type.spec.data }}
-
-        <button @click="deleteComment(comment.type.spec.data.id)">
-          remove
-        </button>
-      </div>
-
-      <!-- <br>
-      <h2>
-        ProseMirror JSON from Y.js document
-      </h2>
-      {{ rawDocument }} -->
-
-      <br>
-      <h2>
-        Y.js document
-      </h2>
-      {{ json }}
-
-      <br>
-      <h2>
-        Mirror
-      </h2>
-      <editor-content :editor="anotherEditor" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import Collaboration from '@tiptap/extension-collaboration'
-import Bold from '@tiptap/extension-bold'
-import Heading from '@tiptap/extension-heading'
-import * as Y from 'yjs'
-import { yDocToProsemirrorJSON } from 'y-prosemirror'
-import Annotation from '../Annotation/extension'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-      anotherEditor: null,
-      comments: [],
-      ydoc: null,
-    }
-  },
-
-  mounted() {
-    this.ydoc = new Y.Doc()
-
-    this.editor = new Editor({
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-        Bold,
-        Heading,
-        Annotation.configure({
-          onUpdate: items => { this.comments = items },
-        }),
-        Collaboration.configure({
-          document: this.ydoc,
-        }),
-      ],
-      content: `
-        <p>
-          Annotations can be used to add additional information to the content, for example comments. They live on a different level than the actual editor content.
-        </p>
-        <p>
-          This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another tiptap instance. :-)
-        </p>
-      `,
-    })
-
-    this.anotherEditor = new Editor({
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-        // Annotation.configure({
-        //   onUpdate: items => { this.comments = items },
-        // }),
-        Collaboration.configure({
-          document: this.ydoc,
-        }),
-      ],
-    })
-  },
-
-  methods: {
-    addComment() {
-      const content = prompt('Comment', '')
-
-      this.editor.commands.addAnnotation(content)
-    },
-    deleteComment(id) {
-      this.editor.commands.deleteAnnotation(id)
-    },
-  },
-
-  computed: {
-    rawDocument() {
-      return yDocToProsemirrorJSON(this.ydoc, 'default')
-    },
-    json() {
-      return this.ydoc.toJSON()
-    },
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>
-
-<style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
-.annotation {
-  background: #9DEF8F;
-}
-</style>
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index b19be942..ecc42f16 100644
--- a/docs/src/docPages/experiments.md
+++ b/docs/src/docPages/experiments.md
@@ -3,7 +3,6 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
 
 ## New
 * [Linter](/experiments/linter)
-* [Annotation](/experiments/annotation)
 * [Comments](/experiments/comments)
 * [Color](/experiments/color)
 * [Commands](/experiments/commands)
diff --git a/docs/src/docPages/experiments/annotation.md b/docs/src/docPages/experiments/annotation.md
deleted file mode 100644
index 4d4ebbe5..00000000
--- a/docs/src/docPages/experiments/annotation.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Annotation
-
-⚠️ Experiment
-
-<demo name="Experiments/Annotation" />
diff --git a/docs/src/docPages/experiments/comments.md b/docs/src/docPages/experiments/comments.md
index 42fda436..0a051e83 100644
--- a/docs/src/docPages/experiments/comments.md
+++ b/docs/src/docPages/experiments/comments.md
@@ -2,4 +2,4 @@
 
 ⚠️ Experiment
 
-<demo name="Experiments/Comments" />
+<demo name="Experiments/Annotation" />