[player] Fix Firefox selection problems

Make sure that selection start is smaller than selection end

projects/player/src/app/components/element/element.component.ts

@@ -115,17 +115,19 @@ export class ElementComponent implements OnInit {
   private applySelection(color: string, element: HTMLElement, clear: boolean): void {
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      if (this.isDescendantOf(range.startContainer, element) &&
-        this.isDescendantOf(range.endContainer, element)) {
-        this.markingService.applySelection(range, selection, clear, color);
-        this.unitStateService.changeElementValue({
-          id: this.elementModel.id,
-          values: [this.elementModel.text as string, element.innerHTML]
-        });
-        this.elementModel.text = element.innerHTML;
+      for (let i = 0; i < selection.rangeCount; i++) {
+        const range = selection.getRangeAt(i);
+        if (this.isDescendantOf(range.startContainer, element) &&
+          this.isDescendantOf(range.endContainer, element)) {
+          this.markingService.applySelection(range, selection, clear, color);
+          this.unitStateService.changeElementValue({
+            id: this.elementModel.id,
+            values: [this.elementModel.text as string, element.innerHTML]
+          });
+          this.elementModel.text = element.innerHTML;
+        }
       }
-      selection.removeRange(range);
+      selection.removeAllRanges();
     } // nothing to do!
   }
 

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

@@ -37,7 +37,7 @@ export class MarkingService {
 
   private clearMarkingFromNodes(nodes: Node[], range: Range): void {
     nodes.forEach((node, index) => {
-      if (node.parentElement?.tagName === MarkingService.MARKING_TAG) {
+      if (node.parentElement?.tagName.toUpperCase() === MarkingService.MARKING_TAG) {
         const nodeValues = this.getNodeValues(node, nodes, index, range);
         if (nodeValues.text) {
           this.clearMarking(node, nodeValues.text, nodeValues.previousText, nodeValues.nextText, range);
@@ -85,13 +85,15 @@ export class MarkingService {
   private getNodeValues = (node: Node, nodes: Node[], index: number, range: Range): {
     text: string, previousText: string, nextText: string
   } => {
+    const start = Math.min(range.startOffset, range.endOffset);
+    const end = Math.max(range.startOffset, range.endOffset);
     let text: string; let previousText = ''; let nextText = '';
     if (index === 0) {
-      previousText = node.nodeValue?.substring(0, range.startOffset) || '';
-      text = node.nodeValue?.substring(range.startOffset) || '';
+      previousText = node.nodeValue?.substring(0, start) || '';
+      text = node.nodeValue?.substring(start) || '';
     } else if (index === nodes.length - 1) {
-      text = node.nodeValue?.substring(0, range.endOffset) || '';
-      nextText = node.nodeValue?.substring(range.endOffset) || '';
+      text = node.nodeValue?.substring(0, end) || '';
+      nextText = node.nodeValue?.substring(end) || '';
     } else {
       text = node.nodeValue || '';
     }