Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rich Text Editor | Support for correct highlighting in nested list nodes #1434

Closed
Tracked by #1288
vikisekarNI opened this issue Aug 16, 2023 · 1 comment · Fixed by #1462
Closed
Tracked by #1288

Rich Text Editor | Support for correct highlighting in nested list nodes #1434

vikisekarNI opened this issue Aug 16, 2023 · 1 comment · Fixed by #1462
Assignees
@saikrishnan-ni

Comments

@vikisekarNI
Copy link
Contributor

vikisekarNI commented Aug 16, 2023 •
edited
Loading

📌 User Story

nimble-rich-text-editor which uses Tiptap under the hood supports lists of different types (numbered lists, bulleted lists, etc.) . Additional work is needed to modify the Tiptap default behavior to meet expectations of a normal nested list.

😮 Current Behavior (Tiptap)

When placing cursor on a sub list item in a mixed nested list, both list type buttons are highlighted

nested-list-tiptap
image

🤔 Expected behavior

When placing cursor on leaf level list node, it should highlight only one list type button that the cursor is placed on.

💬 Relevant discussions

  1. Nimble rich text editor PR comment

😃 Useful references

  1. Existing tip tap issue & Potential solution
@vikisekarNI vikisekarNI mentioned this issue Aug 16, 2023
Merged
1 task
@vivinkrishna-ni vivinkrishna-ni mentioned this issue Aug 16, 2023
Open
38 tasks
@vikisekarNI vikisekarNI added needs investigation Further research is needed to identify solution triage New issue that needs to be reviewed labels Aug 18, 2023
@vikisekarNI vikisekarNI changed the title Nimble Rich Text Editor | Support for nested lists Rich Text Editor | Support for nested lists Aug 18, 2023
@m-akinc m-akinc removed the triage New issue that needs to be reviewed label Aug 22, 2023
@saikrishnan-ni saikrishnan-ni mentioned this issue Aug 29, 2023
Merged
1 task
@vikisekarNI vikisekarNI changed the title Rich Text Editor | Support for nested lists Rich Text Editor | Support for correct highlighting in nested list nodes Aug 29, 2023
@vikisekarNI
Copy link
Contributor Author

vikisekarNI commented Aug 29, 2023 •
edited
Loading

Created a new issue for visual design demanding buttons for the increase / decrease indent visuals #1463. Moreover these additional buttons will be out of scope for SLE comments workflow.

@vikisekarNI vikisekarNI removed the needs investigation Further research is needed to identify solution label Aug 29, 2023
saikrishnan-ni added a commit that referenced this issue Sep 1, 2023
@saikrishnan-ni
Rich text editor | Fix nested list highlighting (#1462)
903a5d2 
# Pull Request

## 🤨 Rationale
Fixes #1434

- This PR fixes the behavior of list buttons in case of having nested
lists. Previously for nested lists, the list buttons used to get
highlighted based all all the tags preceding it.

![image](https://github.com/ni/nimble/assets/123591928/35329d4c-387d-4db1-8765-8d2e4764abe3)
- With this change only the list item based on last tag will get
highlighted

![image](https://github.com/ni/nimble/assets/123591928/9e6c10eb-261c-405a-bdca-7272408cef51)


## 👩‍💻 Implementation

- Used `findParentNode` method from tiptap/core to find the current node
type
- Highlight the list button only based on current node type

## 🧪 Testing

- Added unit test for testing this use case

## ✅ 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.

---------

Signed-off-by: Sai krishnan Perumal <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@saikrishnan-ni saikrishnan-ni

Labels
None yet
Projects
Nimble Design System Priorities
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rich text editor | Fix nested list highlighting ni/nimble
3 participants
@m-akinc @vikisekarNI @saikrishnan-ni