Nimble Rich Text Editor and Viewer Spec Document #1289

vivinkrishna-ni · 2023-06-08T07:33:32Z

Pull Request

🤨 Rationale

Creating spec for nimble-rich-text-editor and nimble-rich-text-viewer components.
Issue: #1288

👩‍💻 Implementation

This PR contains the nimble spec document for the new nimble component addition. The spec document consists of a design discussion for the nimble-rich-text-editor and nimble-rich-text-viewer components and explains the external libraries used for the development of a rich text editor.

🧪 Testing

N/A

✅ Checklist

N/A

packages/nimble-components/src/rich-text-editor-viewer/specs/README.md

vikisekarNI

Address suggestions to important sections

…ity section.

packages/nimble-components/src/rich-text-editor-viewer/specs/README.md

packages/nimble-components/src/rich-text-editor/specs/README.md

jattasNI · 2023-06-22T14:11:39Z

Since this is your first PR, I'll just mention: now that I'll the Nimble reviewers have approved you're welcome to complete it yourself once all the status checks are passing. Looks like the build just finished and the last comment thread is almost resolved, so you should be just about good to go! 🚀

…lease

rajsite · 2023-06-27T13:42:08Z

Since this is your first PR, I'll just mention: now that I'll the Nimble reviewers have approved you're welcome to complete it yourself once all the status checks are passing. Looks like the build just finished and the last comment thread is almost resolved, so you should be just about good to go! 🚀

@vivinkrishna-ni As Jesse mentioned once the status checks are complete and you have the owners you need you can merge the PR. Is there anything y'all are waiting on?

suseendran-ni · 2023-06-27T13:48:07Z

Since this is your first PR, I'll just mention: now that I'll the Nimble reviewers have approved you're welcome to complete it yourself once all the status checks are passing. Looks like the build just finished and the last comment thread is almost resolved, so you should be just about good to go! 🚀

@vivinkrishna-ni As Jesse mentioned once the status checks are complete and you have the owners you need you can merge the PR. Is there anything y'all are waiting on?

@rajsite , as @RickA-NI is working on the visual designs for the comments feature, we have planned to analyze that and update any content if required.

Will it be good to submit these changes now and initiate another PR in the future if any change needs to be done in the document? Please advice.

jattasNI · 2023-06-27T13:49:15Z

Will it be good to submit these changes now and initiate another PR in the future if any change needs to be done in the document? Please advice.

Yes, that would be a good way to do it, especially since #1314 is currently waiting on this.

suseendran-ni · 2023-06-27T13:55:27Z

Will it be good to submit these changes now and initiate another PR in the future if any change needs to be done in the document? Please advice.

Yes, that would be a good way to do it, especially since #1314 is currently waiting on this.

Sure @jattasNI , I will submit this HLD.

rajsite · 2023-06-27T14:10:00Z

@suseendran-ni you stated you will merge the PR but then closed it.

If you want to merge it you need to enable auto-merge / click merge, not close.

Did you mean to close the PR or merge the PR?

suseendran-ni · 2023-06-27T14:24:01Z

@suseendran-ni you stated you will merge the PR but then closed it.

If you want to merge it you need to enable auto-merge / click merge, not close.

Did you mean to close the PR or merge the PR?

Thanks for pointing this out @rajsite . I have merged the branch now.

…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  - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. ---------

vivinkrishna-ni added 3 commits June 8, 2023 11:59

Initial nimble spec of the rich text editor and viewer component

f14ee94

Corrected the header name of the spec

8362d19

Change files

b22cbb7

vivinkrishna-ni requested review from rajsite, jattasNI, mollykreis, atmgrifter00, vikisekarNI and suseendran-ni June 8, 2023 07:33

vivinkrishna-ni mentioned this pull request Jun 8, 2023

nimble-rich-text-editor and nimble-rich-text-viewer components (out of incubating) #1288

Open

38 tasks

Updated the supported features in feature section.

129dcf1

vikisekarNI suggested changes Jun 8, 2023

View reviewed changes

Resolved some of the PR comments

4e5ff60

vikisekarNI reviewed Jun 8, 2023

View reviewed changes

packages/nimble-components/src/rich-text-editor-viewer/specs/README.md Outdated Show resolved Hide resolved

Removed few methods as it is not required.

217e4f1

vikisekarNI suggested changes Jun 8, 2023

View reviewed changes

vivinkrishna-ni added 2 commits June 8, 2023 20:54

Resolve some of the PR comments

a95970b

Updated the template for rich text editor

a26b2a4

