<div class="sky-padding-even-default">
  <button
    class="sky-btn sky-btn-default"
    id="sky-btn-toggle-text-editor-disable"
    type="button"
    (click)="onToggleDisableClick()"
  >
    Toggle disable
  </button>
</div>

<div class="sky-padding-even-large">
  <h1>Text editor</h1>
  <form [formGroup]="myForm">
    <sky-text-editor
      formControlName="textEditor"
      helpKey="helpKey.html"
      helpPopoverContent="This is some helpful content."
      helpPopoverTitle="Did you know?"
      hintText="Hint text"
      name="text-editor"
      [menus]="menus"
      [mergeFields]="mergeFields"
      [labelText]="labelText"
      [linkWindowOptions]="linkWindowOptions"
      [placeholder]="placeholder"
      [toolbarActions]="toolbarActions"
    />

    <h2>Angular form control values</h2>
    <table>
      <tr>
        <th>Disabled</th>
        <td>{{ textEditorControl.disabled }}</td>
      </tr>
      <tr>
        <th>Errors</th>
        <td>{{ textEditorControl.errors | json }}</td>
      </tr>
      <tr>
        <th>Pristine</th>
        <td>{{ textEditorControl.pristine }}</td>
      </tr>
      <tr>
        <th>Status</th>
        <td>{{ textEditorControl.status }}</td>
      </tr>
      <tr>
        <th>Touched</th>
        <td>{{ textEditorControl.touched }}</td>
      </tr>
      <tr>
        <th>Valid</th>
        <td>{{ textEditorControl.valid }}</td>
      </tr>
      <tr>
        <th>Value</th>
        <td>{{ textEditorControl.value }}</td>
      </tr>
    </table>

    <h2>Preview HTML</h2>
    @if (displayValue) {
      <div class="content-display" [innerHTML]="displayValue"></div>
    }
  </form>
</div>
