From 57cac25c6fc84269acb80313f280a783fbbca4d5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 23 Jan 2024 11:02:03 +0100
Subject: [PATCH] Add highlight content to sidebar

---
 .../content-blocks/ContentComponent.vue       |  2 +-
 .../highlights/HighlightSidebar.vue           | 23 +++++--------------
 client/src/helpers/highlight-sidebar.ts       |  5 ++--
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 657d0d80..43678491 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -214,7 +214,7 @@ const markHighlights = () => {
         console.log(newMark);
         newMark.addEventListener('click', () => {
           console.log('clicked');
-          highlightSidebar.open();
+          highlightSidebar.open(highlight);
         });
       },
     });
diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index a527486d..f0e4c33c 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -10,14 +10,14 @@
       <h2 class="heading-4">Meine Markierung</h2>
       <mark
         class="paragraph highlight-sidebar__highlighted-text"
+        :class="[`highlight--${highlight.color}`]"
         ref="highlightMark"
       >
-        hier ist ein bischen mehr text blabla blabla bla blabla blabla bla bla blabla blabla bla blabla blabla bla bla
-        noch mehr text noch mehr text
+        {{ highlight.text }}
       </mark>
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__note">
-      <h2 class="heading-4">Meine Notiz {{ id }}</h2>
+      <h2 class="heading-4">Meine Notiz</h2>
       <div class="form-with-border highlight-sidebar__note-form">
         <textarea
           class="borderless-textarea"
@@ -31,9 +31,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref } from 'vue';
+import { HighlightNode } from '@/__generated__/graphql';
+import { defineAsyncComponent, ref } from 'vue';
 export interface Props {
-  id: string;
+  highlight: HighlightNode;
 }
 
 const emits = defineEmits(['close']);
@@ -43,18 +44,6 @@ defineProps<Props>();
 
 const highlightMark = ref<HTMLElement | null>(null);
 
-const overflowing = computed(() => {
-  const element = highlightMark.value;
-  if (element) {
-    console.log('element is here');
-    console.log(element.scrollHeight);
-    console.log(element.clientHeight);
-    console.log(element.scrollHeight > element.clientHeight);
-    return element.scrollHeight > element.clientHeight;
-  }
-  return false;
-});
-
 const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 </script>
 
diff --git a/client/src/helpers/highlight-sidebar.ts b/client/src/helpers/highlight-sidebar.ts
index dc5a3fc7..eb879663 100644
--- a/client/src/helpers/highlight-sidebar.ts
+++ b/client/src/helpers/highlight-sidebar.ts
@@ -1,11 +1,11 @@
 import { createApp } from 'vue';
 import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
 import autoGrow from '@/directives/auto-grow';
+import { HighlightNode } from '@/__generated__/graphql';
 export default {
-  open() {
+  open(highlight: HighlightNode) {
     const app = document.getElementById('app');
     const mountEl = document.createElement('div');
-    console.log(app);
     app?.appendChild(mountEl);
 
     const cleanUp = () => {
@@ -14,6 +14,7 @@ export default {
     };
 
     const sidebar = createApp(HighlightSidebar, {
+      highlight,
       onClose() {
         cleanUp();
       },