Indent-based folds for YAML editor #21966
Conversation
![home-assistant[bot]](https://avatars.githubusercontent.com/in/97978?s=60&v=4){kind=small}
|
Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍 |
src/components/ha-code-editor.ts
Outdated
| @@ -123,6 +123,7 @@ export class HaCodeEditor extends ReactiveElement { | |||
| } | |||
| const transactions: TransactionSpec[] = []; | |||
| if (changedProps.has("mode")) { | |||
| // TODO: not sure how to handle things here | |||
There was a problem hiding this comment.
left this as a note so I wouldn't forget. I probably need some guidance here. Not sure if/how to handle mode changes
can mode changes even occur at all? I assume we need to check if mode changed to/from yaml, and disable/enable the added extensions accordingly, but not sure how to go about it
There was a problem hiding this comment.
You would need to make it a compartment, so you can reconfigure it.
There was a problem hiding this comment.
got it. will take a look at that, thanks
home-assistant
bot
added
cla-recheck
cla-signed
and removed
cla-recheck
cla-needed
labels
WalkthroughWalkthroughThe changes enhance the Changes
Tip OpenAI O1 model for chat
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/components/ha-code-editor.ts (3 hunks)
- src/resources/codemirror.ts (4 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/resources/codemirror.ts
Additional comments not posted (2)
src/components/ha-code-editor.ts (2)
201-203: LGTM!Adding the folding compartment to the list of extensions is necessary to enable the folding functionality in the editor.
321-330: LGTM!The
_getFoldingExtensionsmethod correctly returns the necessary extensions for code folding when the mode is set to "yaml" and an empty array for other modes. This ensures that the folding functionality is enabled only for the YAML mode.
src/components/ha-code-editor.ts
Outdated
| // TODO: not sure how to handle things here | ||
| transactions.push({ | ||
| effects: this._loadedCodeMirror!.langCompartment!.reconfigure( | ||
| this._mode | ||
| ), | ||
| effects: [ | ||
| this._loadedCodeMirror!.langCompartment!.reconfigure(this._mode), | ||
| this._loadedCodeMirror!.foldingCompartment.reconfigure( | ||
| this._getFoldingExtensions() | ||
| ), | ||
| ], |
There was a problem hiding this comment.
Reconfiguring folding compartment on mode change looks good, but consider removing the TODO comment.
I see that you have implemented the suggestion to reconfigure the folding compartment alongside the language compartment when the mode changes. This looks good to me.
However, the TODO comment is still present, indicating that you might still be unsure about the handling of mode changes. If you are satisfied with the current implementation, consider removing the TODO comment to avoid confusion.
If you need further guidance on handling mode changes, please let me know, and I'll be happy to assist you.
|
After merging this I noticed some issues, especially when there are line breaks, I would not have expected folds inside
|
|
indeed, I didn't notice that either (seems to be the empty lines, I don't think any of my samples had any) I'll take a look. kind of short on time this week, so if you want feel free to revert, and I'll push an updated PR once I can |
Breaking change
Proposed change
Adds code folds on YAML editors. This is particularly useful when editing large yaml files (such as dashboards or scenes) where it becomes hard to visually understand the hierarchy.
This can technically be done for all code editing textboxes, not just YAML (to be honest, I'm not sure if there are others worth looking into?), but the folding methods may differ (yaml is indentation-based, a lot of other languages are not), so the implementation needs to be tailored for individual languages.
As a sidenote, I was concerned with potential performance issues with this addition. Did some manual testing, by forging a yaml file with over 1MB and 36k lines, and did not see any UI performance issues (though I'm running it on a fairly modern machine)
Should also note: The folding code itself was adapted from a previous discussion on codemirror's forum . A live demo of it can be seen here
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
New Features
Bug Fixes