Add events to popover component and handlers for them

client/src/components/highlights/HighlightPopover.vue

@@ -1,15 +1,30 @@
 <template>
   <div class="highlight-popover">
     <section class="highlight-popover__section">
-      <div class="highlight-popover__color highlight-popover__color--yellow"></div>
+      <div
-      <div class="highlight-popover__color highlight-popover__color--pink"></div>
+        class="highlight-popover__color highlight-popover__color--yellow"
-      <div class="highlight-popover__color highlight-popover__color--blue"></div>
+        @click="$emit('choose-color', 'yellow')"
+      ></div>
+      <div
+        class="highlight-popover__color highlight-popover__color--pink"
+        @click="$emit('choose-color', 'pink')"
+      ></div>
+      <div
+        class="highlight-popover__color highlight-popover__color--blue"
+        @click="$emit('choose-color', 'blue')"
+      ></div>
     </section>
     <section class="highlight-popover__section">
-      <note-icon class="highlight-popover__icon" />
+      <note-icon
+        class="highlight-popover__icon"
+        @click="$emit('confirm')"
+      />
     </section>
     <section class="highlight-popover__section">
-      <trash-icon class="highlight-popover__icon" />
+      <trash-icon
+        class="highlight-popover__icon"
+        @click="$emit('close')"
+      />
     </section>
   </div>
 </template>
@@ -21,7 +36,7 @@ export interface Props {
   top: string;
 }
 
-defineEmits(['close', 'confirm']);
+defineEmits(['close', 'confirm', 'choose-color']);
 defineProps<Props>();
 </script>
 

client/src/directives/highlight.ts

@@ -135,8 +135,26 @@ export const getSelectionHandler = (el: HTMLElement, contentBlock: ContentBlockN
 
             const positionOfContentBlock = el.getBoundingClientRect();
             const positionOfSelection = paragraph?.getBoundingClientRect();
-            const offetTop = positionOfSelection.top - positionOfContentBlock.top;
+            const offsetTop = positionOfSelection.top - positionOfContentBlock.top;
-            popover.show(el, offetTop);
+            popover
+              .show({
+                wrapper: el,
+                offsetTop,
+                onChooseColor: (color: string) => {
+                  console.log('chosenColor', color);
+                  // const newHighlight: Highlight = {
+                  //   contentBlock: contentBlock.id,
+                  //   contentIndex:
+                  //
+                  // };
+                },
+              })
+              .then(() => {
+                console.log('confirmed');
+              })
+              .catch(() => {
+                console.log('canceled');
+              });
             // todo: how do we save this? maybe we need to move away from the directive and do this inside the mounted
             // and unmounted hooks of the ContentBlock
           }

client/src/helpers/popover.ts

@@ -3,8 +3,14 @@ import { createApp } from 'vue';
 
 type ResolveReject = (v?: unknown) => void;
 
+interface Options {
+  wrapper: HTMLElement;
+  offsetTop: number;
+  onChooseColor: (color: string) => void;
+}
+
 export default {
-  show(wrapper: HTMLElement, offsetTop: number) {
+  show({ wrapper, offsetTop, onChooseColor }: Options) {
     const mountEl = document.createElement('div');
     wrapper.appendChild(mountEl);
 
@@ -39,6 +45,7 @@ export default {
         cleanUp();
         _reject();
       },
+      onChooseColor,
     });
 
     popover.mount(mountEl);