[gnome-builder/wip/chergert/markdown] markdown: live scrolling for markdown

[Christian Hergert <chergert src gnome org>]

commit 074fad2c06e48cdd5e7c7faad0e4612dfdc9a30d
Author: Christian Hergert <christian hergert me>
Date:   Fri Oct 2 17:32:33 2015 -0700

    markdown: live scrolling for markdown

 .../html-preview/html_preview_plugin/__init__.py   |   28 +++++-
 .../html_preview_plugin/markdown-view.js           |   97 +++++++++++++++++++-
 2 files changed, 122 insertions(+), 3 deletions(-)
---
diff --git a/plugins/html-preview/html_preview_plugin/__init__.py 
b/plugins/html-preview/html_preview_plugin/__init__.py
index 6cd4155..4c39580 100644
--- a/plugins/html-preview/html_preview_plugin/__init__.py
+++ b/plugins/html-preview/html_preview_plugin/__init__.py
@@ -23,6 +23,7 @@ from gettext import gettext as _
 
 import gi
 import os
+import re
 
 gi.require_version('Builder', '1.0')
 gi.require_version('Ide', '1.0')
@@ -37,6 +38,10 @@ from gi.repository import Ide
 from gi.repository import WebKit2
 from gi.repository import Peas
 
+TAG = re.compile(u'(<.+?>)')
+IDENT = u'53bde44bb4f156e94a85723fe633c80b54f11f69'
+B = re.compile(u'(?<=[a-zA-Z\d\u4e00-\u9fa5])\B(?=[a-zA-Z\d\u4e00-\u9fa5])')
+
 class HtmlPreviewData(GObject.Object, Builder.ApplicationAddin):
     MARKDOWN_CSS = None
     MARKED_JS = None
@@ -104,7 +109,6 @@ class HtmlPreviewView(Builder.View):
         settings = self.webview.get_settings()
         settings.enable_html5_local_storage = False
 
-
         language = document.get_language()
         if language and language.get_id() == 'markdown':
             self.markdown = True
@@ -120,7 +124,27 @@ class HtmlPreviewView(Builder.View):
         return self.document
 
     def get_markdown(self, text):
-        text = text.replace("\"", "\\\"").replace("\n", "\\n")
+        # Determine the location of the insert cursor.
+        insert = self.document.get_insert()
+        iter = self.document.get_iter_at_mark(insert)
+        line = iter.get_line()
+
+        # However, we want to try to give some context while editing.
+        # So try to give 10 lines of context above.
+        #if line < 10:
+        #    line = 0
+        #else:
+        #    line -= 10
+
+        lines = text.split('\n')
+        if TAG.search(lines[line]) is not None:
+            lines[line] = TAG.sub(u'\\1 ' + IDENT, lines[line], 1)
+        else:
+            lines[line] = B.sub(IDENT, lines[line], 1)
+
+        # Generate our custom HTML with replaced text
+        text = '\n'.join(lines).replace("\"", "\\\"").replace("\n", "\\n")
+
         params = (HtmlPreviewData.MARKDOWN_CSS,
                   text,
                   HtmlPreviewData.MARKED_JS,
diff --git a/plugins/html-preview/html_preview_plugin/markdown-view.js 
b/plugins/html-preview/html_preview_plugin/markdown-view.js
index 80e32dd..4c4ee4d 100644
--- a/plugins/html-preview/html_preview_plugin/markdown-view.js
+++ b/plugins/html-preview/html_preview_plugin/markdown-view.js
@@ -1,5 +1,99 @@
+// most of this file is based on markdown-preview.vim
+//
+
+var renderer = new marked.Renderer();
+var flagSign = "53bde44bb4f156e94a85723fe633c80b54f11f69";
+var rFlagSign = flagSign.split('').reverse().join('');
+var aPoint = '<a style="position: relative;" href="#'+ rFlagSign +'" id="'+ rFlagSign +'"></a>';
+
+        renderer.heading = function(text, level, raw) {
+            var result = '';
+            if (text.indexOf(flagSign) !== -1) {
+                text = text.replace(flagSign, '');
+                raw = text;
+                result = aPoint;
+            }
+            return result
+                + '<h'
+                + level
+                + ' id="'
+                + this.options.headerPrefix
+                + raw.toLowerCase().replace(/[^\w]+/g, '-')
+                + '">'
+                + text
+                + '</h'
+                + level
+                + '>\n';
+        };
+
+        renderer.html = function(html) {
+            var i, len, line;
+            html = html.split('\n');
+            for(i = 0, len = html.length; i < len; i++) {
+                line = html[i];
+                if(line.indexOf(flagSign) !== -1) {
+                    html[i] = line.replace(flagSign, '') + aPoint;
+                }
+            }
+            return html.join('\n');
+        };
+
+        renderer.listitem = function(text) {
+            text = text.replace(flagSign, aPoint);
+            return '<li>' + text + '</li>\n';
+        };
+
+        renderer.paragraph = function(text) {
+            text = text.replace(flagSign, aPoint);
+            return '<p>' + text + '</p>\n';
+        };
+
+        renderer.tablerow = function(content) {
+            content = content.replace(flagSign, aPoint);
+            return '<tr>\n' + content + '</tr>\n';
+        };
+
+        renderer.codespan = function(text) {
+            var result = '';
+            if(text.indexOf(flagSign) !== -1) {
+                text = text.replace(flagSign, '');
+                result = aPoint;
+            }
+            return result + '<code>' + text + '</code>\n'
+        };
+
+        renderer.image = function(href, title, text) {
+            var result = '';
+            if(!!title && title.indexOf(flagSign) !== -1) {
+                title = title.replace(flagSign, '');
+                result = aPoint;
+            }
+            if(!!text && text.indexOf(flagSign) !== -1) {
+                text = text.replace(flagSign, '');
+                result = aPoint;
+            }
+            return result + rImage.call(renderer, href, title, text);
+        };
+
+        renderer.link = function(href, title, text) {
+            var result = '';
+            if(!!href && href.indexOf(flagSign) !== -1) {
+                href = href.replace(flagSign, '');
+                result = aPoint;
+            }
+            if(!!title && title.indexOf(flagSign) !== -1) {
+                title = title.replace(flagSign, '');
+                result = aPoint;
+            }
+            if(!!text && text.indexOf(flagSign) !== -1) {
+                text = text.replace(flagSign, '');
+                result = aPoint;
+            }
+            return result + rLink.call(renderer, href, title, text);
+        };
+
 marked.setOptions({
-  renderer: new marked.Renderer(),
+  renderer: renderer,
   gfm: true,
   tables: true,
   breaks: false,
@@ -11,4 +105,5 @@ marked.setOptions({
 
 function preview(){
     document.getElementById('preview').innerHTML = marked(str);
+    location.hash = '#' + rFlagSign;
 }