<div class="d-editor-container">
  <div class="d-editor-textarea-wrapper {{if disabled "disabled"}}">
    <div class="d-editor-button-bar">
      {{#each toolbar.groups as |group|}}
        {{#each group.buttons as |b|}}
          {{#if b.popupMenu}}
            {{toolbar-popup-menu-options
              content=popupMenuOptions
              onChange=onPopupMenuAction
              onOpen=(action b.action b)
              class=b.className
              options=(hash
                icon=b.icon
                focusAfterOnChange=false
              )
            }}
          {{else}}
            {{d-button
              action=b.action
              type="button"
              actionParam=b
              translatedTitle=b.title
              label=b.label
              icon=b.icon
              class=b.className}}
          {{/if}}
        {{/each}}

        {{#unless group.lastGroup}}
          <div class="d-editor-spacer"></div>
        {{/unless}}
      {{/each}}
    </div>

    {{conditional-loading-spinner condition=loading}}
    {{d-textarea
      autocomplete="discourse"
      tabindex=tabindex
      value=value
      class="d-editor-input"
      placeholder=placeholderTranslated
      aria-label=placeholderTranslated
      disabled=disabled
      input=change}}
    {{popup-input-tip validation=validation}}
    {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
  </div>

  <div class="d-editor-preview-wrapper {{if forcePreview "force-preview"}}">
    <div class="d-editor-preview">{{html-safe preview}}</div>
    {{plugin-outlet name="editor-preview" classNames="d-editor-plugin" args=outletArgs}}
  </div>
</div>

{{emoji-picker active=emojiPickerIsActive isEditorFocused=isEditorFocused emojiSelected=(action "emojiSelected")}}
