Add highlight content to sidebar

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);
         });
       },
     });

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>
 

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();
       },