@hmcts/media-viewer 4.2.0 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/annotations/annotation-set/ctx-toolbar/ctx-toolbar.component.ts

@@ -0,0 +1,127 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges
+} from '@angular/core';
+import { Rectangle } from '../annotation-view/rectangle/rectangle.model';
+
+@Component({
+    selector: 'mv-ctx-toolbar',
+    templateUrl: './ctx-toolbar.component.html',
+    standalone: false
+})
+export class CtxToolbarComponent implements OnChanges {
+
+  readonly defaultHeight;
+  readonly defaultWidth;
+
+  @Input() zoom;
+  @Input() rotate;
+  @Input() pageHeight: number;
+  @Input() pageWidth: number;
+
+  @Input() canHighlight: boolean;
+  @Input() canBookmark: boolean;
+  @Input() canComment: boolean;
+  @Input() canDelete: boolean;
+
+  @Output() createHighlightEvent = new EventEmitter();
+  @Output() deleteHighlightEvent = new EventEmitter();
+  @Output() addOrEditCommentEvent = new EventEmitter();
+  @Output() createBookmarkEvent = new EventEmitter<Rectangle>();
+
+  rectangle: Rectangle;
+  _rectangles: Rectangle[];
+  top: number;
+  left: number;
+
+  constructor() {
+    this.defaultHeight = 70;
+    this.defaultWidth = 300;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.setRectangle();
+    this.top = this.popupTop();
+    this.left = this.popupLeft();
+  }
+
+  @Input() set rectangles(rectangles: Rectangle[]) {
+    if (rectangles) {
+      this._rectangles = rectangles;
+      this.setRectangle();
+    }
+  }
+
+  get rectangles() {
+    return this._rectangles;
+  }
+
+  createHighlight() {
+    this.createHighlightEvent.emit();
+    this.rectangle = undefined;
+  }
+
+  deleteHighlight() {
+    this.deleteHighlightEvent.emit();
+  }
+
+  addOrEditComment() {
+    this.addOrEditCommentEvent.emit();
+    setTimeout(() => {
+      // This hack to wait until the element is rendered seems to be unreliable,
+      if (!location.hash) {
+        document.getElementById('viewerContainer')?.scrollBy(0, 1);
+      }
+    }, 20);
+  }
+
+  createBookmark() {
+    this.createBookmarkEvent.emit(this.rectangle);
+    this.rectangle = undefined;
+  }
+
+  setRectangle() {
+    const rectangle = this.rectangles
+      .reduce((prev, current) => prev.y < current.y ? prev : current);
+    this.rectangle =  { ...rectangle };
+    switch (this.rotate) {
+      case 90:
+        this.rectangle.width = rectangle.height;
+        this.rectangle.height = rectangle.width;
+        this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.y - rectangle.height;
+        this.rectangle.y = rectangle.x;
+        break;
+      case 180:
+        this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.x - rectangle.width;
+        this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.y - rectangle.height;
+        break;
+      case 270:
+        this.rectangle.width = rectangle.height;
+        this.rectangle.height = rectangle.width;
+        this.rectangle.x = rectangle.y;
+        this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.x - rectangle.width;
+        break;
+    }
+  }
+
+  popupTop() {
+    const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
+    return popupTop <= 0 ? this.defaultHeight : popupTop;
+  }
+
+  popupLeft() {
+    const popupLeft = (this.rectangle.x + (this.rectangle.width / 2)) * this.zoom - (this.defaultWidth / 2);
+    if (popupLeft <= 0) {
+      return 0;
+    } else if (popupLeft >= this.pageWidth - this.defaultWidth) {
+      return this.pageWidth - this.defaultWidth;
+    } else {
+      return popupLeft;
+    }
+  }
+}

package/projects/media-viewer/src/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.html

