add markdown suppport

pyscript.core/src/stdlib/pyweb/ui/__init__.py

@@ -1 +1 @@
-from . import elements, shoelace
+from . import elements, shoelace, markdown

pyscript.core/src/stdlib/pyweb/ui/markdown.py

@@ -0,0 +1,14 @@
+"""Markdown module to generate web/HTML components from Markdown code"""
+from pyscript import document, window
+from pyweb.ui.elements import TextElementBase
+
+
+class markdown(TextElementBase):
+    """Markdown component to render HTML from Markdown code"""
+    tag = 'div'
+
+    def __init__(self, content, style = None, **kwargs):
+        # TODO: We should sanitize the content!!!!!
+        html = window.marked.parse(content)
+        super().__init__(html, style=style, **kwargs)
+

pyscript.core/test/ui/demo.py

@@ -5,9 +5,7 @@ from pyweb import pydom
 from pyweb.ui import elements as el
 from pyweb.ui import shoelace
 
-# from marked import Markdown
-# import element as el
-
+from pyweb.ui.markdown import markdown
 
 # Style dictionary for code blocks
 STYLE_CODE_BLOCK = {"text-align": "left", "background-color": "#eee", "padding": "20px"}
@@ -15,15 +13,7 @@ STYLE_CODE_BLOCK = {"text-align": "left", "background-color": "#eee", "padding":
 # First thing we do is to load all the external resources we need
 shoelace.load_resources()
 
-
-def Markdown(txt):
-    # TODO: placeholder until we have a proper Markdown component
-    return el.div(txt)
-
-
 # Let's define some convenience functions first
-
-
 def create_component_details(component):
     """Create a component details card.
 
@@ -44,7 +34,7 @@ def create_component_details(component):
     div.append(el.h1(component))
     details = example.__doc__ or f"Details missing for component {component}"
 
-    div.append(Markdown(details))
+    div.append(markdown(details))
 
     # Create the example and code block
     div.append(el.h2("Example:"))
@@ -111,7 +101,7 @@ def create_example_grid(widget, code):
     # Add the widget
     grid.append(el.div(widget))
     # Add the code div
-    widget_code = Markdown(
+    widget_code = markdown(
         dedent(
             f"""
 ```python
@@ -142,7 +132,7 @@ def create_main_area():
 
     div.append(el.h2("What is PyShoes?"))
     div.append(
-        Markdown(
+        markdown(
             dedent(
                 """\
         PyDom UI is a totally immagnary exercise atm but..... imagine it is a Python library that allows you to create
@@ -158,7 +148,7 @@ def create_main_area():
     div.append(el.h2("What can I do with PyShoes?"))
 
     div.append(
-        Markdown(
+        markdown(
             dedent(
                 """\
         You can create web applications using Python only.
@@ -196,9 +186,9 @@ def create_markdown_components_page():
 
     @when("click", translate_button)
     def translate_markdown():
-        result_div.html = Markdown(markdown_txt_area.value).html
+        result_div.html = markdown(markdown_txt_area.value).html
         print("TOOOO", markdown_txt_area.value)
-        print("Translated", Markdown(markdown_txt_area.value))
+        print("Translated", markdown(markdown_txt_area.value))
 
     main_section = el.div(
         [

pyscript.core/test/ui/index.html

@@ -12,7 +12,7 @@
         <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
         <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js"></script> -->
 
-        <!-- <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/lib/marked.umd.min.js"></script> -->
+        <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/lib/marked.umd.min.js"></script>
 
         <!-- SHOWLACE CUSTOM CSS -->
         <style>

pyscript.core/types/stdlib/pyscript.d.ts

@@ -13,6 +13,7 @@ declare namespace _default {
         ui: {
             "__init__.py": string;
             "elements.py": string;
+            "markdown.py": string;
             "shoelace.py": string;
         };
     };