I need to display the data created in a flutter mobile app using this editor As I know the editor implemented into the mobile apps will use markdown. At the moment the data structure is a bit complex and is something like this:

{ "title": "Lorem ipsum", "text 3": "[{\"insert\":\"lorem ipsum!\\n\"}]" }
{ "title": "Lorem ipsum", "text 4": "[{\"insert\":\"\\n\",\"attributes\":{\"heading\":3}},{\"insert\":\"other text!\\n Some other text \\\"\"},{\"insert\":\"+\",\"attributes\":{\"b\":true}},{\"insert\":\"\\\" some text.\\n ... \\\"text\\\" some text.\\n\"}]", "image 13": "{\"imagePath\":\"section2image13\",\"ratio\":0.49907578558225507}", "text 8": "[{\"insert\":\"other text \\\"text\\\", another text line.\\n text\\n\"}]"

I'm not sure how to proceed, in my vue app I'm reading the contents in this way

                <div class="modal fade" id="feedContentModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="">{{ program.title }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" v-for="( contents, index) in JSON.parse(program.body)" :key="index">
                            {{ contents }}
                        </div>
                        </div>
                    </div>
                </div>

Since it's saved in json format, I'm using JSON.parse() to read it, but this will only solve in part the problem. I'm thinking to implement a markdown parser but not sure if will work. Can anyone suggest me a good way to solve this problem?