@@ -0,0 +1,36 @@
+<div class="pageContainer">
+  <div  *ngFor="let page of pages;  index as i"
+       class="pageContainer__page"
+       [ngStyle]="{
+       'width.px': page.styles.width,
+       'height.px': page.styles.height
+       }"
+       [ngClass]="{ 'pageContainer__page--draw' : drawMode }">
+    <mv-box-highlight-create
+      [page]="i + 1"
+      [pageHeight]="page.styles.height"
+      [pageWidth]="page.styles.width"
+      [rotate]="rotate"
+      [zoom]="zoom"
+      (saveSelection)="saveAnnotation($event)">
+    </mv-box-highlight-create>
+    <mv-ctx-toolbar *ngIf="rectangles && highlightPage === (i + 1)"
+                    [rectangles]="rectangles"
+                    [canBookmark]="true" [canHighlight]="true"
+                    [zoom]="zoom"
+                    [rotate]="rotate"
+                    [pageHeight]="page.styles.height"
+                    [pageWidth]="page.styles.width"
+                    (createBookmarkEvent)="createBookmark($event)"
+                    (createHighlightEvent)="createHighlight()">
+    </mv-ctx-toolbar>
+    <div class="pageContainer__page-item">
+      <mv-annotation-set *ngIf="(annoPages$ | async) as annoPages"
+                         [zoom]="zoom"
+                         [rotate]="rotate"
+                         [pageHeight]="page.styles.height"
+                         [pageWidth]="page.styles.width"
+                         [page]="i" [annotations]="annoPages[i + 1]"></mv-annotation-set>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.spec.ts

