(Draft/Proof of concept) Render markdown to Dioxus nodes using ASTs

Cargo.toml

@@ -1,11 +1,20 @@
 [package]
 name = "dioxus_markdown"
-version = "0.3.0-alpha.1"
+version = "0.4.0-alpha.1"
 edition = "2021"
 
 [dependencies]
-dioxus = "0.6.0-alpha.1"
-pulldown-cmark = "0.9.3"
+dioxus = "0.6.0"
+markdown = "1.0.0"
 
-[dev-dependencies]
-dioxus = { version = "0.6.0-alpha.1", features = ["desktop"] }
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

README.md

@@ -11,15 +11,3 @@ rsx! {
     }
 }
 ```
-
-## Features
-
-- Convert strings to vnodes on the fly with `tvnodes`
-
-## Warning:
-
-- Currently, this crate uses the pulldown-cmark to html converter with no actual intermediate step to Dioxus VNodes.
-- Content is set with `dangerous_inner_html` with no actual translation to VNodes occurring.
-- Macros are not currently implemented.
-
-For most use cases, this approach will work fine. However, if you feel brave enough to add a true Markdown to VNode converter, we'd happily coach and assist the implementation/pull request.

examples/bulma.rs

@@ -12,6 +12,6 @@ fn app() -> Element {
             rel: "stylesheet",
             href: "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
         }
-        div { class: "container is-fluid", Markdown { class: class, content: include_str!("../README.md") } }
+        div { class: "container is-fluid", Markdown { class: class, content: include_str!("./example.md") } }
     }
 }

examples/example.md

@@ -0,0 +1,71 @@
+# Markdown Features Demo
+
+## Paragraphs
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+## Text Formatting
+
+- **Bold text** is created with double asterisks.
+- *Italic text* is created with single asterisks
+- ***Bold and italic*** text uses three asterisks
+- ~~Strikethrough~~ text uses two tildes
+
+## Lists
+
+### Ordered Lists
+1. First item
+2. Second item
+3. Third item
+
+### Unordered Lists
+- Item one
+- Item two
+  - Nested item
+  - Another nested item
+- Item three
+
+## Links and Images
+
+[Visit GitHub](https://github.com)
+
+![Mountains](https://images.unsplash.com/photo-1752035680973-79d3836f317a?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
+
+https://github.com
+
+tel:12345678
+
+## Code
+
+Inline `code` uses backticks
+
+```python
+def hello_world():
+    print("Hello, Markdown!")
+```
+
+## Blockquotes
+
+> This is a blockquote
+> 
+> It can span multiple lines
+
+## Tables
+
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+
+## Horizontal Rule
+
+---
+
+## Task Lists
+
+- [x] Completed task
+- [ ] Incomplete task