From 8a5068866846528ca616b4c8ade5fc14af419a5c Mon Sep 17 00:00:00 2001 From: Oleh Saienko Date: Fri, 9 Sep 2022 17:32:37 +0300 Subject: [PATCH] add trix reach text editor: rails action_text:install --- app/assets/stylesheets/actiontext.scss | 37 ++++++++++++++++ app/javascript/packs/application.js | 3 ++ app/javascript/stylesheets/application.scss | 2 +- app/models/course.rb | 1 + app/views/active_storage/blobs/_blob.html.erb | 14 +++++++ app/views/courses/_form.html.haml | 3 +- ...te_active_storage_tables.active_storage.rb | 36 ++++++++++++++++ ...0_create_action_text_tables.action_text.rb | 14 +++++++ db/schema.rb | 42 ++++++++++++++++++- package.json | 2 + test/fixtures/action_text/rich_texts.yml | 4 ++ yarn.lock | 12 ++++++ 12 files changed, 167 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/actiontext.scss create mode 100644 app/views/active_storage/blobs/_blob.html.erb create mode 100644 db/migrate/20220909135649_create_active_storage_tables.active_storage.rb create mode 100644 db/migrate/20220909135650_create_action_text_tables.action_text.rb create mode 100644 test/fixtures/action_text/rich_texts.yml diff --git a/app/assets/stylesheets/actiontext.scss b/app/assets/stylesheets/actiontext.scss new file mode 100644 index 0000000..3793a93 --- /dev/null +++ b/app/assets/stylesheets/actiontext.scss @@ -0,0 +1,37 @@ +// +// 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 +@import "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/javascript/packs/application.js b/app/javascript/packs/application.js index 35df946..286199a 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -17,3 +17,6 @@ import "@fortawesome/fontawesome-free/css/all" Rails.start() Turbolinks.start() ActiveStorage.start() + +require("trix") +require("@rails/actiontext") diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index 8b13789..01a2e4d 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -1 +1 @@ - +@import "app/assets/stylesheets/actiontext.scss"; diff --git a/app/models/course.rb b/app/models/course.rb index e3b5482..655bf36 100644 --- a/app/models/course.rb +++ b/app/models/course.rb @@ -4,4 +4,5 @@ class Course < ApplicationRecord def to_s title end + has_rich_text :description end diff --git a/app/views/active_storage/blobs/_blob.html.erb b/app/views/active_storage/blobs/_blob.html.erb new file mode 100644 index 0000000..49ba357 --- /dev/null +++ b/app/views/active_storage/blobs/_blob.html.erb @@ -0,0 +1,14 @@ +
attachment--<%= blob.filename.extension %>"> + <% if blob.representable? %> + <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %> + <% end %> + +
+ <% if caption = blob.try(:caption) %> + <%= caption %> + <% else %> + <%= blob.filename %> + <%= number_to_human_size blob.byte_size %> + <% end %> +
+
diff --git a/app/views/courses/_form.html.haml b/app/views/courses/_form.html.haml index a6f541e..a74328f 100644 --- a/app/views/courses/_form.html.haml +++ b/app/views/courses/_form.html.haml @@ -5,7 +5,8 @@ .form-inputs = f.input :title - = f.input :description + = f.label :description + = f.rich_text_area :description .form-actions = f.button :submit diff --git a/db/migrate/20220909135649_create_active_storage_tables.active_storage.rb b/db/migrate/20220909135649_create_active_storage_tables.active_storage.rb new file mode 100644 index 0000000..8779826 --- /dev/null +++ b/db/migrate/20220909135649_create_active_storage_tables.active_storage.rb @@ -0,0 +1,36 @@ +# This migration comes from active_storage (originally 20170806125915) +class CreateActiveStorageTables < ActiveRecord::Migration[5.2] + def change + create_table :active_storage_blobs do |t| + t.string :key, null: false + t.string :filename, null: false + t.string :content_type + t.text :metadata + t.string :service_name, null: false + t.bigint :byte_size, null: false + t.string :checksum, null: false + t.datetime :created_at, null: false + + t.index [ :key ], unique: true + end + + create_table :active_storage_attachments do |t| + t.string :name, null: false + t.references :record, null: false, polymorphic: true, index: false + t.references :blob, null: false + + t.datetime :created_at, null: false + + t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true + t.foreign_key :active_storage_blobs, column: :blob_id + end + + create_table :active_storage_variant_records do |t| + t.belongs_to :blob, null: false, index: false + t.string :variation_digest, null: false + + t.index %i[ blob_id variation_digest ], name: "index_active_storage_variant_records_uniqueness", unique: true + t.foreign_key :active_storage_blobs, column: :blob_id + end + end +end diff --git a/db/migrate/20220909135650_create_action_text_tables.action_text.rb b/db/migrate/20220909135650_create_action_text_tables.action_text.rb new file mode 100644 index 0000000..5dfbd15 --- /dev/null +++ b/db/migrate/20220909135650_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 diff --git a/db/schema.rb b/db/schema.rb index 70785bc..30883ec 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,11 +10,49 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema.define(version: 2022_09_08_130319) do +ActiveRecord::Schema.define(version: 2022_09_09_135650) do # These are extensions that must be enabled in order to support this database enable_extension "plpgsql" + create_table "action_text_rich_texts", force: :cascade do |t| + t.string "name", null: false + t.text "body" + t.string "record_type", null: false + t.bigint "record_id", null: false + t.datetime "created_at", precision: 6, null: false + t.datetime "updated_at", precision: 6, null: false + t.index ["record_type", "record_id", "name"], name: "index_action_text_rich_texts_uniqueness", unique: true + end + + create_table "active_storage_attachments", force: :cascade do |t| + t.string "name", null: false + t.string "record_type", null: false + t.bigint "record_id", null: false + t.bigint "blob_id", null: false + t.datetime "created_at", null: false + t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id" + t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true + end + + create_table "active_storage_blobs", force: :cascade do |t| + t.string "key", null: false + t.string "filename", null: false + t.string "content_type" + t.text "metadata" + t.string "service_name", null: false + t.bigint "byte_size", null: false + t.string "checksum", null: false + t.datetime "created_at", null: false + t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true + end + + create_table "active_storage_variant_records", force: :cascade do |t| + t.bigint "blob_id", null: false + t.string "variation_digest", null: false + t.index ["blob_id", "variation_digest"], name: "index_active_storage_variant_records_uniqueness", unique: true + end + create_table "courses", force: :cascade do |t| t.string "title" t.text "description" @@ -22,4 +60,6 @@ t.datetime "updated_at", precision: 6, null: false end + add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id" + add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id" end diff --git a/package.json b/package.json index 33eb888..d91616b 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,13 @@ "@fortawesome/fontawesome-free": "^6.2.0", "@popperjs/core": "^2.11.6", "@rails/actioncable": "^6.0.0", + "@rails/actiontext": "^6.1.6-1", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "5.4.3", "bootstrap": "^5.2.1", "jquery": "^3.6.1", + "trix": "^1.2.0", "turbolinks": "^5.2.0", "webpack": "^4.46.0", "webpack-cli": "^3.3.12" diff --git a/test/fixtures/action_text/rich_texts.yml b/test/fixtures/action_text/rich_texts.yml new file mode 100644 index 0000000..8b371ea --- /dev/null +++ b/test/fixtures/action_text/rich_texts.yml @@ -0,0 +1,4 @@ +# one: +# record: name_of_fixture (ClassOfFixture) +# name: content +# body:

