recuperar el editor de markdown

app/javascript/packs/application.js

@@ -88,7 +88,7 @@ document.addEventListener('turbolinks:load', () => {
 
   document.querySelectorAll('.markdown-content').forEach(mdc => {
     let textArea = mdc.querySelector(".content"),
-        editor = mdc.querySelector(".editor");
+        editor = mdc.querySelector(".markdown-editor");
 
     let view = new EditorView(editor, {
       state: EditorState.create({

app/views/posts/attributes/_markdown_content.haml

@@ -1,72 +1,8 @@
-.form-group
+.form-group.markdown-content
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata
-
+  = text_area_tag "post[#{attribute}]", metadata.value,
-  .editor
+    dir: dir, lang: locale,
-    = text_area_tag "post[#{attribute}]", metadata.value,
+    **field_options(attribute, metadata, class: 'content')
-      dir: dir, lang: locale,
+  .markdown-editor.mt-1
-      **field_options(attribute, metadata), class: 'd-none'
-
-    .editor-toolbar
-      .editor-primary-toolbar.scrollbar-black
-        %button.btn{ data: { button: 'bold' } }= t('editor.bold')
-        %button.btn{ data: { button: 'italic' } }= t('editor.italic')
-        %button.btn{ data: { button: 'deleted' } }= t('editor.deleted')
-        %button.btn{ data: { button: 'underline' } }= t('editor.underline')
-        %button.btn{ data: { button: 'mark' } }= t('editor.mark')
-        %button.btn{ data: { button: 'h1' } }= t('editor.h1')
-        %button.btn{ data: { button: 'h2' } }= t('editor.h2')
-        %button.btn{ data: { button: 'h3' } }= t('editor.h3')
-        %button.btn{ data: { button: 'h4' } }= t('editor.h4')
-        %button.btn{ data: { button: 'h5' } }= t('editor.h5')
-        %button.btn{ data: { button: 'h6' } }= t('editor.h6')
-        %button.btn{ data: { button: 'ul' } }= t('editor.ul')
-        %button.btn{ data: { button: 'ol' } }= t('editor.ol')
-        %button.btn{ data: { button: 'left' } }= t('editor.left')
-        %button.btn{ data: { button: 'center' } }= t('editor.center')
-        %button.btn{ data: { button: 'right' } }= t('editor.right')
-        %button.btn{ data: { button: 'img' } }= t('editor.img')
-        %button.btn{ data: { button: 'video' } }= t('editor.video')
-        %button.btn{ data: { button: 'audio' } }= t('editor.audio')
-        %button.btn{ data: { button: 'pdf' } }= t('editor.pdf')
-
-      -#
-        HAML cringe
-        TODO: generar IDs para labels
-      .editor-auxiliary-toolbar.scrollbar-black{ data: { editor: { auxiliary: { toolbar: '' } } } }
-        .form-group{ data: { editor: { auxiliary: 'mark' } } }
-          %label{ for: 'mark-color' }= t('editor.color')
-          %input{ type: 'color', data: { prop: 'mark-color' } }/
-
-        %div{ data: { editor: { auxiliary: 'img' } } }
-          .row
-            .col.form-group.d-flex.align-items-end
-              .custom-file
-                %input.custom-file-input{ type: 'file', data: { prop: 'img-file' }, accept: 'image/*' }/
-                %label.custom-file-label{ for: 'img-file' }= t('editor.file.img')
-            .col.form-group
-              %label{ for: 'img-alt' }= t('editor.description')
-              %input.form-control{ type: 'text', data: { prop: 'img-alt' } }/
-
-        -# https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
-        .form-group{ data: { editor: { auxiliary: 'audio' } } }
-          .custom-file
-            %input.custom-file-input{ type: 'file', data: { prop: 'audio-file' }, accept: 'audio/flac,audio/mp4,audio/ogg,audio/webm,audio/mp3' }/
-            %label.custom-file-label{ for: 'audio-file' }= t('editor.file.audio')
-
-        .form-group{ data: { editor: { auxiliary: 'video' } } }
-          .custom-file
-            %input.custom-file-input{ type: 'file', data: { prop: 'video-file' }, accept: 'video/mp4,video/ogg,video/webm' }/
-            %label.custom-file-label{ for: 'video-file' }= t('editor.file.video')
-
-        .form-group{ data: { editor: { auxiliary: 'pdf' } } }
-          .custom-file
-            %input.custom-file-input{ type: 'file', data: { prop: 'pdf-file' }, accept: 'application/pdf' }/
-            %label.custom-file-label{ for: 'pdf-file' }= t('editor.file.pdf')
-
-        .form-group{ data: { editor: { auxiliary: 'link' } } }
-          %label{ for: 'link-href' }= t('editor.url')
-          %input.form-control{ type: 'url', data: { prop: 'link-href' } }/
-
-    .editor-content.form-control.h-auto{ contenteditable: 'true' }