Automattic / Automattic/jetpack
Jetpack AI: Make it so clicking the option on a nested list will convert the root parent list
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
Currently the "turn list into table" menu item is hidden if you click AI assistant on a non-top level list. Users need to navigate to the root list to actually convert it. A slightly better behavior would be to allow the option to appear on any sub-list and then convert the full list to a table. I spent a few hours trying to get this working but there are some issues. Read on for more!
Steps required:
1. `AiAssistantToolbarDropdownContent` currently hides the convert option by calling `getBlockParents` and seeing if there are any parent IDs. If there are then the option won't be shows. This is easy enough to change!
2. After that the click handler is ultimately `handleToolbarButtonClick` in `AiAssistantExtensionToolbarDropdownContent`. Since this function re-fetches the selected blocks, here we will need to fetch the root ID (or otherwise override based on a value in `request.options`) so the `canTransformToAIAssistant` returns the correct value.
3. After that we call `transformToAIAssistant` which is part of `useTransformToAssistant`. This method once again calls `getSelectedBlockClientIds`. So ultimately this method will need to get the root ID from those IDs and replace `firstBlock` from `selectedBlockIds` (which is what is replaced by the AI Assistant block). This is the trickiest part as this method relies a lot on the selected blocks and it I was unable to get it to successfully replace the parent block with AI Assistant.
I do think all of this is do-able, but someone might want to scope it out a little. I also worry about how much of `transformToAIAssistant` needs to be refactored since it's a pretty central part of the AI Assistant stuff. I think someone with better TS/React/Gutenberg chops than myself might be able to figure it out though!
Contributor guide
Research direction
Start by tracing AiAssistantToolbarDropdownContent and its getBlockParents check, then follow handleToolbarButtonClick in AiAssistantExtensionToolbarDropdownContent. Read useTransformToAssistant, especially transformToAIAssistant and getSelectedBlockClientIds, to understand how the root list should be selected. Done means the menu appears from nested lists and converts the full root list to a table without breaking existing transformations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- ai, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100