Skip to content

Commit 222ed06

Browse files
dalvarez2596dalvarez2596
committed
Update trix editor
1 parent 62e6b53 commit 222ed06

File tree

4 files changed

+135
-6
lines changed

4 files changed

+135
-6
lines changed

‎app/javascript/controllers/trix_controller.js

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
3+
const TOOLBAR_ICONS = [
4+
{
5+
"current-icon-class": ".trix-button--icon-bold",
6+
"custom-icon": "<i class='fa-solid fa-bold'></i>",
7+
},
8+
{
9+
"current-icon-class": ".trix-button--icon-italic",
10+
"custom-icon": "<i class='fa-solid fa-italic'></i>",
11+
},
12+
{
13+
"current-icon-class": ".trix-button--icon-strike",
14+
"custom-icon": "<i class='fa-solid fa-strikethrough'></i>",
15+
},
16+
{
17+
"current-icon-class": ".trix-button--icon-link",
18+
"custom-icon": "<i class='fa-solid fa-link'></i>",
19+
},
20+
{
21+
"current-icon-class": ".trix-button--icon-heading-1",
22+
"custom-icon": "<i class='fa-solid fa-heading'></i>",
23+
},
24+
{
25+
"current-icon-class": ".trix-button--icon-quote",
26+
"custom-icon": "<i class='fa-solid fa-quote-right'></i>",
27+
},
28+
{
29+
"current-icon-class": ".trix-button--icon-code",
30+
"custom-icon": "<i class='fa-solid fa-code'></i>",
31+
},
32+
{
33+
"current-icon-class": ".trix-button--icon-bullet-list",
34+
"custom-icon": "<i class='fa-solid fa-list-ul'></i>",
35+
},
36+
{
37+
"current-icon-class": ".trix-button--icon-number-list",
38+
"custom-icon": "<i class='fa-solid fa-list-ol'></i>",
39+
},
40+
// {
41+
// "current-icon-class": ".trix-button--icon-decrease-nesting-level",
42+
// "custom-icon": "<i class='fa-solid fa-bold'></i>",
43+
// },
44+
// {
45+
// "current-icon-class": ".trix-button--icon-increase-nesting-level",
46+
// "custom-icon": "<i class='fa-solid fa-bold'></i>",
47+
// },
48+
{
49+
"current-icon-class": ".trix-button--icon-undo",
50+
"custom-icon": "<i class='fa-solid fa-rotate-left'></i>",
51+
},
52+
{
53+
"current-icon-class": ".trix-button--icon-redo",
54+
"custom-icon": "<i class='fa-solid fa-rotate-right'></i>",
55+
},
56+
{
57+
"current-icon-class": ".trix-button--icon-attach",
58+
"custom-icon": "<i class='fa-solid fa-paperclip'></i>",
59+
},
60+
];
61+
62+
export default class extends Controller {
63+
connect() {
64+
addEventListener(
65+
"trix-initialize",
66+
this.initializeTrixCustomization.bind(this),
67+
true
68+
);
69+
addEventListener("trix-file-accept", this.preventFromUpload.bind(this));
70+
}
71+
initializeTrixCustomization(event) {
72+
// the code from bot could be use to add a new element to the view to underline.
73+
// Trix.config.textAttributes.underline = {
74+
// tagName: "u",
75+
// style: { textDecoration: "underline" },
76+
// inheritable: true,
77+
// parser: function (element) {
78+
// let style = window.getComputedStyle(element);
79+
// return style.textDecoration === "underline";
80+
// },
81+
// };
82+
// let underlineElement = document.createElement("button");
83+
// underlineElement.setAttribute("type", "button");
84+
// underlineElement.setAttribute("data-trix-attribute", "underline");
85+
// underlineElement.setAttribute("data-trix-key", "u");
86+
// underlineElement.setAttribute("tabindex", -1);
87+
// underlineElement.setAttribute("title", "undeline");
88+
// underlineElement.classList.add(
89+
// "trix-button",
90+
// "trix-button--icon-underline"
91+
// );
92+
// underlineElement.innerHTML = "U";
93+
let trixToolbar = document.querySelector(".trix-button-row");
94+
// document
95+
// .querySelector(".trix-button-group--text-tools")
96+
// .appendChild(underlineElement);
97+
98+
// This was use to iterate over clases and remove buttons
99+
// TOOLBAR_ICONS.forEach((cls) => {
100+
// document.querySelector(cls).remove();
101+
// });
102+
//First we remove the icons from default and use a custom ones from fontawesome
103+
TOOLBAR_ICONS.forEach((icon) => {
104+
let trix_button = trixToolbar.querySelector(icon["current-icon-class"]);
105+
trix_button.classList.remove("trix-button--icon");
106+
trix_button.innerHTML = icon["custom-icon"];
107+
});
108+
trixToolbar
109+
.querySelector(".trix-button--icon-decrease-nesting-level")
110+
.remove();
111+
trixToolbar
112+
.querySelector(".trix-button--icon-increase-nesting-level")
113+
.remove();
114+
// document.querySelector(".trix-button-group--file-tools").remove();
115+
}
116+
117+
preventFromUpload(event) {
118+
event.preventDefault();
119+
alert("File attachment not supported!");
120+
}
121+
}

