panel/app/views/posts/attributes/_content.haml

.form-group
  = label_tag "#{base}_#{attribute}", post_label_t(attribute, post: post)
  = render 'posts/attribute_feedback',
    post: post, attribute: attribute, metadata: metadata

  .editor{ id: attribute, data: { editor: '' } }
    -# Esto es para luego decirle al navegador que se olvide estas cosas.
    = hidden_field_tag 'storage_keys[]', "#{request.original_url}##{attribute}", data: { target: 'storage-key' }
    = render 'bootstrap/alert' do
      :markdown
        #{t('editor.alert')}
    = text_area_tag "#{base}[#{attribute}]", '',
      dir: dir, lang: locale,
      **field_options(attribute, metadata), class: 'd-none'

    -#
      el > se come el salto de línea y hace que los botones no tengan
      espacio adicional

      TODO: Eliminar todo el espacio en blanco para minificar HTML
    .editor-toolbar{ style: 'z-index: 1' }
      .editor-primary-toolbar.scrollbar-black
        %button.btn{ type: 'button', title: t('editor.multimedia'), data: { editor_button: 'multimedia' } }>
          %i.fa.fa-fw.fa-upload>
          %span.sr-only>= t('editor.multimedia')
        %button.btn{ type: 'button', title: t('editor.bold'), data: { editor_button: 'mark-bold' } }>
          %i.fa.fa-fw.fa-bold>
          %span.sr-only>= t('editor.bold')
        %button.btn{ type: 'button', title: t('editor.italic'), data: { editor_button: 'mark-italic' } }>
          %i.fa.fa-fw.fa-italic>
          %span.sr-only>= t('editor.italic')
        %button.btn{ type: 'button', title: t('editor.mark'), data: { editor_button: 'mark-mark' } }>
          %i.fa.fa-fw.fa-tint>
          %span.sr-only>= t('editor.mark')
        %button.btn{ type: 'button', title: t('editor.link'), data: { editor_button: 'mark-link' } }>
          %i.fa.fa-fw.fa-link>
          %span.sr-only>= t('editor.link')
        %button.btn{ type: 'button', title: t('editor.deleted'), data: { editor_button: 'mark-deleted' } }>
          %i.fa.fa-fw.fa-strikethrough>
          %span.sr-only>= t('editor.deleted')
        %button.btn{ type: 'button', title: t('editor.underline'), data: { editor_button: 'mark-underline' } }>
          %i.fa.fa-fw.fa-underline>
          %span.sr-only>= t('editor.underline')
        %button.btn{ type: 'button', title: t('editor.super'), data: { editor_button: 'mark-super' } }>
          %i.fa.fa-fw.fa-superscript>
          %span.sr-only>= t('editor.super')
        %button.btn{ type: 'button', title: t('editor.sub'), data: { editor_button: 'mark-sub' } }>
          %i.fa.fa-fw.fa-subscript>
          %span.sr-only>= t('editor.sub')
        %button.btn{ type: 'button', title: t('editor.small'), data: { editor_button: 'mark-small' } }>
          %i.fa.fa-fw.fa-subscript>
          %span.sr-only>= t('editor.small')
        %button.btn.mr-0{ type: 'button', title: t('editor.h1'), data: { editor_button: 'block-h1' } }>
          %i.fa.fa-fw.fa-heading>
          1
          %span.sr-only>= t('editor.h1')
        %details.d-inline>
          %summary.d-inline>
            %span.btn.ml-0{ role: 'button', title: t('editor.more') }>
              %i.fa.fa-caret-right>
              %span.sr-only= t('editor.more')
          .d-inline>
            %button.btn{ type: 'button', title: t('editor.h2'), data: { editor_button: 'block-h2' } }>
              %i.fa.fa-fw.fa-heading>
              2
              %span.sr-only>= t('editor.h2')
            %button.btn{ type: 'button', title: t('editor.h3'), data: { editor_button: 'block-h3' } }>
              %i.fa.fa-fw.fa-heading>
              3
              %span.sr-only>= t('editor.h3')
            %button.btn{ type: 'button', title: t('editor.h4'), data: { editor_button: 'block-h4' } }>
              %i.fa.fa-fw.fa-heading>
              4
              %span.sr-only>= t('editor.h4')
            %button.btn{ type: 'button', title: t('editor.h5'), data: { editor_button: 'block-h5' } }>
              %i.fa.fa-fw.fa-heading>
              5
              %span.sr-only>= t('editor.h5')
            %button.btn{ type: 'button', title: t('editor.h6'), data: { editor_button: 'block-h6' } }>
              %i.fa.fa-fw.fa-heading>
              6
              %span.sr-only>= t('editor.h6')
        %button.btn{ type: 'button', title: t('editor.ul'), data: { editor_button: 'block-unordered_list' } }>
          %i.fa.fa-fw.fa-list-ul>
          %span.sr-only>= t('editor.ul')
        %button.btn{ type: 'button', title: t('editor.ol'), data: { editor_button: 'block-ordered_list' } }>
          %i.fa.fa-fw.fa-list-ol>
          %span.sr-only>= t('editor.ol')
        %button.btn{ type: 'button', title: t('editor.left'), data: { editor_button: 'parentBlock-left' } }>
          %i.fa.fa-fw.fa-align-left>
          %span.sr-only>= t('editor.left')
        %button.btn{ type: 'button', title: t('editor.center'), data: { editor_button: 'parentBlock-center' } }>
          %i.fa.fa-fw.fa-align-center>
          %span.sr-only>= t('editor.center')
        %button.btn{ type: 'button', title: t('editor.right'), data: { editor_button: 'parentBlock-right' } }>
          %i.fa.fa-fw.fa-align-right>
          %span.sr-only>= t('editor.right')
        %button.btn{ type: 'button', title: t('editor.blockquote'), data: { editor_button: 'block-blockquote' } }>
          %i.fa.fa-fw.fa-quote-left>
          %span.sr-only>= t('editor.blockquote')

      -# HAML cringe
      .editor-auxiliary-toolbar.mt-1.scrollbar-black{ data: { editor_auxiliary_toolbar: '' } }
        .form-group{ data: { editor_auxiliary: 'mark' } }
          %label{ for: 'mark-color' }= t('editor.color')
          %input.form-control{ type: 'color', name: 'mark-color' }/
          %label{ for: 'mark-text-color' }= t('editor.text-color')
          %input.form-control{ type: 'color', name: 'mark-text-color' }/

        %div{ data: { editor_auxiliary: 'multimedia' } }
          .form-group
            .custom-file
              %input.custom-file-input{ type: 'file', id: 'multimedia-file', name: 'multimedia-file' }/
              %label.custom-file-label{ for: 'multimedia-file' }= t('editor.multimedia-select')
          .form-group
            %label{ for: 'multimedia-alt' }= t('editor.description')
            %input.form-control{ type: 'text', id: 'multimedia-alt', name: 'multimedia-alt' }/
          .form-group
            %button.btn{ type: 'button', id: 'multimedia-file-upload', name: 'multimedia-file-upload' }= t('editor.multimedia-upload')
            %button.btn{ type: 'button', id: 'multimedia-remove', name: 'multimedia-remove' }= t('editor.multimedia-remove')

        .form-group{ data: { editor_auxiliary: 'link' } }
          %label{ for: 'link-url' }= t('editor.url')
          %input.form-control{ type: 'url', id: 'link-url', name: 'link-url' }/

      = render 'bootstrap/alert', class: 'editor-aviso-word' do
        %p= t('editor.word')

    .editor-content.form-control.h-auto.mt-1{ contenteditable: 'true' }
      = metadata.value.html_safe