feat: add footnotes functionnality to richtext

apps/dsp-app/cypress/e2e/system-admin/resource.cy.ts

@@ -4,6 +4,7 @@ import { Project00FFPayloads } from '../../fixtures/project00FF-resource-payload
 import { ClassPropertyPayloads } from '../../fixtures/property-definition-payloads';
 import { ResourceRequests, ResponseUtil } from '../../fixtures/requests';
 import { AddResourceInstancePage } from '../../support/pages/add-resource-instance-page';
+import { ResourcePage } from '../../support/pages/resource-page';
 
 describe('Resource', () => {
   let finalLastModificationDate: string;
@@ -22,6 +23,51 @@ describe('Resource', () => {
     });
   });
 
+  describe('footnotes', () => {
+    it.only('should be displayed, and can be edited', () => {
+      const footnote = {
+        '@type': 'http://0.0.0.0:3333/ontology/00FF/images/v2#datamodelclass',
+        'http://www.w3.org/2000/01/rdf-schema#label': 'rlabel',
+        'http://api.knora.org/ontology/knora-api/v2#attachedToProject': {
+          '@id': 'http://rdfh.ch/projects/00FF',
+        },
+        'http://0.0.0.0:3333/ontology/00FF/images/v2#property': {
+          '@type': 'http://api.knora.org/ontology/knora-api/v2#TextValue',
+          'http://api.knora.org/ontology/knora-api/v2#textValueAsXml':
+            '<?xml version="1.0" encoding="UTF-8"?><text><p>footnote1<footnote content="&amp;lt;p&amp;gt;fn1&amp;lt;/p&amp;gt;">[Footnote]</footnote> and footnote2<footnote content="&amp;lt;p&amp;gt;fn2&amp;lt;/p&amp;gt;">[Footnote]</footnote></p></text>',
+          'http://api.knora.org/ontology/knora-api/v2#textValueHasMapping': {
+            '@id': 'http://rdfh.ch/standoff/mappings/StandardMapping',
+          },
+        },
+      };
+
+      ResourceRequests.resourceRequest(ClassPropertyPayloads.richText(finalLastModificationDate));
+      cy.request('POST', `${Cypress.env('apiUrl')}/v2/resources`, footnote).then(v => {
+        const id = v.body['@id'].match(/\/([^\/]+)$/)[1];
+        const page = new ResourcePage();
+        page.visit(id);
+        cy.get('[data-cy=footnote]').should('have.length', 2);
+        cy.get('[data-cy=footnote]').eq(0).should('contain', 'fn1');
+        cy.get('[data-cy=footnote]').eq(1).should('contain', 'fn2');
+      });
+      cy.get('app-rich-text-switch').trigger('mouseenter');
+      cy.get('[data-cy="edit-button"]').click();
+      cy.get('[content="&lt;p&gt;fn1&lt;/p&gt;"]').click();
+      cy.get('.ck-content[contenteditable=true]')
+        .eq(1)
+        .then(el => {
+          // @ts-ignore
+          const editor = el[0].ckeditorInstance; // If you're using TS, this is ReturnType<typeof InlineEditor['create']>
+          editor.setData('Typing some stuff');
+        });
+      cy.get('.ck-button-save').click({ force: true });
+      cy.get('[data-cy="save-button"] > .mat-mdc-button-touch-target').click();
+      cy.get('[data-cy=footnote]').should('have.length', 2);
+      cy.get('[data-cy=footnote]').eq(0).should('contain', 'Typing some stuff');
+      cy.get('[data-cy=footnote]').eq(1).should('contain', 'fn2');
+    });
+  });
+
   describe('can add an instance, edit, and delete for a property', () => {
     it('text', () => {
       const initialValue = faker.lorem.word();

apps/dsp-app/cypress/fixtures/property-definition-payloads.ts

@@ -66,6 +66,24 @@ export class ClassPropertyPayloads {
     };
   }
 
+  static richText(lastModificationDate: string) {
+    return {
+      ...this.baseData(lastModificationDate),
+      '@graph': [
+        {
+          ...this.baseGraph,
+          ...this.hasValue,
+          'http://api.knora.org/ontology/knora-api/v2#objectType': {
+            '@id': 'http://api.knora.org/ontology/knora-api/v2#TextValue',
+          },
+          'http://api.knora.org/ontology/salsah-gui/v2#guiElement': {
+            '@id': 'http://api.knora.org/ontology/salsah-gui/v2#Richtext',
+          },
+        },
+      ],
+    };
+  }
+
   static number(lastModificationDate: string) {
     return {
       ...this.baseData(lastModificationDate),

apps/dsp-app/cypress/support/pages/resource-page.ts

@@ -0,0 +1,5 @@
+export class ResourcePage {
+  visit(id: string) {
+    cy.visit(`/project/00FF/ontology/00FF/images/${id}`);
+  }
+}

apps/dsp-app/src/styles.scss

@@ -25,8 +25,8 @@ $warn: mat.define-palette(config.$velvet_red_palette, 700, 500, 900);
 
 // Define a theme.
 $theme: mat.define-light-theme((
-        color: (primary: $primary, accent: $accent, warn: $warn),
-        density: 0
+  color: (primary: $primary, accent: $accent, warn: $warn),
+  density: 0
 ));
 
 // Include all theme styles for the components.
@@ -67,7 +67,7 @@ body {
 // The following styles will override material design!
 
 // mat-form-field overrides
-.mdc-text-field--filled:not(.mdc-text-field--disabled){
+.mdc-text-field--filled:not(.mdc-text-field--disabled) {
   background-color: transparent;
 }
 
@@ -111,9 +111,11 @@ body {
     .mat-mdc-text-field-wrapper {
       width: 100%;
       padding-left: 0px;
+
       .mat-mdc-form-field-flex {
         border-left: 1px solid rgba(0, 0, 0, 0.12);
         min-height: calc(4 * 36px + 2px);
+
         .mat-mdc-form-field-infix {
           // negative values are not the best choice,
           // but with this margin-top the placeholder is at the

libs/vre/resource-editor/resource-properties/src/index.ts

@@ -46,3 +46,7 @@ export * from './lib/sortByKeys';
 export * from './lib/upload-control.component';
 export * from './resource-properties.components';
 export * from './lib/upload.component';
+export * from './lib/footnote.service';
+export * from './lib/footnotes.component';
+export * from './lib/footnote-tooltip.component';
+export * from './lib/footnote.directive';

libs/vre/resource-editor/resource-properties/src/lib/footnote-tooltip.component.ts

@@ -0,0 +1,37 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, Input } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-footnote-tooltip',
+  template: ` <div class="content" [@fadeIn]="'in'">
+    <div [innerHTML]="content"></div>
+  </div>`,
+  animations: [
+    trigger('fadeIn', [
+      state('in', style({ opacity: 1 })),
+      transition(':enter', [style({ opacity: 0 }), animate(100)]),
+    ]),
+  ],
+  styles: [
+    `
+      :host {
+        position: absolute;
+        z-index: 1000;
+      }
+
+      .content {
+        font-size: 0.8em;
+        background: white;
+        color: black;
+        padding: 8px;
+        min-width: 200px;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+    `,
+  ],
+})
+export class FootnoteTooltipComponent {
+  @Input({ required: true }) content!: SafeHtml;
+}

libs/vre/resource-editor/resource-properties/src/lib/footnote.directive.ts

@@ -0,0 +1,87 @@
+import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Directive, HostListener } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { AppError } from '@dasch-swiss/vre/core/error-handler';
+import { FootnoteTooltipComponent } from './footnote-tooltip.component';
+
+@Directive({
+  selector: '[appFootnote]',
+})
+export class FootnoteDirective {
+  private overlayRef: OverlayRef | null = null;
+  private hideTimeout: any;
+
+  constructor(
+    private overlay: Overlay,
+    private positionBuilder: OverlayPositionBuilder,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  @HostListener('mouseover', ['$event'])
+  onMouseOver(event: MouseEvent) {
+    const targetElement = event.target as HTMLElement;
+    if (targetElement.nodeName.toLowerCase() === 'footnote') {
+      const content = targetElement.getAttribute('content');
+      if (content === null) {
+        throw new AppError('Footnote content is null');
+      }
+      this.showTooltip(content, event.clientX, event.clientY);
+    }
+  }
+
+  @HostListener('mouseout', ['$event.target'])
+  onMouseOut(targetElement: HTMLElement) {
+    if (targetElement.nodeName.toLowerCase() === 'footnote') {
+      this.hideTooltipWithDelay();
+    }
+  }
+
+  private showTooltip(content: string, mouseX: number, mouseY: number) {
+    if (!this.overlayRef) {
+      const positionStrategy = this.positionBuilder.flexibleConnectedTo({ x: mouseX, y: mouseY }).withPositions([
+        {
+          overlayX: 'center',
+          overlayY: 'top',
+          originX: 'center',
+          originY: 'bottom',
+          offsetY: 10,
+        },
+      ]);
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      });
+    }
+
+    const tooltipPortal = new ComponentPortal(FootnoteTooltipComponent);
+    if (this.overlayRef.hasAttached()) {
+      this.overlayRef.detach();
+      clearTimeout(this.hideTimeout);
+    }
+
+    const tooltipRef = this.overlayRef.attach(tooltipPortal);
+    tooltipRef.instance.content = this.sanitizer.bypassSecurityTrustHtml(content);
+
+    this.overlayRef.overlayElement.addEventListener('mouseenter', () => {
+      clearTimeout(this.hideTimeout);
+    });
+
+    this.overlayRef.overlayElement.addEventListener('mouseleave', () => {
+      this.hideTooltipWithDelay();
+    });
+  }
+
+  private hideTooltipWithDelay() {
+    this.hideTimeout = setTimeout(() => {
+      this.hideTooltip();
+    }, 300);
+  }
+
+  private hideTooltip() {
+    if (this.overlayRef) {
+      this.overlayRef.detach();
+    }
+  }
+}

libs/vre/resource-editor/resource-properties/src/lib/footnote.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Injectable()
+export class FootnoteService {
+  footnotes: { uid: string; content: SafeHtml }[] = [];
+
+  addFootnote(uid: string, content: SafeHtml): void {
+    const property = this.footnotes.find(footnote => footnote.uid === uid);
+    if (property) {
+      property.content = content;
+    } else {
+      this.footnotes.push({ uid, content });
+    }
+  }
+
+  reset() {
+    this.footnotes = [];
+  }
+}

libs/vre/resource-editor/resource-properties/src/lib/footnotes.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { AppError } from '@dasch-swiss/vre/core/error-handler';
+import { FootnoteService } from './footnote.service';
+
+@Component({
+  selector: 'app-footnotes',
+  template: `<h5>Footnotes</h5>
+    <div
+      *ngFor="let footnote of footnoteService.footnotes; let index = index"
+      (click)="goToFootnote(footnote.uid)"
+      class="footnote"
+      data-cy="footnote">
+      {{ index + 1 }}. <span [innerHTML]="footnote.content"></span>
+    </div>`,
+  styles: [
+    `
+      .footnote {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+    `,
+  ],
+})
+export class FootnotesComponent {
+  constructor(public readonly footnoteService: FootnoteService) {}
+
+  goToFootnote(uid: string) {
+    const element = document.getElementById(uid);
+    if (!element) {
+      throw new AppError(`Element with uid ${uid} is not found on page.`);
+    }
+
+    element.scrollIntoView();
+  }
+}

libs/vre/resource-editor/resource-properties/src/lib/property-row.component.ts

@@ -1,21 +1,33 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RouteConstants } from '@dasch-swiss/vre/core/config';
 import { PropertyInfoValues } from '@dasch-swiss/vre/shared/app-common';
 import { of, Subject } from 'rxjs';
 import { takeUntil, takeWhile } from 'rxjs/operators';
+import { FootnoteService } from './footnote.service';
 
 @Component({
   selector: 'app-property-row',
   template: ` <div [class.border-bottom]="borderBottom" #rowElement style="display: flex; padding: 8px 0;">
     <h3 class="label mat-subtitle-2" [matTooltip]="tooltip ?? ''" matTooltipPosition="above">{{ label }}</h3>
     <div style="flex: 1">
       <ng-content></ng-content>
+      <app-footnotes *ngIf="footnoteService.footnotes.length > 0" />
     </div>
   </div>`,
+  providers: [FootnoteService],
   styleUrls: ['./property-row.component.scss'],
 })
-export class PropertyRowComponent implements AfterViewInit, OnDestroy {
+export class PropertyRowComponent implements AfterViewInit, OnDestroy, OnChanges {
   @Input({ required: true }) label!: string;
   @Input({ required: true }) borderBottom!: boolean;
   @Input() tooltip: string | undefined;
@@ -29,7 +41,16 @@ export class PropertyRowComponent implements AfterViewInit, OnDestroy {
     return this.prop && this.prop.values.length > 0 ? this.prop.values[0]?.id.split('/').pop() : undefined;
   }
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    public footnoteService: FootnoteService
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['prop']) {
+      this.footnoteService.reset();
+    }
+  }
 
   ngAfterViewInit() {
     this.highlightArkValue();

libs/vre/resource-editor/resource-properties/src/lib/property-value-switcher.component.ts

@@ -161,7 +161,6 @@ export class PropertyValueSwitcherComponent implements OnInit, OnChanges, AfterV
 
   ngOnInit() {
     this._setupData();
-    this._cd.detectChanges();
   }
 
   _setupData() {