Add Update Highlight mutation stub

client/src/__generated__/graphql.ts

@@ -1625,6 +1625,7 @@ export type Query = {
   chapter?: Maybe<ChapterNode>;
   chapters?: Maybe<ChapterNodeConnection>;
   contentBlock?: Maybe<ContentBlockNode>;
+  highlight?: Maybe<HighlightNode>;
   instrument?: Maybe<InstrumentNode>;
   instrumentCategories?: Maybe<Array<Maybe<InstrumentCategoryNode>>>;
   instrumentTypes?: Maybe<Array<Maybe<InstrumentTypeNode>>>;
@@ -1704,6 +1705,11 @@ export type QueryContentBlockArgs = {
 };
 
 
+export type QueryHighlightArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
 export type QueryInstrumentArgs = {
   id?: InputMaybe<Scalars['ID']['input']>;
   slug?: InputMaybe<Scalars['String']['input']>;

client/src/components/ContentBlock.vue

@@ -327,7 +327,6 @@ onMounted(() => {
     element.addEventListener(
       'mouseup',
       getSelectionHandler(element, props.contentBlock, (newHighlight) => {
-        console.log(newHighlight);
         doCreateHighlight({
           input: {
             highlight: newHighlight,

client/src/components/content-blocks/ContentComponent.vue

@@ -61,6 +61,8 @@ import Survey from '@/components/content-blocks/SurveyBlock.vue';
 import Solution from '@/components/content-blocks/Solution.vue';
 import Instruction from '@/components/content-blocks/Instruction.vue';
 import BookmarkActions from '@/components/notes/BookmarkActions.vue';
+import popover from '@/helpers/popover';
+import { graphql } from '@/__generated__';
 
 type ContentComponentType =
   | typeof TextBlock
@@ -197,6 +199,18 @@ const bookmarkContent = (bookmarked: boolean) => {
   mutateBookmarkContent(newVars);
 };
 
+const { mutate: doUpdateHighlight } = useMutation(
+  graphql(`
+    mutation UpdateHighlight($color: String!) {
+      updateHighlight(color: $color) {
+        highlight {
+          ...HighlightParts
+        }
+      }
+    }
+  `)
+);
+
 const markHighlights = () => {
   for (const highlight of filteredHighlights.value) {
     const element = paragraphs.value[highlight.paragraphIndex];
@@ -209,11 +223,22 @@ const markHighlights = () => {
     ];
     instance.markRanges(ranges, {
       className: `highlight highlight--${highlight.color}`,
-      each: (newMark) => {
+      each: (newMark: HTMLElement) => {
         newMark.dataset.id = highlight.id;
         console.log(newMark);
         newMark.addEventListener('click', () => {
           console.log('clicked');
+          if (contentComponentDiv.value) {
+            popover.show({
+              wrapper: contentComponentDiv.value,
+              offsetTop: 0,
+              onChooseColor: (color: string) => {
+                doUpdateHighlight({
+                  color: color,
+                });
+              },
+            });
+          }
           highlightSidebar.open(highlight);
         });
       },

server/notes/mutations.py

@@ -1,23 +1,21 @@
+import json
 from builtins import PermissionError
 
 import graphene
-import json
-
+from api.utils import get_by_id, get_object
+from basicknowledge.models import BasicKnowledge
+from books.models import Chapter, ContentBlock, Module
 from django.db import IntegrityError
 from graphene import relay
 from graphql_relay import from_global_id
-
-from api.utils import get_by_id, get_object
-from basicknowledge.models import BasicKnowledge
-from books.models import ContentBlock, Chapter, Module
-from notes.inputs import AddNoteArgument, UpdateNoteArgument, AddHighlightArgument
+from notes.inputs import AddHighlightArgument, AddNoteArgument, UpdateNoteArgument
 from notes.models import (
+    ChapterBookmark,
     ContentBlockBookmark,
     Highlight,
-    Note,
-    ChapterBookmark,
-    ModuleBookmark,
     InstrumentBookmark,
+    ModuleBookmark,
+    Note,
 )
 from notes.schema import HighlightNode, NoteNode
 
@@ -208,6 +206,11 @@ class UpdateInstrumentBookmark(relay.ClientIDMutation):
         return cls(success=True)
 
 
+class UpdateHighlight(relay.ClientIDMutation):
+    class Input:
+        color = graphene.Argument(graphene.String)
+
+
 class AddHighlight(relay.ClientIDMutation):
     class Input:
         highlight = graphene.Argument(AddHighlightArgument)
@@ -252,6 +255,7 @@ class AddHighlight(relay.ClientIDMutation):
 class NoteMutations:
     add_note = AddNote.Field()
     add_highlight = AddHighlight.Field()
+    update_highlight = UpdateHighlight.Field()
     update_note = UpdateNote.Field()
     update_content_bookmark = UpdateContentBookmark.Field()
     update_chapter_bookmark = UpdateChapterBookmark.Field()