From 7e0600779ed259f2bedc3603d5205d18bc21316b Mon Sep 17 00:00:00 2001 From: void Date: Sat, 22 May 2021 21:17:00 +0000 Subject: [PATCH 1/4] usar @suttyweb/editor --- app/javascript/editor/editor.ts | 15 ++- app/views/posts/attributes/_content.haml | 117 +---------------------- package.json | 1 + yarn.lock | 5 + 4 files changed, 20 insertions(+), 118 deletions(-) diff --git a/app/javascript/editor/editor.ts b/app/javascript/editor/editor.ts index 880547de..233cc3c0 100644 --- a/app/javascript/editor/editor.ts +++ b/app/javascript/editor/editor.ts @@ -19,6 +19,10 @@ 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]) @@ -330,10 +334,15 @@ document.addEventListener("turbolinks:load", () => { ".editor[data-editor]" )) { try { - setupEditor(editorEl); + new SuttyEditor({ + target: editorEl, + props: { + textareaEl: editorEl.parentElement!.querySelector("textarea"), + }, + }); } catch (error) { - // TODO: mostrar error - console.error("no se pudo iniciar el editor, error completo", error); + console.error(error); + alert(error); } } }); diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml index 4ae70ba0..65462397 100644 --- a/app/views/posts/attributes/_content.haml +++ b/app/views/posts/attributes/_content.haml @@ -9,119 +9,6 @@ .alert.alert-info :markdown #{t('editor.alert')} - = text_area_tag "#{base}[#{attribute}]", '', + = text_area_tag "#{base}[#{attribute}]", metadata.value.html_safe, 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') - - -# 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 + **field_options(attribute, metadata) diff --git a/package.json b/package.json index 0a2458a6..94fa93cc 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@rails/activestorage": "^6.1.3-1", "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", + "@suttyweb/editor": "^0.0.3", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", "commonmark": "^0.29.0", diff --git a/yarn.lock b/yarn.lock index 11ff78cb..216c9342 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,6 +1171,11 @@ resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2" integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A== +"@suttyweb/editor@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.3.tgz#6572b9d29fe1c3adf36c4cfc4ee152453ba15c0f" + integrity sha512-mFh3cWpA/9vNlqKHBLjPVjCOzDH8HaBL+CwAGtiQoFUhxx8gaUiAfBGZGOE/KK9IcD/xDVTkG6q6HYZ6iIQIFQ== + "@types/caseless@*": version "0.12.2" resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8" From a64f554f0e7b63ec36781096dc0e042c8f26d572 Mon Sep 17 00:00:00 2001 From: void Date: Sat, 22 May 2021 22:03:18 +0000 Subject: [PATCH 2/4] usar @suttyweb/editor@0.0.4 subida de archivos :) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 94fa93cc..773e9234 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@rails/activestorage": "^6.1.3-1", "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", - "@suttyweb/editor": "^0.0.3", + "@suttyweb/editor": "^0.0.4", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", "commonmark": "^0.29.0", diff --git a/yarn.lock b/yarn.lock index 216c9342..342a616a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,10 +1171,10 @@ resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2" integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A== -"@suttyweb/editor@^0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.3.tgz#6572b9d29fe1c3adf36c4cfc4ee152453ba15c0f" - integrity sha512-mFh3cWpA/9vNlqKHBLjPVjCOzDH8HaBL+CwAGtiQoFUhxx8gaUiAfBGZGOE/KK9IcD/xDVTkG6q6HYZ6iIQIFQ== +"@suttyweb/editor@^0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.4.tgz#5fc6a295ee44f25d4034137a777f8b9fdf721aaa" + integrity sha512-ZlFjV/I9q1lW1rgRWJHyisRQQodsZkcGiIAXFPPhRBJmvE92AhEpuzPDLTesyJ1WQ2EZojOxAeoGFczUnv3jCA== "@types/caseless@*": version "0.12.2" From 06a9b78eee53bba5a10fb0c1c74978bac9af39c8 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 16 Jun 2021 12:06:44 -0300 Subject: [PATCH 3/4] usar @suttyweb/editor@0.0.6 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 773e9234..b082128e 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@rails/activestorage": "^6.1.3-1", "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", - "@suttyweb/editor": "^0.0.4", + "@suttyweb/editor": "0.0.6", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", "commonmark": "^0.29.0", diff --git a/yarn.lock b/yarn.lock index 342a616a..e25e2357 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,10 +1171,10 @@ resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2" integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A== -"@suttyweb/editor@^0.0.4": - version "0.0.4" - resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.4.tgz#5fc6a295ee44f25d4034137a777f8b9fdf721aaa" - integrity sha512-ZlFjV/I9q1lW1rgRWJHyisRQQodsZkcGiIAXFPPhRBJmvE92AhEpuzPDLTesyJ1WQ2EZojOxAeoGFczUnv3jCA== +"@suttyweb/editor@0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.6.tgz#5496762997c835262d0551a03eb919bdb9cc9dab" + integrity sha512-cLTM/xtEP2H4Vld2yF5Mnpqzke2pb43czVSDIAOnbDd9szG9o25ABAtQZVc7Iapf47mEen2rJpdoC0+Hfvruqw== "@types/caseless@*": version "0.12.2" From ffa2c80bf1dbab6b762c6961a9f576aadabd1054 Mon Sep 17 00:00:00 2001 From: f Date: Mon, 28 Jun 2021 14:29:37 -0300 Subject: [PATCH 4/4] @suttyweb/editor@0.0.7 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b082128e..9560cdf3 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@rails/activestorage": "^6.1.3-1", "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", - "@suttyweb/editor": "0.0.6", + "@suttyweb/editor": "0.0.7", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", "commonmark": "^0.29.0", diff --git a/yarn.lock b/yarn.lock index e25e2357..604ee871 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,10 +1171,10 @@ resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2" integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A== -"@suttyweb/editor@0.0.6": - version "0.0.6" - resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.6.tgz#5496762997c835262d0551a03eb919bdb9cc9dab" - integrity sha512-cLTM/xtEP2H4Vld2yF5Mnpqzke2pb43czVSDIAOnbDd9szG9o25ABAtQZVc7Iapf47mEen2rJpdoC0+Hfvruqw== +"@suttyweb/editor@0.0.7": + version "0.0.7" + resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.7.tgz#019c1ab2d43e6a6fb7d4ebf44c44f79ebd5a6896" + integrity sha512-fZepXH1pRTdDQWxKSF10lYVlYjoczkqGi00vTaSWDRTL/rnZrgOEakcdFyutcJzYnZWdWsWsF6AUidKvQvd1dw== "@types/caseless@*": version "0.12.2"