modus-web-components icon indicating copy to clipboard operation
modus-web-components copied to clipboard

RTF Editor Text Area in Web Components - Barebones

Open enowak1031 opened this issue 2 years ago • 4 comments

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

Image

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

enowak1031 avatar Feb 24 '23 16:02 enowak1031

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

Image

soniakaukonen avatar Apr 13 '23 14:04 soniakaukonen

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

cjwinsor avatar Feb 09 '24 15:02 cjwinsor

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.

coliff avatar Feb 13 '24 08:02 coliff

#2241 was created to style Quill

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

cjwinsor avatar Mar 01 '24 15:03 cjwinsor