adição do Action_text_overview

Gemfile

@@ -34,7 +34,7 @@ gem "tzinfo-data", platforms: %i[ windows jruby ]
 gem "bootsnap", require: false
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
-# gem "image_processing", "~> 1.2"
+gem "image_processing", "~> 1.2"
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem

Gemfile.lock

@@ -107,10 +107,14 @@ GEM
       warden (~> 1.2.3)
     drb (2.2.1)
     erubi (1.13.0)
+    ffi (1.17.0-x64-mingw-ucrt)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.2)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
     importmap-rails (2.0.1)
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
@@ -135,6 +139,7 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
+    mini_magick (4.13.1)
     mini_mime (1.1.5)
     minitest (5.25.1)
     msgpack (1.7.2)
@@ -243,6 +248,8 @@ GEM
       rubocop-performance
       rubocop-rails
     ruby-progressbar (1.13.0)
+    ruby-vips (2.2.1)
+      ffi (~> 1.12)
     rubyzip (2.3.2)
     securerandom (0.3.1)
     selenium-webdriver (4.24.0)
@@ -304,6 +311,7 @@ DEPENDENCIES
   capybara
   debug
   devise
+  image_processing (~> 1.2)
   importmap-rails
   jbuilder
   pg (~> 1.1)

app/assets/stylesheets/actiontext.css

@@ -0,0 +1,32 @@
+/*
+ * 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
+*/
+
+/*
+ * 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,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+

app/assets/stylesheets/application.css

@@ -1,15 +1,46 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+@import 'actiontext.css';
+
+/* Estilizando o fundo e o texto do editor */
+trix-editor {
+    background-color: #1e1e1e;
+    /* Cor de fundo escura */
+    color: #d4d4d4;
+    /* Cor do texto clara */
+}
+
+/* Estilizando a barra de ferramentas */
+trix-toolbar {
+    border: none;
+    /* Remover a borda se necessário */
+}
+
+/* Estilizando os ícones do FontAwesome */
+trix-toolbar .trix-button-icon i {
+    color: #d4d4d4;
+    /* Cor dos ícones */
+    font-size: 1rem;
+    /* Ajuste o tamanho se necessário */
+}
+
+trix-toolbar .trix-button-group button {
+    background-color: whitesmoke;
+}
+
+trix-toolbar .trix-button--icon-bullet-list {
+    display: none !important;
+}
+
+/* Ocultar o botão de lista numerada (numbers) */
+trix-toolbar .trix-button--icon-number-list {
+    display: none !important;
+}
+
+/* Ocultar o botão de diminuir nível (decrease level) */
+trix-toolbar .trix-button--icon-decrease-indent {
+    display: none !important;
+}
+
+/* Ocultar o botão de aumentar nível (increase level) */
+trix-toolbar .trix-button--icon-increase-indent {
+    display: none !important;
+}

app/assets/stylesheets/application.tailwind.css

