Move the selection from the directive to the component

client/src/components/ContentBlock.vue

@@ -3,7 +3,6 @@
     :class="{ 'hideable-element--greyed-out': isHidden }"
     class="content-block__container hideable-element content-list__parent"
     ref="wrapper"
-    v-highlight
   >
     <div
       :class="specialClass"
@@ -99,7 +98,8 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, inject, onMounted, ref, computed } from 'vue';
+import { defineAsyncComponent, inject, onMounted, ref, computed, onUnmounted } from 'vue';
+
 import { useMutation } from '@vue/apollo-composable';
 import AddContentButton from '@/components/AddContentButton.vue';
 import MoreOptionsWidget from '@/components/MoreOptionsWidget.vue';
@@ -120,9 +120,13 @@ import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
 import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
 import type { ExtendedContentBlockNode } from '@/@types';
+
 import type { Modal } from '@/plugins/modal.types';
+
 import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
 
+import { getSelectionHandler } from '@/directives/highlight';
+
 export interface Props {
   contentBlock: ExtendedContentBlockNode;
   parent?: any;
@@ -227,6 +231,18 @@ onMounted(() => {
         window.scrollTo({ top: rect.y, behavior: 'smooth' });
       }, PAGE_LOAD_TIMEOUT);
     }
+
+    // add the listener from highlights
+    element.addEventListener('mouseup', getSelectionHandler(element, props.contentBlock));
+  }
+});
+
+onUnmounted(() => {
+  const element = wrapper.value;
+
+  if (element !== null) {
+    console.log('unmounting');
+    element.removeEventListener('mouseup', getSelectionHandler);
   }
 });
 

client/src/directives/highlight.ts

@@ -15,11 +15,11 @@ import ContentBlock from '@/components/ContentBlock.vue';
 
 interface Highlight {
   contentBlock: string; // the id
-  contentIndex: number;
-  paragraphIndex: number;
-  startPosition: number;
-  selectionLength: number;
-  text: string;
+  contentIndex: number; // which content of the .contents array do I come from?
+  paragraphIndex: number; // which paragraph inside the textBlock do I come from?
+  startPosition: number; // start of the selection
+  selectionLength: number; // length of the selection
+  text: string; // text that was actually selected
 }
 
 const TOP_TRESHOLD = 0;
@@ -84,7 +84,7 @@ const findPositionInParent = (element: HTMLElement, className: string = 'content
   return children.indexOf(element);
 };
 
-const getSelectionHandler = (el: HTMLElement, contentBlock: ContentBlockNode) => (_e: Event) => {
+export const getSelectionHandler = (el: HTMLElement, contentBlock: ContentBlockNode) => (_e: Event) => {
   const rect = el.getBoundingClientRect();
   if (isInsideViewport(rect.top) || isInsideViewport(rect.bottom)) {
     // the listener only does something if the `el` is visible in the viewport, to save resources
@@ -103,13 +103,13 @@ const getSelectionHandler = (el: HTMLElement, contentBlock: ContentBlockNode) =>
         if (paragraph === endAncestor) {
           // todo: rename this variable, `parent` is not correct anymore
           const contentComponent = findClosestAncestorWithClass(startContainer, 'content-component');
-          if (parent) {
+          if (contentComponent) {
             // our selection is wholly inside the container node, we continue with it
             const position = findPositionInParent(contentComponent);
             const siblings = Array.from(paragraph.parentElement.children);
             const positionInTextBlock = siblings.indexOf(paragraph);
 
-            const numOfParagraphs = Array.from(parent.children[1].children).filter(
+            const numOfParagraphs = Array.from(contentComponent.children[1].children).filter(
               (child) => child.nodeName.toLowerCase() === 'p'
             ).length;
 
@@ -126,6 +126,9 @@ const getSelectionHandler = (el: HTMLElement, contentBlock: ContentBlockNode) =>
               contentBlock: contentBlock.id,
               contentIndex: position,
               startPosition: start,
+              paragraphIndex: positionInTextBlock,
+              selectionLength: end - start,
+              text: range.toString(),
             };
             console.log(highlightedText);
             // todo: how do we save this? maybe we need to move away from the directive and do this inside the mounted