create store for comment draft

src/stores/dialog.js

@@ -1,10 +1,11 @@
 import { defineStore } from "pinia";
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useRoute } from "vue-router";
 
 export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
   const openedFile = ref(null);
+
   const comments = computed(() => {
     return openedFile.value.comments;
   });
@@ -23,5 +24,37 @@ export const useDialogStore = defineStore("dialog", () => {
     route.query.hasOwnProperty("comments") ? true : false
   );
 
-  return { content, openedFile, comments, isCommentsOpen, updateFile };
+  const draftComment = ref({});
+  watch(
+    draftComment,
+    (newVal) => {
+      if (draftComment.value.position) showDraftMarker(newVal);
+    },
+    { deep: true }
+  );
+  function showDraftMarker(draftComment) {
+    console.log("showDraftMarker");
+    const bubble = document.createElement("a");
+
+    bubble.classList.add("comment-marker");
+    bubble.classList.add("comment-marker--draft");
+    bubble.style.left = draftComment.position.x + "%";
+    bubble.style.top = draftComment.position.y + "%";
+    bubble.href = "#comment-" + draftComment.id;
+
+    const container = document.querySelector(
+      `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
+    );
+
+    container.appendChild(bubble);
+  }
+
+  return {
+    content,
+    openedFile,
+    comments,
+    draftComment,
+    isCommentsOpen,
+    updateFile,
+  };
 });