@@ -0,0 +1,232 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { of, Subscription } from 'rxjs';
+import { Action, Store, StoreModule } from '@ngrx/store';
+
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { HighlightCreateService } from '../annotation-create/highlight-create/highlight-create.service';
+import { ViewerEventService } from '../../../viewers/viewer-event.service';
+import { reducers } from '../../../store/reducers/reducers';
+import { MetadataLayerComponent } from './metadata-layer.component';
+
+describe('MetadataLayerComponent', () => {
+  let component: MetadataLayerComponent;
+  let fixture: ComponentFixture<MetadataLayerComponent>;
+  let mockTextLayerRect, mockElement, mockHighlight, mockClientRect, mockClientRects, mockRange;
+  let expectedAction: Action;
+  const mockStore = {
+    select: () => of([{
+      styles: { height: 100, width: 100 },
+      scaleRotation: { scale: 1, rotation: 0 },
+      annotationSetId: 'annotationSetId',
+      documentId: 'documentId'
+    }]),
+    pipe: () => of([{
+      styles: { height: 100, width: 100 },
+      scaleRotation: { scale: 1, rotation: 0 },
+      annotationSetId: 'annotationSetId',
+      documentId: 'documentId'
+    }]),
+    dispatch: (actualAction: Action) => {
+      expectedAction = actualAction;
+    },
+  } as any;
+
+  const mockHighlightService = {
+    getRectangles: () => {},
+    saveAnnotation: () => {},
+    resetHighlight: () => {}
+  } as any;
+
+  beforeEach(() => {
+    mockTextLayerRect = {
+      top: 0,
+      left: 0,
+    };
+
+    mockElement = {
+      parentElement: {
+        getBoundingClientRect(): unknown {
+          return mockTextLayerRect;
+        },
+        childNodes: [{
+          style: {
+            padding: '100px 100px 100px 100px',
+            transform: 'scaleX(0.01) translateX(100px) translateY(-0.1)'
+          }
+        },
+          {
+            style: {
+              padding: '100px 100px 100px 100px',
+              transform: 'scaleX(0.01) translateX(100) translateY(-0.1px)'
+            }
+          }]
+      }
+    };
+
+    mockHighlight = {
+      page: 1,
+      event: {
+        pageY: 10,
+        pageX: 10,
+        target: mockElement,
+        srcElement: mockElement
+      } as any,
+    };
+
+    mockClientRect = {
+      top: 10,
+      bottom: 100,
+      left: 25,
+      right: 100,
+    };
+
+    mockClientRects = [mockClientRect, mockClientRect];
+    mockRange = {
+      cloneRange(): any {
+        return mockRange;
+      },
+      getClientRects(): any {
+        return mockClientRects;
+      }
+    };
+
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MetadataLayerComponent],
+      imports: [
+        StoreModule.forRoot({}),
+        StoreModule.forFeature('media-viewer' , reducers)
+      ],
+      providers: [
+        { provide: Store, useValue: mockStore },
+        { provide: HighlightCreateService, useValue: mockHighlightService },
+        ToolbarEventService,
+        ViewerEventService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MetadataLayerComponent);
+    component = fixture.componentInstance;
+    component.rotate = 0;
+    component.zoom = 1;
+    fixture.detectChanges();
+
+    spyOn(mockHighlight.event, 'target').and.returnValue(mockElement);
+    spyOn(mockHighlight.event, 'srcElement').and.returnValue(mockElement);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should setup subscriptions',
+    inject([Store, ViewerEventService, ToolbarEventService],
+    (store, viewerEvents, toolbarEvents) => {
+      spyOn(store, 'pipe').and.returnValue(of(['pages']));
+      spyOn(toolbarEvents.drawModeSubject, 'subscribe').and.callThrough();
+      spyOn(viewerEvents.textHighlight, 'subscribe').and.callThrough();
+      spyOn(viewerEvents.ctxToolbarCleared, 'subscribe').and.callThrough();
+
+      component.ngOnInit();
+
+      expect(store.pipe).toHaveBeenCalled();
+      expect(toolbarEvents.drawModeSubject.subscribe).toHaveBeenCalled();
+      expect(viewerEvents.textHighlight.subscribe).toHaveBeenCalled();
+      expect(viewerEvents.ctxToolbarCleared.subscribe).toHaveBeenCalled();
+    }
+  ));
+
+  it('should destroy subscriptions',
+    inject([Store, ViewerEventService, ToolbarEventService],
+      (store, viewerEvents, toolbarEvents) => {
+      const mockSubscription = new Subscription();
+      spyOn(mockSubscription, 'unsubscribe');
+      spyOn(toolbarEvents.drawModeSubject, 'subscribe').and.returnValue(mockSubscription);
+      spyOn(viewerEvents.textHighlight, 'subscribe').and.returnValue(mockSubscription);
+      spyOn(viewerEvents.ctxToolbarCleared, 'subscribe').and.returnValue(mockSubscription);
+
+      component.ngOnInit();
+      component.ngOnDestroy();
+
+      expect(mockSubscription.unsubscribe).toHaveBeenCalled();
+    }
+  ));
+
+  describe('showContextToolbar', () => {
+    it('should set page and rectangles and push false to highlightModeSubject',
+      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
+        spyOn(toolbarEvents.highlightModeSubject, 'next');
+        component.showContextToolbar({ page: 1, rectangles: ['rectangles'] } as any);
+
+        expect(toolbarEvents.highlightModeSubject.next).toHaveBeenCalledWith(false);
+        expect(component.rectangles).toEqual(['rectangles'] as any);
+      })
+    );
+
+    it('should set page and rectangles and do not push false to highlightModeSubject',
+      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
+        spyOn(toolbarEvents.highlightModeSubject, 'next');
+        component.showContextToolbar({ page: 1, rectangles: null } as any);
+
+        expect(toolbarEvents.highlightModeSubject.next).not.toHaveBeenCalled();
+        expect(component.rectangles).toEqual(null);
+      })
+    );
+  });
+
+  it('should clear context toolbar', () => {
+    component.rectangles = ['rectangles'] as any;
+
+    component.clearContextToolbar();
+
+    expect(component.rectangles).toBeUndefined();
+  });
+
+  it('should create highlight',
+    inject([HighlightCreateService], (highlightCreateService) => {
+      spyOn(highlightCreateService, 'saveAnnotation');
+      spyOn(highlightCreateService, 'resetHighlight');
+
+      component.createHighlight();
+
+      expect(highlightCreateService.saveAnnotation).toHaveBeenCalled();
+      expect(highlightCreateService.resetHighlight).toHaveBeenCalled();
+      expect(component.rectangles).toBeUndefined();
+  }));
+
+  it('should create bookmark',
+    inject([HighlightCreateService, Store], (highlightCreateService, store) => {
+      const mockSelection = { toString: () => 'bookmark text' } as any;
+      spyOn(window, 'getSelection').and.returnValue(mockSelection);
+      component.highlightPage = 1;
+      spyOn(store, 'dispatch');
+      spyOn(highlightCreateService, 'resetHighlight');
+
+      component.createBookmark({ x: 100, y: 200 } as any);
+
+      expect(store.dispatch).toHaveBeenCalled();
+      expect(highlightCreateService.resetHighlight).toHaveBeenCalled();
+      expect(component.rectangles).toBeUndefined();
+    }
+  ));
+
+  it('should call saveAnnotation and push false to drawModeSubject',
+    inject([HighlightCreateService, ToolbarEventService],
+      (highlightCreateService: HighlightCreateService, toolbarEvents: ToolbarEventService) => {
+        const mockRectangles = [];
+        const mockPage = 1;
+
+        spyOn(highlightCreateService, 'saveAnnotation');
+        spyOn(toolbarEvents.drawModeSubject, 'next');
+
+        component.saveAnnotation({ rectangles: mockRectangles, page: mockPage});
+        expect(highlightCreateService.saveAnnotation).toHaveBeenCalledWith(mockRectangles, mockPage);
+        expect(toolbarEvents.drawModeSubject.next).toHaveBeenCalledWith(false);
+      }
+    )
+  );
+});