@@ -2,12 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-/*
 
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/

app/javascript/application.js

@@ -1,6 +1,8 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import "trix"
+import "@rails/actiontext"
 
 document.addEventListener("turbo:load", function () {
     const toggleButton = document.querySelector("[data-collapse-toggle]");
@@ -20,4 +22,3 @@ document.addEventListener("turbo:load", function () {
       });
     }
 });
-

app/models/article.rb

@@ -1,4 +1,5 @@
 class Article < ApplicationRecord
+  has_rich_text :content
   CATEGORIES = ['Front-end', 'Back-end', 'Full-stack', 'Desenvolvimento Mobile', 'Desenvolvimento Web', 'Ciência de Dados']
 
   belongs_to :user

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

@@ -0,0 +1,15 @@
+<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 %>
+      <span class="attachment__name"><%= blob.filename %></span>
+      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+    <% end %>
+  </figcaption>
+</figure>
+

app/views/articles/_form.html.erb

@@ -15,10 +15,14 @@
     <%= form.text_field :title, class: "block shadow-sm rounded-md border border-zinc-600 bg-zinc-800 text-white outline-none px-3 py-2 mt-2 w-full focus:ring-2 focus:ring-lime-500" %>
   </div>
 
-  <div class="my-5">
-    <%= form.label :content, 'Conteúdo', class: "block text-zinc-200 font-medium" %>
-    <%= form.text_area :content, rows: 10, class: "block shadow-sm rounded-md border border-zinc-600 bg-zinc-800 text-white outline-none px-3 py-2 mt-2 w-full focus:ring-2 focus:ring-lime-500" %>
-  </div>
+<div class="my-5">
+  <%= form.label :content, 'Conteúdo', class: "block text-zinc-200 font-medium mb-2" %>
+  <%= form.rich_text_area :content, 
+      rows: 10, 
+      class: "block w-full px-4 py-3 mt-2 text-zinc-200 bg-zinc-800 border border-zinc-600 rounded-md shadow-sm focus:ring focus:ring-lime-500 focus:border-lime-500 
+      focus:outline-none resize-none" %>
+</div>
+
 
   <div class="my-5">
     <%= form.label :category, 'categoria', class: "block text-zinc-200 font-medium" %>

app/views/articles/index.html.erb

@@ -1,7 +1,4 @@
 <div class="w-3/4 text-white h-screen ml-5">
-  <% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-  <% end %>
 
   <% content_for :title, "Articles" %>
 

app/views/layouts/action_text/contents/_content.html.erb

@@ -0,0 +1,3 @@
+<div class="trix-content">
+  <%= yield -%>
+</div>

app/views/layouts/application.html.erb

@@ -25,7 +25,7 @@
     <main class="bg-gray-950 text-white">
       <%= render 'layouts/nav' %>
       <% if notice.present? %>
-        <p class="py-2 px-3 bg-green-600 text-green-100 font-medium rounded-lg mb-5" id="notice"><%= notice %></p>
+        <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
       <% end %>
       <%= yield %>
       <%= render 'layouts/footer' %>

app/views/quiz/question.html.erb

@@ -11,7 +11,7 @@
     <%= form_with url: quiz_answer_path, method: :post, class: "space-y-4" do %>
       <% @question_data[:options].each do |option| %>
         <div class="flex items-center">
-          <%= radio_button_tag :option, option, false, class: "form-radio h-4 w-4 text-lime-600 transition duration-150 ease-in-out" %>
+          <%= radio_button_tag :option, option, false, class: "form-radio h-4 w-4 text-lime-600 transition duration-150 ease-in-out focus:ring focus:ring-lime-500 focus:border-lime-500" %>
           <%= label_tag :option, option, class: "ml-2 text-gray-50" %>
         </div>
       <% end %>

config/importmap.rb

@@ -5,3 +5,5 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "trix"
+pin "@rails/actiontext", to: "actiontext.esm.js"

db/migrate/20240904084217_create_active_storage_tables.active_storage.rb

@@ -0,0 +1,57 @@
+# This migration comes from active_storage (originally 20170806125915)
+class CreateActiveStorageTables < ActiveRecord::Migration[7.0]
+  def change
+    # Use Active Record's configured type for primary and foreign keys
+    primary_key_type, foreign_key_type = primary_and_foreign_key_types
+
+    create_table :active_storage_blobs, id: primary_key_type 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
+
+      if connection.supports_datetime_with_precision?
+        t.datetime :created_at, precision: 6, null: false
+      else
+        t.datetime :created_at, null: false
+      end
+
+      t.index [ :key ], unique: true
+    end
+
+    create_table :active_storage_attachments, id: primary_key_type do |t|
+      t.string     :name,     null: false
+      t.references :record,   null: false, polymorphic: true, index: false, type: foreign_key_type
+      t.references :blob,     null: false, type: foreign_key_type
+
+      if connection.supports_datetime_with_precision?
+        t.datetime :created_at, precision: 6, null: false
+      else
+        t.datetime :created_at, null: false
+      end
+
+      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, id: primary_key_type do |t|
+      t.belongs_to :blob, null: false, index: false, type: foreign_key_type
+      t.string :variation_digest, null: false
+
+      t.index [ :blob_id, :variation_digest ], name: :index_active_storage_variant_records_uniqueness, unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+  end
+
+  private
+    def primary_and_foreign_key_types
+      config = Rails.configuration.generators
+      setting = config.options[config.orm][:primary_key_type]
+      primary_key_type = setting || :primary_key
+      foreign_key_type = setting || :bigint
+      [ primary_key_type, foreign_key_type ]
+    end
+end

db/migrate/20240904084218_create_action_text_tables.action_text.rb

@@ -0,0 +1,26 @@
+# This migration comes from action_text (originally 20180528164100)
+class CreateActionTextTables < ActiveRecord::Migration[6.0]
+  def change
+    # Use Active Record's configured type for primary and foreign keys
+    primary_key_type, foreign_key_type = primary_and_foreign_key_types
+
+    create_table :action_text_rich_texts, id: primary_key_type do |t|
+      t.string     :name, null: false
+      t.text       :body, size: :long
+      t.references :record, null: false, polymorphic: true, index: false, type: foreign_key_type
+
+      t.timestamps
+
+      t.index [ :record_type, :record_id, :name ], name: "index_action_text_rich_texts_uniqueness", unique: true
+    end
+  end
+
+  private
+    def primary_and_foreign_key_types
+      config = Rails.configuration.generators
+      setting = config.options[config.orm][:primary_key_type]
+      primary_key_type = setting || :primary_key
+      foreign_key_type = setting || :bigint
+      [ primary_key_type, foreign_key_type ]
+    end
+end

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>