trix editor

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

app/assets/stylesheets/commons/_actiontext.sass

+//
+// 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

app/assets/stylesheets/commons/_links.sass

+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

app/assets/stylesheets/commons/links.sass

-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)

app/inputs/trix_editor_input.rb

+# 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

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>

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

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==