RTF Editor Text Area in Web Components - Barebones

[enowak1031]

IMPORTANT: This should be broken down into smaller issues.

As a user I want to add rich text formatting to the text I input

• Desktop. A user wants to use bold style on parts of the the text in an announcement that shows in the homepage. They want links to have shorter user-friendly text and a bullet list.
• Rich text format (RTF) input
• Textarea input with styling toolbar.
• Rich text formatting allows the user to style the text by choosing the font weight, font type, font family and the font size. The user can also insert links into the textarea with a user-defined link text.

The user needs to format text, such as:

• Font family, size, style and weight
• Text alignment
• Bullet lists and numbered lists
• Add/edit links with link text

The user does not need to format text

Figma File: https://www.figma.com/file/wyfVJUHWRMkeCfdB38HFEE/Modus---Web?type=design&node-id=16926-43994&mode=design&t=iWrmgODEaqk0fc8q-0

Documentation: https://docs.google.com/document/d/1tlviA40QujQlgctEhm4VHvZwlF-xUgRzjyLarYihf3o/edit

[soniakaukonen]

current state in Figma. Icons submitted to icon platform. dark mode tbd @msankaran0712 @enowak1031

[cjwinsor]

@msankaran0712 @coliff Did you have any research towards an existing component we can leverage for this? Any info you can share will be appreciated.

[coliff]

I remember looking though the rich-text-editor tagged repos on GitHub last year with Maha. We liked the look of Quill, the top-starred one.

[cjwinsor]

2241 was created to style Quill

After that ticket is completed, we can use this ticket to implement Quill into MWC