feat(properties): ckEditor Internal Links (DEV-118) (#591)

* feat(properties): adds a button to copy the iri to the clipboard

* chore(text-value-as-html): adds appHtmlLink directive

* chore(text-value-as-html): adds outputs for internal link clicked and hovered

src/app/workspace/resource/properties/properties.component.html

@@ -27,10 +27,15 @@ <h3 class="label mat-title">
         </button>
         <mat-menu #share="matMenu" class="res-share-menu">
             <button mat-menu-item matTooltip="Copy ARK url" matTooltipPosition="above"
-                [cdkCopyToClipboard]="resource.res.versionArkUrl" (click)="openSnackBar()">
+                [cdkCopyToClipboard]="resource.res.versionArkUrl" (click)="openSnackBar('ARK URL copied to clipboard!')">
                 <mat-icon>content_copy</mat-icon>
                 Copy ARK url to clipboard
             </button>
+            <button mat-menu-item matTooltip="Copy internal link" matTooltipPosition="above"
+                [cdkCopyToClipboard]="resource.res.id" (click)="openSnackBar('Internal link copied to clipboard!')">
+                <mat-icon>content_copy</mat-icon>
+                Copy internal link to clipboard
+            </button>
             <button mat-menu-item matTooltip="Open in new tab" matTooltipPosition="above"
                 (click)="openResource(resource.res.id)">
                 <mat-icon>open_in_new</mat-icon>

src/app/workspace/resource/properties/properties.component.ts

@@ -358,8 +358,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
     /**
     * display message to confirm the copy of the citation link (ARK URL)
     */
-    openSnackBar() {
-        const message = 'ARK URL copied to clipboard!';
+    openSnackBar(message: string) {
         this._notification.openSnackBar(message);
     }
 

src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.html

@@ -1,4 +1,9 @@
-<div [innerHTML]="htmlFromKnora | appLinkify" class="value"></div>
+<div [innerHTML]="htmlFromKnora | appLinkify"
+    class="value"
+    appHtmlLink
+    (internalLinkClicked)="internalLinkClicked.emit($event)"
+    (internalLinkHovered)="internalLinkHovered.emit($event)">
+</div>
 <div *ngIf="comment">
   <label>{{commentLabel}}: </label><span class="comment">{{comment}}</span>
 </div>

src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Pipe, PipeTransform, ViewChild } from '@angular/core';
+import { Component, Directive, EventEmitter, OnInit, Output, Pipe, PipeTransform, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
@@ -18,6 +18,17 @@ class MockPipe implements PipeTransform {
     }
 }
 
+@Directive({
+    selector: '[appHtmlLink]'
+})
+export class TestTextValueHtmlLinkDirective {
+
+    @Output() internalLinkClicked = new EventEmitter<string>();
+
+    @Output() internalLinkHovered = new EventEmitter<string>();
+
+}
+
 /**
  * test host component to simulate parent component.
  */

src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, Input, ElementRef } from '@angular/core';
+import { Component, OnInit, Inject, Input, ElementRef, EventEmitter, Output } from '@angular/core';
 import { ReadTextValueAsHtml } from '@dasch-swiss/dsp-js';
 import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
 import { Subscription } from 'rxjs';
@@ -13,6 +13,10 @@ export class TextValueAsHtmlComponent extends BaseValueDirective implements OnIn
 
     @Input() displayValue?: ReadTextValueAsHtml;
 
+    @Output() internalLinkClicked: EventEmitter<string> = new EventEmitter<string>();
+
+    @Output() internalLinkHovered: EventEmitter<string> = new EventEmitter<string>();
+
     valueFormControl: FormControl;
     commentFormControl: FormControl;