From 300c0194c72c78a8f51e574323ea593526009d84 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Fri, 27 Nov 2020 03:22:41 +0100
Subject: [PATCH] add inline markdown plugins

---
 .vscode/launch.json    |   2 +
 copyparty/__main__.py  |   1 +
 copyparty/httpcli.py   |   1 +
 copyparty/web/md.html  |   5 +-
 copyparty/web/md.js    |  56 +++++++++++++++++-
 copyparty/web/mde.html |   5 +-
 srv/extend.md          | 127 +++++++++++++++++++++++++++++++++++++++++
 7 files changed, 193 insertions(+), 4 deletions(-)
 create mode 100644 srv/extend.md

diff --git a/.vscode/launch.json b/.vscode/launch.json
index baa51a4e..9ad233f0 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -10,6 +10,8 @@
             "cwd": "${workspaceFolder}",
             "args": [
                 //"-nw",
+                "-ed",
+                "-emp",
                 "-a",
                 "ed:wark",
                 "-v",
diff --git a/copyparty/__main__.py b/copyparty/__main__.py
index a69e060d..a0d7251d 100644
--- a/copyparty/__main__.py
+++ b/copyparty/__main__.py
@@ -136,6 +136,7 @@ def main():
     ap.add_argument("-v", metavar="VOL", type=str, action="append", help="add volume")
     ap.add_argument("-q", action="store_true", help="quiet")
     ap.add_argument("-ed", action="store_true", help="enable ?dots")
+    ap.add_argument("-emp", action="store_true", help="enable markdown plugins")
     ap.add_argument("-nw", action="store_true", help="disable writes (benchmark)")
     ap.add_argument("-nih", action="store_true", help="no info hostname")
     ap.add_argument("-nid", action="store_true", help="no info disk-usage")
diff --git a/copyparty/httpcli.py b/copyparty/httpcli.py
index 9bd9e1e2..46fd96c8 100644
--- a/copyparty/httpcli.py
+++ b/copyparty/httpcli.py
@@ -963,6 +963,7 @@ class HttpCli(object):
             "edit": "edit" in self.uparam,
             "title": html_escape(self.vpath),
             "lastmod": int(ts_md * 1000),
+            "md_plug": "true" if self.args.emp else "false",
             "md": "",
         }
         sz_html = len(template.render(**targs).encode("utf-8"))
diff --git a/copyparty/web/md.html b/copyparty/web/md.html
index b9545cad..fced2989 100644
--- a/copyparty/web/md.html
+++ b/copyparty/web/md.html
@@ -123,8 +123,11 @@ write markdown (most html is 🙆 too)
 	
 	<script>
 
-var link_md_as_html = false;  // TODO (does nothing)
 var last_modified = {{ lastmod }};