suseendran-ni marked this pull request as draft June 8, 2023 16:04

vivinkrishna-ni changed the title ~~Draft PR | Nimble Rich Text Editor and Viewer Spec Document~~ Nimble Rich Text Editor and Viewer Spec Document Jun 9, 2023

vivinkrishna-ni added 2 commits June 9, 2023 10:14

Resolved some of the PR comments and made update to some design changes.

d9abc1d

Resolving PR comments on updating the doc on implementation and secur…

acd0f22

…ity section.

vivinkrishna-ni requested a review from vikisekarNI June 9, 2023 09:00

vivinkrishna-ni added 4 commits June 9, 2023 15:34

Corrected the sentence in non goals section

7251bba

Corrected the sentence in API section.

3e03f12

Spell check in the implementation part.

b8ed166

Sentence correction in accessability.

a11e16f

vikisekarNI approved these changes Jun 9, 2023

View reviewed changes

Made few changes to doc as suggested

e9ea50d

jattasNI approved these changes Jun 16, 2023

View reviewed changes

packages/nimble-components/src/rich-text-editor/specs/README.md Outdated Show resolved Hide resolved

vivinkrishna-ni added 3 commits June 19, 2023 09:56

Updated the spec as per the suggestion.

2490c80

Updated the spec

9c89946

Merge branch 'main' into rich-text-editor-viewer-spec

1a4191a

rajsite approved these changes Jun 20, 2023

View reviewed changes

packages/nimble-components/src/rich-text-editor/specs/README.md Show resolved Hide resolved

packages/nimble-components/src/rich-text-editor/specs/README.md Outdated Show resolved Hide resolved

vivinkrishna-ni added 3 commits June 21, 2023 14:39

Merge branch 'main' into rich-text-editor-viewer-spec

6cfd408

Updated the sizing changes for editor and viewer component.

92025d3

Resolved linting errors

d75a1a3

atmgrifter00 reviewed Jun 21, 2023

View reviewed changes

packages/nimble-components/src/rich-text-editor/specs/README.md Show resolved Hide resolved

atmgrifter00 approved these changes Jun 21, 2023

View reviewed changes

Added information on the Angular implementation

bff8d5b

vivinkrishna-ni added 3 commits June 23, 2023 19:52

Merge branch 'main' into rich-text-editor-viewer-spec

53841a7

Updated the spec by removing the hyperlink support for the initial re…

7007a3b

…lease

Merge branch 'main' into rich-text-editor-viewer-spec

4a10729

suseendran-ni closed this Jun 27, 2023

suseendran-ni reopened this Jun 27, 2023

suseendran-ni closed this Jun 27, 2023

rajsite reopened this Jun 27, 2023

suseendran-ni merged commit a909ba9 into main Jun 27, 2023
4 checks passed

suseendran-ni deleted the rich-text-editor-viewer-spec branch June 27, 2023 14:23

vivinkrishna-ni mentioned this pull request Aug 7, 2023

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

Merged

1 task

vivinkrishna-ni mentioned this pull request Aug 25, 2023

Rich Text Editor | Implementation of additional APIs #1446

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nimble Rich Text Editor and Viewer Spec Document #1289

Nimble Rich Text Editor and Viewer Spec Document #1289

vivinkrishna-ni commented Jun 8, 2023 •

edited

Loading

vikisekarNI left a comment

jattasNI commented Jun 22, 2023

rajsite commented Jun 27, 2023

suseendran-ni commented Jun 27, 2023 •

edited

Loading

jattasNI commented Jun 27, 2023

suseendran-ni commented Jun 27, 2023

rajsite commented Jun 27, 2023

suseendran-ni commented Jun 27, 2023

Nimble Rich Text Editor and Viewer Spec Document #1289

Nimble Rich Text Editor and Viewer Spec Document #1289

Conversation

vivinkrishna-ni commented Jun 8, 2023 • edited Loading

Pull Request

🤨 Rationale

👩‍💻 Implementation

🧪 Testing

✅ Checklist

vikisekarNI left a comment

Choose a reason for hiding this comment

jattasNI commented Jun 22, 2023

rajsite commented Jun 27, 2023

suseendran-ni commented Jun 27, 2023 • edited Loading

jattasNI commented Jun 27, 2023

suseendran-ni commented Jun 27, 2023

rajsite commented Jun 27, 2023

suseendran-ni commented Jun 27, 2023

vivinkrishna-ni commented Jun 8, 2023 •

edited

Loading

suseendran-ni commented Jun 27, 2023 •

edited

Loading