From a01e351e898b880d337f305a0b4c28e7597770ea Mon Sep 17 00:00:00 2001
From: Tom Price <tom@codedinternet.com>
Date: Wed, 22 Dec 2021 21:22:15 +0000
Subject: [PATCH] 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 ef3de607c39bb1a8152dcfa8974e68ae56a24a6d

* 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>
---
 PyRIGS/settings.py                            |   8 +-
 PyRIGS/tests/regions.py                       |   9 +
 RIGS/static/js/marked.min.js                  |   6 +
 RIGS/templates/event_detail.html              |   4 +-
 RIGS/templates/event_form.html                |  16 +-
 RIGS/templates/event_print.xml                |   8 +
 RIGS/templates/event_print_page.xml           |  10 +-
 RIGS/templates/item_modal.html                |   4 +-
 RIGS/templates/partials/event_details.html    |   3 +-
 RIGS/templates/partials/item_row.html         |   3 +-
 RIGS/templatetags/markdown_tags.py            |  56 +++++
 RIGS/tests/pages.py                           |   4 +-
 RIGS/tests/regions.py                         |   4 +-
 RIGS/tests/test_unit.py                       | 214 +++++++++++++++++-
 assets/templates/asset_form.html              |   8 +
 .../templates/partials/asset_detail_form.html |   8 +-
 assets/tests/pages.py                         |   2 +-
 gulpfile.js                                   |   5 +-
 package-lock.json                             |  33 +++
 package.json                                  |   1 +
 pipeline/source_assets/js/interaction.js      |  20 +-
 pipeline/source_assets/scss/dark_screen.scss  |  17 ++
 pipeline/source_assets/scss/screen.scss       |  30 +++
 templates/base.html                           |   3 +
 24 files changed, 445 insertions(+), 31 deletions(-)
 create mode 100644 RIGS/static/js/marked.min.js
 create mode 100644 RIGS/templatetags/markdown_tags.py

diff --git a/PyRIGS/settings.py b/PyRIGS/settings.py
index d0f655a4..1828cee8 100644
--- a/PyRIGS/settings.py
+++ b/PyRIGS/settings.py
@@ -187,12 +187,8 @@ LOGOUT_URL = '/user/logout/'
 ACCOUNT_ACTIVATION_DAYS = 7
 
 # CAPTCHA settings
-if DEBUG or CI:
-    HCAPTCHA_SITEKEY = '10000000-ffff-ffff-ffff-000000000001'
-    HCAPTCHA_SECRET = '0x0000000000000000000000000000000000000000'
-else:
-    HCAPTCHA_SITEKEY = env('HCAPTCHA_SITEKEY')
-    HCAPTCHA_SECRET = env('HCAPTCHA_SECRET')
+HCAPTCHA_SITEKEY = env('HCAPTCHA_SITEKEY', '10000000-ffff-ffff-ffff-000000000001')
+HCAPTCHA_SECRET = env('HCAPTCHA_SECRET', '0x0000000000000000000000000000000000000000')
 
 # Email
 EMAILER_TEST = False
diff --git a/PyRIGS/tests/regions.py b/PyRIGS/tests/regions.py
index 6daef657..c16c61a0 100644
--- a/PyRIGS/tests/regions.py
+++ b/PyRIGS/tests/regions.py
@@ -117,6 +117,15 @@ class TextBox(Region):
         self.root.send_keys(value)
 
 
+class SimpleMDETextArea(Region):
+    @property
+    def value(self):
+        return self.driver.execute_script("return document.querySelector('#' + arguments[0]).nextSibling.nextSibling.CodeMirror.getDoc().getValue();", self.root.get_attribute("id"))
+
+    def set_value(self, value):
+        self.driver.execute_script("document.querySelector('#' + arguments[0]).nextSibling.nextSibling.CodeMirror.getDoc().setValue(arguments[1]);", self.root.get_attribute("id"), value)
+
+
 class CheckBox(Region):
     def toggle(self):
         self.root.click()
