improve replace_img_src_base64: use bs4

Phantom's do not support them.

MLPApi.py

@@ -55,20 +55,25 @@ def get_style():
     return content
 
 def markdown2html(md, basepath):
-    html = ''
-    html += '<style>\n{}\n</style>\n'.format(get_style())
+    html = '<style>\n{}\n</style>\n'.format(get_style())
     # pre_with_br
     html += pre_with_br(pre_tables(md2.markdown(md, extras=['fenced-code-blocks',
                                                             'no-code-highlighting', 'tables'])))
     # the option no-code-highlighting does not exists in the official version of markdown2 for now
     # I personaly edited the file (markdown2.py:1743)
-
-    html = html.replace('&nbsp;', '&nbspespace;') # save where are the spaces
-
+    html = strip_html_comments(html)
 
     # exception, again, because <pre> aren't supported by the phantoms
-    html = html.replace('&nbspespace;', '<i class="space">.</i>')
+    # so, because this is monosaped font, I just replace it with a '.' and make transparent ;)
+    html = html.replace('&nbsp;', '<i class="space">.</i>')
+
+    # Phantoms have problem with images size when they're loaded from an url/path
+    # So, the solution is to convert them to base64
     html = replace_img_src_base64(html, basepath=os.path.dirname(basepath))
+
+    # BeautifulSoup uses the <br/> but the sublime phantoms do not support them...
+    html = html.replace('<br/>', '<br />')
+
     return html
 
 def show_html(md_view, preview):

MarkdownLivePreview.tasks

@@ -1,5 +1,6 @@
 Fast:
   ☐ cache image in object when used, so that it's faster @needsTest
+  ☐ add settings to keep md view open #13
 
 Medium:
   ☐ auto refresh preview if loading images

default.css

@@ -42,6 +42,7 @@ pre code {
 pre code .space {
     color: var(--light-bg);
 }
+
 pre.table {
     background-color: var(--background);
 }
@@ -50,6 +51,10 @@ pre.table code {
     padding: 0;
     margin: 0;
 }
+pre.table code .space {
+    color: var(--background);
+}
+
 
 kbd {
     padding: 0 5px;

docs/index.md

@@ -139,10 +139,10 @@ Here's what I'd recommend (and use):
     originally hidden
 
 That's it! I hope you'll enjoy using this package! If it's the case, please let your friends know
-about it, and even myself by sending me a [tweet][] or staring the repo
+about it, and even myself by sending me a [tweet][] or staring the repo!
 <iframe
 src="https://ghbtns.com/github-btn.html?user=math2001&repo=MarkdownLivePreview&type=star&count=true&size=large"
-frameborder="0" scrolling="0" width="160px" height="30px"></iframe>!
+frameborder="0" scrolling="0" style="width: 120px; height: 30px; vertical-align: bottom"></iframe>
 
 [st]: https://sublimetext.com
 [Markdown Extended]: https://packagecontrol.io/packages/Markdown%20Extended

docs/license.md

@@ -0,0 +1,24 @@
+This project is published under MIT license.
+
+> The MIT License is a permissive license that is short and to the point. It lets people do anything
+> they want with your code as long as they provide attribution back to you and don’t hold you
+> liable.
+>
+> — *from [choosealicense.com](http://choosealicense.com), by [GitHub](https://github.com)*
+
+Copyright 2017 Mathieu PATUREL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+andassociated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

functions.py

@@ -4,39 +4,36 @@ import os.path
 import sublime
 import re
 from .image_manager import ImageManager
-from bs4 import BeautifulSoup
+from bs4 import BeautifulSoup, Comment as html_comment
 
 def plugin_loaded():
     global error404, loading
     loading = sublime.load_resource('Packages/MarkdownLivePreview/loading.txt')
     error404 = sublime.load_resource('Packages/MarkdownLivePreview/404.txt')
 
+def strip_html_comments(html):
+    soup = BeautifulSoup(html, 'html.parser')
+    for element in soup.find_all(text=lambda text: isinstance(text, html_comment)):
+        element.extract()
+    return str(soup)
 
 def replace_img_src_base64(html, basepath):
     """Really messy, but it works (should be updated)"""
-    index = -1
-    tag_start = '<img src="'
-    shtml, html = html, list(html)
-    while True:
-        index = shtml.find(tag_start, index + 1)
-        if index == -1:
-            break
-        path, end = get_content_till(html, '"', start=index + len(tag_start))
-        if ''.join(path).startswith('data:image/'):
-            continue
-        if ''.join(path).startswith(tuple(get_settings().get('load_from_internet' + \
-                                                    '_when_starts', []))):
-            image = ImageManager.get(''.join(path))
-            image = image or loading
 
-        else:
-            # local image
-            path = ''.join(path)
-            path = os.path.join(basepath, path)
-            image = to_base64(path)
-        html[index+len(tag_start):end] = image
-        shtml = ''.join(html)
-    return ''.join(html)
+
+    soup = BeautifulSoup(html)
+    load_from_internet_starters = get_settings().get('load_from_internet_when_starts')
+    for img in soup.find_all('img'):
+        if img['src'].startswith('data:image/'):
+            continue
+        elif img['src'].startswith(tuple(load_from_internet_starters)):
+            image = ImageManager.get(img['src']) or loading
+        else: # this is a local image
+            image = to_base64(os.path.join(basepath, src))
+
+        img['src'] = image
+
+    return str(soup)
 
 def is_markdown_view(view):
     return 'markdown' in view.scope_name(0)
@@ -95,4 +92,4 @@ def pre_with_br(html):
         code = pre.find('code')
         code.replaceWith(BeautifulSoup(''.join(str(node) for node in pre.contents) \
                       .replace('\n', '<br/>').replace(' ', '<i class="space">.</i>'), 'html.parser'))
-    return str(soup).replace('<br/>', '<br />')
+    return str(soup)

sample.md

@@ -1,5 +1,7 @@
 # Hello world
 
+<!-- supports comments -->
+
 Some `inline code` with *italic* and **bold** text.
 
 ```python
@@ -24,7 +26,7 @@ if you is moods.curious:
 | 45        | John  |
 | `<table>` | `><`  |
 
-[Sublime Text Logo](https://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png)
+![Sublime Text Logo](https://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png)
 
 Some plugin I just *need*: