From 7dbbb7aa46633c0f79f873033c4a1e4cc3e239db Mon Sep 17 00:00:00 2001 From: f Date: Wed, 18 Nov 2020 09:10:21 -0300 Subject: [PATCH] recuperar el editor de markdown --- app/javascript/packs/application.js | 2 +- .../posts/attributes/_markdown_content.haml | 74 ++----------------- 2 files changed, 6 insertions(+), 70 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 19fdcd86..abae9073 100644 --- a/app/javascript/packs/application.js +++ b/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({ diff --git a/app/views/posts/attributes/_markdown_content.haml b/app/views/posts/attributes/_markdown_content.haml index 81bc702c..80d2804f 100644 --- a/app/views/posts/attributes/_markdown_content.haml +++ b/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 - - .editor - = text_area_tag "post[#{attribute}]", metadata.value, - dir: dir, lang: locale, - **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' } + = text_area_tag "post[#{attribute}]", metadata.value, + dir: dir, lang: locale, + **field_options(attribute, metadata, class: 'content') + .markdown-editor.mt-1