Rich Text WYSIWYG Editor - Design System

[g-saracca]

What this PR does / why we need it:

Adds a new Rich Text Editor component to the design system.

This component is made with Tiptap npm packages.
Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Cons: It does not support markdown as output, the output is html.
Pros:

• It does support Markdown shortcuts.
• Compatible with what dataverse already handles for rich content, that is html.
• Tiptap is headless, that means there is no styling provided so all styles were matched to what the rest of the SPA components look like.

Which issue(s) this PR closes:

• Closes Rich Text WYSIWYG Editor - Design System #525

Suggestions on how to test this:

Visual code inspection and Storybook story manual testing.
The component has 100% unit test coverage as well.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

[coveralls]

coverage: 97.444% (+0.06%) from 97.385%
when pulling 4f9a42a on feat/525-rich-text-editor
into 02bc675 on develop.

[g-saracca]

@ChengShi-1 empty lines added 👍🏼 , thanks

[ChengShi-1]

Great! Approve.

[ofahimIQSS]

Came across one observation - @ChengShi-1 can you confirm this is expected or a bug:
https://646fbe232a8d3b501a1943f3-dvpreauelj.chromatic.com/?path=/story/rich-text-editor--default

Steps to Reproduce:

1. Navigate to the WYSIWG Editor
2. Click on Add Link
3. Add: https://www.google.com/

Issue: After adding the link, nothing happens (link not generated).

[ChengShi-1]

Came across one observation - @ChengShi-1 can you confirm this is expected or a bug: https://646fbe232a8d3b501a1943f3-dvpreauelj.chromatic.com/?path=/story/rich-text-editor--default

Steps to Reproduce:

1. Navigate to the WYSIWG Editor
2. Click on Add Link
3. Add: https://www.google.com/

Issue: After adding the link, nothing happens (link not generated).

Hi Omer! After adding a link, you can type your text, and it will appear blue and linked to the target web, you could open it in a new tab.

Alternatively, you can type the text first, highlight the words, and then attach the link to those words.

[ofahimIQSS]

Testing of 529.docx
Thanks for clarifying @ChengShi-1! - Merging PR