From 8ff1a437910b786950b0b231e26b25578a4fcc0e Mon Sep 17 00:00:00 2001 From: f Date: Sat, 14 Nov 2020 12:10:55 -0300 Subject: [PATCH] deprecar trix --- app/assets/stylesheets/actiontext.scss | 38 ------------- app/assets/stylesheets/application.scss | 13 ----- app/javascript/packs/application.js | 3 - app/models/metadata_template.rb | 4 +- app/views/posts/attributes/_content.haml | 71 +++++++++++++++++++++++- package.json | 1 - yarn.lock | 4 -- 7 files changed, 69 insertions(+), 65 deletions(-) delete mode 100644 app/assets/stylesheets/actiontext.scss diff --git a/app/assets/stylesheets/actiontext.scss b/app/assets/stylesheets/actiontext.scss deleted file mode 100644 index 56a417c..0000000 --- a/app/assets/stylesheets/actiontext.scss +++ /dev/null @@ -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 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; - } - } -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 64f5df9..9f17fc6 100644 --- a/app/assets/stylesheets/application.scss +++ b/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 diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index f3e8bc0..efa3992 100644 --- a/app/javascript/packs/application.js +++ b/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" diff --git a/app/models/metadata_template.rb b/app/models/metadata_template.rb index 521a02a..597a5ec 100644 --- a/app/models/metadata_template.rb +++ b/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 diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml index e070707..81bc702 100644 --- a/app/views/posts/attributes/_content.haml +++ b/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' } diff --git a/package.json b/package.json index c7271c3..d5c0e18 100644 --- a/package.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index 860c3cd..48fad52 100644 --- a/yarn.lock +++ b/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"