add Underline button to the trix editor

app/assets/javascripts/trix.js

@@ -1,4 +1,30 @@
 // Do not allow file attachments in rich text content
 addEventListener("trix-file-accept", function(event) {
   event.preventDefault();
-})
+});
+
+Trix.config.textAttributes.underline = {
+    style: { "textDecoration": "underline" },
+    inheritable: true,
+    parser: function (element) {
+        var style = window.getComputedStyle(element);
+        return style.textDecoration === "underline";
+    }
+}
+
+document.addEventListener('trix-initialize', function (e) {
+    const trix = e.target;
+    const toolBar = trix.toolbarElement;
+
+    // // Creation of the button
+    const button = document.createElement("button");
+    button.setAttribute("type", "button");
+    button.setAttribute("class", "trix-button trix-button--icon trix-button--icon-underline");
+    button.setAttribute("data-trix-attribute", "underline");
+    button.setAttribute("title", "underline");
+    button.setAttribute("tabindex", "-1");
+    button.innerText = "U";
+
+    // Attachment of the button to the toolBar
+    toolBar.querySelector('.trix-button-group--text-tools').appendChild(button);
+});

app/assets/stylesheets/application.scss

@@ -461,3 +461,10 @@ a[data-behavior=seekable-timecode] {
   border-color: transparent;
   border-bottom: 3px solid #ff0000;
 }
+
+//Trix underline style
+trix-toolbar {
+  .trix-button--icon-underline::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E");
+  }
+}

spec/features/user_manages_contract_templates_spec.rb

@@ -386,6 +386,13 @@ RSpec.feature 'User manages contract templates', type: :feature do
     expect(ct.signature_legal_text.id).not_to eq ContractTemplate.last.signature_legal_text.id
   end
 
+  scenario 'trix editor has underline button', js: true do
+    visit new_project_contract_template_path(project)
+
+    select 'Appearance Release', from: 'Release type'
+    expect(page).to have_selector("button[data-trix-attribute='underline']")
+  end
+
   context 'When the user is associate' do
     let(:current_user) { create(:user, :associate) }