package/projects/media-viewer/src/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.ts

@@ -0,0 +1,98 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { select, Store } from '@ngrx/store';
+import { v4 as uuid } from 'uuid';
+
+import * as fromStore from '../../../store/reducers/reducers';
+import * as fromDocument from '../../../store/selectors/document.selectors';
+import * as fromSelectors from '../../../store/selectors/annotation.selectors';
+import { HighlightCreateService } from '../annotation-create/highlight-create/highlight-create.service';
+import { Rectangle } from '../annotation-view/rectangle/rectangle.model';
+import { CreateBookmark } from '../../../store/actions/bookmark.actions';
+import * as fromBookmarks from '../../../store/selectors/bookmark.selectors';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { Highlight, ViewerEventService } from '../../../viewers/viewer-event.service';
+
+@Component({
+    selector: 'mv-metadata-layer',
+    templateUrl: './metadata-layer.component.html',
+    standalone: false
+})
+export class MetadataLayerComponent implements OnInit, OnDestroy {
+
+  @Input() zoom: number;
+  @Input() rotate: number;
+
+  pages: any[] = []; // todo add type
+  annoPages$: Observable<any>; // todo add type
+
+  drawMode = false;
+  highlightPage: number;
+  rectangles: Rectangle[];
+
+  private $subscriptions: Subscription;
+
+  constructor(
+    private store: Store<fromStore.AnnotationSetState>,
+    private readonly highlightService: HighlightCreateService,
+    private readonly toolbarEvents: ToolbarEventService,
+    private readonly viewerEvents: ViewerEventService) { }
+
+  ngOnInit(): void {
+    this.$subscriptions = this.store.pipe(select(fromDocument.getPages))
+      .subscribe(pages => this.pages = Object.values(pages));
+    this.annoPages$ = this.store.pipe(select(fromSelectors.getPageEntities));
+
+    this.$subscriptions.add(this.toolbarEvents.drawModeSubject.subscribe(drawMode => this.drawMode = drawMode));
+    this.$subscriptions.add(this.viewerEvents.textHighlight.subscribe(highlight => this.showContextToolbar(highlight)));
+    this.$subscriptions.add(this.viewerEvents.ctxToolbarCleared.subscribe(() => this.clearContextToolbar()));
+  }
+
+  ngOnDestroy(): void {
+    this.$subscriptions.unsubscribe();
+  }
+
+  showContextToolbar(highlight: Highlight) {
+    this.highlightPage = highlight.page;
+    this.rectangles = highlight.rectangles;
+    if (this.rectangles) {
+      this.toolbarEvents.highlightModeSubject.next(false);
+    }
+  }
+
+  clearContextToolbar() {
+    this.rectangles = undefined;
+  }
+
+  createHighlight() {
+    this.highlightService.saveAnnotation(this.rectangles, this.highlightPage);
+    this.highlightService.resetHighlight();
+    this.rectangles = undefined;
+  }
+
+  createBookmark(rectangle: Rectangle) {
+    this.store.pipe(select(fromBookmarks.getBookmarkInfo), take(1))
+      .subscribe((bookmarkInfo) => {
+        const selection = window.getSelection().toString();
+        this.store.dispatch(new CreateBookmark({
+          ...bookmarkInfo,
+          name: selection.length > 0 ? selection.substr(0, 30) : 'new bookmark',
+          id: uuid(),
+          pageNumber: this.highlightPage - 1,
+          xCoordinate: rectangle.x,
+          yCoordinate: rectangle.y
+        } as any));
+        this.toolbarEvents.toggleSideBar(true);
+        this.toolbarEvents.toggleSideBarView(false);
+        this.highlightService.resetHighlight();
+        this.rectangles = undefined;
+
+      });
+  }
+
+  saveAnnotation({ rectangles, page }: { rectangles: Rectangle[], page: any }) {
+    this.highlightService.saveAnnotation(rectangles, page);
+    this.toolbarEvents.drawModeSubject.next(false);
+  }
+}

