Revert "usar @suttyweb/editor"

This reverts commit 7e0600779e.

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({
+      setupEditor(editorEl);
-        target: editorEl,
-        props: {
-          textareaEl: editorEl.parentElement!.querySelector("textarea"),
-        },
-      });
     } catch (error) {
-      console.error(error);
+      // TODO: mostrar error
-      alert(error);
+      console.error("no se pudo iniciar el editor, error completo", error);
     }
   }
 });

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

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",

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"