Integrate marksmith markdown editor

src/api/Gemfile

@@ -123,6 +123,9 @@ gem 'stringio', '3.1.2'
 # OpenStruct implementation (no longer a default gem from ruby > 3.4.0)
 gem 'ostruct'
 
+# For markdown editor
+gem 'marksmith'
+
 group :development, :production do
   # to have the delayed job daemon
   gem 'daemons'

src/api/Gemfile.lock

@@ -285,6 +285,8 @@ GEM
       net-pop
       net-smtp
     marcel (1.0.4)
+    marksmith (0.4.7)
+      activesupport
     matrix (0.4.3)
     method_source (1.1.0)
     middleware (0.1.0)
@@ -643,6 +645,7 @@ DEPENDENCIES
   kaminari
   launchy
   lograge
+  marksmith
   minitest
   minitest-ci
   minitest-fail-fast

src/api/app/assets/javascripts/webui/canned_responses.js

@@ -12,5 +12,6 @@ function setupCannedResponses() { // jshint ignore:line
     }
     // we have to enable the submit button for the comments form
     $(e.target).closest('[class*="-comment-form"]').find('input[type="submit"]').prop('disabled', false);
+    $('.decision-add-comment').prop('disabled', false);
   });
 }

src/api/app/assets/javascripts/webui/color_themes.js