package/projects/media-viewer/src/lib/annotations/annotations.module.ts

@@ -0,0 +1,99 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { A11yModule } from '@angular/cdk/a11y';
+import { RouterModule } from '@angular/router';
+
+import { MutableDivModule } from 'mutable-div';
+import { TagInputModule } from 'ngx-chips';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import { AnnotationApiService } from './services/annotation-api/annotation-api.service';
+import { AnnotationViewComponent } from './annotation-set/annotation-view/annotation-view.component';
+import { AnnotationSetComponent } from './annotation-set/annotation-set.component';
+import { RectangleComponent } from './annotation-set/annotation-view/rectangle/rectangle.component';
+import { CommentComponent } from './comment-set/comment/comment.component';
+import { CtxToolbarComponent } from './annotation-set/ctx-toolbar/ctx-toolbar.component';
+import { CommentSetComponent } from './comment-set/comment-set.component';
+import { TextareaAutoExpandDirective } from './comment-set/comment/textarea-auto-expand/textarea-auto-expand.directive';
+import { CommentsSummaryComponent } from './comments-summary/comments-summary.component';
+import { CommentSetRenderService } from './comment-set/comment-set-render.service';
+import { BoxHighlightCreateComponent } from './annotation-set/annotation-create/box-highlight-create/box-highlight-create.component';
+import { HighlightCreateService } from './annotation-set/annotation-create/highlight-create/highlight-create.service';
+import { CommentSetHeaderComponent } from './comment-set/comment-set-header/comment-set-header.component';
+import { CommentSearchComponent } from './comment-set/comment-set-header/comment-search/comment-search.component';
+import { TextHighlightDirective } from './comment-set/comment/text-highlight/text-highlight.directive';
+import { TagsComponent } from './tags/tags.component';
+import { TagsServices } from './services/tags/tags.services';
+import { CommentsNavigateComponent } from './comment-set/comment-navigate/comments-navigate.component';
+import { CommentFilterComponent } from './comment-set/comment-set-header/comment-filter/comment-filter.component';
+import { MomentDatePipe } from './pipes/date/date.pipe';
+import { BookmarksApiService } from './services/bookmarks-api/bookmarks-api.service';
+import { FilterPipe } from './pipes/filter/filter.pipe';
+import { UnsnakePipe } from './pipes/unsnake/unsnake.pipe';
+import { SharedModule } from '../shared/shared.module';
+import { MetadataLayerComponent } from './annotation-set/metadata-layer/metadata-layer.component';
+import { CommentService } from './comment-set/comment/comment.service';
+import { RpxTranslationModule } from 'rpx-xui-translation';
+
+@NgModule({
+  imports: [
+    A11yModule,
+    CommonModule,
+    FormsModule,
+    HttpClientModule,
+    MutableDivModule,
+    TagInputModule,
+    RouterModule,
+    ReactiveFormsModule,
+    NgxDatatableModule,
+    SharedModule,
+    RpxTranslationModule.forChild()
+  ],
+  declarations: [
+    MetadataLayerComponent,
+    AnnotationViewComponent,
+    BoxHighlightCreateComponent,
+    AnnotationSetComponent,
+    RectangleComponent,
+    CommentComponent,
+    CommentSetHeaderComponent,
+    CommentSearchComponent,
+    TextHighlightDirective,
+    CtxToolbarComponent,
+    CommentSetComponent,
+    CommentsNavigateComponent,
+    TextareaAutoExpandDirective,
+    CommentsSummaryComponent,
+    TagsComponent,
+    MomentDatePipe,
+    CommentFilterComponent,
+    FilterPipe,
+    UnsnakePipe
+  ],
+  providers: [
+    AnnotationApiService,
+    BookmarksApiService,
+    CommentSetRenderService,
+    HighlightCreateService,
+    CommentService,
+    TagsServices
+  ],
+  exports: [
+    AnnotationViewComponent,
+    BoxHighlightCreateComponent,
+    AnnotationSetComponent,
+    CommentSetComponent,
+    CommentSetHeaderComponent,
+    CommentSearchComponent,
+    CommentsSummaryComponent,
+    TagsComponent,
+    CommentFilterComponent,
+    MomentDatePipe,
+    FilterPipe,
+    UnsnakePipe,
+    MetadataLayerComponent
+  ]
+})
+export class AnnotationsModule { }

