Add WYSIWYG editors to DJ profile (#65)

* Provide trix editors for DJ profile

* Direct upload for profile prics, trix editor in progress

* wip: trix_upload

* send attachment url to trix editor after drag and drop, purge deleted images on update

* prevent uploads for dj lists section

* add acessible alt tag to dj profile photo

* don't hyperlink images

* add custom trix css file

* prettier, center img w/ max width

* add some padding

* give trix uploads a top margin

* Revert "Use smart quotes around song names"

This reverts commit 1aad8f0.

* merge smart quotes

* remove trix gem

* add trix

* prevent uploads with a data attribute instead of a class

* remove trix gem

* move direct_uploads into a pack

* dataset is a member of event.target

* data attribute must be passed a string value

* Upgrade webpacker so the damn thing will load?

* Fixes styling of Bio and Picks while editing

* Use placeholder for the example “picks”

* Stop running the bio and picks through Markdown on the "show" pages

* Convert djs.about and djs.lists from markdown to html in a migration

* Fix display of trix image galleries

* Remove DiskService host parameter which is obviated in Rails 5.2.1

Author: dctalbot

.babelrc

@@ -13,14 +13,10 @@
     ],
     "react"
   ],
+
   "plugins": [
     "syntax-dynamic-import",
     "transform-object-rest-spread",
-    [
-      "transform-class-properties",
-      {
-        "spec": true
-      }
-    ]
+    ["transform-class-properties", { "spec": true }]
   ]
 }

.gitignore

@@ -39,3 +39,8 @@ coverage
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity

.postcssrc.yml

@@ -1,3 +1,3 @@
 plugins:
-  postcss-smart-import: {}
+  postcss-import: {}
   postcss-cssnext: {}

Gemfile

@@ -64,7 +64,7 @@ gem 'maildown'
 # JavaScript #
 ##############
 # Webpacker for the npm ecosystem
-gem 'webpacker', '~> 3.0'
+gem 'webpacker', '~> 3.5'
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 gem 'jquery-ui-rails'

Gemfile.lock

@@ -208,7 +208,7 @@ GEM
       rack (>= 0.4)
     rack-protection (2.0.4)
       rack
-    rack-proxy (0.6.2)
+    rack-proxy (0.6.5)
       rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
@@ -359,7 +359,7 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker (3.0.2)
+    webpacker (3.5.5)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -425,7 +425,7 @@ DEPENDENCIES
   turbolinks
   uglifier (>= 1.3.0)
   web-console
-  webpacker (~> 3.0)
+  webpacker (~> 3.5)
 
 RUBY VERSION
    ruby 2.5.0p0

Procfile.dev

@@ -1,2 +1,3 @@
 web: bin/rails server -p 5000
+webpack: bin/webpack-dev-server
 sidekiq: bundle exec sidekiq -c 1

app/assets/javascripts/application.js

@@ -18,6 +18,7 @@
 //= require jquery-ui/widgets/droppable
 //= require jquery-ui/widgets/tabs
 //= require jquery-ui/widgets/selectable
+//= require activestorage
 //= require turbolinks
 //= require best_in_place
 //= require_tree .

app/assets/stylesheets/direct_uploads.scss

@@ -0,0 +1,39 @@
+/* direct_uploads.css */
+
+.direct-upload {
+  display: inline-block;
+  position: relative;
+  padding: 2px 4px;
+  margin: 0 3px 3px 0;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 13px;
+}
+
+.direct-upload--pending {
+  opacity: 0.6;
+}
+
+.direct-upload__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  opacity: 0.2;
+  background: #0076ff;
+  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
+  transform: translate3d(0, 0, 0);
+}
+
+.direct-upload--complete .direct-upload__progress {
+  opacity: 0.4;
+}
+
+.direct-upload--error {
+  border-color: red;
+}
+
+input[type=file][data-direct-upload-url][disabled] {
+  display: none;
+}