New Component: Rich text editor

[MikeS700]

Background Info

It was decided that building our own WYSIWYG editor is not the way we want to go. So we want this spike to determine the best way to include a WYSIWYG editor with our Text Area component.

Acceptance Criteria

1. Investigate currently used options
   • CIDOS (talk to Rianna)
     • Investigate custom extensions
   • Early Childhood Educator approval (talk to Mike Schuck / Aaron Heinrich)
   • Program Review Licensing (talk to Mike Schuck / Aaron Heinrich)
   • Simon Pomeransky
   • Alex Raboud
   • Reach out on ddd_fullstackdevelopment and design-system-support
2. Pay special attention to accessibility (issues and how it works)
3. Pay attention to licensing of the various options
4. Can it be customized for visual appearance (ie. can we make it look like our stuff)
5. Is it receiving regular updates vs. is it deprecated
6. React and Angular support (works for both? or only one?)

Output

List of possible options with pros and cons for each, and a recommendation.

---

Is your feature request related to a problem? Please describe

A few different ministry design teams have created in Figma/code (or used a plugin) the standard rich text editor tool (patterns) like Headings, Bold, Italics, Bullets, Links, etc. As this functionality is used more in our service we are hoping to add these patterns/components and usage guidelines to the Design System.

Describe the solution you'd like

Here are two areas I've seen the rich text editor used:

Notebook component on CIDOS. Please see Rianna Alizadeh for more details. https://www.figma.com/file/l69iSkWTKueJXSqJ3XBzXh/CIDOS-Take-Call?type=design&node-id=10963-245509&mode=design&t=PGWIkV2TmfAPq9u0-4

Early Childhood Educator approval letter in Certification (see attached screenshot)

Program Review CCDS Licensing Looking to add it to the Program Review https://goa-dio.atlassian.net/browse/CLIC-731

In combing through the Design System slack thread on this component, it appears Front End Benji Franck may have also created these components.

Provide evidence this is a needed component

From initial information gathering it looks like three teams have created these patterns in Figma > Production, while other teams use plugins.

Describe alternatives you've considered

From initial information gathering it looks like three teams have created these patterns in Figma > Production, while other teams use plugins.

Do you have anything already created for this that we can use?

yes

Are you currently using this proposal inside your own service

no

Are you able to assist to bring the feature to reality?

yes

Additional context

Please reach out to myself (Mike Schuck) if more information is needed. As other designers share their experience with designing rich text editor components I can update this request. Cheers

[SzetoChester]

Hello, In reference to the CIDOS (CPI) Notebook, we are currently using CKEditor5, which is costly.

In regards to need, we currently have 3 applications that would make use of a rich text component:

• CIDOS CPI
• CIDOS ISC
• CIDOS IRC

IRC in particular would like the ability to paste formatted text from a word doc and retain all formatting.

[twjeffery]

Short video demo of SCSS Case management comments feature using Quill rich text editor.