Rich Text Editor | Bring up of editor component with toolbar support (#…

…1416)

# Pull Request

## 🤨 Rationale

This PR introduces the initial implementation of the editor component by
building on top of the `Tiptap` editor. The component is developed to
align with the design for the comments feature and matches the current
visual design linked below.

[Visual
design](https://www.figma.com/file/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?type=design&node-id=2482-82389&mode=design&t=Kl5FdGYvvpvs9BY8-0)
[Comments feature
mockup](https://www.figma.com/file/Q5SU1OwrnD08keon3zObRX/SystemLink?type=design&node-id=8773-161649&mode=design&t=ZKp2UlDUmvMa56p9-0)

AzDo Feature:
https://dev.azure.com/ni/DevCentral/_backlogs/backlog/ASW%20SystemLink%20LIMS/Features/?workitem=2350963
Issue: #1288

Other functionalities mentioned in the spec document for rich text
editor will be implemented in subsequent PRs.

## 👩‍💻 Implementation

* Installed latest version of
[@tiptap/core](https://www.npmjs.com/package/@tiptap/core) and other
extensions for the supported nodes and marks.
* Updated the spec for installing the actually required packages instead
of `@tiptap/starter-kit`.
* Initialized the editor with the extensions by importing from their
respective packages.
* Added `nimble-toolbar` for the footer section.
* Added `nimble-toggle-button` for the supported formatting options such
as bold, italics, numbered list, and bulleted list and added
functionalities to it. `nimble-toggle-button` uses `click` and `keydown`
events to toggle the state instead of `change` event. The rationale for
adopting this approach is elaborated as follows:
* For more details on the issue, see
#1289 (comment).
* It is due to the fact that the `change` event toggles upon clicking,
whereas the intended behavior is for the state to change only based on
the node that currently holds the cursor focus.
* Since the underlying component of the toggle button functions as a
switch, we must update the checked state in the template and also modify
the handling of change and click events when employing this event
approach.
* On the other hand, in the `click` event approach, we merely reference
it and update the state whenever needed.
* We prototyped both the `change` event and `click` event approach and
decided to use the `click` event as it is simpler to implement. For more
info, refer to the discussion
[here](https://dev.azure.com/ni/DevCentral/_backlogs/backlog/ASW%20SystemLink%20Platform/Initiatives/?workitem=2419268).
* Added `footer-actions` slot element.
* Style the component in a way to match the nimble theme.


![image](https://github.com/ni/nimble/assets/123377523/98c0552c-0e5f-4eca-979c-d5d592772280)

## 🧪 Testing

* Added unit tests and visual sizing tests for the component.
* Manually tested and verified the functionality of the supported
features.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

change/@ni-nimble-components-e476eedb-989a-4246-811b-039ca8a8352e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Initial component bring up by integrating tiptap editor along with the footer formatting options",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}