Markdown (#214)

* Add basic markdown support site wide

* Improved MD support.

Add some styling for images in MD

Add support for the bastardisation of the MD html for RML.

* Add processing for <ul> in RML

* Add OL processing to RML

* Fix a bug with squares appearing around the last page number

* Remove rml formatting in event_detail

* Improve handling of code blocks in RML

* Add MD to rigboard

Reduce MD title sizes as they were offensively large

* Add parsing of markdown when editing event items

* Improved list handling in RML

* Add tests for markdown support.

Focuses mainly on RML as that's where it will break

* Add indications of where MD support is enabled as per comment by @samozzy in #178.

Isn't quite a full description, but for the most part this should be enough for the people who know how to use it see where they can use it.

* Add failing test for markdown processing none

* Fix for failing test in e0d56e

* Add failing test for using single line breaks as per comment on #214

* Enable line break extension for single breaks in paragraphs by new lines.

Pass tests in ef3de607c3

* Enable GH flavour linebreaks in JS rendered markdown

* Made RML bullets pretty :)

* Added WYSIWYG editor. Works for notes & description, fails miserably for items :(

* Fixed for event items. Will probably fail tests because selenium can't type in simpleMDE :(

* FIX: Re-enable markdown on paperwork

Strikethrough is broken in all sorts of places for whatever reason

* FEAT: Markdown support on asset comments

* FIX: Prevent js injection through markdown fields

* Initial fixes

* Basic dark theme for simplemde

* Swap to locally delivered SimpleMDE

* Region for selenium testing of SimpleMDE

Bleh, Javascript all around

* Tests passing!

Fixed not using region for item modal, and overflow error on paperwork with really long description. Looks junk but I'm not really bothered

* Pep8 fixes

* Fallback for null HCapatcha sitekey

I.e. when we're on a branch

* Fix item description print being broken

* Actually fix sitekey problem

* Fixes for using markdown in asset comments

* Properly initialise markdown on asset comments

Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: FreneticScribbler <aj@aronajones.com>

pipeline/source_assets/js/interaction.js

@@ -1,3 +1,7 @@
+marked.setOptions({
+    breaks: true,
+})
+
 function setupItemTable(items_json) {
     objectitems = JSON.parse(items_json)
     $.each(objectitems, function (key, val) {
@@ -6,12 +10,12 @@ function setupItemTable(items_json) {
     newitem = -1;
 }
 
-function nl2br (str, is_xhtml) {
+function nl2br(str, is_xhtml) {
     var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
     return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
 }
 
-function escapeHtml (str) {
+function escapeHtml(str) {
     return $('<div/>').text(str).html();
 }
 
@@ -32,6 +36,16 @@ function updatePrices() {
     $('#total').text(parseFloat(sum + vat).toFixed(2));
 }
 
+function setupMDE(selector) {
+    editor = new SimpleMDE({ 
+        element: $(selector)[0],
+        forceSync: true,
+        toolbar: ["bold", "italic", "strikethrough", "|", "unordered-list", "ordered-list", "|", "link", "|", "preview", "guide"],
+        status: true,
+    });
+    $(selector).data('mde_editor',editor);
+}
+
 $('#item-table').on('click', '.item-delete', function () {
     delete objectitems[$(this).data('pk')]
     $('#item-' + $(this).data('pk')).remove();
@@ -106,7 +120,7 @@ $('body').on('submit', '#item-form', function (e) {
     // update the table
     $row = $('#item-' + pk);
     $row.find('.name').html(escapeHtml(fields.name));
-    $row.find('.description').html(nl2br(escapeHtml(fields.description)));
+    $row.find('.description').html(marked(fields.description));
     $row.find('.cost').html(parseFloat(fields.cost).toFixed(2));
     $row.find('.quantity').html(fields.quantity);
 

pipeline/source_assets/scss/dark_screen.scss

@@ -133,4 +133,21 @@
       -webkit-box-shadow: 0 0 0px 1000px rgba($info, .3) inset;
       transition: background-color 5000s ease-in-out 0s;
     }
+    .editor-toolbar > a {
+        color: white !important;
+    }
+    .editor-toolbar > a:hover {
+        background: transparent !important;
+    }
+    .editor-toolbar > a.active {
+        background: $info !important;
+    }
+    .cm-s-paper {
+        color: white;
+        background-color: $darktheme;
+        border-color: #bbb;
+    }
+    .CodeMirror-cursor {
+        border-color: white !important;
+    }
 }

pipeline/source_assets/scss/screen.scss

@@ -226,3 +226,33 @@ html.embedded {
     max-width: 3em;
   }
 }
+
+.markdown {
+  h1 {
+    font-size: $h1-font-size * 0.75;
+  }
+  h2 {
+    font-size: $h2-font-size * 0.8;
+  }
+  h3 {
+    font-size: $h3-font-size * 0.85;
+  }
+  h4 {
+    font-size: $h4-font-size * 0.9;
+  }
+  h5 {
+    font-size: $h5-font-size * 0.95;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+
+#rigboard {
+  .markdown {
+    img {
+      max-width: 30rem;
+    }
+  }
+}