diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index d76387d7defe96bfd532e40cf735c8be7daea8cd..c863276def1b5c16a7e8fd36780899790cb8b5e9 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -105,8 +105,6 @@ import { ElementGridChangeListenerDirective } from 'editor/src/app/components/un
import { OptionsFieldSetComponent } from
'./components/properties-panel/model-properties-tab/input-groups/options-field-set.component';
-import { RichTextEditorSimpleComponent } from './text-editor-simple/rich-text-editor-simple.component';
-import { RichTextSimpleEditDialogComponent } from './components/dialogs/rich-text-simple-edit-dialog.component';
import { SelectPropertiesComponent } from
'./components/properties-panel/model-properties-tab/input-groups/select-properties.component';
import { InputElementPropertiesComponent } from
@@ -171,8 +169,6 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
ActionPropertiesComponent,
TextFieldElementPropertiesComponent,
ScaleAndZoomPropertiesComponent,
- RichTextEditorSimpleComponent,
- RichTextSimpleEditDialogComponent,
SectionInsertDialogComponent,
SelectPropertiesComponent,
InputElementPropertiesComponent,
diff --git a/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
index 41abee31ca8c8257a521b4de21ba0a8fb845ffcb..d0a0a60a8b972b2573d71c307be4b5d8fafb643a 100644
--- a/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
@@ -8,8 +8,8 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
selector: 'aspect-label-edit-dialog',
template: `
<mat-dialog-content class="fx-column-start-stretch" >
- <aspect-rich-text-editor-simple [(content)]="newLabel.text">
- </aspect-rich-text-editor-simple>
+ <aspect-rich-text-editor [(content)]="newLabel.text" [showReducedControls]="true">
+ </aspect-rich-text-editor>
<div *ngIf="newLabel.imgSrc !== undefined" class="image-panel">
<div class="fx-column-start-stretch" [style.gap.px]="10">
@@ -36,12 +36,9 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
</mat-dialog-actions>
`,
styles: [`
- aspect-rich-text-editor-simple {
- margin-bottom: 20px;
- }
-
.image-panel {
display: flex;
+ margin-top: 20px;
}
.image-panel aspect-text-image-panel {
diff --git a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
index 5404aedef0ffcd5464c1a50b69c8ec928c985a9f..f5da8d83e188e7a3d52f3d049e1a4e0be9d2e05a 100644
--- a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
@@ -9,8 +9,8 @@ import { TextLabel } from 'common/models/elements/label-interfaces';
template: `
<mat-dialog-content>
<div class="fx-column-start-stretch">
- <aspect-rich-text-editor-simple [(content)]="newLikertRow.rowLabel.text">
- </aspect-rich-text-editor-simple>
+ <aspect-rich-text-editor [(content)]="newLikertRow.rowLabel.text" [showReducedControls]="true">
+ </aspect-rich-text-editor>
<mat-form-field [style.margin-top.px]="15">
<mat-label>{{'id' | translate }}</mat-label>
diff --git a/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts
index d65ac062f753eef93f7f5cc318954ae56a8e59d7..063db0f945870a8ae5cc2c5cf2c703073f2b2e09 100644
--- a/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts
@@ -4,10 +4,13 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'aspect-rich-text-edit-dialog',
template: `
- <aspect-rich-text-editor [(content)]="data.content"
- [clozeMode]="data.clozeMode"
- [defaultFontSize]="data.defaultFontSize">
- </aspect-rich-text-editor>
+ <h2 mat-dialog-title>Text bearbeiten</h2>
+ <mat-dialog-content>
+ <aspect-rich-text-editor [(content)]="data.content"
+ [clozeMode]="data.clozeMode"
+ [defaultFontSize]="data.defaultFontSize">
+ </aspect-rich-text-editor>
+ </mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]="data.content">{{'save' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
diff --git a/projects/editor/src/app/components/dialogs/rich-text-simple-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/rich-text-simple-edit-dialog.component.ts
deleted file mode 100644
index 2de231372e6930f3db18e9a21c29a0d8979782df..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/components/dialogs/rich-text-simple-edit-dialog.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-
-
-import { TextLabel } from 'common/models/elements/label-interfaces';
-
-@Component({
- selector: 'aspect-rich-text-simple-edit-dialog',
- template: `
- <aspect-rich-text-editor-simple [(content)]="data.option.text"
- [defaultFontSize]="data.defaultFontSize">
- </aspect-rich-text-editor-simple>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="data.option">{{'save' | translate }}</button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class RichTextSimpleEditDialogComponent {
- constructor(public dialogRef: MatDialogRef<RichTextSimpleEditDialogComponent>,
- @Inject(MAT_DIALOG_DATA) public data: { option: TextLabel, defaultFontSize: number }) { }
-}
diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
index 4db885b9f8e61b836815affea693f55a75cc3e19..fbbf99a84da386aeddc0b8372c68fa1c8a9687dc 100644
--- a/projects/editor/src/app/services/dialog.service.ts
+++ b/projects/editor/src/app/services/dialog.service.ts
@@ -47,7 +47,8 @@ export class DialogService {
showLabelEditDialog(label: Label): Observable<Label> {
const dialogRef = this.dialog.open(LabelEditDialogComponent, {
- data: { label }
+ data: { label },
+ autoFocus: false
});
return dialogRef.afterClosed();
}
@@ -82,7 +83,8 @@ export class DialogService {
showTextEditDialog(text: string): Observable<string> {
const dialogRef = this.dialog.open(TextEditDialogComponent, {
- data: { text }
+ data: { text },
+ autoFocus: false
});
return dialogRef.afterClosed();
}
@@ -110,7 +112,6 @@ export class DialogService {
defaultFontSize,
clozeMode: false
},
- height: '700px',
autoFocus: false
});
return dialogRef.afterClosed();
@@ -123,7 +124,6 @@ export class DialogService {
defaultFontSize,
clozeMode: true
},
- height: '795px',
autoFocus: false
});
return dialogRef.afterClosed();
@@ -139,7 +139,8 @@ export class DialogService {
showLikertRowEditDialog(row: LikertRowElement, options: TextImageLabel[]): Observable<LikertRowElement> {
const dialogRef = this.dialog.open(LikertRowEditDialogComponent, {
- data: { row, options }
+ data: { row, options },
+ autoFocus: false
});
return dialogRef.afterClosed();
}
diff --git a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
deleted file mode 100644
index f4e9034c74d91a1c86a2fa59f07a4f5f6a3e2643..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
+++ /dev/null
@@ -1,30 +0,0 @@
-:host ::ng-deep div.ProseMirror {
- min-height: 60px;
- border: 1px solid;
-}
-
-:host ::ng-deep .ProseMirror p strong {
- letter-spacing: 0.04em !important;
- font-weight: 600 !important;
-}
-
-.editor-control-panel {
- background: linear-gradient(to top right, #FFF5F8, #FAFAFA);
- font: unset;
- max-width: 1000px;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 5px;
-}
-
-:host fieldset {
- /*height: 55px;*/
- /*box-sizing: content-box !important;*/
- border-radius: 3px;
- padding-bottom: 3px;
- padding-top: 0;
-}
-
-button.active {
- background-color: lightgrey;
-}
diff --git a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html
deleted file mode 100644
index 0b8b9a6b4409b39ccdf1845d2a9e6be06908ef3d..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<div class="editor-control-panel fx-row-start-stretch">
- <div class="fx-row-start-stretch">
- <fieldset class="fx-row-start-stretch">
- <legend>Schriftauszeichnung</legend>
- <button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('bold')"
- (click)="toggleBold()">
- <mat-icon>format_bold</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Kursiv" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('italic')"
- (click)="toggleItalic()">
- <mat-icon>format_italic</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Unterstrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('underline')"
- (click)="toggleUnderline()" style="text-decoration: underline">
- <mat-icon>format_underlined</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Hochgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('superscript')"
- (click)="toggleSuperscript()">
- <mat-icon>superscript</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Tiefgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('subscript')"
- (click)="toggleSubscript()">
- <mat-icon>subscript</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Durchgestrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('strike')"
- (click)="toggleStrike()">
- <mat-icon>strikethrough_s</mat-icon>
- </button>
- </fieldset>
- </div>
-
- <fieldset class="fx-row-start-stretch">
- <legend>Schrift</legend>
- <aspect-combo-button [inputType]="'color'" [selectedValue]="selectedFontColor"
- [tooltip]="'Textfarbe'" [icon]="'format_color_text'"
- (applySelection)="applyFontColor()"
- (selectionChanged)="selectedFontColor = $event">
- </aspect-combo-button>
- <aspect-combo-button [inputType]="'color'" [selectedValue]="selectedHighlightColor"
- [tooltip]="'Texthintergrund'" [icon]="'format_color_fill'"
- (applySelection)="applyHighlightColor()"
- (selectionChanged)="selectedHighlightColor = $event">
- </aspect-combo-button>
- </fieldset>
-
- <fieldset>
- <legend>Sonderelemente</legend>
- <button mat-icon-button class="special-chars-button" matTooltip="Sonderzeichen" [matTooltipShowDelay]="300"
- [matMenuTriggerFor]="specialCharsMenu">
- <mat-icon>emoji_symbols</mat-icon>
- </button>
- <mat-menu #specialCharsMenu="matMenu" yPosition="above">
- <button mat-button (click)="insertSpecialChar(' ')"
- [matTooltip]="'Geschütztes Leerzeichen'">␣</button>
- <button mat-button (click)="insertSpecialChar('–')">–</button>
- <button mat-button (click)="insertSpecialChar('♀')">♀</button>
- <button mat-button (click)="insertSpecialChar('♂')">♂</button>
- <br>
- <button mat-button (click)="insertSpecialChar('’')">’</button>
- <button mat-button (click)="insertSpecialChar('„')">„</button>
- <button mat-button (click)="insertSpecialChar('“')">“</button>
- <button mat-button (click)="insertSpecialChar('”')">”</button>
- <button mat-button (click)="insertSpecialChar('µ')">µ</button>
- <br>
- <button mat-button (click)="insertSpecialChar('ç')">ç</button>
- <button mat-button (click)="insertSpecialChar('Ç')">Ç</button>
- <button mat-button (click)="insertSpecialChar('Æ')">Æ</button>
- <br>
- <button mat-button (click)="insertSpecialChar('‹')">‹</button>
- <button mat-button (click)="insertSpecialChar('›')">›</button>
- <button mat-button (click)="insertSpecialChar('«')">«</button>
- <button mat-button (click)="insertSpecialChar('»')">»</button>
- <br>
- <button mat-button (click)="insertSpecialChar('¢')">¢</button>
- <button mat-button (click)="insertSpecialChar('£')">£</button>
- <button mat-button (click)="insertSpecialChar('¥')">¥</button>
- <br>
- <button mat-button (click)="insertSpecialChar('©')">©</button>
- <button mat-button (click)="insertSpecialChar('®')">®</button>
- <button mat-button (click)="insertSpecialChar('™')">™</button>
- <br>
- <button mat-button (click)="insertSpecialChar('≤')">≤</button>
- <button mat-button (click)="insertSpecialChar('≥')">≥</button>
- <button mat-button (click)="insertSpecialChar('⨍')">⨍</button>
- <button mat-button (click)="insertSpecialChar('∑')">∑</button>
- <button mat-button (click)="insertSpecialChar('∈')">∈</button>
- <button mat-button (click)="insertSpecialChar('∉')">∉</button>
- <button mat-button (click)="insertSpecialChar('√')">√</button>
- <button mat-button (click)="insertSpecialChar('∞')">∞</button>
- <br>
- <button mat-button (click)="insertSpecialChar('♠')">♠</button>
- <button mat-button (click)="insertSpecialChar('♣')">♣</button>
- <button mat-button (click)="insertSpecialChar('♥')">♥</button>
- <button mat-button (click)="insertSpecialChar('♦')">♦</button>
- </mat-menu>
- </fieldset>
-</div>
-
-<tiptap-editor [editor]="editor" [ngModel]="content"
- [style.font-size.px]="defaultFontSize"
- (ngModelChange)="contentChange.emit($event)">
-</tiptap-editor>
diff --git a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.ts b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.ts
deleted file mode 100644
index fafc7488ebf02b572a0c0de4aada30836ca5be1b..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
- Component, EventEmitter, Input, Output
-} from '@angular/core';
-import { Editor, mergeAttributes } from '@tiptap/core';
-import { Underline } from '@tiptap/extension-underline';
-import { Superscript } from '@tiptap/extension-superscript';
-import { Subscript } from '@tiptap/extension-subscript';
-import { Paragraph } from '@tiptap/extension-paragraph';
-import { TextStyle } from '@tiptap/extension-text-style';
-import { Color } from '@tiptap/extension-color';
-import { Highlight } from '@tiptap/extension-highlight';
-import { Document } from '@tiptap/extension-document';
-import { Text } from '@tiptap/extension-text';
-import { ListItem } from '@tiptap/extension-list-item';
-import { Strike } from '@tiptap/extension-strike';
-import { Bold } from '@tiptap/extension-bold';
-import { Italic } from '@tiptap/extension-italic';
-
-@Component({
- selector: 'aspect-rich-text-editor-simple',
- templateUrl: './rich-text-editor-simple.component.html',
- styleUrls: ['./rich-text-editor-simple.component.css']
-})
-export class RichTextEditorSimpleComponent {
- @Input() content!: string;
- @Input() defaultFontSize!: number;
- @Output() contentChange = new EventEmitter<string>();
- selectedFontSize: string = '20px';
- selectedFontColor: string = 'lightgrey';
- selectedHighlightColor: string = 'lightgrey';
-
- editor = new Editor({
- extensions: [Document, Text, ListItem,
- Underline, Superscript, Subscript,
- TextStyle, Color,
- Bold, Italic, Strike,
- Highlight.configure({
- multicolor: true
- }),
- Paragraph.extend({
- parseHTML() {
- return [{ tag: 'span' }];
- },
- renderHTML({ HTMLAttributes }) {
- return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
- }
- })]
- });
-
- toggleBold(): void {
- this.editor.chain().toggleBold().focus().run();
- }
-
- toggleItalic(): void {
- this.editor.chain().toggleItalic().focus().run();
- }
-
- toggleUnderline(): void {
- this.editor.chain().toggleUnderline().focus().run();
- }
-
- toggleStrike(): void {
- this.editor.commands.toggleStrike();
- }
-
- toggleSuperscript(): void {
- this.editor.chain().toggleSuperscript().focus().run();
- }
-
- toggleSubscript(): void {
- this.editor.chain().toggleSubscript().focus().run();
- }
-
- applyFontColor(): void {
- this.editor.chain().focus().setColor(this.selectedFontColor).run();
- }
-
- applyHighlightColor(): void {
- this.editor.chain().focus().toggleHighlight({ color: this.selectedHighlightColor }).run();
- }
-
- insertSpecialChar(char: string): void {
- this.editor.chain().insertContent(char).focus().run();
- }
-}
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 9db43a86f86671f40307a87747c5be542f51f7d9..3e9015ace737cd82ce4f4dc7030c266e8c7d6d06 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
@@ -1,296 +1,300 @@
-<div class="editor-control-panel fx-column-start-stretch" mat-dialog-title>
- <div class="fx-row-space-between-stretch">
- <fieldset class="fx-row-start-stretch">
- <legend>Schriftauszeichnung</legend>
- <button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('bold')"
- (click)="toggleBold()">
- <mat-icon>format_bold</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Kursiv" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('italic')"
- (click)="toggleItalic()">
- <mat-icon>format_italic</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Unterstrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('underline')"
- (click)="toggleUnderline()" style="text-decoration: underline">
- <mat-icon>format_underlined</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Hochgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('superscript')"
- (click)="toggleSuperscript()">
- <mat-icon>superscript</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Tiefgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('subscript')"
- (click)="toggleSubscript()">
- <mat-icon>subscript</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Durchgestrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('strike')"
- (click)="toggleStrike()">
- <mat-icon>strikethrough_s</mat-icon>
- </button>
- </fieldset>
- <fieldset class="fx-row-start-start" [style.gap.px]="5">
- <legend>Schrift</legend>
- <mat-form-field class="dropdown" appearance="outline" [style.width.px]="90">
- <mat-label>Größe</mat-label>
- <mat-select [value]="editor.getAttributes('textStyle').fontSize?.toString() || selectedFontSize">
- <mat-option (click)="applyFontSize('8px')" value="8px">8px</mat-option>
- <mat-option (click)="applyFontSize('10px')" value="10px">10px</mat-option>
- <mat-option (click)="applyFontSize('12px')" value="12px">12px</mat-option>
- <mat-option (click)="applyFontSize('14px')" value="14px">14px</mat-option>
- <mat-option (click)="applyFontSize('16px')" value="16px">16px</mat-option>
- <mat-option (click)="applyFontSize('18px')" value="18px">18px</mat-option>
- <mat-option (click)="applyFontSize('20px')" value="20px">20px</mat-option>
- <mat-option (click)="applyFontSize('22px')" value="22px">22px</mat-option>
- <mat-option (click)="applyFontSize('24px')" value="24px">24px</mat-option>
- <mat-option (click)="applyFontSize('26px')" value="26px">26px</mat-option>
- <mat-option (click)="applyFontSize('28px')" value="28px">28px</mat-option>
- <mat-option (click)="applyFontSize('30px')" value="30px">30px</mat-option>
- <mat-option (click)="applyFontSize('36px')" value="36px">36px</mat-option>
- </mat-select>
- </mat-form-field>
- <aspect-combo-button [inputType]="'color'" [selectedValue]="selectedFontColor"
- [tooltip]="'Textfarbe'" [icon]="'format_color_text'"
- (applySelection)="applyFontColor()"
- (selectionChanged)="selectedFontColor = $event">
- </aspect-combo-button>
- <aspect-combo-button [inputType]="'color'" [selectedValue]="selectedHighlightColor"
- [tooltip]="'Texthintergrund'" [icon]="'format_color_fill'"
- (applySelection)="applyHighlightColor()"
- (selectionChanged)="selectedHighlightColor = $event">
- </aspect-combo-button>
- </fieldset>
- <fieldset class="fx-row-start-start" [style.gap.px]="5" >
- <legend>Absatz</legend>
- <mat-form-field class="dropdown" appearance="outline" [style.width.px]="135">
- <mat-label>Typ</mat-label>
- <mat-select [value]="editor.getAttributes('heading').level?.toString() || ''"
- (valueChange)="toggleHeading($event)">
- <mat-option value="1">H1</mat-option>
- <mat-option value="2">H2</mat-option>
- <mat-option value="3">H3</mat-option>
- <mat-option value="4">H4</mat-option>
- <mat-option value="">Paragraph</mat-option>
- </mat-select>
- </mat-form-field>
- <mat-form-field class="dropdown" appearance="outline" [style.width.px]="90">
- <mat-label>Abstand</mat-label>
- <mat-select matTooltip="Achtung: Gilt nur für zukünftig angelegte Absätze" [matTooltipShowDelay]="300"
- [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"
- (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">
- <mat-option value="0">0px</mat-option>
- <mat-option value="10">10px</mat-option>
- <mat-option value="20">20px</mat-option>
- </mat-select>
- </mat-form-field>
- </fieldset>
+<div class="editor-control-panel">
+ <fieldset class="fx-row-start-stretch">
+ <legend>Schriftauszeichnung</legend>
+ <button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('bold')"
+ (click)="toggleBold()">
+ <mat-icon>format_bold</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Kursiv" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('italic')"
+ (click)="toggleItalic()">
+ <mat-icon>format_italic</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Unterstrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('underline')"
+ (click)="toggleUnderline()" style="text-decoration: underline">
+ <mat-icon>format_underlined</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Hochgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('superscript')"
+ (click)="toggleSuperscript()">
+ <mat-icon>superscript</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Tiefgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('subscript')"
+ (click)="toggleSubscript()">
+ <mat-icon>subscript</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Durchgestrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('strike')"
+ (click)="toggleStrike()">
+ <mat-icon>strikethrough_s</mat-icon>
+ </button>
+ </fieldset>
+ <fieldset class="fx-row-start-start" [style.gap.px]="5">
+ <legend>Schrift</legend>
+ <mat-form-field *ngIf="!showReducedControls" class="dropdown" appearance="outline" [style.width.px]="90">
+ <mat-label>Größe</mat-label>
+ <mat-select [value]="editor.getAttributes('textStyle').fontSize?.toString() || selectedFontSize">
+ <mat-option (click)="applyFontSize('8px')" value="8px">8px</mat-option>
+ <mat-option (click)="applyFontSize('10px')" value="10px">10px</mat-option>
+ <mat-option (click)="applyFontSize('12px')" value="12px">12px</mat-option>
+ <mat-option (click)="applyFontSize('14px')" value="14px">14px</mat-option>
+ <mat-option (click)="applyFontSize('16px')" value="16px">16px</mat-option>
+ <mat-option (click)="applyFontSize('18px')" value="18px">18px</mat-option>
+ <mat-option (click)="applyFontSize('20px')" value="20px">20px</mat-option>
+ <mat-option (click)="applyFontSize('22px')" value="22px">22px</mat-option>
+ <mat-option (click)="applyFontSize('24px')" value="24px">24px</mat-option>
+ <mat-option (click)="applyFontSize('26px')" value="26px">26px</mat-option>
+ <mat-option (click)="applyFontSize('28px')" value="28px">28px</mat-option>
+ <mat-option (click)="applyFontSize('30px')" value="30px">30px</mat-option>
+ <mat-option (click)="applyFontSize('36px')" value="36px">36px</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <aspect-combo-button [inputType]="'color'" [selectedValue]="selectedFontColor"
+ [tooltip]="'Textfarbe'" [icon]="'format_color_text'"
+ (applySelection)="applyFontColor()"
+ (selectionChanged)="selectedFontColor = $event">
+ </aspect-combo-button>
+ <aspect-combo-button [inputType]="'color'" [selectedValue]="selectedHighlightColor"
+ [tooltip]="'Texthintergrund'" [icon]="'format_color_fill'"
+ (applySelection)="applyHighlightColor()"
+ (selectionChanged)="selectedHighlightColor = $event">
+ </aspect-combo-button>
+ </fieldset>
+ <fieldset *ngIf="!showReducedControls" class="fx-row-start-start" [style.gap.px]="5" >
+ <legend>Absatz</legend>
+ <mat-form-field class="dropdown" appearance="outline" [style.width.px]="135">
+ <mat-label>Typ</mat-label>
+ <mat-select [value]="editor.getAttributes('heading').level?.toString() || ''"
+ (valueChange)="toggleHeading($event)">
+ <mat-option value="1">H1</mat-option>
+ <mat-option value="2">H2</mat-option>
+ <mat-option value="3">H3</mat-option>
+ <mat-option value="4">H4</mat-option>
+ <mat-option value="">Paragraph</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field class="dropdown" appearance="outline" [style.width.px]="90">
+ <mat-label>Abstand</mat-label>
+ <mat-select matTooltip="Achtung: Gilt nur für zukünftig angelegte Absätze" [matTooltipShowDelay]="300"
+ [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"
+ (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">
+ <mat-option value="0">0px</mat-option>
+ <mat-option value="10">10px</mat-option>
+ <mat-option value="20">20px</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </fieldset>
- <fieldset class="fx-row-start-stretch" [style.gap.px]="5">
- <legend>Listen</legend>
- <aspect-combo-button [inputType]="'list'"
- [selectedValue]="editor.getAttributes('bulletList').listStyle"
- [availableValues]="['disc', 'circle', 'square']"
- [tooltip]="'Aufzählung'" [icon]="'format_list_bulleted'"
- [isActive]="editor.isActive('bulletList')"
- (applySelection)="toggleBulletList()"
- (selectionChanged)="applyListStyle('bulletList', $event)">
- </aspect-combo-button>
- <aspect-combo-button [inputType]="'list'"
- [selectedValue]="editor.getAttributes('orderedList').listStyle"
- [availableValues]="['decimal', 'lower-latin', 'upper-latin',
- 'lower-roman', 'upper-roman', 'lower-greek']"
- [tooltip]="'Aufzählung (nummeriert)'" [icon]="'format_list_numbered'"
- [isActive]="editor.isActive('orderedList')"
- (applySelection)="toggleOrderedList()"
- (selectionChanged)="applyListStyle('orderedList', $event)">
- </aspect-combo-button>
- </fieldset>
- </div>
+ <fieldset *ngIf="!showReducedControls" class="fx-row-start-stretch" [style.gap.px]="5">
+ <legend>Listen</legend>
+ <aspect-combo-button [inputType]="'list'"
+ [selectedValue]="editor.getAttributes('bulletList').listStyle"
+ [availableValues]="['disc', 'circle', 'square']"
+ [tooltip]="'Aufzählung'" [icon]="'format_list_bulleted'"
+ [isActive]="editor.isActive('bulletList')"
+ (applySelection)="toggleBulletList()"
+ (selectionChanged)="applyListStyle('bulletList', $event)">
+ </aspect-combo-button>
+ <aspect-combo-button [inputType]="'list'"
+ [selectedValue]="editor.getAttributes('orderedList').listStyle"
+ [availableValues]="['decimal', 'lower-latin', 'upper-latin',
+ 'lower-roman', 'upper-roman', 'lower-greek']"
+ [tooltip]="'Aufzählung (nummeriert)'" [icon]="'format_list_numbered'"
+ [isActive]="editor.isActive('orderedList')"
+ (applySelection)="toggleOrderedList()"
+ (selectionChanged)="applyListStyle('orderedList', $event)">
+ </aspect-combo-button>
+ </fieldset>
- <div class="fx-row-space-between-stretch">
- <fieldset class="fx-row-start-stretch">
- <legend>Textausrichtung</legend>
- <button mat-icon-button matTooltip="Linksbündig" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive({ textAlign: 'left' })"
- (click)="alignText('left')">
- <mat-icon>format_align_left</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Rechtsbündig" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive({ textAlign: 'right' })"
- (click)="alignText('right')">
- <mat-icon>format_align_right</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Zentriert" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive({ textAlign: 'center' })"
- (click)="alignText('center')">
- <mat-icon>format_align_center</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Blocksatz" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive({ textAlign: 'justify' })"
- (click)="alignText('justify')">
- <mat-icon>format_align_justify</mat-icon>
- </button>
- </fieldset>
- <fieldset class="fx-row-start-start">
- <legend>Einrückung</legend>
- <button mat-icon-button matTooltip="Einrücken" [matTooltipShowDelay]="300"
- (click)="indent()">
- <mat-icon>format_indent_increase</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Einrückung verringern" [matTooltipShowDelay]="300"
- (click)="outdent()">
- <mat-icon>format_indent_decrease</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Hängende Einrückung" [matTooltipShowDelay]="300"
- (click)="hangIndent()">
- <mat-icon>segment</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Hängende Einrückung entfernen" [matTooltipShowDelay]="300"
- (click)="unhangIndent()">
- <mat-icon>view_headline</mat-icon>
- </button>
- <mat-form-field class="indent-size-input" appearance="outline" [style.width.px]="90">
- <mat-label>Tiefe</mat-label>
- <input matInput type="text" [(ngModel)]="selectedIndentSize">
- </mat-form-field>
- </fieldset>
+ <fieldset *ngIf="!showReducedControls" class="fx-row-start-stretch">
+ <legend>Textausrichtung</legend>
+ <button mat-icon-button matTooltip="Linksbündig" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive({ textAlign: 'left' })"
+ (click)="alignText('left')">
+ <mat-icon>format_align_left</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Rechtsbündig" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive({ textAlign: 'right' })"
+ (click)="alignText('right')">
+ <mat-icon>format_align_right</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Zentriert" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive({ textAlign: 'center' })"
+ (click)="alignText('center')">
+ <mat-icon>format_align_center</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Blocksatz" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive({ textAlign: 'justify' })"
+ (click)="alignText('justify')">
+ <mat-icon>format_align_justify</mat-icon>
+ </button>
+ </fieldset>
+ <fieldset *ngIf="!showReducedControls" class="fx-row-start-start">
+ <legend>Einrückung</legend>
+ <button mat-icon-button matTooltip="Einrücken" [matTooltipShowDelay]="300"
+ (click)="indent()">
+ <mat-icon>format_indent_increase</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Einrückung verringern" [matTooltipShowDelay]="300"
+ (click)="outdent()">
+ <mat-icon>format_indent_decrease</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Hängende Einrückung" [matTooltipShowDelay]="300"
+ (click)="hangIndent()">
+ <mat-icon>segment</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Hängende Einrückung entfernen" [matTooltipShowDelay]="300"
+ (click)="unhangIndent()">
+ <mat-icon>view_headline</mat-icon>
+ </button>
+ <mat-form-field class="indent-size-input" appearance="outline" [style.width.px]="90">
+ <mat-label>Tiefe</mat-label>
+ <input matInput type="text" [(ngModel)]="selectedIndentSize">
+ </mat-form-field>
+ </fieldset>
- <fieldset class="fx-row-start-stretch">
- <legend>Bild</legend>
- <button mat-icon-button matTooltip="Bild in Zeile einfügen" [matTooltipShowDelay]="300"
- (click)="insertImage()">
- <mat-icon style="transform: scale(1.1);">burst_mode</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Bild in eigenem Absatz einfügen" [matTooltipShowDelay]="300"
- (click)="insertBlockImage('none')">
- <mat-icon style="transform: scale(0.9);">image</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Bild rechts einfügen" [matTooltipShowDelay]="300"
- (click)="insertBlockImage('right')">
- <mat-icon style="transform: scale(-1.5, 1.5);">art_track</mat-icon>
- </button>
- <button mat-icon-button matTooltip="Bild links einfügen" [matTooltipShowDelay]="300"
- (click)="insertBlockImage('left')">
- <mat-icon style="transform: scale(1.5);">art_track</mat-icon>
- </button>
- </fieldset>
+ <fieldset *ngIf="!showReducedControls" class="fx-row-start-stretch">
+ <legend>Bild</legend>
+ <button mat-icon-button matTooltip="Bild in Zeile einfügen" [matTooltipShowDelay]="300"
+ (click)="insertImage()">
+ <mat-icon style="transform: scale(1.1);">burst_mode</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Bild in eigenem Absatz einfügen" [matTooltipShowDelay]="300"
+ (click)="insertBlockImage('none')">
+ <mat-icon style="transform: scale(0.9);">image</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Bild rechts einfügen" [matTooltipShowDelay]="300"
+ (click)="insertBlockImage('right')">
+ <mat-icon style="transform: scale(-1.5, 1.5);">art_track</mat-icon>
+ </button>
+ <button mat-icon-button matTooltip="Bild links einfügen" [matTooltipShowDelay]="300"
+ (click)="insertBlockImage('left')">
+ <mat-icon style="transform: scale(1.5);">art_track</mat-icon>
+ </button>
+ </fieldset>
- <fieldset class="fx-row-start-stretch">
- <legend>Sonderelemente</legend>
- <button mat-icon-button matTooltip="Tooltip" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('tooltip')"
- (click)="showTooltipPropertiesDialog()">
- <mat-icon>announcement</mat-icon>
- </button>
- <button mat-icon-button class="special-chars-button" matTooltip="Sonderzeichen" [matTooltipShowDelay]="300"
- [matMenuTriggerFor]="specialCharsMenu">
- <mat-icon>emoji_symbols</mat-icon>
- </button>
- <mat-menu #specialCharsMenu="matMenu" yPosition="above">
- <button mat-button (click)="insertSpecialChar(' ')"
- [matTooltip]="'Nicht umbrechendes Leerzeichen'">␣</button>
- <button mat-button (click)="insertSpecialChar(' ')"
- [matTooltip]="'Schmales nicht umbrechendes Leerzeichen'">␣<sub>2</sub></button>
- <button mat-button (click)="insertSpecialChar('–')"
- [matTooltip]="'Halbgeviertstrich'">–</button>
- <button mat-button (click)="insertSpecialChar('‑')"
- [matTooltip]="'Nicht umbrechender Viertelgeviertstrich'">—</button>
- <br>
- <button mat-button (click)="insertSpecialChar('‘')"
- [matTooltip]="'Einfaches Anführungszeichen links'">‘</button>
- <button mat-button (click)="insertSpecialChar('’')"
- [matTooltip]="'Einfaches Anführungszeichen rechts'">’</button>
- <button mat-button (click)="insertSpecialChar('‚')"
- [matTooltip]="'Niedriges Komma-Anführungszeichen'">‚</button>
- <br>
- <button mat-button (click)="insertSpecialChar('„')"
- [matTooltip]="'Doppeltes Anführungszeichen unten'">„</button>
- <button mat-button (click)="insertSpecialChar('“')"
- [matTooltip]="'Doppeltes Anführungszeichen oben'">“</button>
- <button mat-button (click)="insertSpecialChar('”')"
- [matTooltip]="'Rechtes doppeltes Anführungszeichen'">”</button>
- <br>
- <button mat-button (click)="insertSpecialChar('‹')"
- [matTooltip]="'Einfaches spitzes Anführungszeichen links'">‹</button>
- <button mat-button (click)="insertSpecialChar('›')"
- [matTooltip]="'Einfaches spitzes Anführungszeichen rechts'">›</button>
- <button mat-button (click)="insertSpecialChar('«')"
- [matTooltip]="'Doppeltes spitzes Anführungszeichen links'">«</button>
- <button mat-button (click)="insertSpecialChar('»')"
- [matTooltip]="'Doppeltes spitzes Anführungszeichen rechts'">»</button>
- <br>
- <button mat-button (click)="insertSpecialChar('µ')">µ</button>
- <button mat-button (click)="insertSpecialChar('ç')">ç</button>
- <button mat-button (click)="insertSpecialChar('Ç')">Ç</button>
- <button mat-button (click)="insertSpecialChar('Æ')">Æ</button>
- <br>
- <button mat-button (click)="insertSpecialChar('♀')">♀</button>
- <button mat-button (click)="insertSpecialChar('♂')">♂</button>
- <br>
- <button mat-button (click)="insertSpecialChar('¢')">¢</button>
- <button mat-button (click)="insertSpecialChar('£')">£</button>
- <button mat-button (click)="insertSpecialChar('¥')">¥</button>
- <br>
- <button mat-button (click)="insertSpecialChar('©')">©</button>
- <button mat-button (click)="insertSpecialChar('®')">®</button>
- <button mat-button (click)="insertSpecialChar('™')">™</button>
- <br>
- <button mat-button (click)="insertSpecialChar('≤')">≤</button>
- <button mat-button (click)="insertSpecialChar('≥')">≥</button>
- <button mat-button (click)="insertSpecialChar('⨍')">⨍</button>
- <button mat-button (click)="insertSpecialChar('∑')">∑</button>
- <button mat-button (click)="insertSpecialChar('∈')">∈</button>
- <button mat-button (click)="insertSpecialChar('∉')">∉</button>
- <button mat-button (click)="insertSpecialChar('√')">√</button>
- <button mat-button (click)="insertSpecialChar('∞')">∞</button>
- <br>
- <button mat-button (click)="insertSpecialChar('♠')">♠</button>
- <button mat-button (click)="insertSpecialChar('♣')">♣</button>
- <button mat-button (click)="insertSpecialChar('♥')">♥</button>
- <button mat-button (click)="insertSpecialChar('♦')">♦</button>
- </mat-menu>
- <button mat-icon-button matTooltip="Zitat" [matTooltipShowDelay]="300"
- [class.active]="editor.isActive('blockquote')"
- (click)="toggleBlockquote()">
- <mat-icon>format_quote</mat-icon>
- </button>
- <aspect-combo-button *ngIf="!clozeMode"
- [inputType]="'color'" [selectedValue]="selectedAnchorColor"
- [tooltip]="'Bereich hervorheben'" [icon]="'read_more'"
- (applySelection)="applyAnchorId()"
- (selectionChanged)="selectedAnchorColor = $event">
- </aspect-combo-button>
- </fieldset>
- </div>
- <div *ngIf="clozeMode" class="fx-row-space-around-center" >
- <button mat-icon-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
+ <fieldset class="fx-row-start-stretch">
+ <legend>Sonderelemente</legend>
+ <button *ngIf="!showReducedControls" mat-icon-button
+ matTooltip="Tooltip" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('tooltip')"
+ (click)="showTooltipPropertiesDialog()">
+ <mat-icon>announcement</mat-icon>
+ </button>
+ <button mat-icon-button class="special-chars-button" matTooltip="Sonderzeichen" [matTooltipShowDelay]="300"
+ [matMenuTriggerFor]="specialCharsMenu">
+ <mat-icon>emoji_symbols</mat-icon>
+ </button>
+ <mat-menu #specialCharsMenu="matMenu" yPosition="above">
+ <button mat-button (click)="insertSpecialChar(' ')"
+ [matTooltip]="'Nicht umbrechendes Leerzeichen'">␣</button>
+ <button mat-button (click)="insertSpecialChar(' ')"
+ [matTooltip]="'Schmales nicht umbrechendes Leerzeichen'">␣<sub>2</sub></button>
+ <button mat-button (click)="insertSpecialChar('–')"
+ [matTooltip]="'Halbgeviertstrich'">–</button>
+ <button mat-button (click)="insertSpecialChar('‑')"
+ [matTooltip]="'Nicht umbrechender Viertelgeviertstrich'">—</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('‘')"
+ [matTooltip]="'Einfaches Anführungszeichen links'">‘</button>
+ <button mat-button (click)="insertSpecialChar('’')"
+ [matTooltip]="'Einfaches Anführungszeichen rechts'">’</button>
+ <button mat-button (click)="insertSpecialChar('‚')"
+ [matTooltip]="'Niedriges Komma-Anführungszeichen'">‚</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('„')"
+ [matTooltip]="'Doppeltes Anführungszeichen unten'">„</button>
+ <button mat-button (click)="insertSpecialChar('“')"
+ [matTooltip]="'Doppeltes Anführungszeichen oben'">“</button>
+ <button mat-button (click)="insertSpecialChar('”')"
+ [matTooltip]="'Rechtes doppeltes Anführungszeichen'">”</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('‹')"
+ [matTooltip]="'Einfaches spitzes Anführungszeichen links'">‹</button>
+ <button mat-button (click)="insertSpecialChar('›')"
+ [matTooltip]="'Einfaches spitzes Anführungszeichen rechts'">›</button>
+ <button mat-button (click)="insertSpecialChar('«')"
+ [matTooltip]="'Doppeltes spitzes Anführungszeichen links'">«</button>
+ <button mat-button (click)="insertSpecialChar('»')"
+ [matTooltip]="'Doppeltes spitzes Anführungszeichen rechts'">»</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('µ')">µ</button>
+ <button mat-button (click)="insertSpecialChar('ç')">ç</button>
+ <button mat-button (click)="insertSpecialChar('Ç')">Ç</button>
+ <button mat-button (click)="insertSpecialChar('Æ')">Æ</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('♀')">♀</button>
+ <button mat-button (click)="insertSpecialChar('♂')">♂</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('¢')">¢</button>
+ <button mat-button (click)="insertSpecialChar('£')">£</button>
+ <button mat-button (click)="insertSpecialChar('¥')">¥</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('©')">©</button>
+ <button mat-button (click)="insertSpecialChar('®')">®</button>
+ <button mat-button (click)="insertSpecialChar('™')">™</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('≤')">≤</button>
+ <button mat-button (click)="insertSpecialChar('≥')">≥</button>
+ <button mat-button (click)="insertSpecialChar('⨍')">⨍</button>
+ <button mat-button (click)="insertSpecialChar('∑')">∑</button>
+ <button mat-button (click)="insertSpecialChar('∈')">∈</button>
+ <button mat-button (click)="insertSpecialChar('∉')">∉</button>
+ <button mat-button (click)="insertSpecialChar('√')">√</button>
+ <button mat-button (click)="insertSpecialChar('∞')">∞</button>
+ <br>
+ <button mat-button (click)="insertSpecialChar('♠')">♠</button>
+ <button mat-button (click)="insertSpecialChar('♣')">♣</button>
+ <button mat-button (click)="insertSpecialChar('♥')">♥</button>
+ <button mat-button (click)="insertSpecialChar('♦')">♦</button>
+ </mat-menu>
+ <button *ngIf="!showReducedControls" mat-icon-button matTooltip="Zitat" [matTooltipShowDelay]="300"
+ [class.active]="editor.isActive('blockquote')"
+ (click)="toggleBlockquote()">
+ <mat-icon>format_quote</mat-icon>
+ </button>
+ <aspect-combo-button *ngIf="!clozeMode && !showReducedControls"
+ [inputType]="'color'" [selectedValue]="selectedAnchorColor"
+ [tooltip]="'Bereich hervorheben'" [icon]="'read_more'"
+ (applySelection)="applyAnchorId()"
+ (selectionChanged)="selectedAnchorColor = $event">
+ </aspect-combo-button>
+ </fieldset>
+</div>
+<div *ngIf="clozeMode" class="fx-row-space-around-center" >
+ <button mat-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
(click)="insertTextField()">
<mat-icon>edit</mat-icon>
+ Eingabefeld
</button>
- <button mat-icon-button matTooltip="Ablegeliste" [matTooltipShowDelay]="300"
+ <button mat-button matTooltip="Ablegeliste" [matTooltipShowDelay]="300"
(click)="insertDropList()">
<mat-icon>drag_indicator</mat-icon>
+ Ablegeliste
</button>
- <button mat-icon-button matTooltip="Optionsfeld" [matTooltipShowDelay]="300"
+ <button mat-button matTooltip="Optionsfeld" [matTooltipShowDelay]="300"
(click)="insertToggleButton()">
<mat-icon>radio_button_checked</mat-icon>
+ Optionsfeld
</button>
- <button mat-icon-button matTooltip="Knopf" [matTooltipShowDelay]="300"
+ <button mat-button matTooltip="Knopf" [matTooltipShowDelay]="300"
(click)="insertButton()">
<mat-icon>smart_button</mat-icon>
+ Knopf
</button>
- <button mat-icon-button matTooltip="Kontrollkästchen" [matTooltipShowDelay]="300"
+ <button mat-button matTooltip="Kontrollkästchen" [matTooltipShowDelay]="300"
(click)="insertCheckbox()">
<mat-icon>check_box</mat-icon>
+ Kontrollkästchen
</button>
- </div>
</div>
-<tiptap-editor [editor]="editor" [ngModel]="content" mat-dialog-content
+
+<tiptap-editor [editor]="editor" [ngModel]="content"
[outputFormat]="clozeMode ? 'json' : 'html'"
+ [class.small-input]="showReducedControls"
[style.font-size.px]="defaultFontSize"
(ngModelChange)="contentChange.emit($event)">
</tiptap-editor>
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.scss b/projects/editor/src/app/text-editor/rich-text-editor.component.scss
index 4fec76007f7d30ce5c35dc14b60d20f7ff480fbd..bb981c74ddeab5fb4f7ed0f25edc9c6c395888d8 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.scss
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.scss
@@ -1,71 +1,41 @@
-tiptap-editor {
- height: 60%;
- border: 1px solid;
- margin: 0 20px;
-}
:host ::ng-deep div.ProseMirror {
- height: 99%;
- outline: none;
-}
-
-:host ::ng-deep .ProseMirror p strong {
- letter-spacing: 0.02em !important;
- font-weight: 750 !important;
-}
-
-:host ::ng-deep .ProseMirror h1 {
- font-weight: bold;
- font-size: 20px;
-}
-:host ::ng-deep .ProseMirror h2 {
- font-weight: bold;
- font-size: 18px;
-}
-:host ::ng-deep .ProseMirror h3 {
- font-weight: bold;
- font-size: 16px;
-}
-:host ::ng-deep .ProseMirror h4 {
- font-weight: normal;
- font-size: 16px;
-}
-
-::ng-deep mark {
- color: inherit;
+ min-height: 350px;
}
-:host ::ng-deep .ProseMirror tooltip {
- background-color: #eee;
-}
-
-button.active {
- background-color: lightgrey;
+:host ::ng-deep .small-input div.ProseMirror {
+ min-height: 100px;
}
.editor-control-panel {
- margin-bottom: 20px;
- background: linear-gradient(to top right, #FFF5F8, #FAFAFA);
+ margin-bottom: 15px;
font: unset;
- max-width: 1100px;
+ max-width: 1000px;
margin-left: auto;
margin-right: auto;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
}
-:host ::ng-deep .dropdown .mat-mdc-form-field-infix {
+.editor-control-panel button.active {
+ background-color: lightgrey;
+}
+
+:host ::ng-deep .editor-control-panel .dropdown .mat-mdc-form-field-infix {
min-height: unset;
padding-top: 10px;
padding-bottom: 10px;
}
-:host ::ng-deep .dropdown .mdc-notched-outline__notch {
+:host ::ng-deep .editor-control-panel .dropdown .mdc-notched-outline__notch {
max-width: unset !important;
}
-:host ::ng-deep .indent-size-input .mat-mdc-form-field-flex {
+:host ::ng-deep .editor-control-panel .indent-size-input .mat-mdc-form-field-flex {
height: 45px;
}
-:host ::ng-deep .indent-size-input .mat-mdc-form-field-infix {
+:host ::ng-deep .editor-control-panel .indent-size-input .mat-mdc-form-field-infix {
padding-top: 10px;
padding-bottom: 10px;
}
@@ -77,34 +47,31 @@ button.active {
padding: 2px 5px 15px 5px;
}
-.fx-row-start-stretch {
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: stretch;
-}
+// ### Override TipTap text styling ###
-.fx-row-start-start {
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: flex-start;
+:host ::ng-deep .ProseMirror p strong {
+ letter-spacing: 0.02em !important;
+ font-weight: 750 !important;
}
-
-.fx-row-space-between-stretch {
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: stretch;
+:host ::ng-deep .ProseMirror h1 {
+ font-weight: bold;
+ font-size: 20px;
}
-
-.fx-row-space-around-center {
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- align-items: center;
+:host ::ng-deep .ProseMirror h2 {
+ font-weight: bold;
+ font-size: 18px;
+}
+:host ::ng-deep .ProseMirror h3 {
+ font-weight: bold;
+ font-size: 16px;
+}
+:host ::ng-deep .ProseMirror h4 {
+ font-weight: normal;
+ font-size: 16px;
+}
+::ng-deep mark {
+ color: inherit;
+}
+:host ::ng-deep .ProseMirror tooltip {
+ background-color: #eee;
}
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 2c871991e6e04d34a89ec085c57c43c0e0bc1866..2f685605157fbd80f23f8dbfe7f0af7de2f68660 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
@@ -46,6 +46,8 @@ export class RichTextEditorComponent implements OnInit, AfterViewInit {
@Input() content!: string | Record<string, any>;
@Input() defaultFontSize!: number;
@Input() clozeMode: boolean = false;
+ @Input() showReducedControls: boolean = false;
+ @Input() showGroupedControls: boolean = true;
@Output() contentChange = new EventEmitter<string | Record<string, any>>();
selectedFontColor = 'black';
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index 1eb200dcaaeb9b89bcf001c1ea3e618fbf5bc283..b9f2fee06306576bcb161d3631441cb8ed7d73a5 100644
--- a/projects/editor/src/styles.css
+++ b/projects/editor/src/styles.css
@@ -36,6 +36,14 @@ u>span {
align-items: stretch;
}
+.fx-row-start-start {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+}
+
.fx-row-space-between-center {
box-sizing: border-box;
display: flex;
@@ -60,6 +68,14 @@ u>span {
align-items: stretch;
}
+.fx-row-space-around-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+}
+
.fx-flex {
flex: 1 1 0;
box-sizing: border-box;