From 6677717b9440870e00fe67a70053739febd3d425 Mon Sep 17 00:00:00 2001
From: pabois <pierreandre.boissinot@noesya.coop>
Date: Tue, 19 Oct 2021 16:02:07 +0200
Subject: [PATCH] trix editor
---
app/assets/javascripts/admin.js | 1 +
.../stylesheets/commons/_actiontext.sass | 55 +++++++++++++++++++
app/assets/stylesheets/commons/_links.sass | 10 ++++
app/assets/stylesheets/commons/links.sass | 12 ----
app/inputs/trix_editor_input.rb | 36 ++++++++++++
.../website/posts/_form.html.erb | 4 +-
package.json | 3 +-
yarn.lock | 5 ++
8 files changed, 111 insertions(+), 15 deletions(-)
create mode 100644 app/assets/stylesheets/commons/_actiontext.sass
create mode 100644 app/assets/stylesheets/commons/_links.sass
delete mode 100644 app/assets/stylesheets/commons/links.sass
create mode 100644 app/inputs/trix_editor_input.rb
diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index 9105ed405..d5fb28277 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -8,4 +8,5 @@
//= require jquery-cropper/dist/jquery-cropper
//= require appstack/app
//= require gdpr/cookie_consent
+//= require trix
//= require_tree ./admin
diff --git a/app/assets/stylesheets/commons/_actiontext.sass b/app/assets/stylesheets/commons/_actiontext.sass
new file mode 100644
index 000000000..3669d7257
--- /dev/null
+++ b/app/assets/stylesheets/commons/_actiontext.sass
@@ -0,0 +1,55 @@
+//
+// 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.
+//
+@import '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
+ line-height: 2rem
+ h1
+ font-size: 1.5rem
+ h2
+ font-size: 1.3rem
+ h3
+ font-size: 1.15rem
+
+ .attachment-gallery
+ > action-text-attachment,
+ > .attachment
+ flex: 1 0 33%
+ max-width: 33%
+ padding: 0 0.5em
+
+ &.attachment-gallery--2,
+ &.attachment-gallery--4
+ > action-text-attachment,
+ > .attachment
+ flex-basis: 50%
+ max-width: 50%
+
+
+ action-text-attachment
+ .attachment
+ max-width: 100% !important
+ padding: 0 !important
+
+trix-editor.form-control
+ height: auto
+ margin-top: -34px
+ padding-top: 40px
+
+trix-toolbar
+ background: white
+ border-bottom: 1px solid #EEEEEE
+ margin: 1px
+ padding: 5px 0
+ position: sticky
+ top: 0
+ .trix-button-group, .trix-button
+ border: none
+ .trix-button-group
+ margin-bottom: 0
diff --git a/app/assets/stylesheets/commons/_links.sass b/app/assets/stylesheets/commons/_links.sass
new file mode 100644
index 000000000..2bc43c96c
--- /dev/null
+++ b/app/assets/stylesheets/commons/_links.sass
@@ -0,0 +1,10 @@
+a[target="_blank"]::after
+ background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat
+ background-size: contain
+ content: ""
+ display: inline-block
+ filter: invert(.5)
+ height: 0.8rem
+ margin: 0 0.05rem 0 0.1rem
+ vertical-align: -1px
+ width: 0.8rem
diff --git a/app/assets/stylesheets/commons/links.sass b/app/assets/stylesheets/commons/links.sass
deleted file mode 100644
index a17993199..000000000
--- a/app/assets/stylesheets/commons/links.sass
+++ /dev/null
@@ -1,12 +0,0 @@
-a
- &[target="_blank"]
- &::after
- content: ""
- width: 0.8rem
- height: 0.8rem
- margin: 0 0.05rem 0 0.1rem
- background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat
- background-size: contain
- display: inline-block
- vertical-align: -1px
- filter: invert(.5)
diff --git a/app/inputs/trix_editor_input.rb b/app/inputs/trix_editor_input.rb
new file mode 100644
index 000000000..7e71b8ff5
--- /dev/null
+++ b/app/inputs/trix_editor_input.rb
@@ -0,0 +1,36 @@
+# I was using https://github.com/maclover7/trix to do:
+#
+# f.input :my_input, as: :trix_editor
+#
+# Its currently been over two weeks since Rails 5.2 was released, and the
+# gem was the only thing preventing me from using it in multiple projects:
+# https://github.com/maclover7/trix/pull/61#issuecomment-384312659
+#
+# So I made this custom simpleform input for my apps to prevent this from happening again in the future.
+#
+# For more info on SimpleForm custom form inputs, see:
+# https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components
+#
+
+class TrixEditorInput < SimpleForm::Inputs::Base
+ def input(wrapper_options)
+ template.concat @builder.text_field(attribute_name, input_html_options)
+ template.content_tag(:"trix-editor", nil, input: id)
+ end
+
+ def input_html_options
+ super.merge({
+ type: :hidden,
+ id: id,
+ name: name
+ })
+ end
+
+ def id
+ "#{@builder.object.class.to_s.downcase}_#{attribute_name}"
+ end
+
+ def name
+ "#{@builder.object.class.to_s.downcase}[#{attribute_name}]"
+ end
+end
diff --git a/app/views/admin/communication/website/posts/_form.html.erb b/app/views/admin/communication/website/posts/_form.html.erb
index 9d0ce1912..07d1078e5 100644
--- a/app/views/admin/communication/website/posts/_form.html.erb
+++ b/app/views/admin/communication/website/posts/_form.html.erb
@@ -7,8 +7,8 @@
</div>
<div class="card-body">
<%= f.input :title %>
- <%= f.input :description %>
- <%= f.input :text, input_html: { rows: 20 } %>
+ <%= f.input :description, as: :trix_editor %>
+ <%= f.input :text, as: :trix_editor %>
</div>
</div>
</div>
diff --git a/package.json b/package.json
index bd3625599..ca39c3f7a 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"dependencies": {
"cropperjs": "^1.5.12",
"jquery-cropper": "^1.0.1",
- "notyf": "^3.10.0"
+ "notyf": "^3.10.0",
+ "trix": "^1.3.1"
}
}
diff --git a/yarn.lock b/yarn.lock
index 84aaabbb8..8e1c5e1fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,3 +16,8 @@ notyf@^3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/notyf/-/notyf-3.10.0.tgz#67a64443c69ea0e6495c56ea0f91198860163d06"
integrity sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw==
+
+trix@^1.3.1:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/trix/-/trix-1.3.1.tgz#ccce8d9e72bf0fe70c8c019ff558c70266f8d857"
+ integrity sha512-BbH6mb6gk+AV4f2as38mP6Ucc1LE3OD6XxkZnAgPIduWXYtvg2mI3cZhIZSLqmMh9OITEpOBCCk88IVmyjU7bA==
--
GitLab