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 9729ad0b0675655cad3eb70d8bff2642608ed343..95fe276ff3f590df16bf96f66797a90e06a2d2c4 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 62c47e5811f6479648274d26673a691773a96144..e0038ceb306611345e19b666e42a150df96cf901 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 d694cb324dadf038ee68ed028e649b3ccd2a83f9..4e417b5488027739c717179a30e15cb51bf18fcd 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 d49d51e30bc37dfb35c5e62cf20c334b6bee4897..f87867907988b30b75202f98f316b8d1cd0374f9 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; +}