Refactoring, making raw html work

more info on readme

Author: AddisonSchiller

mfr/extensions/md/README.md

@@ -4,8 +4,9 @@
 Most of the packages are in there to try to match what the OSF wiki is doing. The two exceptions being markdown-it-highlightjs.js and markdown-it-mathjax.js. The highlighter matches the functionality of what is on the osf however, and the markdown-it-mathjax.js increases functionality with mathjax. 
 
 to get all the libraries needed:
+Note: You do not need to use npm, you can easily get them off of github.
 
-```
+```bash
 npm [email protected]
 npm install @centerforopenscience/[email protected]
 npm install [email protected]
@@ -14,30 +15,38 @@ npm install [email protected]
 npm install [email protected]
 ```
 
+github:
+
+https://github.com/cos-forks/markdown-it-toc
+https://github.com/valeriangalliat/markdown-it-highlightjs
+https://github.com/brianjgeiger/markdown-it-ins-del
+https://github.com/svbergerem/markdown-it-sanitizer
+https://github.com/classeur/markdown-it-mathjax
+
 To add a new library, you need to make sure its loadable in md.js somehow, either through exporting via `root.<name>` or some other means. Some of the markdown plugins added have custom code in them to load them into `root`.
 
 Libraries should try to use the same version as the ones used on the OSF. The plugins do not matter as much, but `markdown-it` and `Mathjax` you should try to match exactly because styling can change between versions.
 
 To add a new library that is not already set up to export to `root` can be a bit tricky, but the gist of it is, wrap the plugin in this code:
 
-```
+```javascript
 ;(function (root, factory) {
-  if (typeof exports === 'object') {
-    module.exports = factory()
+    if (typeof exports === 'object') {
+        module.exports = factory()
   } else {
-    root.<PLUGIN_NAME> = factory()
-  }
+        root.<PLUGIN_NAME> = factory()
+    }
 })(this, function () {
 
 
-return function(md){
+    return function(md){
 
-    .....
-}
+        .....
+    }
 
 })
 ```
 
 And then modify it to work in this context. See other plugins for examples.
 
-Then, in md.js, you can add a plugin to the markdown renderer by adding a `.use(<window.<PLUGIN_NAME>)`
+Then, in md.js, you can add a plugin to the markdown renderer by adding a `.use(<window.<PLUGIN_NAME>)` after loading the file into `viewer.mako`

mfr/extensions/md/render.py

@@ -4,7 +4,7 @@
 from mako.lookup import TemplateLookup
 
 from mfr.core import extension
-
+from mfr.extensions.md.settings import BLEACH_WHITELIST
 
 class MdRenderer(extension.BaseRenderer):
 
@@ -19,7 +19,9 @@ def __init__(self, *args, **kwargs):
     def render(self):
         """Render a markdown file to html."""
         with open(self.file_path, 'r') as fp:
-            body = fp.read()
+            # Bleach will bug out on unclosed tags. OSF wiki does not. This is
+            # Due to versioning problems: https://github.com/mozilla/bleach/issues/271
+            body = bleach.clean(fp.read(), **BLEACH_WHITELIST)
             return self.TEMPLATE.render(base=self.assets_url, body=body)
 
     @property

mfr/extensions/md/settings.py

@@ -0,0 +1,23 @@
+BLEACH_WHITELIST = {
+    'tags': [
+        'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'blockquote', 'br',
+        'center', 'cite', 'code',
+        'dd', 'del', 'dfn', 'div', 'dl', 'dt', 'em', 'embed', 'font',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins',
+        'kbd', 'li', 'object', 'ol', 'param', 'pre', 'p', 'q',
+        's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup',
+        'table', 'tbody', 'td', 'th', 'thead', 'tr', 'tt', 'ul', 'u',
+        'var', 'wbr',
+    ],
+    'attributes': [
+        'align', 'alt', 'border', 'cite', 'class', 'dir',
+        'height', 'href', 'id', 'src', 'style', 'title', 'type', 'width',
+        'face', 'size',  # font tags
+        'salign', 'align', 'wmode', 'target',
+    ],
+    'styles': [
+        'top', 'left', 'width', 'height', 'position',
+        'background', 'font-size', 'text-align', 'z-index',
+        'list-style',
+    ]
+}

mfr/extensions/md/static/js/md.js

@@ -5,7 +5,7 @@ var bootstrapTable = function(md) {
 };
 
 var markdown = new MarkdownIt('commonmark', {
-    html: false,
+    html: true,
     linkify: true
 })
     .use(window.markdownitToc)
@@ -18,4 +18,5 @@ var markdown = new MarkdownIt('commonmark', {
     .use(bootstrapTable)
     .disable('strikethrough');
 
-document.getElementById("jaxified").innerHTML = markdown.render(document.getElementById("jaxified").innerHTML)
+
+document.getElementById("jaxified").innerHTML = markdown.render(document.getElementById("jaxified").innerHTML);

mfr/extensions/md/templates/viewer.mako

@@ -1,12 +1,12 @@
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
-
-
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
 <link type="text/css" rel="stylesheet" href="${base}/css/highlightjs-default.css">
-
 <link rel="stylesheet" href="${base}/css/default.css">
 
+<div class="mfrViewer" id="jaxified">
+    ${body}
+</div>
+
 <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
         tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true},
@@ -18,13 +18,9 @@
 <script type="text/javascript" 
 src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
 ></script>
-
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 
-<div class="mfrViewer" id="jaxified">
-    ${body | h}
-</div>
-
+<!-- Order matters here -->
 <script src="/static/js/mfr.js"></script>
 <script src="/static/js/mfr.child.js"></script>
 <script src="${base}/js/markdown-it.min.js"></script>