Selecting a react markdown library for APIM 3.0.0 - In-line Documents

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Selecting a react markdown library for APIM 3.0.0 - In-line Documents

Chamin Dias
Hi all,

We are in the process of doing $subject. We came across few (possible) libraries to fulfill the requirement. 

Here is the summary of each library (as at 2018/10/25).


Option 1 : react-markdown

Stars : 2730
Fork count : 276
Last commit : 14 days ago


Option 2 : markdown-react-js

Stars : 95
Fork count : 17
Last commit : 10 months ago


Option 3 : react-markdown-renderer

Stars : 19
Fork count : 3
Last commit : 11 months ago


Accordingly, we can observe that option 1 is most suitable for this (mostly used and actively developed). 

Here is a sample (Option 1 : react-markdown).

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)


We thought of going forward with Option 1 : react-markdown.

Please share if you have any better suggestion than this.

Thanks.

--
Chamin Dias
Mobile : 0716097455


_______________________________________________
Architecture mailing list
[hidden email]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
Reply | Threaded
Open this post in threaded view
|

Re: Selecting a react markdown library for APIM 3.0.0 - In-line Documents

Chamin Dias


On Thu, Oct 25, 2018 at 3:14 PM, Chamin Dias <[hidden email]> wrote:
Hi all,

We are in the process of doing $subject. We came across few (possible) libraries to fulfill the requirement. 

Here is the summary of each library (as at 2018/10/25).


Option 1 : react-markdown

Stars : 2730
Fork count : 276
Last commit : 14 days ago


Option 2 : markdown-react-js

Stars : 95
Fork count : 17
Last commit : 10 months ago


Option 3 : react-markdown-renderer

Stars : 19
Fork count : 3
Last commit : 11 months ago


Accordingly, we can observe that option 1 is most suitable for this (mostly used and actively developed). 

Here is a sample (Option 1 : react-markdown).

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)


We thought of going forward with Option 1 : react-markdown.

Please share if you have any better suggestion than this.

Thanks.

--
Chamin Dias
Mobile : 0716097455




--
Chamin Dias
Mobile : 0716097455


_______________________________________________
Architecture mailing list
[hidden email]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
Reply | Threaded
Open this post in threaded view
|

Re: Selecting a react markdown library for APIM 3.0.0 - In-line Documents

Kasun Thennakoon-2
Hi Chamin,

I think most of these libraries are for viewing the markdown source, for the In-line Documents we need to have a markdown editor as well. In the react-markdown demo, they have used codemirro as the editor there. So are we going to use codemirro as the editor as well ?

As an addition to the above library list, I found this(react-mde) library[1] for editing the markdown source (it use Draft.js), And it has a viewing component as well (Using showdown JS).
But in react-mde they have raised a concern about XSS Vulnerability[2], and have provided instruction to mitigate it[3].

IMHO we need to check the possibility of XSS in above libraries as well.


On Thu, Oct 25, 2018 at 11:47 AM Chamin Dias <[hidden email]> wrote:


On Thu, Oct 25, 2018 at 3:14 PM, Chamin Dias <[hidden email]> wrote:
Hi all,

We are in the process of doing $subject. We came across few (possible) libraries to fulfill the requirement. 

Here is the summary of each library (as at 2018/10/25).


Option 1 : react-markdown

Stars : 2730
Fork count : 276
Last commit : 14 days ago


Option 2 : markdown-react-js

Stars : 95
Fork count : 17
Last commit : 10 months ago


Option 3 : react-markdown-renderer

Stars : 19
Fork count : 3
Last commit : 11 months ago


Accordingly, we can observe that option 1 is most suitable for this (mostly used and actively developed). 

Here is a sample (Option 1 : react-markdown).

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)


We thought of going forward with Option 1 : react-markdown.

Please share if you have any better suggestion than this.

Thanks.

--
Chamin Dias
Mobile : 0716097455




--
Chamin Dias
Mobile : 0716097455



--
Kasun Thennakoon
Software Engineer
WSO2, Inc.
Mobile:<a href="tel:%2B94%20711661919" value="+94716481328" style="color:rgb(17,85,204)" target="_blank">+94 711661919

_______________________________________________
Architecture mailing list
[hidden email]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
Reply | Threaded
Open this post in threaded view
|

Re: Selecting a react markdown library for APIM 3.0.0 - In-line Documents

Aruna Herath
+1 for react-markdown. We use it in our vscode ballerina extension to render markdown documentation. Its customizable and easy to use.

Regarding XSS, by default react-markdown escapes all html within markdown. But this is customizable, we can allow only a selected set of html elements.


