markdown preview: Improve task list visuals (#9695)

Bennet Bo Fenner created 2 years ago

Instead of using some arbitrary unicode characters to render a task as
completed/not completed, I feel that using an actual checkbox from the
components crate makes it look more polished.

Before:

![image](https://github.com/zed-industries/zed/assets/53836821/700de8f8-2e01-4e03-b237-e3da2971f039)

After:

<img width="883" alt="image"
src="https://github.com/zed-industries/zed/assets/53836821/f63d56c3-bfbb-41c8-b150-8ebf973f75e2">


Release Notes:

- Improved visuals of task lists inside the markdown preview

Change summary

crates/markdown_preview/src/markdown_renderer.rs | 20 +++++++++++++----
1 file changed, 15 insertions(+), 5 deletions(-)

Detailed changes

crates/markdown_preview/src/markdown_renderer.rs

@@ -13,7 +13,7 @@ use std::{
     sync::Arc,
 };
 use theme::{ActiveTheme, SyntaxTheme};
-use ui::{h_flex, v_flex, Label};
+use ui::{h_flex, v_flex, Checkbox, Selection};
 use workspace::Workspace;
 
 pub struct RenderContext {
@@ -139,11 +139,21 @@ fn render_markdown_list(parsed: &ParsedMarkdownList, cx: &mut RenderContext) ->
         let padding = rems((item.depth - 1) as f32 * 0.25);
 
         let bullet = match item.item_type {
-            Ordered(order) => format!("{}.", order),
-            Unordered => "•".to_string(),
-            Task(checked) => if checked { "☑" } else { "☐" }.to_string(),
+            Ordered(order) => format!("{}.", order).into_any_element(),
+            Unordered => "•".into_any_element(),
+            Task(checked) => div()
+                .mt(px(3.))
+                .child(Checkbox::new(
+                    "checkbox",
+                    if checked {
+                        Selection::Selected
+                    } else {
+                        Selection::Unselected
+                    },
+                ))
+                .into_any_element(),
         };
-        let bullet = div().mr_2().child(Label::new(bullet));
+        let bullet = div().mr_2().child(bullet);
 
         let contents: Vec<AnyElement> = item
             .contents