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

[vivinkrishna-ni]

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
Comments feature mockup

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 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 Nimble Rich Text Editor and Viewer Spec Document #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.
• Added footer-actions slot element.
• Style the component in a way to match the nimble theme.

🧪 Testing

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

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.