even better UX, and a demo with comments

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"

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],