deprecar trix

app/assets/stylesheets/actiontext.scss

@@ -1,38 +0,0 @@
-//
-// Provides a drop-in pointer for the default Trix stylesheet that will
-// format the toolbar and the trix-editor content (whether displayed or
-// under editing). Feel free to incorporate this inclusion directly in
-// any other asset bundle and remove this file.
-//
-//= require trix/dist/trix
-
-// We need to override trix.css’s image gallery styles to accommodate
-// the <action-text-attachment> element we wrap around attachments.
-// Otherwise, images in galleries will be squished by the max-width:
-// 33%; rule.
-.trix-content {
-  .attachment-gallery {
-    > action-text-attachment,
-    > .attachment {
-      flex: 1 0 33%;
-      padding: 0 0.5em;
-      max-width: 33%;
-    }
-
-    &.attachment-gallery--2,
-    &.attachment-gallery--4 {
-      > action-text-attachment,
-      > .attachment {
-        flex-basis: 50%;
-        max-width: 50%;
-      }
-    }
-  }
-
-  action-text-attachment {
-    .attachment {
-      padding: 0 !important;
-      max-width: 100% !important;
-    }
-  }
-}

app/assets/stylesheets/application.scss

@@ -22,7 +22,6 @@ $component-active-bg: $magenta;
 
 @import "bootstrap";
 @import "editor";
-@import "actiontext";
 @import "helpers";
 
 :root {
@@ -37,18 +36,6 @@ $component-active-bg: $magenta;
     --background: #{$black};
     --color: #{$cyan};
   }
-  trix-toolbar {
-    .trix-button--icon {
-      background-color: var(--color);
-    }
-  }
-}
-
-trix-toolbar {
-  background-color: var(--background);
-  position: sticky;
-  top: 0;
-
 }
 
 // TODO: Encontrar la forma de generar esto desde los locales de Rails

app/javascript/packs/application.js

@@ -15,9 +15,6 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-require("trix")
-require("@rails/actiontext")
-
 import tableDragger from 'table-dragger'
 
 import {EditorState} from "prosemirror-state"

app/models/metadata_template.rb

@@ -4,7 +4,6 @@
 #
 # TODO: Validar el tipo de valor pasado a value= según el :type
 #
-# rubocop:disable Metrics/BlockLength
 MetadataTemplate = Struct.new(:site, :document, :name, :label, :type,
                               :value, :help, :required, :errors, :post,
                               :layout, keyword_init: true) do
@@ -123,7 +122,7 @@ MetadataTemplate = Struct.new(:site, :document, :name, :label, :type,
 
     sanitizer.sanitize(string.tr("\r", ''),
                        tags: allowed_tags,
-                       attributes: allowed_attributes + %w[data-trix-attachment],
+                       attributes: allowed_attributes,
                        scrubber: scrubber).strip.html_safe
   end
 
@@ -156,4 +155,3 @@ MetadataTemplate = Struct.new(:site, :document, :name, :label, :type,
     @box ||= Lockbox.new key: site.private_key, padding: true, encode: true
   end
 end
-# rubocop:enable Metrics/BlockLength

app/views/posts/attributes/_content.haml

@@ -2,6 +2,71 @@
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata
-  = rich_text_area_tag "post[#{attribute}]", metadata.value,
-    **field_options(attribute, metadata), class: '', dir: dir,
-    lang: locale
+
+  .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' }

package.json

@@ -11,7 +11,6 @@
     "prosemirror-markdown": "^1.4.5",
     "prosemirror-schema-basic": "^1.1.2",
     "table-dragger": "git+https://0xacab.org/sutty/table-dragger.git",
-    "trix": "git+https://0xacab.org/sutty/trix.git",
     "zepto": "^1.2.0"
   },
   "devDependencies": {

yarn.lock

@@ -6953,10 +6953,6 @@ trim-right@^1.0.1:
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
   integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
 
-"trix@git+https://0xacab.org/sutty/trix.git":
-  version "1.2.0"
-  resolved "git+https://0xacab.org/sutty/trix.git#0a53f75dbef0d650acbd73344f7d50ac4aedbe16"
-
 "true-case-path@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"