Markdown text editor

Feature Requests
1

We’re currently using StackEdit to build our text in Markdown and then copy-paste it into a text input box in retool for queries. It would be really helpful to cut out the middle man and have a Markdown editor like the rich text editor that outputs in HTML

3 Likes
2

Hi! Can you give a bit more color around the exact use case? Do you need to send markdown text as a parameter to a query?
The Text component currently accepts markdown, so you could write something like ### Text Here in the Text component, and then access it as {{ text1.value }} to send it to a query. Let me know if that helps!

3

so for example, would you be ok with us extending that same rich text editor to also produce markdown output? or was there something else you wanted from StackEdit?

4

We have a Retool app that allows us to post written content for our site and ideally it can be used by anyone without any training in Markdown, since the API call requires it.
The rich text editor producing markdown would be perfect, as it’s WYSIWYG and pretty straightforward .

5

@ryan-smith got it. i’ll see if we can easily integrate something like https://github.com/leeoniya/reMarked.js, and produce markdown from the rich text editor

6

hmm an easy thing would be to integrate this html to markdown convertor, but it seems relatively basic (e.g. i dont think it supports underlines)

7

maybe i should take another look at support stackedit

8

I think a html to markdown converter sounds like the best option, as I am struggling to find any rich text editor that outputs in markdown to recommend.

9

Turndown looks like it will be sufficient for our needs though.

10

got it! ok, so you can start using Turndown right away.

  1. go to settings --> advanced, and add this cdn link (https://unpkg.com/turndown/dist/turndown.js) here:

    1978×482

  2. you can now use it in a JS query, like this:
    var turndownConfig = { headingStyle: 'atx' } var turndownService = new TurndownService(turndownConfig) var markdown = turndownService.turndown('<h1>Hello world!</h1>') console.log({ markdown })

    1130×794

11

@ryan-smith try it out and lmk if it works for you!

12

Works great! I never realised you could add libraries. Cheers!