#!/usr/bin/env python3
# -*- coding: utf-8 -*-

from markdown import markdown

from wdom.document import get_document
from wdom.tag import Div
from wdom.themes.bootstrap3 import css_files, js_files
from wdom.themes.bootstrap3 import TextArea, Col6, Row, H1, Hr


class Editor(Row):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setAttribute('style', 'height: 80vh;')
        editor_col = Col6(parent=self)
        viewer_col = Col6(parent=self)
        self.editor = TextArea(parent=editor_col)
        self.editor.setAttribute('style', 'height: 80vh')
        self.viewer = Div(parent=viewer_col)
        self.viewer.setAttribute(
            'style',
            '''
            height: 100%;
            min-height: 80vh;
            padding: 0 2em;
            border: 1px solid #ddd;
            border-radius: 3px;
            ''',
        )

        self.editor.addEventListener('input', self.render)
        self.editor.addEventListener('change', self.render)

    def render(self, data):
        html = markdown(data['value'])
        self.viewer.innerHTML = html


def sample_page():
    doc = get_document()
    for js in js_files:
        doc.add_jsfile(js)
    for css in css_files:
        doc.add_cssfile(css)
    app = Div(parent=doc.body, style='width: 90vw; margin: auto')
    title = H1('Simple Markdown Editor', class_='text-center')
    app.appendChild(title)
    app.appendChild(Hr())
    app.appendChild(Editor())
    return doc

@@ -45,37 +45,192 @@
 *-%0A%0A
-from markdown import markdown
+import misaka as m%0Afrom pygments import highlight%0Afrom pygments.styles import get_all_styles%0Afrom pygments.formatters import HtmlFormatter%0Afrom pygments.lexers import get_lexer_by_name
 %0A%0Afr
@@ -270,33 +270,8 @@
 ent%0A
-from wdom.tag import Div%0A
 from
@@ -355,16 +355,21 @@
 3 import
+ Div,
  TextAre
@@ -393,111 +393,818 @@
  Hr%0A
-%0A%0Aclass Editor(Row):%0A    def __init__(self, *args, **kwargs):%0A        super().__init__(*args, **kwargs)
+from wdom.themes.bootstrap3 import Select, Option, Style%0A%0A%0Asrc = '''%0A## Source Code Example%0A%0A%60%60%60py%0Afrom collections import OrderedDict%0A%0Aclass MyDict(OrderedDict):%0A    def __init__(self, *args, **kwargs):%0A        super().__init__(*args, **kwargs)%0A        print('Create my dict')%0A%60%60%60%0A'''%0A%0A%0Aclass HighlighterRenderer(m.HtmlRenderer):%0A    def blockcode(self, text, lang):%0A        if not lang:%0A            return '%5Cn%3Cpre%3E%3Ccode%3E%7B%7D%3C/code%3E%3C/pre%3E%5Cn'.format(text.strip())%0A        lexer = get_lexer_by_name(lang)%0A        formatter = HtmlFormatter()%0A        return highlight(text, lexer, formatter)%0A%0A%0Aclass Editor(Row):%0A    def __init__(self, *args, **kwargs):%0A        super().__init__(*args, **kwargs)%0A        self.md = m.Markdown(HighlighterRenderer(), extensions=('fenced-code',))%0A        self.css = Style(parent=self)%0A
 %0A   
@@ -1295,47 +1295,8 @@
 lf)%0A
-        viewer_col = Col6(parent=self)%0A
     
@@ -1399,16 +1399,486 @@
  80vh')%0A
+%0A        viewer_col = Col6(parent=self)%0A%0A        style_selector = Select(parent=viewer_col)%0A        styles = sorted(get_all_styles())%0A        styles.remove('default')%0A        style_selector.appendChild(%0A            Option('default', value='default', selected=True))%0A        for style in styles:%0A            style_selector.appendChild(Option(style, value=style))%0A        style_selector.addEventListener(%0A            'change', lambda data: self.set_style(data%5B'value'%5D))%0A%0A
         
@@ -2062,17 +2062,19 @@
 adding: 
-0
+1em
  2em;%0A  
@@ -2287,16 +2287,134 @@
 ender)%0A%0A
+        self.set_style('default')%0A        self.editor.textContent = src%0A        self.viewer.innerHTML = self.md(src)%0A%0A
     def 
@@ -2445,23 +2445,39 @@
     
-html = markdown
+self.viewer.innerHTML = self.md
 (dat
@@ -2488,35 +2488,69 @@
 alue'%5D)%0A
+%0A
  
+   def set_style(self, style:str):%0A
        
+ 
 self.
-viewer
+css
 .innerHT
@@ -2558,12 +2558,51 @@
 L = 
-h
+H
 tml
+Formatter(style=style).get_style_defs()
 %0A%0A%0Ad

Support syntax highlighting in markdown example