On Thu, Oct 25, 2018 at 4:25 PM Kasun Thennakoon <[hidden email]> wrote:
Hi Chamin,

I think most of these libraries are for viewing the markdown source, for the In-line Documents we need to have a markdown editor as well. In the react-markdown demo, they have used codemirro as the editor there. So are we going to use codemirro as the editor as well ?

As an addition to the above library list, I found this(react-mde) library[1] for editing the markdown source (it use Draft.js), And it has a viewing component as well (Using showdown JS).
But in react-mde they have raised a concern about XSS Vulnerability[2], and have provided instruction to mitigate it[3].

IMHO we need to check the possibility of XSS in above libraries as well.


On Thu, Oct 25, 2018 at 11:47 AM Chamin Dias <[hidden email]> wrote:


On Thu, Oct 25, 2018 at 3:14 PM, Chamin Dias <[hidden email]> wrote:
Hi all,

We are in the process of doing $subject. We came across few (possible) libraries to fulfill the requirement. 

Here is the summary of each library (as at 2018/10/25).


Option 1 : react-markdown

Stars : 2730
Fork count : 276
Last commit : 14 days ago


Option 2 : markdown-react-js

Stars : 95
Fork count : 17
Last commit : 10 months ago


Option 3 : react-markdown-renderer

Stars : 19
Fork count : 3
Last commit : 11 months ago


Accordingly, we can observe that option 1 is most suitable for this (mostly used and actively developed). 

Here is a sample (Option 1 : react-markdown).

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)


We thought of going forward with Option 1 : react-markdown.

Please share if you have any better suggestion than this.

Thanks.

--
Chamin Dias
Mobile : 0716097455




--
Chamin Dias
Mobile : 0716097455



--
Kasun Thennakoon
Software Engineer
WSO2, Inc.
Mobile:<a href="tel:%2B94%20711661919" value="+94716481328" style="color:rgb(17,85,204)" target="_blank">+94 711661919
_______________________________________________
Architecture mailing list
[hidden email]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture


--
Aruna Herath
Senior Software Engineer | WSO2
Mobile: 0711 051 799 | 0774 569 555



_______________________________________________
Architecture mailing list
[hidden email]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
Reply | Threaded
Open this post in threaded view
|

Re: Selecting a react markdown library for APIM 3.0.0 - In-line Documents

chanaka jayasena
In reply to this post by Kasun Thennakoon-2
 +1 for codemirror to edit the markdown text. Also the react-markdown demo page [1] is using codemirrror. But lets go with a plain textarea for the first iteration and add the codemirror or any other better alternative with the second. 


thanks,
Chanaka

On Thu, Oct 25, 2018 at 4:21 PM Kasun Thennakoon <[hidden email]> wrote:
Hi Chamin,

I think most of these libraries are for viewing the markdown source, for the In-line Documents we need to have a markdown editor as well. In the react-markdown demo, they have used codemirro as the editor there. So are we going to use codemirro as the editor as well ?

As an addition to the above library list, I found this(react-mde) library[1] for editing the markdown source (it use Draft.js), And it has a viewing component as well (Using showdown JS).
But in react-mde they have raised a concern about XSS Vulnerability[2], and have provided instruction to mitigate it[3].

IMHO we need to check the possibility of XSS in above libraries as well.


On Thu, Oct 25, 2018 at 11:47 AM Chamin Dias <[hidden email]> wrote:


On Thu, Oct 25, 2018 at 3:14 PM, Chamin Dias <[hidden email]> wrote:
Hi all,

We are in the process of doing $subject. We came across few (possible) libraries to fulfill the requirement. 

Here is the summary of each library (as at 2018/10/25).


Option 1 : react-markdown

Stars : 2730
Fork count : 276
Last commit : 14 days ago


Option 2 : markdown-react-js

Stars : 95
Fork count : 17
Last commit : 10 months ago


Option 3 : react-markdown-renderer

Stars : 19
Fork count : 3
Last commit : 11 months ago


Accordingly, we can observe that option 1 is most suitable for this (mostly used and actively developed). 

Here is a sample (Option 1 : react-markdown).

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)


We thought of going forward with Option 1 : react-markdown.

Please share if you have any better suggestion than this.

Thanks.

--
Chamin Dias
Mobile : 0716097455




--
Chamin Dias
Mobile : 0716097455



--
Kasun Thennakoon
Software Engineer
WSO2, Inc.
Mobile:<a href="tel:%2B94%20711661919" value="+94716481328" style="color:rgb(17,85,204)" target="_blank">+94 711661919


--
Chanaka Jayasena
Associate Tech Lead,
email: [hidden email]; cell: +94 77 4464006

_______________________________________________
Architecture mailing list
[hidden email]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture