Textarea fields in usermods

[obar]

A textarea with a label ending in > will be presented as a textarea, allowing for multi-line text.

It's a small change, I think it opens up possibilities for usermods that need more than just a single line but don't need their own custom settings page.

Summary by CodeRabbit

• New Features
  • Added support for multiline text fields in usermod configuration, allowing fields marked with a special suffix to be edited as multiline text areas.
• Style
  • Unified styling for input and textarea elements to ensure a consistent appearance across single-line and multiline fields.

[DedeHai]

I agree, this needs to be done properly i.e. limit to a size that does not overflow any buffers. Other than that: am I right in assuming that this tries to solve a currently non-existing use case? If so adding code 'just for convenience' is not a good idea due to the stringent flash memory restrictions.

[softhack007]

I think the usecase question from @DedeHai is a very valid point. We already have a type for "text" which is good for one-line text (e.g. MQTT topic name). With textarea fields, we could have multi-line input like you mom's postal address including phone number and a birthday congratulation letter. Or a complete ~~GIF~~ PNG file encoded as octet-stream.

a) it may create new issues, as the textblock must be copied into a buffer (stack?) for processing, it must be added to the global JSON object (heap), and then written out to cfg.json while preserving line breaks and special characters including ", [ and :. Finally - if the textblock is saved in cfg.json - it must be read in each time we read the config file (heap, filesystem, read/write performance, ws communication overhead).

b) how would I create such a text area for usermod settings?

Today we typically do this in a usermod:

    uint8_t soundSquelch = 8;
    void addToConfig(JsonObject& root) override {
      JsonObject top = root.createNestedObject(FPSTR(_name));
      JsonObject cfg = top.createNestedObject(FPSTR(_config));
      cfg[F("squelch")] = soundSquelch;
   }
   
   bool readFromConfig(JsonObject& root) override {
      JsonObject top = root[FPSTR(_name)];
      bool configComplete = !top.isNull();
      configComplete &= getJsonValue(top[FPSTR(_config)][F("squelch")], soundSquelch);
      return configComplete;

What's necessary to create a textarea? String is not enough, I assume?

[obar]

Good point about indentation. There's a mix of tabs and spaces in that chunk of the text file and I should take a closer look at how it's done here, I just trusted my text editor to figure it out.

It's true that a lot of text could be entered in a textarea, but the same is true for input type="text" as well, both have a maxlength that can be specified but that's up to the browser to enforce. It's still a String, just one with \n included. There are already textareas in the stock UI for power users (like people activating usermods), when configuring presets. If a usermod would make use of this feature in a way that's potentially risky, I agree with the three of you: there should be a warning and maybe even guard rails.

My use case: I've got a usermod I'd like to contribute that uses a textarea for a reasonable string length, where the use of newlines to delimit makes it legible. You can see the usermod in action in #showcase on Discord, I just posted a clip a few minutes ago!

I messed up this pull request in other ways than the tabs regardless (ended up making a new branch on main and not 0_15), and I should also include the npm-generated files, as well as an addition to the Example usermod... maybe a new pull request is in order! Will resubmit soonish and I hope I can win you over on the UI benefit of a tastefully used textarea ;)

[obar]

Didn't need to open a new pull request in the end, amended to fix the tabs/spaces issue @blazoncek pointed out, and put in an example as @softhack007 suggested. Looks like npm doesn't touch the stylesheet and the different branch doesn't matter in this case. Thanks all for the help and suggestions :)

[DedeHai]

I do not see the benefit. While I like what you did in your usermod, would this be an acceptable workaround?

• add a config field to your UM with "number of groups" (or get the number of groups some other way)
• add a one line input field for each group (dynamically)

[obar]

I believe the major concerns were addressed, and of course a usermod using this feature that encourages a ton of text should come with a warning. Anything blocking a merge? Here is my example usage, in a usermod I'd like to submit once this feature is in:

[rtist2g]

Sorry, I did this on accident.

[github-actions[bot]]

Hey! This pull request has been open for quite some time without any new comments now. It will be closed automatically in a week if no further activity occurs. Thank you for contributing to WLED! ❤️

[coderabbitai[bot]]

Walkthrough

The changes introduce support for multiline string configuration in a usermod example by adding a new member variable, updating JSON persistence logic, and sanitizing input. The web interface now conditionally renders text fields as either single-line inputs or multiline textareas based on a naming convention, with corresponding CSS adjustments to style both elements consistently.

Changes

Files/Paths	Change Summary
usermods/EXAMPLE_v2/usermod_v2_example.h	Added a private multiline string member, updated JSON save/load logic to handle multiline, and sanitized input.
wled00/data/settings_um.htm	Modified form generation to render fields ending with > as <textarea> for multiline input.
wled00/data/style.css	Extended input styling rules to also apply to textarea elements.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions[bot]]

Hey! This pull request has been open for quite some time without any new comments now. It will be closed automatically in a week if no further activity occurs. Thank you for contributing to WLED! ❤️