Repository: obsidian-tasks-group/obsidian-tasks
Pull request #3135 (2024-10-21 13:36:36)

fix: render markdown formatting in list items
# Types of changes

Done by pairing with @claremacrae 

Changes visible to users:

- [x] **Bug fix** (prefix: `fix` - non-breaking change which fixes an issue)

## Description

- call `MarkdownRenderer.renderMarkdown(...);` for list item description render

## Motivation and Context

- #60 


Reproduction:

1. Create a file called `Test File with Nested List Items.md`
2. Paste in this content

~~~
# Test File with Nested List Items

- [ ] #task *Do* they give **credit**?
    - I am **bold** text
    - I am *italic* text
    - I am a link to my own file [[Test File with Nested List Items]]

```tasks
path includes {{query.file.path}}
show tree
hide backlinks
```
~~~

3. View in Reading Mode or Live Preview

Result: The formatting characters in list items are displayed rather than being rendered:

<img src="https://github.com/user-attachments/assets/c256e1df-f898-43d0-b491-33e2568c4917" width="500" >

Note: We should add a `#tag` sample too, to ensure that tags are rendered

## How has this been tested?

- manual test in demo vault

## Screenshots (if appropriate)

<img width="1006" alt="image" src="https://github.com/user-attachments/assets/19c33fb0-2868-4471-9827-af95287466a3">


## Checklist

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [ ] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).

## Terms

- [x] My contribution follows this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)



Patch:
diff --git a/src/Renderer/QueryResultsRenderer.ts b/src/Renderer/QueryResultsRenderer.ts
index 35c9188c..5b8ceb2d 100644
--- a/src/Renderer/QueryResultsRenderer.ts
+++ b/src/Renderer/QueryResultsRenderer.ts
@@ -28,6 +28,15 @@ export interface QueryRendererParameters {
     editTaskPencilClickHandler: EditButtonClickHandler;
 }
 
+function findClosestParentTask(listItem: ListItem) {
+    // Try to find the closest parent that is a task
+    let closestParentTask = listItem.parent;
+    while (closestParentTask !== null && !(closestParentTask instanceof Task)) {
+        closestParentTask = closestParentTask.parent;
+    }
+    return closestParentTask;
+}
+
 export class QueryResultsRenderer {
     /**
      * The complete text in the instruction block, such as:
@@ -257,12 +266,7 @@ export class QueryResultsRenderer {
     }
 
     private willBeRenderedLater(task: ListItem, renderedTasks: Set<ListItem>, tasks: ListItem[]) {
-        // Try to find the closest parent that is a task
-        let closestParentTask = task.parent;
-        while (closestParentTask !== null && !(closestParentTask instanceof Task)) {
-            closestParentTask = closestParentTask.parent;
-        }
-
+        const closestParentTask = findClosestParentTask(task);
         if (!closestParentTask) {
             return false;
         }
@@ -327,12 +331,20 @@ export class QueryResultsRenderer {
             return await this.addTask(taskList, taskLineRenderer, task, taskIndex, queryRendererParameters);
         }
 
-        return this.addListItem(taskList, task);
+        return await this.addListItem(taskList, task);
     }
 
-    private addListItem(taskList: HTMLUListElement, listItem: ListItem) {
+    private async addListItem(taskList: HTMLUListElement, listItem: ListItem) {
         const li = createAndAppendElement('li', taskList);
-        li.textContent = listItem.description;
+
+        const span = createAndAppendElement('span', li);
+        await this.textRenderer(
+            listItem.description,
+            span,
+            findClosestParentTask(listItem)?.path ?? '',
+            this.obsidianComponent,
+        );
+
         return li;
     }
 


Test patch:
diff --git a/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items.approved.html b/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items.approved.html
index 92d37c21..ee445c08 100644
--- a/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items.approved.html
+++ b/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items.approved.html
@@ -60,7 +60,7 @@
                 <a class="tasks-edit" title="Edit task" href="#"></a>
               </span>
               <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
-                <li>list item grand grand child</li>
+                <li><span>list item grand grand child</span></li>
               </ul>
             </li>
           </ul>
@@ -86,7 +86,7 @@
           </span>
           <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
             <li>
-              non task grandchild
+              <span>non task grandchild</span>
               <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
                 <li
                   class="task-list-item plugin-tasks-list-item"
diff --git a/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items_reverse_sorted.approved.html b/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items_reverse_sorted.approved.html
index 58296d64..e0449094 100644
--- a/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items_reverse_sorted.approved.html
+++ b/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items_reverse_sorted.approved.html
@@ -80,7 +80,7 @@
                 <a class="tasks-edit" title="Edit task" href="#"></a>
               </span>
               <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
-                <li>list item grand grand child</li>
+                <li><span>list item grand grand child</span></li>
               </ul>
             </li>
           </ul>
@@ -106,7 +106,7 @@
           </span>
           <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
             <li>
-              non task grandchild
+              <span>non task grandchild</span>
               <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
                 <li
                   class="task-list-item plugin-tasks-list-item"