Allow limited Markdown in Broadcast Messagesrs-broadcast-markdown

Closes #11853

7 files changed, 47 insertions, 16 deletions

diff --git a/app/assets/javascripts/admin.js.coffee b/app/assets/javascripts/admin.js.coffee
index eb951f71711..b2b8e1b7ffb 100644
--- a/app/assets/javascripts/admin.js.coffee
+++ b/app/assets/javascripts/admin.js.coffee
@@ -12,19 +12,6 @@ class @Admin
       e.preventDefault()
       $('.js-toggle-colors-container').toggle()
 
-    $('input#broadcast_message_color').on 'input', ->
-      previewColor = $(@).val()
-      $('div.broadcast-message-preview').css('background-color', previewColor)
-
-    $('input#broadcast_message_font').on 'input', ->
-      previewColor = $(@).val()
-      $('div.broadcast-message-preview').css('color', previewColor)
-
-    $('textarea#broadcast_message_message').on 'input', ->
-      previewMessage = $(@).val()
-      previewMessage = "Your message here" if previewMessage.trim() == ''
-      $('div.broadcast-message-preview span').text(previewMessage)
-
     $('.log-tabs a').click (e) ->
       e.preventDefault()
       $(this).tab('show')
diff --git a/app/assets/javascripts/broadcast_message.js.coffee b/app/assets/javascripts/broadcast_message.js.coffee
new file mode 100644
index 00000000000..a38a329c4c2
--- /dev/null
+++ b/app/assets/javascripts/broadcast_message.js.coffee
@@ -0,0 +1,22 @@
+$ ->
+  $('input#broadcast_message_color').on 'input', ->
+    previewColor = $(@).val()
+    $('div.broadcast-message-preview').css('background-color', previewColor)
+
+  $('input#broadcast_message_font').on 'input', ->
+    previewColor = $(@).val()
+    $('div.broadcast-message-preview').css('color', previewColor)
+
+  previewPath = $('textarea#broadcast_message_message').data('preview-path')
+
+  $('textarea#broadcast_message_message').on 'input', ->
+    message = $(@).val()
+
+    if message == ''
+      $('.js-broadcast-message-preview').text("Your message here")
+    else
+      $.ajax(
+        url: previewPath
+        type: "POST"
+        data: { broadcast_message: { message: message } }
+      )
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
index 144852e7874..a61161810a3 100644
--- a/app/assets/stylesheets/pages/admin.scss
+++ b/app/assets/stylesheets/pages/admin.scss
@@ -55,6 +55,16 @@
   @extend .alert-warning;
   padding: 10px;
   text-align: center;
+
+  > div, p {
+    display: inline;
+    margin: 0;
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
 }
 
 .broadcast-message-preview {
diff --git a/app/controllers/admin/broadcast_messages_controller.rb b/app/controllers/admin/broadcast_messages_controller.rb
index a470d865408..fc342924987 100644
--- a/app/controllers/admin/broadcast_messages_controller.rb
+++ b/app/controllers/admin/broadcast_messages_controller.rb
@@ -36,6 +36,10 @@ class Admin::BroadcastMessagesController < Admin::ApplicationController
     end
   end
 
+  def preview
+    @message = broadcast_message_params[:message]
+  end
+
   protected
 
   def finder
diff --git a/app/helpers/broadcast_messages_helper.rb b/app/helpers/broadcast_messages_helper.rb
index 1ed8c710f77..43a29c96bca 100644
--- a/app/helpers/broadcast_messages_helper.rb
+++ b/app/helpers/broadcast_messages_helper.rb
@@ -3,7 +3,7 @@ module BroadcastMessagesHelper
     return unless message.present?
 
     content_tag :div, class: 'broadcast-message', style: broadcast_message_style(message) do
-      icon('bullhorn') << ' ' << message.message
+      icon('bullhorn') << ' ' << render_broadcast_message(message.message)
     end
   end
 
@@ -31,4 +31,8 @@ module BroadcastMessagesHelper
       'Pending'
     end
   end
+
+  def render_broadcast_message(message)
+    Banzai.render(message, pipeline: :broadcast_message).html_safe
+  end
 end
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 953b8b69368..5c9403fa0c2 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -1,6 +1,7 @@
 .broadcast-message-preview{ style: broadcast_message_style(@broadcast_message) }
   = icon('bullhorn')
-  %span= @broadcast_message.message || "Your message here"
+  .js-broadcast-message-preview
+    = render_broadcast_message(@broadcast_message.message.presence || "Your message here")
 
 = form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-requires-input'} do |f|
   -if @broadcast_message.errors.any?
@@ -10,7 +11,9 @@
   .form-group
     = f.label :message, class: 'control-label'
     .col-sm-10
-      = f.text_area :message, class: "form-control js-quick-submit", rows: 2, required: true
+      = f.text_area :message, class: "form-control js-quick-submit js-autosize",
+        required: true,
+        data: { preview_path: preview_admin_broadcast_messages_path }
   .form-group.js-toggle-colors-container
     .col-sm-10.col-sm-offset-2
       = link_to 'Customize colors', '#', class: 'js-toggle-colors-link'
diff --git a/app/views/admin/broadcast_messages/preview.js.haml b/app/views/admin/broadcast_messages/preview.js.haml
new file mode 100644
index 00000000000..fbc9453c72e
--- /dev/null
+++ b/app/views/admin/broadcast_messages/preview.js.haml
@@ -0,0 +1 @@
+$('.js-broadcast-message-preview').html("#{j(render_broadcast_message(@message))}");