search

Watts-Lab / researcher-portal

deliberation lab collaborator tools
0 stars 0 forks source link

[FEATURE]: Create collapsable/uncollapsable chunks of YAML #82

Open shapeseas opened 1 month ago

shapeseas commented 1 month ago

User Story

As an experiment designer, I want to be able to view sections of the code at a time, without needing to see all of the code.

Feature description

Have a way to "collapse" chunks of the yaml in the editor window in an obvious way, and "uncollapse" them when I want to. Code folding could look like this: https://github.com/Watts-Lab/researcher-portal/issues/74#issuecomment-2344033692

What would this feature enable?

More easily focus on certain lines in the YAML editor

Priority

Convenience for researchers

shapeseas commented 1 month ago

The current code editor component from @uiw/react-text-area-code-editor is too simple; it doesn't have collapsible text. Instead we could use one of two options below. I tested implementations of both and here are my thoughts:

  1. CodeMirror, customization options here. + Same library creators as the basic react-text-area-code-editor. - Lots of specific installations (codemirror, codemirror-react, lang-yaml), are annoying to manage and actually easy to conflict i.e. I broke the simple installation because codemirror/state was incorrectly installed against codemirror/folding. - YAML folding didn't work out-of-the-box. The folding sections were there, but they weren't in the right sections based on indentation.

  2. Monaco, customization options here. Basic setup in our app looks like this: image + VSCode is built on top of this so it's very VSCode like out-of-the-box + Easy to install and use. It's just one npm install. + Has a diff editor, which we may need down the line! - Can't think of any. Maybe it adds alot to app size?

JamesPHoughton commented 4 weeks ago

Monaco sounds neat!