From a00f280f4c85e3a125a3049c4fbe9a509c01a34a Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Wed, 11 Oct 2023 14:59:53 +0100
Subject: [PATCH] Completed markdown (I think)

---
 .../components/markdown/_markdown.scss        |  5 ++++
 .../components/markdown/lib/component.js      |  4 ++--
 .../css/stylesheets/base/_global.scss         | 24 +++++++++----------
 src/frontend/css/stylesheets/general.scss     |  1 +
 views/fields/textarea.tt                      |  2 +-
 views/layout.tt                               |  8 +++++++
 views/snippets/markdown_section.tt            |  8 +++++++
 views/topic.tt                                | 11 ++++-----
 8 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 src/frontend/components/markdown/_markdown.scss
 create mode 100644 views/snippets/markdown_section.tt

diff --git a/src/frontend/components/markdown/_markdown.scss b/src/frontend/components/markdown/_markdown.scss
new file mode 100644
index 000000000..5a8ec0821
--- /dev/null
+++ b/src/frontend/components/markdown/_markdown.scss
@@ -0,0 +1,5 @@
+div.form-group {
+    div.js-markdown-preview {
+        height: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/frontend/components/markdown/lib/component.js b/src/frontend/components/markdown/lib/component.js
index b2d5059e0..2ace69281 100644
--- a/src/frontend/components/markdown/lib/component.js
+++ b/src/frontend/components/markdown/lib/component.js
@@ -10,8 +10,8 @@ class MarkdownComponent extends Component {
   initMarkdownEditor() {
     marked.use({ breaks: true });
 
-    const $textArea = $(this.element).find("#description");
-    const $preview = $(this.element).find("#preview");
+    const $textArea = $(this.element).find(".js-markdown-input");
+    const $preview = $(this.element).find(".js-markdown-preview");
     $().ready(() => {
       if ($textArea.val() !== "") {
         const htmlText = marked($textArea.val());
diff --git a/src/frontend/css/stylesheets/base/_global.scss b/src/frontend/css/stylesheets/base/_global.scss
index 75ee7dfd4..946a044c6 100644
--- a/src/frontend/css/stylesheets/base/_global.scss
+++ b/src/frontend/css/stylesheets/base/_global.scss
@@ -94,15 +94,15 @@ table.table-bordered {
   }
 }
 
-#preview {
-  //Copied from bootstrap
-  padding: $input-padding-y $input-padding-x;
-  @include border-radius($input-border-radius, 0);
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-  @include form-control-focus($ignore-warning: true);
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-  //Required to stop box "overlapping" other controls below
-  margin-bottom: 1.2em;
-}
\ No newline at end of file
+// #preview {
+//   //Copied from bootstrap
+//   padding: $input-padding-y $input-padding-x;
+//   @include border-radius($input-border-radius, 0);
+//   @include box-shadow($input-box-shadow);
+//   @include transition($input-transition);
+//   @include form-control-focus($ignore-warning: true);
+//   background-clip: padding-box;
+//   border: $input-border-width solid $input-border-color;
+//   //Required to stop box "overlapping" other controls below
+//   margin-bottom: 1.2em;
+// }
\ No newline at end of file
diff --git a/src/frontend/css/stylesheets/general.scss b/src/frontend/css/stylesheets/general.scss
index be2f7ad48..0f14c5be4 100644
--- a/src/frontend/css/stylesheets/general.scss
+++ b/src/frontend/css/stylesheets/general.scss
@@ -77,3 +77,4 @@
 @import 'table-header/table-header';
 @import 'timeline/timeline';
 @import 'user/user';
+@import 'markdown/markdown';
\ No newline at end of file
diff --git a/views/fields/textarea.tt b/views/fields/textarea.tt
index 3d3f5b831..6dca389ec 100644
--- a/views/fields/textarea.tt
+++ b/views/fields/textarea.tt
@@ -31,7 +31,7 @@
     [% INCLUDE fields/sub/label_input.tt label_type="textarea"; %]
     <div class="input__field">
       <textarea
-        class="form-control"
+        class="form-control [% custom_classes %]"
         id="[% id %]"
         name="[% name %]"
         rows="[% rows %]"
diff --git a/views/layout.tt b/views/layout.tt
index 88a5aa32d..1e4826a21 100755
--- a/views/layout.tt
+++ b/views/layout.tt
@@ -113,7 +113,9 @@
               </div>
               <div class="row">
                 <div class="col">
+                  <div class="js-markdown-section">
                   [%
+                    $popover = INCLUDE snippets/markdown.tt;
                     INCLUDE fields/textarea.tt
                       id          = "helptext"
                       name        = "helptext"
@@ -121,8 +123,14 @@
                       placeholder = "Helptext"
                       value       = column.helptext
                       filter      = "html"
+                      custom_classes = "js-markdown-input"
+                      popover_body = $popover
+                      popover_title = "Markdown Help"
                       rows        = 5;
                   %]
+                  [% INCLUDE snippets/markdown_section.tt
+                      label = "Help text preview" %]
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/views/snippets/markdown_section.tt b/views/snippets/markdown_section.tt
new file mode 100644
index 000000000..2ffeb8a61
--- /dev/null
+++ b/views/snippets/markdown_section.tt
@@ -0,0 +1,8 @@
+<div class="form-group">
+    <div class="textarea__label">
+        <label for="preview"><strong>[% IF label; label; ELSE %]Preview[% END; %]</strong></label>
+    </div>
+    <div class="js-markdown-preview form-control">
+        <p class="text-info">Nothing to preview!</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/topic.tt b/views/topic.tt
index 147e43ce9..edb89b00e 100644
--- a/views/topic.tt
+++ b/views/topic.tt
@@ -44,14 +44,11 @@
                       help_text = "Use Markdown for formatting"
                       rows = 5
                       popover_body = $help
-                      popover_title = "Markdown Help";
+                      popover_title = "Markdown Help"
+                      custom_classes = "js-markdown-input";
                   %]
-                  <div class="textarea__label">
-                    <label for="preview"><strong>Description Preview</strong></label>
-                  </div>
-                  <div id="preview">
-                    <p class="text-info">Nothing to preview!</p>
-                  </div>
+                  [% INCLUDE snippets/markdown_section.tt
+                        label = "Description Preview" %]
                 </div>
                 [%
                   INCLUDE fields/switch_single.tt