# Async Markdown-It plugin

**URL:** https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155
**Category:** Plugins
**Created:** [1 October 2024 17:28 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155 "2024-10-01T17:28:33Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![DanteCoder](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dantecoder/32/22739_2.png) [@DanteCoder](https://discourse.joplinapp.org/u/DanteCoder)
#### Post date: [1 October 2024 17:28 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/1 "2024-10-01T17:28:33Z")

</div>

Hello everyone. It's been some time since I created the "[Bible Quote](https://github.com/DanteCoder/JoplinBibleQuote)" plugin. Recently I saw that support for mobile plugins is becoming a thing, and someone suggested that I make my plugin mobile-compatible.

The thing is, currently my plugin works by accessing the file system to open some files, which I see [is not supported on mobile](https://discourse.joplinapp.org/t/mobile-plugin-support/35262#plugins-known-not-to-work-8). My approach was to load the files from a note instead, using the Data API. This seemed to work fine, the problem now is that loading the files and then sending the parsed objects to the markdown-it plugin (using the localstorage plus a [hack](https://github.com/DanteCoder/JoplinBibleQuote/blob/0e4dc59b963c895f88009746cb5699b66637d6ff/src/utils/communicator.ts)) is an async operation that ends after the markdown has already finished rendering. This is "fixed" by refreshing the note: changing from one note to another, modifying the note, etc.

I have tried the following solutions:

I tried the approach of an async rule as suggested in the [official md docs](https://github.com/markdown-it/markdown-it/blob/master/docs/development.md#i-need-async-rule-how-to-do-it), but since Joplin triggers the `render` function internally, I figured it would be impossible to do this just from the plugin itself. Also, I don't think that replacing the render function from the MarkdownIt instance to be async would be appropriate.  
This approach would solve the problem of sending the files over to the markdown-it plugin, and instead just load them from the main plugin and send small messages from the markdown plugin to the main plugin when a query to a file is needed.

My second approach was to reload the note after the files were sent (spoiler: I couldn't trigger a reload manually).

I'm open to any suggestions.

---

<div class="post-metadata">

### Author: ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)
#### Post date: [1 October 2024 19:02 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/2 "2024-10-01T19:02:40Z")

</div>

One option could be to add the rendering script as an asset, then render quotes after the main note is rendered.

This is similar to what the [Function Plot](https://github.com/hieuthi/joplin-plugin-function-plot/blob/d718aaa8cad3245d9067489d44296e1d75201a7a/src/functionPlotRule.js#L25) and [Extra Viewer Settings](https://github.com/personalizedrefrigerator/joplin-plugin-extra-viewer-settings/blob/5a0cea56a7b6fbadbda93eb01ed72f77cff4ee9f/src/contentScript/contentScript.ts#L10) plugins do. It's then possible to communicate with the main background script using `webviewApi.postMessage(contentScriptId, data)` ([example](https://github.com/personalizedrefrigerator/joplin-plugin-extra-viewer-settings/blob/5a0cea56a7b6fbadbda93eb01ed72f77cff4ee9f/src/contentScript/viewer.ts#L15), [docs](https://joplinapp.org/api/references/plugin_api/enums/contentscripttype.html#getting-the-settings-from-the-renderer)).

---

<div class="post-metadata">

### Author: ![DanteCoder](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dantecoder/32/22739_2.png) [@DanteCoder](https://discourse.joplinapp.org/u/DanteCoder)
#### Post date: [1 October 2024 21:10 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/3 "2024-10-01T21:10:29Z")

</div>

Yep, that's exactly what I need, it just wasn't clear enough to me how to do it. I'll give it a try.  
Thanks a lot!

---

<div class="post-metadata">

### Author: ![Stargirl0](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@Stargirl0](https://discourse.joplinapp.org/u/Stargirl0)
#### Post date: [6 October 2024 21:55 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/4 "2024-10-06T21:55:17Z")

</div>

Hi, do you have the King James Bible within your created "Bible Quote"?

---

<div class="post-metadata">

### Author: ![DanteCoder](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dantecoder/32/22739_2.png) [@DanteCoder](https://discourse.joplinapp.org/u/DanteCoder)
#### Post date: [7 October 2024 02:09 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/5 "2024-10-07T02:09:38Z")

</div>

Take a look at this [repo](https://github.com/bzerangue/osis-bibles/blob/master/en/kjv.xml)

---

<div class="post-metadata">

### Author: ![Stargirl0](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@Stargirl0](https://discourse.joplinapp.org/u/Stargirl0)
#### Post date: [7 October 2024 09:04 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/6 "2024-10-07T09:04:03Z")

</div>

Thank you, but I was able to download the software yesterday evening and save the kjv version to OS something and added the path but I#m not sure what I need to do afterwards? Sorry, I learn as i need something.

I have Bible Quote and Joplin Bible Notes but all i'm getting is all my notes under Bible headings?

---

<div class="post-metadata">

### Author: ![Stargirl0](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@Stargirl0](https://discourse.joplinapp.org/u/Stargirl0)
#### Post date: [7 October 2024 09:06 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/7 "2024-10-07T09:06:26Z")

</div>

![Screenshot 2024-10-07 100544](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/9/e/9e3eacfd9faacffad161bde7d30ccbfdd45ce268.png)

---

<div class="post-metadata">

### Author: ![Stargirl0](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@Stargirl0](https://discourse.joplinapp.org/u/Stargirl0)
#### Post date: [7 October 2024 16:55 UTC](https://discourse.joplinapp.org/t/async-markdown-it-plugin/41155/8 "2024-10-07T16:55:48Z")

</div>

Sorry, Thank you, I worked it out. It's Brilliant!!
