From d8d5328ef99a87c80657d7cb8588c895895d7cf2 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 15 Dec 2021 21:49:06 +0100
Subject: [PATCH] [editor] Add blockquote feature
This creates a blockquote-element, which is styled globally with
specific quotes and alignment.
---
.../rich-text-editor.component.html | 5 ++++
.../text-editor/rich-text-editor.component.ts | 8 ++++++-
projects/editor/src/styles.css | 23 +++++++++++++++++++
projects/player/src/styles.css | 23 +++++++++++++++++++
4 files changed, 58 insertions(+), 1 deletion(-)
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 9729ad0b0..95fe276ff 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
@@ -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"
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 62c47e581..e0038ceb3 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
@@ -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();
+ }
}
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index d694cb324..4e417b548 100644
--- a/projects/editor/src/styles.css
+++ b/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;
+}
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index d49d51e30..f87867907 100644
--- a/projects/player/src/styles.css
+++ b/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;
+}
--
GitLab