diff --git a/RIGS/static/js/marked.min.js b/RIGS/static/js/marked.min.js
new file mode 100644
index 00000000..555c1dc1
--- /dev/null
+++ b/RIGS/static/js/marked.min.js
@@ -0,0 +1,6 @@
+/**
+ * marked - a markdown parser
+ * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/chjj/marked
+ */
+(function(){var block={newline:/^\n+/,code:/^( {4}[^\n]+\n*)+/,fences:noop,hr:/^( *[-*_]){3,} *(?:\n+|$)/,heading:/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,nptable:noop,lheading:/^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,blockquote:/^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,list:/^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,html:/^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,def:/^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,table:noop,paragraph:/^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,text:/^[^\n]+/};block.bullet=/(?:[*+-]|\d+\.)/;block.item=/^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;block.item=replace(block.item,"gm")(/bull/g,block.bullet)();block.list=replace(block.list)(/bull/g,block.bullet)("hr","\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))")("def","\\n+(?="+block.def.source+")")();block.blockquote=replace(block.blockquote)("def",block.def)();block._tag="(?!(?:"+"a|em|strong|small|s|cite|q|dfn|abbr|data|time|code"+"|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo"+"|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b";block.html=replace(block.html)("comment",/<!--[\s\S]*?-->/)("closed",/<(tag)[\s\S]+?<\/\1>/)("closing",/<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)(/tag/g,block._tag)();block.paragraph=replace(block.paragraph)("hr",block.hr)("heading",block.heading)("lheading",block.lheading)("blockquote",block.blockquote)("tag","<"+block._tag)("def",block.def)();block.normal=merge({},block);block.gfm=merge({},block.normal,{fences:/^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/,paragraph:/^/,heading:/^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/});block.gfm.paragraph=replace(block.paragraph)("(?!","(?!"+block.gfm.fences.source.replace("\\1","\\2")+"|"+block.list.source.replace("\\1","\\3")+"|")();block.tables=merge({},block.gfm,{nptable:/^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,table:/^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/});function Lexer(options){this.tokens=[];this.tokens.links={};this.options=options||marked.defaults;this.rules=block.normal;if(this.options.gfm){if(this.options.tables){this.rules=block.tables}else{this.rules=block.gfm}}}Lexer.rules=block;Lexer.lex=function(src,options){var lexer=new Lexer(options);return lexer.lex(src)};Lexer.prototype.lex=function(src){src=src.replace(/\r\n|\r/g,"\n").replace(/\t/g,"    ").replace(/\u00a0/g," ").replace(/\u2424/g,"\n");return this.token(src,true)};Lexer.prototype.token=function(src,top,bq){var src=src.replace(/^ +$/gm,""),next,loose,cap,bull,b,item,space,i,l;while(src){if(cap=this.rules.newline.exec(src)){src=src.substring(cap[0].length);if(cap[0].length>1){this.tokens.push({type:"space"})}}if(cap=this.rules.code.exec(src)){src=src.substring(cap[0].length);cap=cap[0].replace(/^ {4}/gm,"");this.tokens.push({type:"code",text:!this.options.pedantic?cap.replace(/\n+$/,""):cap});continue}if(cap=this.rules.fences.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"code",lang:cap[2],text:cap[3]||""});continue}if(cap=this.rules.heading.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"heading",depth:cap[1].length,text:cap[2]});continue}if(top&&(cap=this.rules.nptable.exec(src))){src=src.substring(cap[0].length);item={type:"table",header:cap[1].replace(/^ *| *\| *$/g,"").split(/ *\| */),align:cap[2].replace(/^ *|\| *$/g,"").split(/ *\| */),cells:cap[3].replace(/\n$/,"").split("\n")};for(i=0;i<item.align.length;i++){if(/^ *-+: *$/.test(item.align[i])){item.align[i]="right"}else if(/^ *:-+: *$/.test(item.align[i])){item.align[i]="center"}else if(/^ *:-+ *$/.test(item.align[i])){item.align[i]="left"}else{item.align[i]=null}}for(i=0;i<item.cells.length;i++){item.cells[i]=item.cells[i].split(/ *\| */)}this.tokens.push(item);continue}if(cap=this.rules.lheading.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"heading",depth:cap[2]==="="?1:2,text:cap[1]});continue}if(cap=this.rules.hr.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"hr"});continue}if(cap=this.rules.blockquote.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"blockquote_start"});cap=cap[0].replace(/^ *> ?/gm,"");this.token(cap,top,true);this.tokens.push({type:"blockquote_end"});continue}if(cap=this.rules.list.exec(src)){src=src.substring(cap[0].length);bull=cap[2];this.tokens.push({type:"list_start",ordered:bull.length>1});cap=cap[0].match(this.rules.item);next=false;l=cap.length;i=0;for(;i<l;i++){item=cap[i];space=item.length;item=item.replace(/^ *([*+-]|\d+\.) +/,"");if(~item.indexOf("\n ")){space-=item.length;item=!this.options.pedantic?item.replace(new RegExp("^ {1,"+space+"}","gm"),""):item.replace(/^ {1,4}/gm,"")}if(this.options.smartLists&&i!==l-1){b=block.bullet.exec(cap[i+1])[0];if(bull!==b&&!(bull.length>1&&b.length>1)){src=cap.slice(i+1).join("\n")+src;i=l-1}}loose=next||/\n\n(?!\s*$)/.test(item);if(i!==l-1){next=item.charAt(item.length-1)==="\n";if(!loose)loose=next}this.tokens.push({type:loose?"loose_item_start":"list_item_start"});this.token(item,false,bq);this.tokens.push({type:"list_item_end"})}this.tokens.push({type:"list_end"});continue}if(cap=this.rules.html.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:this.options.sanitize?"paragraph":"html",pre:!this.options.sanitizer&&(cap[1]==="pre"||cap[1]==="script"||cap[1]==="style"),text:cap[0]});continue}if(!bq&&top&&(cap=this.rules.def.exec(src))){src=src.substring(cap[0].length);this.tokens.links[cap[1].toLowerCase()]={href:cap[2],title:cap[3]};continue}if(top&&(cap=this.rules.table.exec(src))){src=src.substring(cap[0].length);item={type:"table",header:cap[1].replace(/^ *| *\| *$/g,"").split(/ *\| */),align:cap[2].replace(/^ *|\| *$/g,"").split(/ *\| */),cells:cap[3].replace(/(?: *\| *)?\n$/,"").split("\n")};for(i=0;i<item.align.length;i++){if(/^ *-+: *$/.test(item.align[i])){item.align[i]="right"}else if(/^ *:-+: *$/.test(item.align[i])){item.align[i]="center"}else if(/^ *:-+ *$/.test(item.align[i])){item.align[i]="left"}else{item.align[i]=null}}for(i=0;i<item.cells.length;i++){item.cells[i]=item.cells[i].replace(/^ *\| *| *\| *$/g,"").split(/ *\| */)}this.tokens.push(item);continue}if(top&&(cap=this.rules.paragraph.exec(src))){src=src.substring(cap[0].length);this.tokens.push({type:"paragraph",text:cap[1].charAt(cap[1].length-1)==="\n"?cap[1].slice(0,-1):cap[1]});continue}if(cap=this.rules.text.exec(src)){src=src.substring(cap[0].length);this.tokens.push({type:"text",text:cap[0]});continue}if(src){throw new Error("Infinite loop on byte: "+src.charCodeAt(0))}}return this.tokens};var inline={escape:/^\\([\\`*{}\[\]()#+\-.!_>])/,autolink:/^<([^ >]+(@|:\/)[^ >]+)>/,url:noop,tag:/^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,link:/^!?\[(inside)\]\(href\)/,reflink:/^!?\[(inside)\]\s*\[([^\]]*)\]/,nolink:/^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,strong:/^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,em:/^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,code:/^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,br:/^ {2,}\n(?!\s*$)/,del:noop,text:/^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/};inline._inside=/(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;inline._href=/\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;inline.link=replace(inline.link)("inside",inline._inside)("href",inline._href)();inline.reflink=replace(inline.reflink)("inside",inline._inside)();inline.normal=merge({},inline);inline.pedantic=merge({},inline.normal,{strong:/^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,em:/^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/});inline.gfm=merge({},inline.normal,{escape:replace(inline.escape)("])","~|])")(),url:/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,del:/^~~(?=\S)([\s\S]*?\S)~~/,text:replace(inline.text)("]|","~]|")("|","|https?://|")()});inline.breaks=merge({},inline.gfm,{br:replace(inline.br)("{2,}","*")(),text:replace(inline.gfm.text)("{2,}","*")()});function InlineLexer(links,options){this.options=options||marked.defaults;this.links=links;this.rules=inline.normal;this.renderer=this.options.renderer||new Renderer;this.renderer.options=this.options;if(!this.links){throw new Error("Tokens array requires a `links` property.")}if(this.options.gfm){if(this.options.breaks){this.rules=inline.breaks}else{this.rules=inline.gfm}}else if(this.options.pedantic){this.rules=inline.pedantic}}InlineLexer.rules=inline;InlineLexer.output=function(src,links,options){var inline=new InlineLexer(links,options);return inline.output(src)};InlineLexer.prototype.output=function(src){var out="",link,text,href,cap;while(src){if(cap=this.rules.escape.exec(src)){src=src.substring(cap[0].length);out+=cap[1];continue}if(cap=this.rules.autolink.exec(src)){src=src.substring(cap[0].length);if(cap[2]==="@"){text=cap[1].charAt(6)===":"?this.mangle(cap[1].substring(7)):this.mangle(cap[1]);href=this.mangle("mailto:")+text}else{text=escape(cap[1]);href=text}out+=this.renderer.link(href,null,text);continue}if(!this.inLink&&(cap=this.rules.url.exec(src))){src=src.substring(cap[0].length);text=escape(cap[1]);href=text;out+=this.renderer.link(href,null,text);continue}if(cap=this.rules.tag.exec(src)){if(!this.inLink&&/^<a /i.test(cap[0])){this.inLink=true}else if(this.inLink&&/^<\/a>/i.test(cap[0])){this.inLink=false}src=src.substring(cap[0].length);out+=this.options.sanitize?this.options.sanitizer?this.options.sanitizer(cap[0]):escape(cap[0]):cap[0];continue}if(cap=this.rules.link.exec(src)){src=src.substring(cap[0].length);this.inLink=true;out+=this.outputLink(cap,{href:cap[2],title:cap[3]});this.inLink=false;continue}if((cap=this.rules.reflink.exec(src))||(cap=this.rules.nolink.exec(src))){src=src.substring(cap[0].length);link=(cap[2]||cap[1]).replace(/\s+/g," ");link=this.links[link.toLowerCase()];if(!link||!link.href){out+=cap[0].charAt(0);src=cap[0].substring(1)+src;continue}this.inLink=true;out+=this.outputLink(cap,link);this.inLink=false;continue}if(cap=this.rules.strong.exec(src)){src=src.substring(cap[0].length);out+=this.renderer.strong(this.output(cap[2]||cap[1]));continue}if(cap=this.rules.em.exec(src)){src=src.substring(cap[0].length);out+=this.renderer.em(this.output(cap[2]||cap[1]));continue}if(cap=this.rules.code.exec(src)){src=src.substring(cap[0].length);out+=this.renderer.codespan(escape(cap[2],true));continue}if(cap=this.rules.br.exec(src)){src=src.substring(cap[0].length);out+=this.renderer.br();continue}if(cap=this.rules.del.exec(src)){src=src.substring(cap[0].length);out+=this.renderer.del(this.output(cap[1]));continue}if(cap=this.rules.text.exec(src)){src=src.substring(cap[0].length);out+=this.renderer.text(escape(this.smartypants(cap[0])));continue}if(src){throw new Error("Infinite loop on byte: "+src.charCodeAt(0))}}return out};InlineLexer.prototype.outputLink=function(cap,link){var href=escape(link.href),title=link.title?escape(link.title):null;return cap[0].charAt(0)!=="!"?this.renderer.link(href,title,this.output(cap[1])):this.renderer.image(href,title,escape(cap[1]))};InlineLexer.prototype.smartypants=function(text){if(!this.options.smartypants)return text;return text.replace(/---/g,"—").replace(/--/g,"–").replace(/(^|[-\u2014/(\[{"\s])'/g,"$1‘").replace(/'/g,"’").replace(/(^|[-\u2014/(\[{\u2018\s])"/g,"$1“").replace(/"/g,"”").replace(/\.{3}/g,"…")};InlineLexer.prototype.mangle=function(text){if(!this.options.mangle)return text;var out="",l=text.length,i=0,ch;for(;i<l;i++){ch=text.charCodeAt(i);if(Math.random()>.5){ch="x"+ch.toString(16)}out+="&#"+ch+";"}return out};function Renderer(options){this.options=options||{}}Renderer.prototype.code=function(code,lang,escaped){if(this.options.highlight){var out=this.options.highlight(code,lang);if(out!=null&&out!==code){escaped=true;code=out}}if(!lang){return"<pre><code>"+(escaped?code:escape(code,true))+"\n</code></pre>"}return'<pre><code class="'+this.options.langPrefix+escape(lang,true)+'">'+(escaped?code:escape(code,true))+"\n</code></pre>\n"};Renderer.prototype.blockquote=function(quote){return"<blockquote>\n"+quote+"</blockquote>\n"};Renderer.prototype.html=function(html){return html};Renderer.prototype.heading=function(text,level,raw){return"<h"+level+' id="'+this.options.headerPrefix+raw.toLowerCase().replace(/[^\w]+/g,"-")+'">'+text+"</h"+level+">\n"};Renderer.prototype.hr=function(){return this.options.xhtml?"<hr/>\n":"<hr>\n"};Renderer.prototype.list=function(body,ordered){var type=ordered?"ol":"ul";return"<"+type+">\n"+body+"</"+type+">\n"};Renderer.prototype.listitem=function(text){return"<li>"+text+"</li>\n"};Renderer.prototype.paragraph=function(text){return"<p>"+text+"</p>\n"};Renderer.prototype.table=function(header,body){return"<table>\n"+"<thead>\n"+header+"</thead>\n"+"<tbody>\n"+body+"</tbody>\n"+"</table>\n"};Renderer.prototype.tablerow=function(content){return"<tr>\n"+content+"</tr>\n"};Renderer.prototype.tablecell=function(content,flags){var type=flags.header?"th":"td";var tag=flags.align?"<"+type+' style="text-align:'+flags.align+'">':"<"+type+">";return tag+content+"</"+type+">\n"};Renderer.prototype.strong=function(text){return"<strong>"+text+"</strong>"};Renderer.prototype.em=function(text){return"<em>"+text+"</em>"};Renderer.prototype.codespan=function(text){return"<code>"+text+"</code>"};Renderer.prototype.br=function(){return this.options.xhtml?"<br/>":"<br>"};Renderer.prototype.del=function(text){return"<del>"+text+"</del>"};Renderer.prototype.link=function(href,title,text){if(this.options.sanitize){try{var prot=decodeURIComponent(unescape(href)).replace(/[^\w:]/g,"").toLowerCase()}catch(e){return""}if(prot.indexOf("javascript:")===0||prot.indexOf("vbscript:")===0){return""}}var out='<a href="'+href+'"';if(title){out+=' title="'+title+'"'}out+=">"+text+"</a>";return out};Renderer.prototype.image=function(href,title,text){var out='<img src="'+href+'" alt="'+text+'"';if(title){out+=' title="'+title+'"'}out+=this.options.xhtml?"/>":">";return out};Renderer.prototype.text=function(text){return text};function Parser(options){this.tokens=[];this.token=null;this.options=options||marked.defaults;this.options.renderer=this.options.renderer||new Renderer;this.renderer=this.options.renderer;this.renderer.options=this.options}Parser.parse=function(src,options,renderer){var parser=new Parser(options,renderer);return parser.parse(src)};Parser.prototype.parse=function(src){this.inline=new InlineLexer(src.links,this.options,this.renderer);this.tokens=src.reverse();var out="";while(this.next()){out+=this.tok()}return out};Parser.prototype.next=function(){return this.token=this.tokens.pop()};Parser.prototype.peek=function(){return this.tokens[this.tokens.length-1]||0};Parser.prototype.parseText=function(){var body=this.token.text;while(this.peek().type==="text"){body+="\n"+this.next().text}return this.inline.output(body)};Parser.prototype.tok=function(){switch(this.token.type){case"space":{return""}case"hr":{return this.renderer.hr()}case"heading":{return this.renderer.heading(this.inline.output(this.token.text),this.token.depth,this.token.text)}case"code":{return this.renderer.code(this.token.text,this.token.lang,this.token.escaped)}case"table":{var header="",body="",i,row,cell,flags,j;cell="";for(i=0;i<this.token.header.length;i++){flags={header:true,align:this.token.align[i]};cell+=this.renderer.tablecell(this.inline.output(this.token.header[i]),{header:true,align:this.token.align[i]})}header+=this.renderer.tablerow(cell);for(i=0;i<this.token.cells.length;i++){row=this.token.cells[i];cell="";for(j=0;j<row.length;j++){cell+=this.renderer.tablecell(this.inline.output(row[j]),{header:false,align:this.token.align[j]})}body+=this.renderer.tablerow(cell)}return this.renderer.table(header,body)}case"blockquote_start":{var body="";while(this.next().type!=="blockquote_end"){body+=this.tok()}return this.renderer.blockquote(body)}case"list_start":{var body="",ordered=this.token.ordered;while(this.next().type!=="list_end"){body+=this.tok()}return this.renderer.list(body,ordered)}case"list_item_start":{var body="";while(this.next().type!=="list_item_end"){body+=this.token.type==="text"?this.parseText():this.tok()}return this.renderer.listitem(body)}case"loose_item_start":{var body="";while(this.next().type!=="list_item_end"){body+=this.tok()}return this.renderer.listitem(body)}case"html":{var html=!this.token.pre&&!this.options.pedantic?this.inline.output(this.token.text):this.token.text;return this.renderer.html(html)}case"paragraph":{return this.renderer.paragraph(this.inline.output(this.token.text))}case"text":{return this.renderer.paragraph(this.parseText())}}};function escape(html,encode){return html.replace(!encode?/&(?!#?\w+;)/g:/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function unescape(html){return html.replace(/&([#\w]+);/g,function(_,n){n=n.toLowerCase();if(n==="colon")return":";if(n.charAt(0)==="#"){return n.charAt(1)==="x"?String.fromCharCode(parseInt(n.substring(2),16)):String.fromCharCode(+n.substring(1))}return""})}function replace(regex,opt){regex=regex.source;opt=opt||"";return function self(name,val){if(!name)return new RegExp(regex,opt);val=val.source||val;val=val.replace(/(^|[^\[])\^/g,"$1");regex=regex.replace(name,val);return self}}function noop(){}noop.exec=noop;function merge(obj){var i=1,target,key;for(;i<arguments.length;i++){target=arguments[i];for(key in target){if(Object.prototype.hasOwnProperty.call(target,key)){obj[key]=target[key]}}}return obj}function marked(src,opt,callback){if(callback||typeof opt==="function"){if(!callback){callback=opt;opt=null}opt=merge({},marked.defaults,opt||{});var highlight=opt.highlight,tokens,pending,i=0;try{tokens=Lexer.lex(src,opt)}catch(e){return callback(e)}pending=tokens.length;var done=function(err){if(err){opt.highlight=highlight;return callback(err)}var out;try{out=Parser.parse(tokens,opt)}catch(e){err=e}opt.highlight=highlight;return err?callback(err):callback(null,out)};if(!highlight||highlight.length<3){return done()}delete opt.highlight;if(!pending)return done();for(;i<tokens.length;i++){(function(token){if(token.type!=="code"){return--pending||done()}return highlight(token.text,token.lang,function(err,code){if(err)return done(err);if(code==null||code===token.text){return--pending||done()}token.text=code;token.escaped=true;--pending||done()})})(tokens[i])}return}try{if(opt)opt=merge({},marked.defaults,opt);return Parser.parse(Lexer.lex(src,opt),opt)}catch(e){e.message+="\nPlease report this to https://github.com/chjj/marked.";if((opt||marked.defaults).silent){return"<p>An error occured:</p><pre>"+escape(e.message+"",true)+"</pre>"}throw e}}marked.options=marked.setOptions=function(opt){merge(marked.defaults,opt);return marked};marked.defaults={gfm:true,tables:true,breaks:false,pedantic:false,sanitize:false,sanitizer:null,mangle:true,smartLists:false,silent:false,highlight:null,langPrefix:"lang-",smartypants:false,headerPrefix:"",renderer:new Renderer,xhtml:false};marked.Parser=Parser;marked.parser=Parser.parse;marked.Renderer=Renderer;marked.Lexer=Lexer;marked.lexer=Lexer.lex;marked.InlineLexer=InlineLexer;marked.inlineLexer=InlineLexer.output;marked.parse=marked;if(typeof module!=="undefined"&&typeof exports==="object"){module.exports=marked}else if(typeof define==="function"&&define.amd){define(function(){return marked})}else{this.marked=marked}}).call(function(){return this||(typeof window!=="undefined"?window:global)}());
\ No newline at end of file
diff --git a/RIGS/templates/event_detail.html b/RIGS/templates/event_detail.html
index a0afc50e..b04089fb 100644
--- a/RIGS/templates/event_detail.html
+++ b/RIGS/templates/event_detail.html
@@ -1,5 +1,7 @@
 {% extends request.is_ajax|yesno:"base_ajax.html,base_rigs.html" %}
 
+{% load markdown_tags %}
+
 {% block content %}
 <div class="row my-3 py-3">
     {% if not request.is_ajax %}
@@ -43,7 +45,7 @@
                     {% if perms.RIGS.view_event %}
                     <h4>Notes</h4>
                     <hr>
-                    <p class="dont-break-out">{{ event.notes|linebreaksbr }}</p>
+                    <p class="dont-break-out">{{ event.notes|markdown }}</p>
                     {% endif %}
                     <br>
                     {% include 'partials/item_table.html' %}
diff --git a/RIGS/templates/event_form.html b/RIGS/templates/event_form.html
index dd98c17a..68ec8abd 100644
--- a/RIGS/templates/event_form.html
+++ b/RIGS/templates/event_form.html
@@ -8,11 +8,13 @@
 {% block css %}
     {{ block.super }}
     <link rel="stylesheet" type="text/css" href="{% static 'css/selects.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/simplemde.min.css' %}">
 {% endblock %}
 
 {% block preload_js %}
     {{ block.super }}
     <script src="{% static 'js/selects.js' %}"></script>
+    <script src="{% static 'js/simplemde.min.js' %}"></script>
 {% endblock %}
 
 {% block js %}
@@ -63,6 +65,16 @@
             {% endif %}
         });
         $(document).ready(function () {
+            setupMDE('#id_description');
+            setupMDE('#id_notes');
+            setupMDE('#item_description');
+
+            $('#itemModal').on('shown.bs.modal', function (e) {
+                $('#item_description').data('mde_editor').value(
+                    $('#item_description').val()
+                    );
+            });
+
             setupItemTable($("#{{ form.items_json.id_for_label }}").val());
         });
         $(function () {
@@ -168,7 +180,7 @@
                         <label for="{{ form.description.id_for_label }}"
                                class="col-sm-4 col-form-label">{{ form.description.label }}</label>
 
-                        <div class="col-sm-8">
+                        <div class="col-sm-12">
                             {% render_field form.description class+="form-control" %}
                         </div>
                     </div>
@@ -345,7 +357,7 @@
                     <div class="col-sm-12">
                         <div class="form-group" data-toggle="tooltip" title="Notes on the event. This is only visible to keyholders, and is not displayed on the paperwork">
                             <label for="{{ form.notes.id_for_label }}">{{ form.notes.label }}</label>
-                            {% render_field form.notes class+="form-control" %}
+                            {% render_field form.notes class+="form-control md-enabled" %}
                         </div>
                     </div>
                     {% include 'partials/item_table.html' %}
diff --git a/RIGS/templates/event_print.xml b/RIGS/templates/event_print.xml
index 133fef1d..e43ea413 100644
--- a/RIGS/templates/event_print.xml
+++ b/RIGS/templates/event_print.xml
@@ -74,6 +74,14 @@
             <lineStyle kind="linebelow" start="3,0" stop="3,0" colorName="black"/>
             <lineStyle kind="linebelow" start="5,0" stop="5,0" colorName="black"/>
         </blockTableStyle>
+
+        <listStyle name="ol"
+                   bulletFormat="%s."
+                   bulletFontSize="10" />
+
+        <listStyle name="ul"
+                   start="bulletchar"
+                   bulletFontSize="10"/>
     </stylesheet>
 
     <template > {# Note: page is 595x842 points (1 point=1/72in) #}
diff --git a/RIGS/templates/event_print_page.xml b/RIGS/templates/event_print_page.xml
index b3d7ecfa..06c1c58d 100644
--- a/RIGS/templates/event_print_page.xml
+++ b/RIGS/templates/event_print_page.xml
@@ -1,4 +1,6 @@
+{% load markdown_tags %}
 {% load filters %}
+
 <setNextFrame name="main"/>
 <nextFrame/>
 <blockTable style="headLayout" colWidths="330,165">
@@ -10,10 +12,8 @@
         <b>{{object.start_date|date:"D jS N Y"}}</b>
         </para>
 
-        <keepInFrame>
-            <para style="style.event_description">
-            {{ object.description|default_if_none:""|linebreaksxml }}
-                </para>
+        <keepInFrame maxHeight="500" onOverflow="shrink">
+            {{ object.description|default_if_none:""|markdown:"rml" }}
         </keepInFrame>
     </td>
     <td>
@@ -184,7 +184,7 @@
                 {% if item.description %}
                     </para>
                     <para style="item_description">
-                    <em>{{ item.description|linebreaksxml }}</em>
+                        {{ item.description|markdown:"rml" }}
                     </para>
                     <para>
                 {% endif %}
diff --git a/RIGS/templates/item_modal.html b/RIGS/templates/item_modal.html
index f8ce7390..39ae3a32 100644
--- a/RIGS/templates/item_modal.html
+++ b/RIGS/templates/item_modal.html
@@ -16,10 +16,10 @@
                                    id="item_name"/>
                         </div>
                     </div>
-                    <div class="form-group form-row">
+                    <div class="form-group form-row" data-toggle="tooltip" title="A detailed description of the kit. MD enabled.">
                         <label for="item_description" class="col-sm-2 col-form-label">Description</label>
                         <div class="col-sm-10">
-                            <textarea type="text" placeholder="Description" class="form-control"
+                            <textarea type="text" placeholder="Description" class="form-control md-enabled"
                                       id="item_description" rows="8"></textarea>
                         </div>
                     </div>
diff --git a/RIGS/templates/partials/event_details.html b/RIGS/templates/partials/event_details.html
index 0d7c6547..2566e74a 100644
--- a/RIGS/templates/partials/event_details.html
+++ b/RIGS/templates/partials/event_details.html
@@ -1,4 +1,5 @@
 {% load namewithnotes from filters %}
+{% load markdown_tags %}
 <div class="card card-info">
     <div class="card-header">Event Info</div>
     <div class="card-body">
@@ -46,7 +47,7 @@
             <dd class="col-sm-12">&nbsp;</dd>
 
             <dt class="col-sm-6">Event Description</dt>
-            <dd class="dont-break-out col-sm-12">{{ event.description|linebreaksbr }}</dd>
+            <dd class="dont-break-out col-sm-12">{{ event.description|markdown }}</dd>
 
             <dd class="col-sm-12">&nbsp;</dd>
 
diff --git a/RIGS/templates/partials/item_row.html b/RIGS/templates/partials/item_row.html
index b71facd8..0aec3602 100644
--- a/RIGS/templates/partials/item_row.html
+++ b/RIGS/templates/partials/item_row.html
@@ -1,8 +1,9 @@
+{% load markdown_tags %}
 <tr id="item-{{item.pk}}" data-pk="{{item.pk}}" class="item_row">
 	<th scope="row">
 		<span class="name">{{ item.name }}</span>
         <div class="item-description">
-            <em class="description">{{item.description|linebreaksbr}}</em>
+            <em class="description">{{item.description|markdown}}</em>
         </div>
 	</th>
     {% if perms.RIGS.view_event %}
diff --git a/RIGS/templatetags/markdown_tags.py b/RIGS/templatetags/markdown_tags.py
new file mode 100644
index 00000000..91300f64
--- /dev/null
+++ b/RIGS/templatetags/markdown_tags.py
@@ -0,0 +1,56 @@
+from bs4 import BeautifulSoup
+from django import template
+from django.utils.safestring import mark_safe
+import markdown
+
+__author__ = 'ghost'
+
+register = template.Library()
+
+
+@register.filter(name="markdown")
+def markdown_filter(text, input_format='html'):
+    # markdown library can't handle text=None
+    if text is None:
+        return text
+    html = markdown.markdown(text, extensions=['markdown.extensions.nl2br'])
+    # Convert format to RML
+    soup = BeautifulSoup(html, "html.parser")
+    # Prevent code injection
+    for script in soup('script'):
+        script.string = "Your script shall not pass!"
+    if input_format == 'html':
+        return mark_safe('<div class="markdown">' + str(soup) + '</div>')
+    elif input_format == 'rml':
+
+        # Image aren't supported so remove them
+        for img in soup('img'):
+            img.parent.extract()
+
+        # <code> should become <font>
+        for c in soup('code'):
+            c.name = 'font'
+            c['face'] = "Courier"
+
+        # blockquotes don't exist but we can still do something to show
+        for bq in soup('blockquote'):
+            bq.name = 'pre'
+            bq.string = bq.text
+
+        for alist in soup.find_all(['ul', 'ol']):
+            alist['style'] = alist.name
+            for li in alist.find_all('li', recursive=False):
+                text = li.find(text=True)
+                text.wrap(soup.new_tag('p'))
+
+            if alist.parent.name != 'li':
+                indent = soup.new_tag('indent')
+                indent['left'] = '0.6cm'
+
+                alist.wrap(indent)
+
+        # Paragraphs have a different tag
+        for p in soup('p'):
+            p.name = 'para'
+
+        return mark_safe(str(soup))
diff --git a/RIGS/tests/pages.py b/RIGS/tests/pages.py
index e458ecf1..f588fd12 100644
--- a/RIGS/tests/pages.py
+++ b/RIGS/tests/pages.py
@@ -96,7 +96,7 @@ class CreateEvent(FormPage):
     _warning_selector = (By.XPATH, '/html/body/div[1]/div[1]')
 
     form_items = {
-        'description': (regions.TextBox, (By.ID, 'id_description')),
+        'description': (regions.SimpleMDETextArea, (By.ID, 'id_description')),
 
         'name': (regions.TextBox, (By.ID, 'id_name')),
         'start_date': (regions.DatePicker, (By.ID, 'id_start_date')),
@@ -110,7 +110,7 @@ class CreateEvent(FormPage):
         'collected_by': (regions.TextBox, (By.ID, 'id_collector')),
         'po': (regions.TextBox, (By.ID, 'id_purchase_order')),
 
-        'notes': (regions.TextBox, (By.ID, 'id_notes'))
+        'notes': (regions.SimpleMDETextArea, (By.ID, 'id_notes'))
     }
 
     def select_event_type(self, type_name):
diff --git a/RIGS/tests/regions.py b/RIGS/tests/regions.py
index be7d9b7e..4ae75032 100644
--- a/RIGS/tests/regions.py
+++ b/RIGS/tests/regions.py
@@ -1,7 +1,7 @@
 from pypom import Region
 from selenium.webdriver.common.by import By
 
-from PyRIGS.tests.regions import TextBox, Modal
+from PyRIGS.tests.regions import TextBox, Modal, SimpleMDETextArea
 
 
 class Header(Region):
@@ -42,7 +42,7 @@ class ItemModal(Modal):
 
     form_items = {
         'name': (TextBox, (By.ID, 'item_name')),
-        'description': (TextBox, (By.ID, 'item_description')),
+        'description': (SimpleMDETextArea, (By.ID, 'item_description')),
         'quantity': (TextBox, (By.ID, 'item_quantity')),
         'price': (TextBox, (By.ID, 'item_cost'))
     }
diff --git a/RIGS/tests/test_unit.py b/RIGS/tests/test_unit.py
index e7af6737..12fcf1a4 100644
--- a/RIGS/tests/test_unit.py
+++ b/RIGS/tests/test_unit.py
@@ -3,6 +3,8 @@ from datetime import date
 from django.core.exceptions import ObjectDoesNotExist
 from django.test import TestCase
 from django.test.utils import override_settings
+from django.utils.safestring import SafeText
+from RIGS.templatetags.markdown_tags import markdown_filter
 from django.urls import reverse, reverse_lazy
 from django.utils import timezone
 from pytest_django.asserts import assertRedirects, assertNotContains, assertContains
@@ -170,6 +172,7 @@ class TestInvoiceDelete(TestCase):
     def setUpTestData(cls):
         cls.profile = models.Profile.objects.create(username="testuser1", email="1@test.com", is_superuser=True,
                                                     is_active=True, is_staff=True)
+        cls.vatrate = models.VatRate.objects.create(start_at='2014-03-05', rate=0.20, comment='test1')
         cls.events = {
             1: models.Event.objects.create(name="TE E1", start_date=date.today()),
             2: models.Event.objects.create(name="TE E2", start_date=date.today())
@@ -363,6 +366,215 @@ def test_checklist_review(admin_client, admin_user, checklist):
 def test_ra_redirect(admin_client, admin_user, ra):
     request_url = reverse('event_ra', kwargs={'pk': ra.event.pk})
     expected_url = reverse('ra_edit', kwargs={'pk': ra.pk})
-
     response = admin_client.get(request_url, follow=True)
     assertRedirects(response, expected_url, status_code=302, target_status_code=200)
+
+
+class TestMarkdownTemplateTags(TestCase):
+    markdown = """
+An h1 header
+============
+
+Paragraphs are separated by a blank line.
+
+2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+look like:
+
+  * this one
+  * that one
+  * the other one
+
+Note that --- not considering the asterisk --- the actual text
+content starts at 4-columns in.
+
+> Block quotes are
+> written like so.
+>
+> They can span multiple paragraphs,
+> if you like.
+
+Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
+in chapters 12--14"). Three dots ... will be converted to an ellipsis.
+Unicode is supported.
+
+
+
+An h2 header
+------------
+
+Here's a numbered list:
+
+ 1. first item
+ 2. second item
+ 3. third item
+
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
+
+~~~
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
+
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
+
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print i
+~~~
+
+
+
+### An h3 header ###
+
+Now a nested list:
+
+ 1. First, get these ingredients:
+
+      * carrots
+      * celery
+      * lentils
+
+ 2. Boil some water.
+
+ 3. Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+Notice again how text always lines up on 4-space indents (including
+that last line which continues item 3 above).
+
+Here's a link to [a website](http://foo.bar). Here's a footnote [^1].
+
+[^1]: Footnote text goes here.
+
+Tables can look like this:
+
+size  material      color
+----  ------------  ------------
+9     leather       brown
+10    hemp canvas   natural
+11    glass         transparent
+
+Table: Shoes, their sizes, and what they're made of
+
+(The above is the caption for the table.) Pandoc also supports
+multi-line tables:
+
+--------  -----------------------
+keyword   text
+--------  -----------------------
+red       Sunsets, apples, and
+          other red or reddish
+          things.
+
+green     Leaves, grass, frogs
+          and other things it's
+          not easy being.
+--------  -----------------------
+
+A horizontal rule follows.
+
+***
+
+Here's a definition list:
+
+apples
+  : Good for making applesauce.
+oranges
+  : Citrus!
+tomatoes
+  : There's no "e" in tomatoe.
+
+Again, text is indented 4 spaces. (Put a blank line between each
+term/definition pair to spread things out more.)
+
+Here's a "line block":
+
+| Line one
+|   Line too
+| Line tree
+
+and images can be specified like so:
+
+![example image](example-image.jpg "An exemplary image")
+
+Inline math equations go in like so: $\\omega = d\\phi / dt$. Display
+math should get its own line and be put in in double-dollarsigns:
+
+$$I = \\int \rho R^{2} dV$$
+
+And note that you can backslash-escape any punctuation characters
+which you wish to be displayed literally, ex.: \\`foo\\`, \\*bar\\*, etc.
+    """
+
+    def test_html_safe(self):
+        html = markdown_filter(self.markdown)
+        self.assertIsInstance(html, SafeText)
+
+    def test_img_strip(self):
+        rml = markdown_filter(self.markdown, 'rml')
+        self.assertNotIn("<img", rml)
+
+    def test_code(self):
+        rml = markdown_filter(self.markdown, 'rml')
+        self.assertIn('<font face="Courier">monospace</font>', rml)
+
+    def test_blockquote(self):
+        rml = markdown_filter(self.markdown, 'rml')
+        self.assertIn("<pre>\nBlock quotes", rml)
+
+    def test_lists(self):
+        rml = markdown_filter(self.markdown, 'rml')
+        self.assertIn("<li><para>second item</para></li>", rml)  # <ol>
+        self.assertIn("<li><para>that one</para></li>", rml)  # <ul>
+
+    def test_in_print(self):
+        event = models.Event.objects.create(
+            name="MD Print Test",
+            description=self.markdown,
+            start_date='2016-01-01',
+        )
+        user = models.Profile.objects.create(
+            username='RML test',
+            is_superuser=True,  # Don't care about permissions
+            is_active=True,
+        )
+        user.set_password('rmltester')
+        user.save()
+
+        self.assertTrue(self.client.login(username=user.username, password='rmltester'))
+        response = self.client.get(reverse('event_print', kwargs={'pk': event.pk}))
+        self.assertEqual(response.status_code, 200)
+        # By the time we have a PDF it should be larger than the original by some margin
+        # RML hard fails if something doesn't work
+        self.assertGreater(len(response.content), len(self.markdown))
+
+    def test_nonetype(self):
+        html = markdown_filter(None)
+        self.assertIsNone(html)
+
+    def test_linebreaks(self):
+        html = markdown_filter(self.markdown)
+        self.assertIn("Itemized lists<br/>\nlook like", html)
diff --git a/assets/templates/asset_form.html b/assets/templates/asset_form.html
index 57766f98..4a2380b9 100644
--- a/assets/templates/asset_form.html
+++ b/assets/templates/asset_form.html
@@ -5,11 +5,14 @@
 {% block css %}
     {{ block.super }}
     <link rel="stylesheet" href="{% static 'css/selects.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/simplemde.min.css' %}">
 {% endblock %}
 
 {% block preload_js %}
     {{ block.super }}
     <script src="{% static 'js/selects.js' %}"></script>
+    <script src="{% static 'js/simplemde.min.js' %}"></script>
+    <script src="{% static 'js/interaction.js' %}"></script>
 {% endblock %}
 
 {% block js %}
@@ -72,6 +75,11 @@
             preserveSelected: false
         });
     </script>
+    <script>
+        $(document).ready(function () {
+            setupMDE('#id_comments');
+        });
+    </script>
 {% endblock %}
 
 {% block content %}
diff --git a/assets/templates/partials/asset_detail_form.html b/assets/templates/partials/asset_detail_form.html
index 24de43b1..970bfce9 100644
--- a/assets/templates/partials/asset_detail_form.html
+++ b/assets/templates/partials/asset_detail_form.html
@@ -1,4 +1,6 @@
 {% load widget_tweaks %}
+{% load markdown_tags %}
+
 <div class="card">
   <div class="card-header">
     Asset Details
@@ -38,14 +40,14 @@
     <!---TODO: Lower default number of lines in comments box-->
     <div class="form-group">
       <label for="{{ form.comments.id_for_label }}">Comments</label>
-      {% render_field form.comments|add_class:'form-control' %}
+      {% render_field form.comments|add_class:'form-control md-enabled' %}
     </div>
     {% else %}
     <dt>Asset ID</dt>
     <dd>{{ object.asset_id }}</dd>
 
     <dt>Description</dt>
-    <dd style="overflow-wrap: break-word;">{{ object.description }}</dd>
+    <dd>{{ object.description }}</dd>
 
     <dt>Category</dt>
     <dd>{{ object.category }}</dd>
@@ -57,7 +59,7 @@
     <dd>{{ object.serial_number|default:'-' }}</dd>
 
     <dt>Comments</dt>
-    <dd style="overflow-wrap: break-word;">{{ object.comments|default:'-'|linebreaksbr }}</dd>
+    <dd style="overflow-wrap: break-word;">{{ object.comments|default:'-'|markdown }}</dd>
     {% endif %}
   </div>
 </div>
diff --git a/assets/tests/pages.py b/assets/tests/pages.py
index ff5d081c..de47ebb6 100644
--- a/assets/tests/pages.py
+++ b/assets/tests/pages.py
@@ -77,7 +77,7 @@ class AssetForm(FormPage):
         'description': (regions.TextBox, (By.ID, 'id_description')),
         'is_cable': (regions.CheckBox, (By.ID, 'id_is_cable')),
         'serial_number': (regions.TextBox, (By.ID, 'id_serial_number')),
-        'comments': (regions.TextBox, (By.ID, 'id_comments')),
+        'comments': (regions.SimpleMDETextArea, (By.ID, 'id_comments')),
         'purchase_price': (regions.TextBox, (By.ID, 'id_purchase_price')),
         'salvage_value': (regions.TextBox, (By.ID, 'id_salvage_value')),
         'date_acquired': (regions.DatePicker, (By.ID, 'id_date_acquired')),
diff --git a/gulpfile.js b/gulpfile.js
index 7fdc097c..e0eb064b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -27,7 +27,9 @@ function styles(done) {
                     'node_modules/fullcalendar/main.css',
                     'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
                     'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
-                    'node_modules/flatpickr/dist/flatpickr.css',])
+                    'node_modules/flatpickr/dist/flatpickr.css',
+                    'node_modules/simplemde/dist/simplemde.min.css'
+                    ])
     .pipe(sourcemaps.init())
     .pipe(sass().on('error', sass.logError))
     .pipe(gulpif(function(file) { return bs_select.includes(file.relative);}, con('selects.css')))
@@ -62,6 +64,7 @@ function scripts() {
                     'node_modules/fullcalendar/main.js',
                     'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
                     'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js',
+                    'node_modules/simplemde/dist/simplemde.min.js',
                     'node_modules/konami/konami.js',
                     'pipeline/source_assets/js/**/*.js',])
     .pipe(gulpif(function(file) { return base_scripts.includes(file.relative);}, con('base.js')))
diff --git a/package-lock.json b/package-lock.json
index 74fe15fa..07405a93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -965,6 +965,19 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codemirror": {
+      "version": "5.65.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.0.tgz",
+      "integrity": "sha512-gWEnHKEcz1Hyz7fsQWpK7P0sPI2/kSkRX2tc7DFA6TmZuDN75x/1ejnH/Pn8adYKrLEA1V2ww6L00GudHZbSKw=="
+    },
+    "codemirror-spell-checker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
+      "integrity": "sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=",
+      "requires": {
+        "typo-js": "*"
+      }
+    },
     "collection-map": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz",
@@ -3691,6 +3704,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.8.tgz",
+      "integrity": "sha512-dkpJMIlJpc833hbjjg8jraw1t51e/eKDoG8TFOgc5O0Z77zaYKigYekTDop5AplRoKFGIaoazhYEhGkMtU3IeA=="
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -5641,6 +5659,16 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
       "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ=="
     },
+    "simplemde": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/simplemde/-/simplemde-1.11.2.tgz",
+      "integrity": "sha1-ojo12XjSxA7wfewAjJLwcNjggOM=",
+      "requires": {
+        "codemirror": "*",
+        "codemirror-spell-checker": "*",
+        "marked": "*"
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -6445,6 +6473,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typo-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.1.tgz",
+      "integrity": "sha512-bTGLjbD3WqZDR3CgEFkyi9Q/SS2oM29ipXrWfDb4M74ea69QwKAECVceYpaBu0GfdnASMg9Qfl67ttB23nePHg=="
+    },
     "ua-parser-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
diff --git a/package.json b/package.json
index bcedc98b..0ed004a7 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "node-sass": "^7.0.0",
     "popper.js": "^1.16.1",
     "postcss": "^8.4.5",
+    "simplemde": "^1.11.2",
     "uglify-js": "^3.14.5"
   },
   "devDependencies": {
diff --git a/pipeline/source_assets/js/interaction.js b/pipeline/source_assets/js/interaction.js
index a362ec3f..59124599 100644
--- a/pipeline/source_assets/js/interaction.js
+++ b/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);
 
diff --git a/pipeline/source_assets/scss/dark_screen.scss b/pipeline/source_assets/scss/dark_screen.scss
index a00f014a..7296ffcb 100644
--- a/pipeline/source_assets/scss/dark_screen.scss
+++ b/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;
+    }
 }
diff --git a/pipeline/source_assets/scss/screen.scss b/pipeline/source_assets/scss/screen.scss
index 71130573..a92f4428 100644
--- a/pipeline/source_assets/scss/screen.scss
+++ b/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;
+    }
+  }
+}
diff --git a/templates/base.html b/templates/base.html
index aaa3d106..ead9909a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -77,8 +77,11 @@
 </div>
 
 <div class="modal fade" id="modal" role="dialog" tabindex=-1></div>
+
 <script src="{% static 'js/base.js' %}"></script>
+<script src="{% static 'js/marked.min.js' %}"></script>
 {% include 'partials/dark_theme.html' %}
+
 {% block js %}
 {% endblock %}
 </body>