Create Text as "Markdown" format

0

Hi Klaus,
there is currently no built in way to preview markdown in WEBCON, although you could use external libraries and write really small amount of javascript, to have really nice experience.

I've prepared a sample application on WEBCON demo server here:
* Sample markdown document: https://portal.webconbps.com/db/1/app/548/element/6757/form - you will need to add a space, and exit the text field to render markdown.
* Start new document: https://portal.webconbps.com/db/1/app/548/start/wf/757/dt/755/form?def_comid=1

Whole configuration is rather simple - it uses showdown.js* library to make a conversion - this is loaded using a cdn, and on change of value in markdown field I'm just converting it to html.
Screenshots in attachments, although you should be able to check the configuration directly through connecting to designer studio downloaded from demo page :)

Three attributes:
* Library load - this contains script tag to get showdown.js from a cdn.
* Markdown - this is regular multiline text field without formatting - you can type in here raw markdown
* Preview - it's just a anchor, which i can grab and replace it's content with generated html from markdown

It should be possible to add some event listener so each typed key will refresh the preview, but it's a quick example to work on if that idea looks good for you.
Of course you could also save that generated markdown into a webcon field, which i'm not doing in this example.

* https://showdownjs.com/

Hi Maksymilian,

thank you very much, that is great! For sure something I can use it.

I have still two questions:
- In markdown I can use easily "formatted stuff", e.g. tables or Mermaid diagrams, which is not working here. Is this a matter of the converter or is this a limitation of the HTML field? Or could these features somehow be supported?

- In fact I was looking for the "reverse" formatting, i.e. I enter in a multiline field with configuration "rich" a formatted Text and the content is converted into valid markdown. Is this possible, too?

Kind regards,
Klaus

I don't have great answers to those unfortunately.

1. a) It will be easy to add support for tables - you could just change markdown flavour to GFM - https://showdownjs.com/docs/flavors/
1. b) Mermaid is not really a default markdown feature - it's additional library - you could try also adding it using cdn library with mermaid.js -https://github.com/mermaid-js/mermaid - from my testing it looks like this won't work even with regular multi-line fields, as those add <p> tags to create new lines - you could try to remove them though before calling render.

2. In theory showdown.js can convert markdown -> html and html -> markdown, but i highly doubt that this will work good - don't see a chance that webcon formatter uses same html tags as showdown.js.
I've added HTML -> markdown to the PoC application.

Maybe there is some library which could be used to create custom field on webcon form with all the features, but i'm not aware of it.