‎app/models/course.rb

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
class Course < ApplicationRecord
22
validates :title, :short_description, :language, :price, :level, presence: true
33
validates :description, presence: true, length: { minimum: 5 }
4-
validates :title, uniqueness: true
4+
validates :short_description, length: { maximum: 300 }
5+
validates :title, uniqueness: true, length: { maximum: 70 }
6+
validates :price, numericality: { greater_than_or_equal_to: 0 }
7+
58
belongs_to :user, counter_cache: true
69
# User.find_each{ |user| User.reset_counters(user.id, :courses)}
710

811
has_one_attached :avatar
9-
validates :avatar, attached: true, content_type: [ "image/png", "image/jpeg", "image/jpg" ], size: { less_than: 500.kilobytes, message: "size should be under 500 kilobytes" }
12+
validates :avatar, presence: true,
13+
content_type: [ "image/png", "image/jpeg", "image/jpg" ],
14+
size: { less_than: 500.kilobytes, message: "size should be under 500 kilobytes" }
15+
# validates :avatar, attached: true, content_type: [ "image/png", "image/jpeg", "image/jpg" ], size: { less_than: 500.kilobytes, message: "size should be under 500 kilobytes" }
1016

1117

1218
scope :latest, -> { limit(4).order(created_at: :desc) }

‎app/models/lesson.rb

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ class Lesson < ApplicationRecord
66
has_many :user_lessons, dependent: :destroy
77
# Course.find_each{ |course| Course.reset_counters(course.id, :lessons)}
88
validates :title, :content, :course, presence: true
9+
validates :title, uniqueness:true, length: { maximum: 70 }
910

1011
has_rich_text :content
1112

‎app/views/courses/_form.html.haml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
.form-inputs
77
= f.input :title
8-
= f.label :avatar
8+
-# = f.label :avatar
99
.row
1010
- if @course.avatar.attached? && @course.avatar.persisted?
1111
= image_tag @course.avatar, width: "200px"
@@ -15,11 +15,12 @@
1515
.row
1616
= @course.avatar.filename
1717
.row
18-
= f.file_field :avatar
19-
%small= f.error :avatar, class: "text-danger"
18+
-# = f.file_field :avatar
19+
-# %small= f.error :avatar, class: "text-danger"
20+
= f.input :avatar
2021
.row
2122
= f.label :description
22-
= f.rich_text_area :description
23+
= f.rich_text_area :description, data: {controller: "trix"}
2324
%small= f.error :description, class: "text-danger"
2425
= f.input :short_description
2526
= f.input :language, collection: Course.languages, include_blank: true

0 commit comments

Comments
 (0)