rich-text-editor.component.html

<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">
      <legend>Schrift</legend>
      <mat-form-field class="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-start" [style.gap.px]="10" >
      <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>
        <select class="combo-button-select" [value]="editor.getAttributes('bulletList').listStyle"
                    (change)="applyListStyle('bulletList', $any($event.target).value )">
          <option value="disc">disc</option>
          <option value="circle">circle</option>
          <option value="square">square</option>
        </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>
        <select class="combo-button-select" [value]="editor.getAttributes('orderedList').listStyle"
                    (change)="applyListStyle('orderedList', $any($event.target).value)">
          <option value="decimal">
            decimal
          </option>
          <option value="lower-latin">
            lower-latin
          </option>
          <option value="upper-latin">
            upper-latin
          </option>
          <option value="lower-roman">
            lower-roman
          </option>
          <option value="upper-roman">
            upper-roman
          </option>
          <option value="lower-greek">
            lower-greek
          </option>
        </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-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="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('&nbsp;')"
                [matTooltip]="'Geschütztes Leerzeichen'">&blank;</button>
        <button mat-button (click)="insertSpecialChar('&#8239;')"
                [matTooltip]="'Geschütztes Leerzeichen (schmal)'">&blank;<sub>2</sub></button>
        <button mat-button (click)="insertSpecialChar('&ndash;')">&ndash;</button>
        <button mat-button (click)="insertSpecialChar('&#8209;')"
                [matTooltip]="'Geschützter Bindestrich'">—</button>
        <button mat-button (click)="insertSpecialChar('&female;')">&female;</button>
        <button mat-button (click)="insertSpecialChar('&male;')">&male;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&lsquo;')">&lsquo;</button>
        <button mat-button (click)="insertSpecialChar('&rsquo;')">&rsquo;</button>
        <button mat-button (click)="insertSpecialChar('&sbquo;')">&sbquo;</button>
        <button mat-button (click)="insertSpecialChar('&bdquo;')">&bdquo;</button>
        <button mat-button (click)="insertSpecialChar('&ldquo;')">&ldquo;</button>
        <button mat-button (click)="insertSpecialChar('&rdquo;')">&rdquo;</button>
        <button mat-button (click)="insertSpecialChar('&micro;')">&micro;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&ccedil;')">&ccedil;</button>
        <button mat-button (click)="insertSpecialChar('&Ccedil;')">&Ccedil;</button>
        <button mat-button (click)="insertSpecialChar('&AElig;')">&AElig;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&lsaquo;')">&lsaquo;</button>
        <button mat-button (click)="insertSpecialChar('&rsaquo;')">&rsaquo;</button>
        <button mat-button (click)="insertSpecialChar('&laquo;')">&laquo;</button>
        <button mat-button (click)="insertSpecialChar('&raquo;')">&raquo;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&cent;')">&cent;</button>
        <button mat-button (click)="insertSpecialChar('&pound;')">&pound;</button>
        <button mat-button (click)="insertSpecialChar('&yen;')">&yen;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&copy;')">&copy;</button>
        <button mat-button (click)="insertSpecialChar('&reg;')">&reg;</button>
        <button mat-button (click)="insertSpecialChar('&trade;')">&trade;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&le;')">&le;</button>
        <button mat-button (click)="insertSpecialChar('&ge;')">&ge;</button>
        <button mat-button (click)="insertSpecialChar('&fpartint;')">&fpartint;</button>
        <button mat-button (click)="insertSpecialChar('&sum;')">&sum;</button>
        <button mat-button (click)="insertSpecialChar('&isin;')">&isin;</button>
        <button mat-button (click)="insertSpecialChar('&notin;')">&notin;</button>
        <button mat-button (click)="insertSpecialChar('&radic;')">&radic;</button>
        <button mat-button (click)="insertSpecialChar('&infin;')">&infin;</button>
        <br>
        <button mat-button (click)="insertSpecialChar('&spades;')">&spades;</button>
        <button mat-button (click)="insertSpecialChar('&clubs;')">&clubs;</button>
        <button mat-button (click)="insertSpecialChar('&hearts;')">&hearts;</button>
        <button mat-button (click)="insertSpecialChar('&diams;')">&diams;</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>