@@ -3,6 +3,12 @@
 
   const setTheme = theme => {
     document.documentElement.dataset.bsTheme = theme;
+
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
   };
 
   const getTheme = () => {

src/api/app/assets/javascripts/webui/comment.js

@@ -32,6 +32,7 @@ function handlingCommentEvents() {
   // Disable submit button if textarea is empty and enable otherwise
   $(document).on('input', '.write-and-preview textarea', function(e) {
     validateForm(e);
+    $('.decision-add-comment').prop('disabled', false);
     resizeTextarea(this);
   });
 

src/api/app/components/request_decision_component.html.haml

@@ -1,5 +1,5 @@
 .request-decision.mt-n1
-  = form_with(url: request_changerequest_path, html: { id: 'request_handle_form' }, local: true) do |form|
+  = form_with(model: @bs_request.reviews.new, url: request_changerequest_path, html: { id: 'request_handle_form' }, local: true) do |form|
     = hidden_field_tag(:number, @bs_request.number)
     .pb-2{ 'data-canned-controller': '' }
       - if policy(Comment.new(commentable: @bs_request)).locked?
@@ -10,12 +10,13 @@
       - decision_placeholder = "Write your comment or decision...(markdown is only supported for comments, not for decisions)"
       = render WriteAndPreviewComponent.new(form: form, preview_message_url: preview_comments_path, canned_responses_enabled: true,
                                             message_body_param: 'comment[body]',
-                                            text_area_attributes: { object_name: 'reason', id_suffix: 'new_comment',
+                                            text_area_attributes: { object_name: 'reason', id_suffix: 'new_comment', required: true,
                                             placeholder: decision_placeholder})
       .mt-2#decision-buttons-row
         %div
           - if policy(Comment.new(commentable:@bs_request)).create?
-            = submit_tag 'Add comment', class: 'btn btn-outline-primary me-2', data: { disable_with: 'Creating comment...' }, name: 'commented'
+            = submit_tag 'Add comment', class: 'btn btn-outline-primary me-2 decision-add-comment', data: { disable_with: 'Creating comment...' },
+                                        name: 'commented', disabled: true
         %div
           - if policy(@bs_request).revoke_request?
             = submit_tag('Revoke request', name: 'revoked', class: 'btn btn-danger me-2',

src/api/app/components/request_decision_component.rb

@@ -1,4 +1,7 @@
 class RequestDecisionComponent < ApplicationComponent
+  # This is required to help marksmith render the markdown editor
+  delegate :main_app, to: :helpers
+
   def initialize(bs_request:, package_maintainers:, show_project_maintainer_hint:)
     super
 

src/api/app/components/write_and_preview_component.html.haml

@@ -1,23 +1,20 @@
-.card.write-and-preview{ data: { preview_message_url: preview_message_url, message_body_param: message_body_param } }
-  %ul.card-header.nav.nav-tabs.px-3.pt-2.pb-0.disable-link-generation{ role: 'tablist' }
-    %li.nav-item
-      = link_to('Write', "#write_#{text_area_attributes[:id_suffix]}", class: 'nav-link active', data: { 'bs-toggle': 'tab' }, role: 'tab',
-      aria: { controls: 'write-message-tab', selected: 'true' })
-    %li.nav-item
-      = link_to('Preview', "#preview_#{text_area_attributes[:id_suffix]}", class: 'nav-link preview-message-tab',
-      data: { 'bs-toggle': 'tab', preview_message_url: preview_message_url },
-      role: 'tab', aria: { controls: 'preview-message-tab', selected: 'false' })
-  .tab-content.px-3
-    .tab-pane.fade.show.active.my-3{ id: "write_#{text_area_attributes[:id_suffix]}",
-                                     role: 'tabpanel', 'aria-labelledby': 'write-message-tab', 'data-canned-controller': '' }
-      - if Flipper.enabled?(:canned_responses, User.session) && canned_responses_enabled
-        .d-flex.justify-content-end
-          = render CannedResponsesDropdownComponent.new(User.session.canned_responses.where(decision_type: nil).order(:title))
-      ~ form.text_area(text_area_attributes[:object_name], id: "#{text_area_attributes[:id_suffix]}_body",
-        rows: text_area_attributes[:rows], required: text_area_attributes[:required],
-        placeholder: text_area_attributes[:placeholder], class: 'w-100 form-control message-field')
-    .tab-pane.fade{ id: "preview_#{text_area_attributes[:id_suffix]}", role: 'tabpanel', 'aria-labelledby': 'preview-message-tab' }
-      .message-preview.my-3
+%markdown-toolbar.write-and-preview{ id: "write_#{text_area_attributes[:id_suffix]}",
+                                     role: 'tabpanel', 'aria-labelledby': 'write-message-tab',
+                                     'data-canned-controller': '' }
+  - if Flipper.enabled?(:canned_responses, User.session) && canned_responses_enabled
+    .d-flex.justify-content-end
+      = render CannedResponsesDropdownComponent.new(User.session.canned_responses.where(decision_type: nil).order(:title))
+  = form.marksmith(text_area_attributes[:object_name],
+    id: "#{text_area_attributes[:id_suffix]}_body",
+    rows: text_area_attributes[:rows],
+    required: text_area_attributes[:required],
+    placeholder: text_area_attributes[:placeholder],
+    enable_file_uploads: false,
+    upload_url: nil,
+    maxlength: text_area_attributes[:maxlength],
+    class: "w-100 form-control message-field")
+  .tab-pane.fade{ id: "preview_#{text_area_attributes[:id_suffix]}", role: 'tabpanel', 'aria-labelledby': 'preview-message-tab' }
+  .message-preview.my-3
 
 :javascript
   attachPreviewMessageOnCommentBoxes();

src/api/app/controllers/webui/request_controller.rb

@@ -214,7 +214,7 @@ def changerequest
 
     if changestate == 'commented'
 
-      build_new_comment(@bs_request, body: params[:reason])
+      build_new_comment(@bs_request, body: params.dig(:review, :reason))
 
     elsif change_state(changestate, params)
       # TODO: Make this work for each submit action individually
@@ -440,7 +440,7 @@ def change_state(newstate, params)
         newstate: newstate,
         force: true,
         user: User.session.login,
-        comment: params[:reason]
+        comment: params.dig(:review, :reason)
       }
       begin
         request.change_state(opts)

src/api/app/javascript/application.js

@@ -2,5 +2,12 @@
 import "@hotwired/turbo-rails"
 import "src/turbo_error"
 
-// We can't use session drive, since our existing js doesn't expect it
+import { Application } from "@hotwired/stimulus"
+import { MarksmithController, ListContinuationController } from "@avo-hq/marksmith"
+
+// Start Stimulus application
+const application = Application.start()
+application.register("marksmith", MarksmithController)
+application.register("list-continuation", ListContinuationController)
+
 Turbo.session.drive = false

src/api/app/views/layouts/webui/webui.html.haml

@@ -22,6 +22,7 @@
       %meta{ property: 'errbit:host', content: CONFIG['errbit_javascript_host'] }
 
     = stylesheet_link_tag 'webui/application'
+    = stylesheet_link_tag "marksmith"
     = javascript_include_tag 'webui/application'
     = javascript_importmap_tags
 

src/api/app/views/webui/package/new.html.haml

@@ -10,7 +10,7 @@
           .col-12
             %h3= @pagetitle
           .col-12.col-md-9.col-lg-6
-            = form_for(:package, url: packages_url(@project)) do |f|
+            = form_for(@project.packages.new, url: packages_url(@project)) do |f|
               .mb-3
                 = f.label(:name)
                 = render partial: 'webui/shared/required_label_mark'

src/api/app/views/webui/user/_edit_account_form.html.haml

@@ -13,7 +13,11 @@
       %span.badge.text-bg-secondary
         = title.upcase
   .mb-3
-    = f.text_area(:biography, rows: 6, placeholder: 'Biography', maxlength: User::MAX_BIOGRAPHY_LENGTH_ALLOWED, class: 'form-control')
+    = render WriteAndPreviewComponent.new(form: f, preview_message_url: nil, message_body_param: nil,
+                                        text_area_attributes: { rows: 6, placeholder: 'Biography',
+                                        required: false, object_name: :biography,
+                                        maxlength: User::MAX_BIOGRAPHY_LENGTH_ALLOWED})
+
     = f.label(:biography, class: 'd-block text-end') do
       %small.form-text#bio-chars-counter
   .mb-3

src/api/config/importmap.rb

@@ -3,3 +3,5 @@
 pin "application"
 pin_all_from 'app/javascript/src', under: 'src', to: 'src'
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/dist/stimulus.js"
+pin "@avo-hq/marksmith", to: "@avo-hq--marksmith.js" # 0.4.7

src/api/config/initializers/assets.rb

@@ -10,3 +10,7 @@
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 Rails.application.config.assets.precompile += ['webui.js']
+
+# Don't compress css because we use sassc-rails compressor to compress
+# css which does not support tailwind functions
+Rails.application.config.assets.css_compressor = nil

src/api/config/initializers/marksmith.rb

@@ -0,0 +1,5 @@
+Marksmith.configure do |config|
+  config.automatically_mount_engine = true
+  config.mount_path = "/marksmith"
+  config.parser = "redcarpet"
+end

src/api/spec/features/beta/webui/maintenance_workflow_spec.rb

@@ -51,7 +51,7 @@
         login(maintenance_coord_user)
 
         visit request_show_path(bs_request)
-        fill_in('reason', with: 'really? ok')
+        fill_in('review[reason]', with: 'really? ok')
 
         accept_alert do
           click_button('Accept')
@@ -96,7 +96,7 @@
         login(maintenance_coord_user)
 
         visit request_show_path(bs_request)
-        fill_in('reason', with: 'really? ok')
+        fill_in('review[reason]', with: 'really? ok')
 
         accept_alert do
           click_button('Accept')

src/api/spec/features/webui/requests/diff_comments_spec.rb

@@ -32,7 +32,7 @@
 
         click_on "reply_button_of_#{comment.id}"
         within("#reply_for_#{comment.id}_form") do
-          fill_in "reply_for_#{comment.id}_body", with: 'This is a new reply'
+          fill_in "reply_for_#{comment.id}_body-textarea", with: 'This is a new reply'
           click_on 'Add comment'
         end
       end
@@ -61,7 +61,7 @@
         find('a', class: 'line-new-comment').click
         # Wait for comment box to appear
         find_by_id('new_comment_diff_0_n2_form').visible?
-        fill_in 'new_comment_diff_0_n2_body', with: 'My test diff comment'
+        fill_in 'new_comment_diff_0_n2_body-textarea', with: 'My test diff comment'
         find('input[type="submit"]').click
       end
       # Wait for the comment to be created and appear back