[player] Move code from ElementContainerComponent to MarkingService

The MarkingService now takes care of the selection and its validation.
The text component sends its change via elementValueChanged.

projects/common/element-components/text.component.ts

@@ -3,6 +3,7 @@ import {
 } from '@angular/core';
 import { ElementComponent } from '../element-component.directive';
 import { TextElement } from '../models/text-element';
+import { ValueChangeElement } from '../models/uI-element';
 
 @Component({
   selector: 'app-text',
@@ -62,6 +63,7 @@ import { TextElement } from '../models/text-element';
 })
 export class TextComponent extends ElementComponent {
   elementModel!: TextElement;
+  @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @Output() startSelection = new EventEmitter<MouseEvent>();
   @Output() applySelection = new EventEmitter <{
     mode: 'mark' | 'underline' | 'delete',

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

@@ -30,6 +30,7 @@ import { ImageElement } from '../../../../../common/models/image-element';
 import { VeronaPostService } from '../../services/verona-post.service';
 import { MediaPlayerElementComponent } from '../../../../../common/media-player-element-component.directive';
 import { MediaPlayerService } from '../../services/media-player.service';
+import { TextComponent } from '../../../../../common/element-components/text.component';
 
 @Component({
   selector: 'app-element-container',
@@ -122,7 +123,8 @@ export class ElementContainerComponent implements OnInit {
         .pipe(takeUntil(this.ngUnsubscribe))
         .subscribe((selection:
         { mode: 'mark' | 'underline' | 'delete', color: string; element: HTMLElement; clear: boolean }) => {
-          this.applySelection(selection.mode, selection.color, selection.element);
+          this.markingService
+            .applySelection(selection.mode, selection.color, selection.element, elementComponent as TextComponent);
         });
     }
 
@@ -251,34 +253,6 @@ export class ElementContainerComponent implements OnInit {
       });
   }
 
-  private applySelection(mode: 'mark' | 'underline' | 'delete', color: string, element: HTMLElement): 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)) {
-        const markMode = mode === 'mark' ? 'marked' : 'underlined';
-        this.markingService.applySelection(range, selection, mode === 'delete', color, markMode);
-        this.unitStateService.changeElementValue({
-          id: this.elementModel.id,
-          values: [this.elementModel.text as string, element.innerHTML]
-        });
-        this.elementModel.text = element.innerHTML;
-      }
-      selection.removeAllRanges();
-    } // nothing to do!
-  }
-
-  private isDescendantOf(node: Node | null, element: HTMLElement): boolean {
-    if (!node || node === document) {
-      return false;
-    }
-    if (node.parentElement === element) {
-      return true;
-    }
-    return this.isDescendantOf(node.parentNode, element);
-  }
-
   ngOnDestroy(): void {
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();

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

 import { Injectable } from '@angular/core';
+import { TextComponent } from '../../../../common/element-components/text.component';
 
 @Injectable({
   providedIn: 'root'
@@ -7,7 +8,38 @@ export class MarkingService {
   private static readonly MARKING_TAG = 'MARKED';
   private static readonly UNDERLINE_TAG = 'UNDERLINED';
 
-  applySelection(
+  applySelection(mode: 'mark' | 'underline' | 'delete',
+                 color: string,
+                 element: HTMLElement,
+                 textComponent: TextComponent): 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)) {
+        const markMode = mode === 'mark' ? 'marked' : 'underlined';
+        this.applyRange(range, selection, mode === 'delete', color, markMode);
+        textComponent.elementValueChanged.emit({
+          id: textComponent.elementModel.id,
+          values: [textComponent.elementModel.text as string, element.innerHTML]
+        });
+        textComponent.elementModel.text = element.innerHTML;
+      }
+      selection.removeAllRanges();
+    } // nothing to do!
+  }
+
+  private isDescendantOf(node: Node | null, element: HTMLElement): boolean {
+    if (!node || node === document) {
+      return false;
+    }
+    if (node.parentElement === element) {
+      return true;
+    }
+    return this.isDescendantOf(node.parentNode, element);
+  }
+
+  private applyRange(
     range: Range, selection: Selection, clear: boolean, color: string, markMode: 'marked' | 'underlined'
   ): void {
     if (range.startContainer === range.endContainer) {