In a million stars!

diff --git a/yarn.lock b/yarn.lock index d9dffcb..3d018e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1004,6 +1004,13 @@ resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.6.tgz#ed0e926112fd476c3ac3c52bd18d39d84624cd62" integrity sha512-gD8zYT8u8AA4wulIW7BN4x6tPSR1Ldt7jXDs3ntBKdgtvqiohBJFEKn8YJSDr7vrCpM/hYuEJxYl/4oJvvENfA== +"@rails/actiontext@^6.1.6-1": + version "6.1.6" + resolved "https://registry.yarnpkg.com/@rails/actiontext/-/actiontext-6.1.6.tgz#1e643621b16629d51923cbd5d8cb49358de9aed2" + integrity sha512-IK47RN1Cr6Ga5Xmhdq8Skhd2YrmQJzKmT0Q3GGbZAfM8b4FLZuXDOtA4WA/z6no8ghZd0LtmlC4Y10e5fCvFZQ== + dependencies: + "@rails/activestorage" "^6.0.0" + "@rails/activestorage@^6.0.0": version "6.1.6" resolved "https://registry.yarnpkg.com/@rails/activestorage/-/activestorage-6.1.6.tgz#d4ffd5327af8e85dee9f9a4867a7cd64d644e26f" @@ -6636,6 +6643,11 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== +trix@^1.2.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/trix/-/trix-1.3.1.tgz#ccce8d9e72bf0fe70c8c019ff558c70266f8d857" + integrity sha512-BbH6mb6gk+AV4f2as38mP6Ucc1LE3OD6XxkZnAgPIduWXYtvg2mI3cZhIZSLqmMh9OITEpOBCCk88IVmyjU7bA== + ts-pnp@^1.1.6: version "1.2.0" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"