Rich Text Editor

[jackcmeyer]

🚀 Feature Proposal

Add a rich text editor as a component.

Motivation

Rich text editors are used when there is a need for formatted text content.

Example

Patient Notes

Relevant Links

• tinymce
• react-quill
• draft-js
• slate

[danielbollom]

I'd be happy to start working on this component if it's still open?

I was thinking TinyMCE might be the best option to wrap - it's the lightest in terms of bundle size of the options above, and has a fairly extensive API to get what we need from it :)

[jackcmeyer]

@danielbollom the issues is all yours! I've assigned the issue to you.

I look forward to reviewing the pull request!

[fox1t]

I agree that TinyMCE is the best choice for us. In its last version, it is easy to use and powerful enough to handle all of the our use cases.

[danielbollom]

Hey guys! I was working on this one earlier and I was wondering which functionality/plugins would be required for the editor?

I was thinking:

• undo/redo
• font size/style
• heading/paragraph formatting
• bold/italic/underline text
• sub/super text
• highlight text
• text align (right, left, centre, justify)
• list (bullets, numbered)
• indent/outdent
• image embed
• table
• link
• special characters

Is there anything else that would be useful to include?

The list of TinyMCE plugins is here: https://www.tiny.cloud/docs-3x/reference/TinyMCE3x@Plugins/

And the list of buttons/controls is here: https://www.tiny.cloud/docs-3x/reference/buttons/

[jackcmeyer]

@danielbollom I think this is a sufficient list of features for now!

[fox1t]

I want to point out that we need an extra care on image embed feature. We don't really want to allow our users to embed patient images, MRIs and so on. The software will have already a place to store patient images. I think it would be nice to let them "include" an image in text: however also this could be problematic, since the images will be stored encrypted using pub/priv keys.

[danielbollom]

@fox1t the default behaviour for tinyMCE gives the user an option to include a link to an image which is sets as the source for an image tag in the output. Would this be okay, or will it be easier to remove the image functionality for the moment? It's very straightforward to include/exclude at a later point if required.

[fox1t]

I think we can remove the image functionality for the moment. We will surely return to it in the near future. :)

[danielbollom]

Sounds great! :) I should time to get a pull request ready for this one in a day or two 👍

[ghost]

🎉 This issue has been resolved in version 0.18.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