[editor] Add blockquote feature

This creates a blockquote-element, which is styled globally with 
specific quotes and alignment.

projects/editor/src/app/text-editor/rich-text-editor.component.html

@@ -237,6 +237,11 @@
             (click)="addImage()">
       <mat-icon>image</mat-icon>
     </button>
+    <button mat-icon-button matTooltip="Zitat" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+            [class.active]="editor.isActive('blockquote')"
+            (click)="toggleBlockquote()">
+      <mat-icon>format_quote</mat-icon>
+    </button>
   </div>
   <div *ngIf="showCloseElements" fxLayout="row" fxLayoutAlign="space-around center" >
     <button mat-icon-button matTooltip="\i" [matTooltipShowDelay]="300"

projects/editor/src/app/text-editor/rich-text-editor.component.ts

@@ -13,6 +13,7 @@ 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 { Blockquote } from '@tiptap/extension-blockquote';
 import { Indent } from './indent';
 import { HangingIndent } from './hanging-indent';
 import { customParagraph } from './paragraph-extension';
@@ -61,13 +62,14 @@ export class RichTextEditorComponent implements AfterViewInit {
       fontSizeExtension,
       bulletListExtension,
       orderedListExtension,
-      HangingIndent
+      HangingIndent,
       Image.configure({
         inline: true,
         HTMLAttributes: {
           style: 'display: inline-block; height: 1em; vertical-align: middle'
         }
       }),
+      Blockquote
     ]
   });
 
@@ -180,4 +182,8 @@ export class RichTextEditorComponent implements AfterViewInit {
     const mediaSrc = await FileService.loadImage();
     this.editor.commands.setImage({ src: mediaSrc });
   }
+
+  toggleBlockquote(): void {
+    this.editor.commands.toggleBlockquote();
+  }
 }

projects/editor/src/styles.css

@@ -40,3 +40,26 @@ body.inheritCursors * {
 input[type=color] {
   cursor: pointer;
 }
+
+blockquote {
+  quotes: "\201E" "\201C";
+  text-indent: -1em;
+}
+
+blockquote:before {
+  content: open-quote;
+  font-size: 2.5em;
+  padding-right: 3px;
+}
+
+blockquote:after {
+  content: close-quote;
+  font-size: 2.5em;
+  vertical-align: middle;
+  padding-top: 0.3em;
+  padding-left: 3px;
+}
+
+blockquote p {
+  display: inline;
+}

projects/player/src/styles.css

@@ -7,3 +7,26 @@ body {
 body.inheritCursors * {
   cursor: inherit !important;
 }
+
+blockquote {
+  quotes: "\201E" "\201C";
+  text-indent: -1em;
+}
+
+blockquote:before {
+  content: open-quote;
+  font-size: 2.5em;
+  padding-right: 3px;
+}
+
+blockquote:after {
+  content: close-quote;
+  font-size: 2.5em;
+  vertical-align: middle;
+  padding-top: 0.3em;
+  padding-left: 3px;
+}
+
+blockquote p {
+  display: inline;
+}