package/projects/media-viewer/src/lib/annotations/comment-set/comment/comment.component.html

@@ -0,0 +1,75 @@
+<div
+  #form
+  (click)="onCommentClick()"
+  class="aui-comment"
+  [ngClass]="{ stylestoggle: (marginToComment$ | async) }"
+  [style.top.px]="commentTop"
+  [style.zIndex]="selected ? 100 : 0"
+>
+  <div id="detailsWrapper {{ index }}" class="aui-comment__header">
+    <span *ngIf="author && !editor" class="aui-comment__author">
+      {{ author.forename }} {{ author.surname }}
+    </span>
+    <span *ngIf="editor" class="aui-comment__author">
+      {{ editor.forename }} {{ editor.surname }}
+    </span>
+    <time [hidden]="!selected && !this.editable" class="aui-comment__meta">
+      {{ lastUpdate | momentDate : "d MMMM y h:mm a" }}
+    </time>
+  </div>
+  <mv-tags
+    [tagItems]="tagItems"
+    [userId]="createdBy"
+    [editable]="editable"
+    [annoId]="_comment.annotationId"
+  >
+  </mv-tags>
+  <textarea
+    *ngIf="selected && editable"
+    #editableComment
+    mvTextAreaAutoExpand
+    type="text"
+    required
+    name="content"
+    [maxlength]="CHAR_LIMIT"
+    class="aui-comment__content form-control mimic-focus edit-mode expanded"
+    [ngModel]="fullComment"
+    (ngModelChange)="fullComment = $event; reRenderComments(); onCommentChange($event)"
+    aria-label="comment"
+  >
+  </textarea>
+  <p
+    *ngIf="!editable"
+    mvTextHighlight
+    class="commentText"
+    [textToHighlight]="searchString"
+  >
+    {{ fullComment }}
+  </p>
+  <div
+    *ngIf="
+      selected ||
+      this.editable ||
+      (!fullComment.length && tagItems && !tagItems.length)
+    "
+    class="aui-comment__footer commentBtns"
+  >
+    <button
+      class="govuk-button"
+      type="button"
+      role="button"
+      (click)="editOrSave()"
+    >
+      {{ !editable ? ("Edit" | rpxTranslate) : ("Save" | rpxTranslate) }}
+    </button>
+    <button
+      type="button"
+      role="button"
+      class="govuk-button govuk-button--secondary"
+      (click)="deleteOrCancel()"
+    >
+      {{ !editable ? ("Delete" | rpxTranslate) : ("Cancel" | rpxTranslate) }}
+    </button>
+  </div>
+  <span class="aui-comment__private">{{ "private" | rpxTranslate }}</span>
+</div>