From 9e9f6550f4db829e85833d65142db3a152017464 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 15 Dec 2021 21:15:10 +0100
Subject: [PATCH] [editor] Add image functionality to TextEditor

Images are always inline and scaled down to the font size of the text
element as a whole.
---
 .../app/text-editor/rich-text-editor.component.html |  4 ++++
 .../app/text-editor/rich-text-editor.component.ts   | 13 +++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.html b/projects/editor/src/app/text-editor/rich-text-editor.component.html
index 38b355a8b..9729ad0b0 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.html
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.html
@@ -233,6 +233,10 @@
       <button mat-button (click)="insertSpecialChar('&hearts;')">&hearts;</button>
       <button mat-button (click)="insertSpecialChar('&diams;')">&diams;</button>
     </mat-menu>
+    <button mat-icon-button matTooltip="Bild" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+            (click)="addImage()">
+      <mat-icon>image</mat-icon>
+    </button>
   </div>
   <div *ngIf="showCloseElements" fxLayout="row" fxLayoutAlign="space-around center" >
     <button mat-icon-button matTooltip="\i" [matTooltipShowDelay]="300"
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.ts b/projects/editor/src/app/text-editor/rich-text-editor.component.ts
index 546564466..62c47e581 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.ts
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.ts
@@ -12,12 +12,14 @@ import { Color } from '@tiptap/extension-color';
 import { Highlight } from '@tiptap/extension-highlight';
 import { TextAlign } from '@tiptap/extension-text-align';
 import { Heading } from '@tiptap/extension-heading';
+import { Image } from '@tiptap/extension-image';
 import { Indent } from './indent';
 import { HangingIndent } from './hanging-indent';
 import { customParagraph } from './paragraph-extension';
 import { fontSizeExtension } from './font-size-extension';
 import { bulletListExtension } from './bulletList-extension';
 import { orderedListExtension } from './orderedList-extension';
+import { FileService } from '../services/file.service';
 
 @Component({
   selector: 'app-rich-text-editor',
@@ -60,6 +62,12 @@ export class RichTextEditorComponent implements AfterViewInit {
       bulletListExtension,
       orderedListExtension,
       HangingIndent
+      Image.configure({
+        inline: true,
+        HTMLAttributes: {
+          style: 'display: inline-block; height: 1em; vertical-align: middle'
+        }
+      }),
     ]
   });
 
@@ -167,4 +175,9 @@ export class RichTextEditorComponent implements AfterViewInit {
     this.editor.commands.outdent(this.selectedIndentSize);
     this.editor.commands.unhangIndent(this.selectedIndentSize);
   }
+
+  async addImage(): Promise<void> {
+    const mediaSrc = await FileService.loadImage();
+    this.editor.commands.setImage({ src: mediaSrc });
+  }
 }
-- 
GitLab