Main UI enhancement

app/components/analysis_form_component/analysis_form_component.html.erb

@@ -11,13 +11,13 @@
 
           <div class="row">
             <div class="col-sm-11 p-2">
-              <%= doctrine_form.text_area :content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
+            <trix-editor id="content" placeholder="Doctrine Content"> </trix-editor>
             </div>
           </div>
 
           <div class="row">
             <div class="col-sm-11 p-2">
-              <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button
+              <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
             </div>
           </div>
 

app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb

@@ -31,7 +31,7 @@
         <div class="row">
           <div class="col-sm-12 p-2">
             <%= label_tag :editor_notes %>
-            <%= text_area_tag :editor_notes, annotation.editor_notes, class: "form-control i-ckeditor" %>
+            <trix-editor id="editor_notes" placeholder="Editor Notes"> <%= editor_notes %> </trix-editor>
           </div>
         </div>
       </div>

app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb

@@ -1,11 +1,12 @@
 <div class="modal fade" id="doctrineModal" tabindex="-1" aria-labelledby="doctrineModal" aria-hidden="true">
-  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+  <%= form_tag(opts[:form_url], method: opts[:form_method]) do %>
-    <div class="modal-content">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
-      <div class="modal-header">
+      <div class="modal-content">
-        <h5 class="modal-title"> <%= opts[:form_method].eql?(:post) ? "New Doctrine" : "Update Doctrine" %> </h5>
+        <div class="modal-header">
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <h5 class="modal-title"> <%= opts[:form_method].eql?(:post) ? "New Doctrine" : "Update Doctrine" %> </h5>
-      </div>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      <%= form_tag(opts[:form_url], method: opts[:form_method]) do %>
+        </div>
+
         <div class="modal-body">
           <div class="row">
             <div class="col-sm-12 p-2">
@@ -17,7 +18,7 @@
           <div class="row">
             <div class="col-sm-12 p-2">
               <strong> <%= label_tag :content %> </strong>
-              <%= text_area_tag :content, doctrine.content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
+              <trix-editor id="content" placeholder="Doctrine Content"> <%= doctrine.content %> </trix-editor>
             </div>
           </div>
         </div>
@@ -26,7 +27,7 @@
           <button type="submit" class="btn btn-primary">Save</button>
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
         </div>
-      <% end %>
+      </div>
     </div>
-  </div>
+  <% end %>
 </div>

app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb

@@ -22,7 +22,7 @@
       <div class="row">
         <div class="col-sm-12 p-2">
           <strong> <%= label_tag :content %> </strong>
-          <%= text_area_tag :content, content, class: "i-ckeditor form-control", placeholder: "Doctrine" %>
+          <trix-editor id="content" placeholder="Doctrine Content"> <%= content %> </trix-editor>
         </div>
       </div>
     <% end %>

app/components/document_index_table_component/document_index_table_component.html.erb

@@ -42,7 +42,7 @@
                 <div class="row">
                   <div class="col-sm-12 p-2">
                     <%= label_tag :editor_notes %>
-                    <%= text_area_tag :editor_notes, params[:editors_note], class: "form-control i-ckeditor" %>
+                    <trix-editor id="editor_notes" placeholder="Doctrine Content"> <%= params[:editor_notes] %> </trix-editor>
                   </div>
                 </div>
               </div>

app/javascript/packs/application.js

@@ -16,7 +16,9 @@ import "@fortawesome/fontawesome-free/js/all.min";
 import "@fortawesome/fontawesome-free/css/all.min";
 import "moment";
 import "select2";
-import "chosen-js"
+import "chosen-js";
+import 'trix/dist/trix.css';
+import 'trix/dist/trix.js';
 
 window.jQuery = $;
 window.$ = $;
@@ -46,6 +48,4 @@ $(document).ready(function () {
       window.open($href);
     }
   })
-
-  $(".i-chosen").chosen({width: "100%"});
 });

package.json

@@ -18,6 +18,7 @@
     "select2": "^4.1.0-rc.0",
     "stimulus": "^3.0.1",
     "stimulus_reflex": "3.4.1",
+    "trix": "^2.0.0-alpha.0",
     "turbolinks": "^5.2.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"

yarn.lock

@@ -6592,6 +6592,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+trix@^2.0.0-alpha.0:
+  version "2.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/trix/-/trix-2.0.0-alpha.0.tgz#dc47e935710d5c1dbcdebe252aed72b9341de247"
+  integrity sha512-JE2iiWE4rimzRv6Um87flkGAv4lsF6tin0XJ7yFFBdnFYjUVwMmLW7Z61kQyNorKU2XmhWMwiEEvqru9EcVjHQ==
+
 ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"