From 3e0a32668624a00053abce0d103c7605e53288f1 Mon Sep 17 00:00:00 2001
From: Jeet Mandaliya <45892659+sereneinserenade@users.noreply.github.com>
Date: Sun, 27 Mar 2022 00:56:11 +0100
Subject: [PATCH] even better UX, and a demo with comments

---
 src/components/OuterComment.vue | 4 +++-
 src/components/Tiptap.vue       | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/OuterComment.vue b/src/components/OuterComment.vue
index 550cb0a..d071b33 100644
--- a/src/components/OuterComment.vue
+++ b/src/components/OuterComment.vue
@@ -6,7 +6,9 @@
     :class="[`${comment.jsonComments.uuid === activeCommentsInstance.uuid ? 'ml-4' : 'ml-8 cursor-pointer'}`]"
     @click.stop.prevent="focusContent({ from: comment.from, to: comment.to })"
   >
-    <article class="text-lg font-bold p-3 border-b-2 border-solid">"{{ comment.text }}" 💬</article>
+    <article
+      class="text-lg font-bold p-3 border-b-2 border-solid"
+    >{{ i + 1 }}. "{{ comment.text }}" 💬</article>
 
     <article
       v-for="(jsonComment, j) in comment.jsonComments.comments"
diff --git a/src/components/Tiptap.vue b/src/components/Tiptap.vue
index e3fd5c6..9266739 100644
--- a/src/components/Tiptap.vue
+++ b/src/components/Tiptap.vue
@@ -155,7 +155,7 @@ const setCurrentComment = (editor: Editor) => {
 
 const tiptapEditor = useEditor({
   content: `
-    <p>I'm trying to make comment extension, so you can add comment here ☮️ and see how it goes. Add a comment here.</p>
+    <p>I'm trying to make comment extension, so you can add comment here ☮️ and<span data-comment="{&quot;uuid&quot;:&quot;d1858137-e0d8-48ac-9f38-ae778b56c719&quot;,&quot;comments&quot;:[{&quot;userName&quot;:&quot;sereneinserenade&quot;,&quot;time&quot;:1648338852939,&quot;content&quot;:&quot;First comment&quot;},{&quot;userName&quot;:&quot;sereneinserenade&quot;,&quot;time&quot;:1648338857073,&quot;content&quot;:&quot;Following Comment&quot;}]}"> see how it goes.</span> Add a <span data-comment="{&quot;uuid&quot;:&quot;f57e894f-926c-4242-b0ee-53c719631907&quot;,&quot;comments&quot;:[{&quot;userName&quot;:&quot;sereneinserenade&quot;,&quot;time&quot;:1648338869890,&quot;content&quot;:&quot;second comment&quot;}]}">comment</span> here.</p>
   `,
 
   extensions: [StarterKit, Comment],