Create marking bar component from marking buttons of text component

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

+import {
+  Component, EventEmitter, Input, Output
+} from '@angular/core';
+import { TextElement } from '../../ui-elements/text/text-element';
+
+@Component({
+  selector: 'app-marking-bar',
+  template: `
+    <div class="marking-bar">
+      <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-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-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-icon>border_color</mat-icon>
+      </button>
+      <button type="button"
+              class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab
+              (click)="applySelection.emit({ mode: 'delete', color: 'none', element })">
+        <mat-icon svgIcon="rubber-black"></mat-icon>
+      </button>
+    </div>`,
+  styles: [
+    '.marking-bar {position: sticky; top: 0; margin-bottom: 15px;}',
+    '.marking-button {color: #333; margin-right: 5px;}'
+  ]
+})
+export class MarkingBarComponent {
+  @Input() element!: HTMLElement;
+  @Input() elementModel!: TextElement;
+  @Output() applySelection = new EventEmitter<{
+    mode: 'mark' | 'underline' | 'delete',
+    color: string,
+    element: HTMLElement
+  }>();
+}

projects/common/shared.module.ts

@@ -49,6 +49,7 @@ import { SpellCorrectComponent } from './ui-elements/spell-correct/spell-correct
 import { DropListSimpleComponent } from './ui-elements/drop-list-simple/drop-list-simple.component';
 import { FrameComponent } from './ui-elements/frame/frame.component';
 import { ToggleButtonComponent } from './ui-elements/toggle-button/toggle-button.component';
+import { MarkingBarComponent } from './components/marking-bar/marking-bar.component';
 
 @NgModule({
   imports: [
@@ -99,7 +100,8 @@ import { ToggleButtonComponent } from './ui-elements/toggle-button/toggle-button
     SpellCorrectComponent,
     TextFieldSimpleComponent,
     FrameComponent,
-    ToggleButtonComponent
+    ToggleButtonComponent,
+    MarkingBarComponent
   ],
   exports: [
     CommonModule,
@@ -115,7 +117,8 @@ import { ToggleButtonComponent } from './ui-elements/toggle-button/toggle-button
     MatTooltipModule,
     MatDialogModule,
     TranslateModule,
-    SafeResourceHTMLPipe
+    SafeResourceHTMLPipe,
+    MarkingBarComponent
   ]
 })
 export class SharedModule {

projects/common/ui-elements/text/text.component.ts

@@ -12,39 +12,15 @@ import { ValueChangeElement } from '../../models/uI-element';
                                  elementModel.positionProps.fixedSize"
          [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
          [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
-      <div *ngIf="elementModel.highlightableYellow ||
+      <app-marking-bar
+          *ngIf="elementModel.highlightableYellow ||
            elementModel.highlightableTurquoise ||
            elementModel.highlightableOrange"
-           class="marking-bar">
-        <button *ngIf="elementModel.highlightableYellow"
-                type="button"
-                class="marking-button"
-                mat-mini-fab [style.background-color]="'yellow'"
-                (click)="applySelection.emit({ mode: 'mark', color:'yellow', element: container })">
-          <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: container })">
-          <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: container })">
-          <mat-icon>border_color</mat-icon>
-        </button>
-        <button type="button"
-                class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab
-                (click)="applySelection.emit({ mode: 'delete', color: 'none', element: container })">
-          <mat-icon svgIcon="rubber-black"></mat-icon>
-        </button>
-      </div>
+          [element]="container"
+          [elementModel]="elementModel"
+          (applySelection)="applySelection.emit($event)">
+      </app-marking-bar>
       <div #container class="text-container"
-           (mousedown)="startSelection.emit($event)"
            [style.background-color]="elementModel.surfaceProps.backgroundColor"
            [style.color]="elementModel.fontProps.fontColor"
            [style.font-family]="elementModel.fontProps.font"
@@ -53,13 +29,12 @@ import { ValueChangeElement } from '../../models/uI-element';
            [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
            [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
            [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+           (mouseup)="startSelection.emit($event)"
            [innerHTML]="elementModel.text | safeResourceHTML">
       </div>
     </div>
   `,
   styles: [
-    '.marking-bar {position: sticky; top: 0; margin-bottom: 15px;}',
-    '.marking-button {color: #333; margin-right: 5px;}',
     '::ng-deep .text-container p strong {letter-spacing: 0.04em; font-weight: 600;}', // bold less bold
     '::ng-deep .text-container p:empty::after {content: "\\00A0"}', // render empty p
     '::ng-deep .text-container h1 {font-weight: bold; font-size: 20px;}',