[player] Specify the colors for marking in hexadecimal notation

The marking service takes over the conversion to rgb notation, because
in html markup this notation is used for the background color

projects/common/components/marking-bar/marking-bar.component.ts

@@ -10,22 +10,22 @@ import { TextElement } from '../../ui-elements/text/text-element';
       <button *ngIf="elementModel.highlightableYellow"
               type="button"
               class="marking-button"
-              mat-mini-fab [style.background-color]="'yellow'"
-              (click)="applySelection.emit({ mode: 'mark', color:'yellow', element })">
+              mat-mini-fab [style.background-color]="'#f9f871'"
+              (click)="applySelection.emit({ mode: 'mark', color:'#f9f871', element })">
         <mat-icon>border_color</mat-icon>
       </button>
       <button *ngIf="elementModel.highlightableTurquoise"
               type="button"
               class="marking-button"
-              mat-mini-fab [style.background-color]="'turquoise'"
-              (click)="applySelection.emit({ mode: 'mark', color: 'turquoise', element })">
+              mat-mini-fab [style.background-color]="'#9de8eb'"
+              (click)="applySelection.emit({ mode: 'mark', color: '#9de8eb', element })">
         <mat-icon>border_color</mat-icon>
       </button>
       <button *ngIf="elementModel.highlightableOrange"
               type="button"
               class="marking-button"
-              mat-mini-fab [style.background-color]="'orange'"
-              (click)="applySelection.emit({ mode: 'mark', color: 'orange', element })">
+              mat-mini-fab [style.background-color]="'#ffa06a'"
+              (click)="applySelection.emit({ mode: 'mark', color: '#ffa06a', element })">
         <mat-icon>border_color</mat-icon>
       </button>
       <button type="button"

projects/player/src/app/services/marking.service.ts

@@ -31,7 +31,8 @@ export class MarkingService {
   }
 
   getMarkingData = (htmlText: string): string[] => {
-    const markingStartPattern = new RegExp(`<${MarkingService.MARKING_TAG.toLowerCase()} [a-z]+="[\\w- ;:]+">`);
+    const markingStartPattern =
+      new RegExp(`<${MarkingService.MARKING_TAG.toLowerCase()} [a-z]+="[\\w\\d()-;:, #]+">`);
     const markingClosingTag = `</${MarkingService.MARKING_TAG.toLowerCase()}>`;
     let newHtmlText = htmlText;
     const markCollection = [];
@@ -43,7 +44,8 @@ export class MarkingService {
         matchesArray = newHtmlText.match(markingClosingTag);
         if (matchesArray) {
           const endMatch = matchesArray[0];
-          const startIndex = newHtmlText.search(startMatch);
+          // we have to escape the brackets of rgb color
+          const startIndex = newHtmlText.search(startMatch.replace('(', '\\(').replace(')', '\\)'));
           newHtmlText = newHtmlText.replace(startMatch, '');
           const endIndex = newHtmlText.search(endMatch);
           newHtmlText = newHtmlText.replace(endMatch, '');
@@ -75,12 +77,16 @@ export class MarkingService {
   }
 
   private getMarkingColor = (tag: string): string => {
-    const colors = tag.match(/(?!.*:)\w*(?=;)/);
-    return (colors) ? colors[0] : 'none';
+    const colors = tag.match(/\d{1,3}, \d{1,3}, \d{1,3}/);
+    return (colors) ? this.rgbToHex(colors[0].split(',').map(value => Number(value))) : 'none';
   };
 
-  private createMarkingStartTag =
-  (color: string): string => `<${MarkingService.MARKING_TAG.toLowerCase()} style="background-color: ${color};">`;
+  private createMarkingStartTag(color: string): string {
+    const rgb = this.hexToRgb(color);
+    return `<${
+      MarkingService.MARKING_TAG.toLowerCase()
+    } style="background-color: rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]});">`;
+  }
 
   private isDescendantOf(node: Node | null, element: HTMLElement): boolean {
     if (!node || node === document) {
@@ -204,7 +210,9 @@ export class MarkingService {
       start = Math.min(range.startOffset, range.endOffset);
       end = Math.max(range.startOffset, range.endOffset);
     }
-    let text: string; let previousText = ''; let nextText = '';
+    let text: string;
+    let previousText = '';
+    let nextText = '';
     if (index === 0) {
       previousText = node.nodeValue?.substring(0, start) || '';
       text = node.nodeValue?.substring(start) || '';
@@ -262,4 +270,17 @@ export class MarkingService {
       }
     });
   }
+
+  private rgbToHex = (rgb: number[]): string => `#${rgb.map(x => {
+    const hex = x.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  }).join('')}`;
+
+  private hexToRgb = (hex: string): number[] => {
+    const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+    if (normal) return normal.slice(1).map(e => parseInt(e, 16));
+    const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
+    if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));
+    return [];
+  };
 }