Prevent nested ContentBlocks to also open a HighlightPopover

Also add a Testcase for them

Relates to MS-879

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -1,10 +1,7 @@
 import { defaultModuleQueriesandMutations } from '../../../support/helpers';
 
-const contentBlockId = window.btoa('ContentBlockNode:1');
-const operations = {
-  ...defaultModuleQueriesandMutations,
-  ModuleDetailsQuery: {
-    module: {
+const getModule = (contents) => {
+  return {
     chapters: [
       {
         title: 'A Chapter',
@@ -13,7 +10,15 @@ const operations = {
             title: 'A Content Block',
             highlights: [],
             id: contentBlockId,
-              contents: [
+            contents,
+          },
+        ],
+      },
+    ],
+  };
+};
+
+const defaultContents = [
   {
     type: 'text_block',
     id: 'some-content-component-id',
@@ -21,12 +26,29 @@ const operations = {
       text: '<p>Dies ist ein Text mit ein paar Wörtern.</p>',
     },
   },
-              ],
-            },
-          ],
+];
+
+const contentListContents = [
+  {
+    id: '16ea6f8a-99bc-4366-9f32-d7c3e7e39765',
+    type: 'content_list_item',
+    value: [
+      {
+        id: '73f571e9-c049-41e7-8927-c4badbfb9b93',
+        type: 'text_block',
+        value: {
+          text: '<p data-block-key="qykuf">Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo<br/><br/> Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo</p>',
+        },
       },
     ],
   },
+];
+
+const contentBlockId = window.btoa('ContentBlockNode:1');
+const operations = {
+  ...defaultModuleQueriesandMutations,
+  ModuleDetailsQuery: {
+    module: getModule(defaultContents),
   },
   AddHighlight: ({ input: { highlight } }) => {
     return {
@@ -55,17 +77,7 @@ const selectText = (elm: Node, start: number, end: number) => {
   cy.window().then((win) => win.getSelection().addRange(range));
 };
 
-describe('Highlights', () => {
-  beforeEach(() => {
-    cy.setup();
-    cy.mockGraphqlOps({
-      operations,
-    });
-  });
-
-  it('visits a module and highlights a paragraph', () => {
-    cy.visit('/module/my-module');
-
+const markText = () => {
   /*
    * Mark the text (programmatically, as Cypress has no API for this)
    */
@@ -73,13 +85,12 @@ describe('Highlights', () => {
     const textBlock = $elm[0];
     const paragraph = textBlock.querySelector('p');
     selectText(paragraph.childNodes[0], 2, 12);
-    });
     /*
      * Also trigger the events manually
      */
     cy.document().trigger('selectionchange');
-    cy.getByDataCy('content-block-div').trigger('mouseup');
-
+    cy.wrap(paragraph.parentNode).trigger('mouseup');
+  });
   cy.getByDataCy('highlight-popover').should('be.visible');
   cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
 
@@ -90,6 +101,20 @@ describe('Highlights', () => {
     const selection = win.getSelection();
     selection.removeAllRanges();
   });
+};
+
+describe('Highlights', () => {
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('visits a module and highlights a paragraph', () => {
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.visit('/module/my-module');
+
+    markText();
 
     // mark the text with yellow and check the text
     cy.getByDataCy('highlight-alpha').click();
@@ -99,6 +124,14 @@ describe('Highlights', () => {
     cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
     cy.getByDataCy('highlight-mark').should('have.length', 1);
 
+    // mark the text with yellow and check the text
+    cy.getByDataCy('highlight-beta').click();
+    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
+    //
+    // we only want to have one of each element and not accidentally create multiple
+    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
+    cy.getByDataCy('highlight-mark').should('have.length', 1);
+
     // display the sidebar and popover and check them
     cy.getByDataCy('highlight-note').click();
     cy.getByDataCy('highlight-popover').should('be.visible');
@@ -133,4 +166,19 @@ describe('Highlights', () => {
     cy.getByDataCy('highlight-sidebar').should('not.exist');
     cy.getByDataCy('highlight-mark').should('not.exist');
   });
+
+  it.only('visits a module with a ContentListItem and highlights some text', () => {
+    cy.mockGraphqlOps({
+      operations: {
+        ...operations,
+        ModuleDetailsQuery: {
+          module: getModule(contentListContents),
+        },
+      },
+    });
+
+    cy.visit('/module/my-module');
+
+    markText();
+  });
 });

client/src/components/ContentBlock.vue

@@ -329,6 +329,7 @@ const createHighlight = (highlight: AddHighlightArgument) => {
   });
 };
 
+const isNested = computed(() => props.contentBlock.root); // if it's nested, a the parent has the root propert
 onMounted(() => {
   log.debug('onMounted ContentBlock called');
 
@@ -377,8 +378,10 @@ onMounted(() => {
     };
     selectionHandler = getSelectionHandler(options);
     // add the listener from highlights
+    if (!isNested.value) {
       element.addEventListener('mouseup', selectionHandler);
     }
+  }
 });
 
 onUnmounted(() => {

client/src/components/highlights/HighlightPopover.vue

@@ -11,6 +11,7 @@
       ></div>
       <div
         class="highlight-popover__color highlight-popover__color--pink"
+        data-cy="highlight-beta"
         @click="$emit('choose-color', 'beta')"
       ></div>
       <div