From 3eb03168f24cdb4c3bc995a81302e4400092ed05 Mon Sep 17 00:00:00 2001
From: Bilal <bilal@saburly.com>
Date: Mon, 7 Sep 2020 18:09:45 +0300
Subject: [PATCH] add Underline button to the trix editor

---
 app/assets/javascripts/trix.js                | 28 ++++++++++++++++++-
 app/assets/stylesheets/application.scss       |  7 +++++
 .../user_manages_contract_templates_spec.rb   |  7 +++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/trix.js b/app/assets/javascripts/trix.js
index 6c9e9c7..e34afdd 100644
--- a/app/assets/javascripts/trix.js
+++ b/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);
+});
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 87ffb26..23289e9 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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");
+  }
+}
\ No newline at end of file
diff --git a/spec/features/user_manages_contract_templates_spec.rb b/spec/features/user_manages_contract_templates_spec.rb
index 0c9e2c4..305bcfd 100644
--- a/spec/features/user_manages_contract_templates_spec.rb
+++ b/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) }