From cac988b2ddfe87e8ce7d3b64956cdc153302c483 Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Thu, 18 Nov 2021 10:26:05 +0100
Subject: [PATCH] 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
---
 .../resource/properties/properties.component.html   |  7 ++++++-
 .../resource/properties/properties.component.ts     |  3 +--
 .../text-value-as-html.component.html               |  7 ++++++-
 .../text-value-as-html.component.spec.ts            | 13 ++++++++++++-
 .../text-value-as-html.component.ts                 |  6 +++++-
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/workspace/resource/properties/properties.component.html b/src/app/workspace/resource/properties/properties.component.html
index d3d7f5f8cf..9739e24758 100644
--- a/src/app/workspace/resource/properties/properties.component.html
+++ b/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>
diff --git a/src/app/workspace/resource/properties/properties.component.ts b/src/app/workspace/resource/properties/properties.component.ts
index 47924740a8..b36a20afee 100644
--- a/src/app/workspace/resource/properties/properties.component.ts
+++ b/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);
     }
 
diff --git a/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.html b/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.html
index 490d96a8d2..5e5e1c9dff 100644
--- a/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.html
+++ b/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>
diff --git a/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.spec.ts b/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.spec.ts
index a6063d9680..ed382dfd70 100644
--- a/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.spec.ts
+++ b/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.
  */
diff --git a/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.ts b/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.ts
index 93e177ee1e..f3a4e9083c 100644
--- a/src/app/workspace/resource/values/text-value/text-value-as-html/text-value-as-html.component.ts
+++ b/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;