Fix: HTML rendering of index is broken for lists

[superiorsd10]

Fixes Issue #223

---

Description

The issue arises in the chat view of the FlutterGPT extension when the user asks a question that returns an indexed list. The returned indexed list is completely broken, so there is no ordering in the list.

All the ordered numbers are 1 as the HTML rendering doesn't work properly.

Approach

• Reason Behind This Nature

  Analyzing the logs in the DEBUG CONSOLE, I realized that gemini wasn't returning indented markdown lists (for proper formatting). In the case of nested lists, there should be 4 spaces between each level.

  I learned about the above information on exploring the issues section of showdown (the HTML renderer used). Issue Link

• How I Solved It

  So I decided to write a function that pre-processes the markdown sent by gemini. My logic was to

  • count the leading space of each list line.
  • if it is divisible by four then the indentation is correct, if it's not then I'm adding the extra leading spaces to resolve the indentation issue.

  The indentation issue was resolved but there was an edge case remaining. What if gemini returned a list like this?

  1. First
  * Nested First
  * Nested Second
  2. Second
  * Nested First

  Then the above logic will fail as the leading space i.e. zero is divisible by four.

• How I Handled Edge Case

  I decided to explore the alternatives of showdown like marked and it was correctly handling the above edge case behavior. So I explored their code base available on GitHub and found out that they were appending the start attribute in case of an ordered list while rendering it.

  I found it to be a good solution, and now I had to replicate the same thing in showdown so I decided to write a showdown extension, and wrote one.

  So this extension first gets all the numbers from the markdown list into an array, and then after rendering markdown into HTML, replaces all the instances of <ol> by <ol start="${startNumber}">.

---

Screenshots

---

[wadhia-yash]

Amazing work @superiorsd10

Looks great to me @samyakkkk.