Add Markdown form editor

[avishkar58]

Add a FormMarkdown component to webapp/src/components/form which uses React Markdown Editor Lite for WYSIWYG markdown editing.

• Render this component in the application form FieldEditor when the question type is "markdown"
• Implement image uploads by setting onImageUpload on the React Markdown Editor Lite (see docs) to a function that uploads the image to the file API and constructs a URL for the image: {baseUrl}/api/v1/file?filename={unique_id} where baseUrl is the value of process.env.REACT_APP_API_URL and unique_id is the value returned by the File API. (See the implementation of FormFileUpload for an example)

[greeffjean]

Im new to React Markdown Editor Lite, can you please elaborate more in detail what you are expecting to see in the UI and how its supposed to function, all the rest that you explained above makes perfect sense to me.

[greeffjean]

Are you wanting me to use the actual function inside Baobab/api/app/files/api.py ? Because this is external to the source folder and doing an import is problematic. I can try and find a work around but just want to be clear first

[avishkar58]

Hi Jean,

I'm pretty sure I wrote a comment on this issue last night with some more context and information, but that seems to have disappeared?? Very strange! :(

Anyway, trying again:

The context for this issue is that previous applicants to the Indaba had requested the ability to add formatting to their answers. So, for example, on 2nd page of the Application Form (on your local instance, if you go to the Apply page and click next), you'll see there are 5 questions where we ask people to enter long-form answers (eg 50-150 words) using a standard TextArea. We want the ability to have rich text/markdown editors in place of these text areas by changing the configuration of the question to be of type "markdown".

Ideally it would look and behave similar to the Github markdown editor that we're currently using to communicate on this issue. The closest I found that supported image uploads was React Markdown Editor Lite, but if you know of another alternative that supports headings, bold, italic, lists, links and images then happy for you to use that instead! How you show the preview is up to your discretion, whatever you think provides the best user experience. The implementation of this component will probably be very similar to FormTextArea.js but of course replacing the TextArea with a more complex UI control.

Regarding the /api/app/files/api.py, that was just to show you the implementation of the back-end API that you'll be talking to for the file upload. But there's actually already an implementation of a service on the front-end that you can use to talk to this API which you can find here and you can see how this service gets used in the linked FormFileUpload component.

Please let me know if anything is still unclear

Thanks

[greeffjean]

Okay thank you for the detailed briefing, so just to be clear, when the type of question is set to MarkDown you want one text markdown editor to be on step0?

On Wed, Jul 29, 2020 at 8:34 PM Avishkar Bhoopchand < [email protected]> wrote:

Hi Jean,

I'm pretty sure I wrote a comment on this issue last night with some more context and information, but that seems to have disappeared?? Very strange! :(

Anyway, trying again:

The context for this issue is that previous applicants to the Indaba had requested the ability to add formatting to their answers. So, for example, on 2nd page of the Application Form (on your local instance, if you go to the Apply page and click next), you'll see there are 5 questions where we ask people to enter long-form answers (eg 50-150 words) using a standard TextArea. We want the ability to have rich text/markdown editors in place of these text areas by changing the configuration of the question to be of type "markdown".

Ideally it would look and behave similar to the Github markdown editor that we're currently using to communicate on this issue. The closest I found that supported image uploads was React Markdown Editor Lite, but if you know of another alternative that supports headings, bold, italic, lists, links and images then happy for you to use that instead! How you show the preview is up to your discretion, whatever you think provides the best user experience. The implementation of this component will probably be very similar to FormTextArea.js but of course replacing the TextArea with a more complex UI control.

Regarding the /api/app/files/api.py, that was just to show you the implementation of the back-end API that you'll be talking to for the file upload. But there's actually already an implementation of a service on the front-end that you can use to talk to this API which you can find here https://github.com/deep-learning-indaba/Baobab/blob/develop/webapp/src/services/file/file.service.js and you can see how this service gets used in the linked FormFileUpload component.

Please let me know if anything is still unclear

Thanks

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/deep-learning-indaba/Baobab/issues/731#issuecomment-665831495, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKXI6XEPBFRGRX46GRSUPIDR6BTUFANCNFSM4PJFSISQ .

[avishkar58]

Well if you change the type on the date question you added for the previous issue, then yes.

To test this I'd recommend you look at the rows in the question table in the database with IDs 37, 38, 39, 40, 41. These are the questions corresponding to the text areas on step1. Update two or more of the types on these rows to markdown and the corresponding text areas on the UI should change to markdown editors. This way you can also check that you don't have any unexpected shared state between the components when there are multiple markdown editors on the same page.

On Thu, 30 Jul 2020, 09:27 greeffjean, [email protected] wrote:

Okay thank you for the detailed briefing, so just to be clear, when the type of question is set to MarkDown you want one text markdown editor to be on step0?

On Wed, Jul 29, 2020 at 8:34 PM Avishkar Bhoopchand < [email protected]> wrote:

Hi Jean,

I'm pretty sure I wrote a comment on this issue last night with some more context and information, but that seems to have disappeared?? Very strange! :(

Anyway, trying again:

The context for this issue is that previous applicants to the Indaba had requested the ability to add formatting to their answers. So, for example, on 2nd page of the Application Form (on your local instance, if you go to the Apply page and click next), you'll see there are 5 questions where we ask people to enter long-form answers (eg 50-150 words) using a standard TextArea. We want the ability to have rich text/markdown editors in place of these text areas by changing the configuration of the question to be of type "markdown".

Ideally it would look and behave similar to the Github markdown editor that we're currently using to communicate on this issue. The closest I found that supported image uploads was React Markdown Editor Lite, but if you know of another alternative that supports headings, bold, italic, lists, links and images then happy for you to use that instead! How you show the preview is up to your discretion, whatever you think provides the best user experience. The implementation of this component will probably be very similar to FormTextArea.js but of course replacing the TextArea with a more complex UI control.

Regarding the /api/app/files/api.py, that was just to show you the implementation of the back-end API that you'll be talking to for the file upload. But there's actually already an implementation of a service on the front-end that you can use to talk to this API which you can find here < https://github.com/deep-learning-indaba/Baobab/blob/develop/webapp/src/services/file/file.service.js

and you can see how this service gets used in the linked FormFileUpload component.

Please let me know if anything is still unclear

Thanks

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub < https://github.com/deep-learning-indaba/Baobab/issues/731#issuecomment-665831495 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AKXI6XEPBFRGRX46GRSUPIDR6BTUFANCNFSM4PJFSISQ

.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/deep-learning-indaba/Baobab/issues/731#issuecomment-666223969, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFV53F3Y3KWXNOXZLXVBGTR6EVH5ANCNFSM4PJFSISQ .

[avishkar58]

I didn't check if you can still edit in preview mode though :) so maybe defaulting to editor mode

[NileshArnaiya]

Just a suggestion - we can try Draftail built on top of DraftJs and looks like what we might want.