<div class="d-editor-container">
  <div class="d-editor-textarea-column">
    {{yield}}

    <div
      class="d-editor-textarea-wrapper
        {{if this.disabled 'disabled'}}
        {{if this.isEditorFocused 'in-focus'}}"
    >
      <div class="d-editor-button-bar" role="toolbar">
        {{#each this.toolbar.groups as |group|}}
          {{#each group.buttons as |b|}}
            {{#if b.popupMenu}}
              <ToolbarPopupMenuOptions
                @content={{this.popupMenuOptions}}
                @onChange={{this.onPopupMenuAction}}
                @onOpen={{action b.action b}}
                @class={{b.className}}
                @tabindex={{-1}}
                @onKeydown={{this.rovingButtonBar}}
                @options={{hash icon=b.icon focusAfterOnChange=false}}
              />
            {{else}}
              <DButton
                @action={{b.action}}
                @type="button"
                @actionParam={{b}}
                @translatedTitle={{b.title}}
                @label={{b.label}}
                @icon={{b.icon}}
                @class={{b.className}}
                @preventFocus={{b.preventFocus}}
                @tabindex={{b.tabindex}}
                @onKeyDown={{this.rovingButtonBar}}
              />
            {{/if}}
          {{/each}}
        {{/each}}
      </div>

      <ConditionalLoadingSpinner @condition={{this.loading}} />
      <DTextarea
        @autocomplete="off"
        @tabindex={{this.tabindex}}
        @value={{this.value}}
        @class="d-editor-input"
        @placeholder={{this.placeholderTranslated}}
        @aria-label={{this.placeholderTranslated}}
        @disabled={{this.disabled}}
        @input={{this.change}}
        @focusIn={{action "focusIn"}}
        @focusOut={{action "focusOut"}}
      />
      <PopupInputTip @validation={{this.validation}} />
      <PluginOutlet
        @name="after-d-editor"
        @connectorTagName="div"
        @outletArgs={{this.outletArgs}}
      />
    </div>
  </div>

  <div
    class="d-editor-preview-wrapper {{if this.forcePreview 'force-preview'}}"
  >
    <div class="d-editor-preview">
      {{#unless this.siteSettings.enable_diffhtml_preview}}
        {{html-safe this.preview}}
      {{/unless}}
    </div>
    <span class="d-editor-plugin">
      <PluginOutlet
        @name="editor-preview"
        @connectorTagName="div"
        @outletArgs={{this.outletArgs}}
      />
    </span>
  </div>
</div>

<EmojiPicker
  @isActive={{this.emojiPickerIsActive}}
  @isEditorFocused={{this.isEditorFocused}}
  @initialFilter={{this.emojiFilter}}
  @emojiSelected={{action "emojiSelected"}}
  @onEmojiPickerClose={{this.onEmojiPickerClose}}
/>