markdown preview

[tanmoyAtb]

closes #795

There are many plugins that could bee used with markdowns! However this minimalistic approach should be good enough for previews !

[render]

Your Render PR Server URL is https://chainsafex-dev-pr-818.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c15pgs5c2rvrn4r8mnmg.

[render]

Your Render PR Server URL is https://files-ui-dev-pr-818.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c15pgt5c2rvrn4r8mntg.

[render]

Your Render PR Server URL is https://files-landing-dev-pr-818.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c15pgudc2rvrn4r8molg.

[FSM1]

Great work, thanks Tanmoy 🎉

[RyRy79261]

@tanmoyAtb there doens't seem to be any markdown styling applied, besides the H1 (#) tags:

# Test

## Testing 

### Raspberry souffle 

### Ingredients
#### For the Raspberry Puree:

- 12 ounces frozen raspberries, thawed

#### For the Soufflé:

- 4 egg yolks
- 2 1/2 ounces granulated sugar
- 1.5 tablespoons cornstarch
- 4 ounces raspberry puree (see above)
- juice of one lemon
- 4 egg whites, room temperature
- pinch of cream of tartar
- pinch of salt
- 1 ounce granulated sugar
- powdered sugar, for dusting
- fresh raspberries, for garnish

[Tbaut]

Working well apart for the code blocks that don't appear in a code block

I tested with the following

and it renders

[Tbaut]

Just a comment to share my thoughts, it's no big deal, but I've seen this form used widely across Files.

I think we should rather use the Promise.then in a hook, and handle errors accordingly (if this fails, we'll throw the app with an unhandeld exception). Async/await makes a lot of sense if we have many such async calls. It should then be wrapped in try/catch which makes it pretty verbose.

For instance here I'd suggest:

contents.text()
  .then((text) => setContentText(text))
  .catch(console.error)

[FSM1]

Agree that the .then(...).catch(...) is quite a bit more concise for simple handlers like this.

[tanmoyAtb]

updated to then catch in both text and markdown preview !

[tanmoyAtb]

Working well apart for the code blocks that don't appear in a code block

I tested with the following

and it renders

@Tbaut

The code blocks are working on my side

This is the md text

# Test

## Testing 

```js
const a = "code"

[Tbaut]

The code is indeed in a <code> block. The font for me is font-family: monospace, monospace; which basically looks like the text font. Having no background color also reinforces the feeling. In any case it's not really a bug, we can make this better if the need appears.