+var md_opt = {
+	link_md_as_html: false,
+	allow_plugins: {{ md_plug }}
+};
 
 (function () {
     var btn = document.getElementById("lightswitch");
diff --git a/copyparty/web/md.js b/copyparty/web/md.js
index 21e05f72..714895cf 100644
--- a/copyparty/web/md.js
+++ b/copyparty/web/md.js
@@ -18,6 +18,10 @@ var dbg = function () { };
 // dbg = console.log
 
 
+// plugins
+var md_plug = {};
+
+
 function hesc(txt) {
     return txt.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -154,12 +158,52 @@ function copydom(src, dst, lv) {
 }
 
 
+function load_plug(md_text, plug_type) {
+    if (!md_opt.allow_plugins)
+        return md_text;
+
+    var find = '\n```copyparty_' + plug_type + '\n';
+    var ofs = md_text.indexOf(find);
+    if (ofs === -1)
+        return md_text;
+
+    var ofs2 = md_text.indexOf('\n```', ofs + 1);
+    if (ofs2 == -1)
+        return md_text;
+
+    var js = md_text.slice(ofs + find.length, ofs2 + 1);
+    var md = md_text.slice(0, ofs + 1) + md_text.slice(ofs2 + 4);
+
+    var old_plug = md_plug[plug_type];
+    if (!old_plug || old_plug[1] != js) {
+        js = 'const x = { ' + js + ' }; x;';
+        var x = eval(js);
+        if (x['ctor']) {
+            x['ctor']();
+            delete x['ctor'];
+        }
+        md_plug[plug_type] = [x, js];
+    }
+
+    return md;
+}
+
+
 function convert_markdown(md_text, dest_dom) {
+    md_text = md_text.replace(/\r/g, '');
+    md_text = load_plug(md_text, 'pre');
+    md_text = load_plug(md_text, 'post');
+
     marked.setOptions({
         //headerPrefix: 'h-',
         breaks: true,
         gfm: true
     });
+
+    if (md_plug['pre']) {
+        marked.use(md_plug['pre'][0]);
+    }
+
     var md_html = marked(md_text);
     var md_dom = new DOMParser().parseFromString(md_html, "text/html").body;
 
@@ -209,7 +253,7 @@ function convert_markdown(md_text, dest_dom) {
             continue;
 
         var nline = parseInt(el.getAttribute('data-ln')) + 1;
-        var lines = el.innerHTML.replace(/\r?\n<\/code>$/i, '</code>').split(/\r?\n/g);
+        var lines = el.innerHTML.replace(/\n<\/code>$/i, '</code>').split(/\n/g);
         for (var b = 0; b < lines.length - 1; b++)
             lines[b] += '</code>\n<code data-ln="' + (nline + b) + '">';
 
@@ -242,6 +286,9 @@ function convert_markdown(md_text, dest_dom) {
         el.innerHTML = '<a href="#' + id + '">' + el.innerHTML + '</a>';
     }
 
+    if (md_plug['post'])
+        md_plug['post'][0].render(md_dom);
+
     copydom(md_dom, dest_dom, 0);
 }
 
@@ -281,7 +328,12 @@ function init_toc() {
 
             elm.childNodes[0].setAttribute('ctr', ctr.slice(0, lv).join('.'));
 
-            html.push('<li>' + elm.innerHTML + '</li>');
+            var elm2 = elm.cloneNode(true);
+            elm2.childNodes[0].textContent = elm.textContent;
+            while (elm2.childNodes.length > 1)
+                elm2.removeChild(elm2.childNodes[1]);
+
+            html.push('<li>' + elm2.innerHTML + '</li>');
 
             if (anchor != null)
                 anchors.push(anchor);
diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html
index f87a81b8..0666ff5d 100644
--- a/copyparty/web/mde.html
+++ b/copyparty/web/mde.html
@@ -22,8 +22,11 @@
 	</div>
 	<script>
 
-var link_md_as_html = false;  // TODO (does nothing)
 var last_modified = {{ lastmod }};
+var md_opt = {
+	link_md_as_html: false,
+	allow_plugins: {{ md_plug }}
+};
 
 var lightswitch = (function () {
 	var fun = function () {
diff --git a/srv/extend.md b/srv/extend.md
new file mode 100644
index 00000000..fd25a8e4
--- /dev/null
+++ b/srv/extend.md
@@ -0,0 +1,127 @@
+# hi
+this showcases my worst idea yet; *extending markdown with inline javascript*
+
+due to obvious reasons it's disabled by default, and can be enabled with `-emp`
+
+the examples are by no means correct, they're as much of a joke as this feature itself
+
+
+### sub-header
+nothing special about this one
+
+
+## except/
+this one becomes a hyperlink to ./except/ thanks to
+* the `copyparty_pre` plugin at the end of this file
+* which is invoked as a markdown filter every time the document is modified
+* which looks for headers ending with a `/` and erwrites all headers below that
+
+it is a passthrough to the markdown extension api, see https://marked.js.org/using_pro
+
+
+### these/
+and this one becomes ./except/these/
+
+
+#### ones.md
+finally ./except/these/ones.md
+
+
+### also-this.md
+whic hshoud be ./except/also-this.md
+
+
+
+
+# ok
+now for another extension type, `copyparty_post` which is called to manipulate the generated dom instead
+
+the values in the `ex:` columns are linkified to `example.com/$value`
+
+| ex:foo       | bar      | ex:baz |
+| ------------ | -------- | ------ |
+| asdf         | nice     | fgsfds |
+| more one row | hi hello | aaa    |
+
+the difference is that with `copyparty_pre` you'll probably break various copyparty features but if you use `copyparty_post` then future copyparty versions will probably break you
+
+
+
+
+# heres the plugins
+if there is anything below ths line in the preview then the plugin feature is disabled (good)
+
+
+
+
+```copyparty_pre
+ctor() {
+    md_plug['h'] = {
+        on: false,
+        lv: -1,
+        path: []
+    }
+},
+walkTokens(token) {
+    if (token.type == 'heading') {
+        var h = md_plug['h'],
+            is_dir = token.text.endsWith('/');
+        
+        if (h.lv >= token.depth) {
+            h.on = false;
+        }
+        if (!h.on && is_dir) {
+            h.on = true;
+            h.lv = token.depth;
+            h.path = [token.text];
+        }
+        else if (h.on && h.lv < token.depth) {
+            h.path = h.path.slice(0, token.depth - h.lv);
+            h.path.push(token.text);
+        }
+        if (!h.on)
+            return false;
+
+        var path = h.path.join('');
+        var emoji = is_dir ? '📂' : '📜';
+        token.tokens[0].text = '<a href="' + path + '">' + emoji + ' ' + path + '</a>';
+    }
+    if (token.type == 'paragraph') {
+        //console.log(JSON.parse(JSON.stringify(token.tokens)));
+        for (var a = 0; a < token.tokens.length; a++) {
+            var t = token.tokens[a];
+            if (t.type == 'text' || t.type == 'strong' || t.type == 'em') {
+                var ret = '', text = t.text;
+                for (var b = 0; b < text.length; b++)
+                    ret += (Math.random() > 0.5) ? text[b] : text[b].toUpperCase();
+                
+                t.text = ret;
+            }
+        }
+    }
+    return true;
+}
+```
+
+
+
+```copyparty_post
+render(dom) {
+    var ths = dom.querySelectorAll('th');
+    for (var a = 0; a < ths.length; a++) {
+        var th = ths[a];
+        if (th.textContent.indexOf('ex:') === 0) {
+            th.textContent = th.textContent.slice(3);
+            var nrow = 0;
+            while ((th = th.previousSibling) != null)
+                nrow++;
+            
+            var trs = ths[a].parentNode.parentNode.parentNode.querySelectorAll('tr');
+            for (var b = 1; b < trs.length; b++) {
+                var td = trs[b].childNodes[nrow];
+                td.innerHTML = '<a href="//example.com/' + td.innerHTML + '">' + td.innerHTML + '</a>';
+            }
+        }
+    }
+}
+```