Merge pull request #2556 from alphagov/add-markdown-to-welsh-input

Add markdown to welsh input

Author: chao-xian

app/components/markdown_editor_component/view.html.erb

@@ -1,15 +1,20 @@
 <div class="app-markdown-editor" data-module="ajax-markdown-preview" data-ajax-markdown-endpoint="<%= render_preview_path %>" data-i18n="<%= translations.to_json() %>">
-  <label class="govuk-label govuk-label--m" for='<%= form_field_id %>'>
-    <h2 class="govuk-heading-m"><%= label %></h2>
-  </label>
+  <% if label_heading %>
+    <label class="govuk-label govuk-label--m" for='<%= form_field_id %>'>
+      <h2 class="govuk-heading-m"><%= label %></h2>
+    </label>
+  <% else %>
+    <label class="govuk-label" for='<%= form_field_id %>'><%= label %></label>
+  <% end %>
   <div class="govuk-hint" id="<%= form_field_id %>-hint"><%= hint %></div>
-  <%= govuk_tabs(title: nil) do |component| %>
-    <% component.with_tab(label: translations[:write_tab_text]) do %>
+  <%= govuk_tabs(title: nil, id: "#{form_field_id}-tabs") do |component| %>
+    <% component.with_tab(label: translations[:write_tab_text], id: "#{form_field_id}-write") do %>
       <%= f.govuk_text_area(attribute_name,
                         label: nil,
                         hint: nil,
                         rows: 15,
                         id: "#{form_field_id}",
+                        lang:,
                         aria: { describedby: "#{form_field_id}-hint" },
                         "data-module": "markdown-editor-toolbar",
                         "data-ajax-markdown-source": true,
@@ -51,16 +56,16 @@
       <% end %>
     <% end %>
 
-    <% component.with_tab(label: translations[:preview_tab_text]) do %>
-      <% if preview_html.present? %>
+    <% component.with_tab(label: translations[:preview_tab_text], id: "#{form_field_id}-preview") do %>
+      <% if preview_html.present? || render_preview_path.present? %>
         <div class="app-markdown-editor__preview-intro">
           <h2 class="govuk-heading-m"><%= translations[:preview_heading] %></h2>
 
           <p><%= translations[:preview_description] %></p>
         </div>
 
         <div class="app-markdown-editor__preview-area" role="region" aria-label="<%= translations[:preview_area_label] %>" data-ajax-markdown-target>
-          <%= preview_html.html_safe %>
+          <%= preview_html&.html_safe %>
         </div>
 
         <%= govuk_link_to translations[:edit_markdown_link], "##{form_field_id}", class: "app-markdown-editor__edit-link" %>

app/components/markdown_editor_component/view.rb

@@ -3,7 +3,7 @@
 module MarkdownEditorComponent
   class View < ApplicationComponent
     include GOVUKDesignSystemFormBuilder::BuilderHelper
-    attr_reader :attribute_name, :f, :render_preview_path, :preview_html, :form_model, :label, :hint, :allow_headings
+    attr_reader :attribute_name, :f, :render_preview_path, :preview_html, :form_model, :label, :hint, :allow_headings, :lang, :label_heading
 
     def initialize(attribute_name,
                    preview_html:,
@@ -13,7 +13,9 @@ def initialize(attribute_name,
                    hint: nil,
                    render_preview_path: nil,
                    allow_headings: true,
-                   local_translations: {})
+                   local_translations: {},
+                   lang: nil,
+                   label_heading: true)
       super()
       @attribute_name = attribute_name
       @f = form_builder
@@ -24,10 +26,16 @@ def initialize(attribute_name,
       @hint = hint
       @allow_headings = allow_headings
       @local_translations = local_translations
+      @lang = lang
+      @label_heading = label_heading
     end
 
     def form_field_id
-      govuk_field_id(form_model, attribute_name)
+      if form_model.respond_to?(:form_field_id)
+        form_model.form_field_id(attribute_name)
+      else
+        govuk_field_id(form_model, attribute_name)
+      end
     end
 
     def allowed_formats

app/controllers/forms/welsh_translation_controller.rb

@@ -54,8 +54,20 @@ def destroy
       end
     end
 
+    def render_preview
+      authorize current_form, :can_view_form?
+
+      render json: { preview_html:, errors: [] }.to_json
+    end
+
   private
 
+    def preview_html
+      return t("guidance.no_guidance_added_html") if params[:markdown].blank?
+
+      GovukFormsMarkdown.render(params[:markdown])
+    end
+
     def welsh_enabled?
       FeatureService.new(group: current_form.group).enabled?(:welsh)
     end