<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-stretch">
<legend>Schrift</legend>
<mat-form-field class="small-dropdown">
<mat-label>Schriftgröß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>
<div class="combo-button fx-row-start-stretch"
[style.background-color]="selectedFontColor">
<button mat-icon-button matTooltip="Textfarbe"
(click)="applyFontColor()">
<mat-icon>format_color_text</mat-icon>
</button>
<mat-select (click)="textColorInput.click()"></mat-select>
<input matInput type="color" #textColorInput hidden
(input)="selectedFontColor = $any($event.target).value; applyFontColor()">
</div>
<div class="combo-button fx-row-start-stretch"
[style.background-color]="selectedHighlightColor">
<button mat-icon-button matTooltip="Texthintergrund"
(click)="applyHighlightColor()">
<mat-icon>format_color_fill</mat-icon>
</button>
<mat-select (click)="textHighlightColorInput.click()"></mat-select>
<input matInput type="color" #textHighlightColorInput hidden
(input)="selectedHighlightColor = $any($event.target).value; applyHighlightColor()">
</div>
</fieldset>
<fieldset class="fx-row-start-stretch">
<legend>Absatz</legend>
<mat-form-field class="dropdown">
<mat-label>Absatztyp</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">
<mat-label>Absatzabstand</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">
<legend>Listen</legend>
<div class="combo-button fx-row-start-stretch"
[style.background-color]="editor.isActive('bulletList') ? 'lightgrey' : ''">
<button mat-icon-button matTooltip="Aufzählung" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('bulletList')"
(click)="toggleBulletList()">
<mat-icon>format_list_bulleted</mat-icon>
</button>
<mat-select [value]="editor.getAttributes('bulletList').listStyle"
(valueChange)="applyListStyle('bulletList', $event)">
<mat-option value="disc">disc</mat-option>
<mat-option value="circle">circle</mat-option>
<mat-option value="square">square</mat-option>
</mat-select>
</div>
<div class="combo-button fx-row-start-stretch"
[style.background-color]="editor.isActive('orderedList') ? 'lightgrey' : ''">
<button mat-icon-button matTooltip="Aufzählung (nummeriert)" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('orderedList')"
(click)="toggleOrderedList()">
<mat-icon>format_list_numbered</mat-icon>
</button>
<mat-select [value]="editor.getAttributes('orderedList').listStyle"
(valueChange)="applyListStyle('orderedList', $event)">
<mat-option value="decimal"
(click)="applyListStyle('orderedList', 'decimal')">
decimal
</mat-option>
<mat-option value="lower-latin"
(click)="applyListStyle('orderedList', 'lower-latin')">
lower-latin
</mat-option>
<mat-option value="upper-latin"
(click)="applyListStyle('orderedList', 'upper-latin')">
upper-latin
</mat-option>
<mat-option value="lower-roman"
(click)="applyListStyle('orderedList', 'lower-roman')">
lower-roman
</mat-option>
<mat-option value="upper-roman"
(click)="applyListStyle('orderedList', 'upper-roman')">
upper-roman
</mat-option>
<mat-option value="lower-greek"
(click)="applyListStyle('orderedList', 'lower-greek')">
lower-greek
</mat-option>
</mat-select>
</div>
</fieldset>
</div>
<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-stretch">
<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="fill">
<mat-label>Einrücktiefe</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>burst_mode</mat-icon>
</button>
<button mat-icon-button matTooltip="Bild in eigenem Absatz einfügen" [matTooltipShowDelay]="300"
(click)="insertBlockImage('none')">
<mat-icon>image</mat-icon>
</button>
<button mat-icon-button matTooltip="Bild rechts einfügen" [matTooltipShowDelay]="300"
(click)="insertBlockImage('right')">
<mat-icon style="transform: scaleX(-1);">art_track</mat-icon>
</button>
<button mat-icon-button matTooltip="Bild links einfügen" [matTooltipShowDelay]="300"
(click)="insertBlockImage('left')">
<mat-icon>art_track</mat-icon>
</button>
</fieldset>
<fieldset class="fx-row-start-stretch">
<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(' ')"
[matTooltip]="'Geschütztes Leerzeichen (schmal)'">␣<sub>2</sub></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>
<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>
<button mat-icon-button matTooltip="Zitat" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('blockquote')"
(click)="toggleBlockquote()">
<mat-icon>format_quote</mat-icon>
</button>
<div *ngIf="!clozeMode" class="combo-button fx-row-start-stretch"
[style.background-color]="selectedAnchorColor">
<button mat-icon-button matTooltip="Bereich markieren"
(click)="applyAnchorId()">
<mat-icon>read_more</mat-icon>
</button>
<mat-select matTooltip="Bereichsfarbe wählen"
(click)="anchorIdColorInput.click()"
(focus)="setSelectedAnchorIdText()">
</mat-select>
<input matInput type="color" #anchorIdColorInput hidden
(input)="selectedAnchorColor = $any($event.target).value; applyAnchorId()">
</div>
</fieldset>
</div>
<div *ngIf="clozeMode" class="fx-row-space-around-center" >
<button mat-icon-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
(click)="insertTextField()">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button matTooltip="Ablegeliste" [matTooltipShowDelay]="300"
(click)="insertDropList()">
<mat-icon>drag_indicator</mat-icon>
</button>
<button mat-icon-button matTooltip="Optionsfeld" [matTooltipShowDelay]="300"
(click)="insertToggleButton()">
<mat-icon>radio_button_checked</mat-icon>
</button>
<button mat-icon-button matTooltip="Knopf" [matTooltipShowDelay]="300"
(click)="insertButton()">
<mat-icon>smart_button</mat-icon>
</button>
</div>
</div>
<tiptap-editor [editor]="editor" [ngModel]="content" mat-dialog-content
[outputFormat]="clozeMode ? 'json' : 'html'"
[style.font-size.px]="defaultFontSize"
(ngModelChange)="contentChange.emit($event)">
</tiptap-editor>