Completed markdown (I think)

ctrlo · Oct 11, 2023 · a00f280 · a00f280
1 parent 0c9ad06
commit a00f280
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 22 deletions.
diff --git a/src/frontend/components/markdown/_markdown.scss b/src/frontend/components/markdown/_markdown.scss
@@ -0,0 +1,5 @@
+div.form-group {
+    div.js-markdown-preview {
+        height: 100%;
+    }
+}
diff --git 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
@@ -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;
-}
+// #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;
+// }
diff --git 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';
diff --git 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
@@ -113,16 +113,24 @@
               </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"
                       label       = "Help text for the user"
                       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
@@ -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>
diff --git 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