diff --git a/app/javascript/editor/editor.ts b/app/javascript/editor/editor.ts index 233cc3c0..880547de 100644 --- a/app/javascript/editor/editor.ts +++ b/app/javascript/editor/editor.ts @@ -19,10 +19,6 @@ import { } from "editor/types/multimedia"; import { setupAuxiliaryToolbar as setupMarkAuxiliaryToolbar } from "editor/types/mark"; -/// @ts-ignore -import SuttyEditor from "@suttyweb/editor"; -import "@suttyweb/editor/dist/style.css"; - // Esta funcion corrije errores que pueden haber como: // * que un nodo que no tiene 'text' permitido no tenga children (se les // inserta un allowedChildren[0]) @@ -334,15 +330,10 @@ document.addEventListener("turbolinks:load", () => { ".editor[data-editor]" )) { try { - new SuttyEditor({ - target: editorEl, - props: { - textareaEl: editorEl.parentElement!.querySelector("textarea"), - }, - }); + setupEditor(editorEl); } catch (error) { - console.error(error); - alert(error); + // TODO: mostrar error + console.error("no se pudo iniciar el editor, error completo", error); } } }); diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml index 65462397..4ae70ba0 100644 --- a/app/views/posts/attributes/_content.haml +++ b/app/views/posts/attributes/_content.haml @@ -9,6 +9,119 @@ .alert.alert-info :markdown #{t('editor.alert')} - = text_area_tag "#{base}[#{attribute}]", metadata.value.html_safe, + = text_area_tag "#{base}[#{attribute}]", '', dir: dir, lang: locale, - **field_options(attribute, metadata) + **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') + + -# 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' }/ + + .editor-aviso-word.alert.alert-info + %p= t('editor.word') + + .editor-content.form-control.h-auto.mt-1{ contenteditable: 'true' } + = metadata.value.html_safe diff --git a/package.json b/package.json index 23ed3e5e..0a2458a6 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "@rails/activestorage": "^6.1.3-1", "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", - "@suttyweb/editor": "0.0.8", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", "commonmark": "^0.29.0", diff --git a/yarn.lock b/yarn.lock index 86e54004..11ff78cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,11 +1171,6 @@ resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2" integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A== -"@suttyweb/editor@0.0.8": - version "0.0.8" - resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.8.tgz#5803b9bcbab69fc4bf40fb939d1ec2283d44d2fd" - integrity sha512-vBBfTaGwu8IH4Gd+Q8cFC+XjjeEZ/8gSqT830hCO0kHzEvHEPTSEokffVR5DffBkS7ZKCvwsNXKzz/QuvkfHuQ== - "@types/caseless@*": version "0.12.2" resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8"