def sample_page(**kwargs) -> Document:
app = Container()
title = H1(parent=app)
title.textContent = 'Todo example'
form = FormGroup(parent=app)
text_input = TextInput()
form.append(text_input)
add_button = Button(parent=form)
add_button.textContent = 'ADD'
todo_list = Div(parent=app)
todo_heading = Div(parent=todo_list)
todo_heading.append('Todo list')
# add_button.addEventListener('click')
def new_item(event=None) -> Tag:
item = Item()
item.append('New Item')
todo_list.append(item)
return item
add_button.addEventListener('click', new_item)
page = get_document(app=app, **kwargs)
for css in css_files:
page.add_cssfile(css)
for js in js_files:
page.add_jsfile(js)
return page
def sample_page(**kwargs) -> Document:
app = Container()
title = H1(parent=app)
title.textContent = 'Todo example'
form = FormGroup(parent=app)
text_input = TextInput()
form.append(text_input)
add_button = Button(parent=form)
add_button.textContent = 'ADD'
todo_list = Div(parent=app)
todo_heading = Div(parent=todo_list)
todo_heading.append('Todo list')
# add_button.addEventListener('click')
def new_item(event=None) -> Tag:
item = Item()
item.append('New Item')
todo_list.append(item)
return item
add_button.addEventListener('click', new_item)
page = get_document(app=app, **kwargs)
for css in css_files:
page.add_cssfile(css)
for js in js_files:
page.add_jsfile(js)
return page
class Editor(Row):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.md = m.Markdown(HighlighterRenderer(), extensions=("fenced-code",))
self.css = Style(parent=self)
self.setAttribute("style", "height: 80vh;")
editor_col = Col6(parent=self)
self.editor = TextArea(parent=editor_col)
self.editor.setAttribute("style", "height: 80vh")
viewer_col = Col6(parent=self)
style_selector = Select(parent=viewer_col)
styles = sorted(get_all_styles())
styles.remove("default")
style_selector.appendChild(Option("default", value="default", selected=True))
for style in styles:
style_selector.appendChild(Option(style, value=style))
style_selector.addEventListener("change", lambda event: self.set_style(event.currentTarget["value"]))
self.viewer = Div(parent=viewer_col)
self.viewer.setAttribute(
"style",
"""
height: 100%;
min-height: 80vh;
padding: 1em 2em;
border: 1px solid #ddd;
border-radius: 3px;
""",
)
self.editor.addEventListener("input", self.render)
self.editor.addEventListener("change", self.render)
self.set_style("default")
self.editor.textContent = src
self.viewer.innerHTML = self.md(src)
def render(self, event):
self.viewer.innerHTML = self.md(event.currentTarget["value"])
def set_style(self, style: str):
self.css.innerHTML = HtmlFormatter(style=style).get_style_defs()
def sample_page(**kwargs):
doc = get_document(**kwargs)
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
