app: Render recipe as mardown

app/Cargo.toml

@@ -6,6 +6,7 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
+ammonia = "3.3.0"
 anyhow = "1.0.71"
 api = { version = "0.1.0", path = "../api" }
 console_log = { version = "1.0.0", features = ["color"] }
@@ -18,6 +19,7 @@ gloo-storage = "0.2.2"
 gloo-utils = "0.1.7"
 itertools = "0.11.0"
 log = "0.4.19"
+pulldown-cmark = "0.9.3"
 serde = { version = "1.0.164", features = ["derive"] }
 uuid = "1.4.0"
 wasm-bindgen = "0.2.87"

app/src/recipe/creator.rs

@@ -10,7 +10,7 @@ use crate::{
     bootstrap::{bs, FormModal, ModalBody, ModalFooter, ModalToggleButton, TitledModal},
     ingredients::do_add_ingredient,
     recipe::IngredientSelect,
-    use_error, use_trimmed_context, ErrorView,
+    use_error, use_trimmed_context, ErrorView, 
 };
 
 use super::RecipeIngredient;
@@ -341,12 +341,15 @@ pub fn RecipeCreator(cx: Scope) -> Element {
                 }
                 div {
                     h2 { "Steps" }
+                    div {class: "text-start",
                     textarea {
                         class: "form-control",
+                        id: "steps-area",
                         value: "{steps}",
                         rows: "10",
                         oninput: move |e| steps.set(e.value.clone())
                     }
+}
                 }
                 hr {}
                 ModalToggleButton { class: "btn btn-lg btn-primary", modal_id: "newRcpModal", "Create Recipe" }

app/src/recipe/view.rs

@@ -6,6 +6,7 @@ use api::{
 };
 use dioxus::prelude::*;
 use dioxus_router::{use_route, use_router};
+use pulldown_cmark::{Parser, html};
 use uuid::Uuid;
 
 use crate::{
@@ -616,6 +617,15 @@ fn RecipeViewer(cx: Scope<RecipeViewerProps>) -> Element {
         }
     };
 
+    let steps_rendered = use_memo(cx, &cx.props.info.steps, |steps| {
+        let parser = Parser::new(&steps);
+
+        let mut html_output = String::new();
+        html::push_html(&mut html_output, parser);
+
+        ammonia::clean(&html_output)
+    });
+
     cx.render(rsx! {
         h1 {
             "{cx.props.info.name}"
@@ -690,10 +700,8 @@ fn RecipeViewer(cx: Scope<RecipeViewerProps>) -> Element {
         hr {}
         div { class: "text-start",
             h2 { "Steps" }
-            ul { class: "list-group list-group-flush",
-                for line in cx.props.info.steps.split('\n') {
-                    li { class: "list-group-item", line }
-                }
+            div {
+                dangerous_inner_html: "{steps_rendered}"
             }
             EditSteps {
                 recipe: cx.props.id,