Action Text

app/assets/stylesheets/actiontext.scss

@@ -0,0 +1,34 @@
+//
+// 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.
+//
+// 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

@@ -4,4 +4,7 @@
 @import 'variables';
 @import 'layout';
 
-@import 'components/**/*';
+@import 'components/**/*';
+
+@import "trix/dist/trix";
+@import 'actiontext';

app/assets/stylesheets/components/forms.scss

@@ -68,9 +68,6 @@ form {
   input[type="file"] {
     background-color: transparent;
   }
-  br {
-    display: none;
-  }
   label {
     margin-bottom: 6px !important;
     font-family: $medium-sans-font;

app/controllers/assets_controller.rb

@@ -202,7 +202,8 @@ def asset_params
       :title,
       :user,
       :user_id,
-      :youtube_embed
+      :youtube_embed,
+      :post
     )
   end
 

app/javascript/packs/application.js

@@ -16,6 +16,9 @@ import gsap from 'gsap' // needed for tests to run
 import Playlist from '@alonetone/stitches'
 import { makeSVGFromTitle } from '../animation/default_playlist_images'
 import '../misc/bugsnag.js.erb'
+/* eslint-disable-next-line import/extensions */
+require('trix/dist/trix.js')
+require('@rails/actiontext')
 
 // uncomment for local stitches dev:
 // import Playlist from '../../../../stitches/src/playlist'

app/models/asset.rb

@@ -12,6 +12,8 @@ class Asset < ApplicationRecord
   include Asset::Statistics
   include Asset::Waveform
 
+  has_rich_text :post
+
   attribute :user_agent, :string
   serialize :waveform, Array
 
@@ -25,7 +27,7 @@ class Asset < ApplicationRecord
   scope :hottest,         -> { where('hotness > 0').reorder(hotness: :desc) }
   scope :most_commented,  -> { where('comments_count > 0').reorder('comments_count DESC') }
   scope :most_listened,   -> { where('listens_count > 0').reorder('listens_count DESC') }
-  scope :with_preloads,   -> { includes(user: { avatar_image_attachment: :blob }) }
+  scope :with_preloads,   -> { with_rich_text_post_and_embeds.includes(user: { avatar_image_attachment: :blob }) }
 
   belongs_to :user
   after_commit :update_user_assets_count, on: :create

app/views/active_storage/blobs/_blob.html.erb

@@ -0,0 +1,12 @@
+<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
+  <% if blob.representable? %>
+    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
+  <% end %>
+
+  <figcaption class="attachment__caption">
+    <% if caption = blob.try(:caption) %>
+      <%= caption %>
+    <% else %>
+    <% end %>
+  </figcaption>
+</figure>

app/views/assets/_edit.html.erb

@@ -1,5 +1,6 @@
 <%= form_with(model: asset, url: "/#{@user.login}/tracks/#{asset.id}",
   local: (true unless @assets), data: { action: 'ajax:beforeSend->save#spin ajax:success->save#success ajax:error->save#error ajax:complete->save#complete' }) do |f| %>
+
   <% if asset.errors.any? %>
     <div class="errors">
       There were some problems...
@@ -20,7 +21,7 @@
       </div>
     </header>
 
-    <%= f.text_area :description, placeholder: "Tell us a story...", id: "description_#{asset.id}"  %>
+    <%= f.rich_text_area :post %>
     <%= f.text_area :credits, placeholder: "Credits for this track" %>
 
     <div class="track_edit_bottom">

app/views/shared/_asset.html.erb

@@ -39,7 +39,7 @@
 
     </div>
 
-    <%= format_track_description(@asset.description) %>
+    <%= @asset.post %>
 
     <div>
       <%= markdown(@asset.credits) if @asset.credits.present? %>

db/migrate/20200828123506_create_action_text_tables.action_text.rb

@@ -0,0 +1,14 @@
+# This migration comes from action_text (originally 20180528164100)
+class CreateActionTextTables < ActiveRecord::Migration[6.0]
+  def change
+    create_table :action_text_rich_texts do |t|
+      t.string     :name, null: false
+      t.text       :body, size: :long
+      t.references :record, null: false, polymorphic: true, index: false
+
+      t.timestamps
+
+      t.index [ :record_type, :record_id, :name ], name: "index_action_text_rich_texts_uniqueness", unique: true
+    end
+  end
+end

package.json

@@ -16,6 +16,7 @@
     "seedrandom": "^3.0.5",
     "sortablejs": "^1.12.0",
     "stimulus": "^2.0.0",
+    "trix": "^1.3.1",
     "turbolinks": "^5.2.0"
   },
   "devDependencies": {

test/fixtures/action_text/rich_texts.yml

@@ -0,0 +1,4 @@
+# one:
+#   record: name_of_fixture (ClassOfFixture)
+#   name: content
+#   body: <p>In a <i>million</i> stars!</p>

yarn.lock

@@ -10112,6 +10112,11 @@ triple-beam@^1.2.0, triple-beam@^1.3.0:
   resolved "https://registry.yarnpkg.com/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9"
   integrity sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==
 
+trix@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/trix/-/trix-1.3.1.tgz#ccce8d9e72bf0fe70c8c019ff558c70266f8d857"
+  integrity sha512-BbH6mb6gk+AV4f2as38mP6Ucc1LE3OD6XxkZnAgPIduWXYtvg2mI3cZhIZSLqmMh9OITEpOBCCk88IVmyjU7bA==
+
 "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"