Add textarea type for advanced script settings

[devin-ai-integration]

Add textarea type for advanced script settings

Summary

Implements support for textarea input type in advanced script settings, addressing feature request #772. This allows users to create multi-line text inputs for script settings, useful for configurations like YAML that span multiple lines.

Changes:

• Added textarea to the Option type union in UserScriptSettingsModal.ts
• Implemented addTextArea() method with CSS auto-grow behavior using field-sizing: content
• Added comprehensive styling to prevent horizontal growth while allowing vertical auto-growth:
  • resize: vertical, overflowY: auto, overflowX: hidden for vertical-only scaling
  • max-width: 100%, box-sizing: border-box, overflow-wrap: anywhere to lock width
  • CSS rule .userScriptSettingsModal .setting-item-control { min-width: 0; } to fix flex layout issue
• Used setProperty() for field-sizing to avoid TypeScript errors (property too new for TS DOM typings)
• Updated documentation to list textarea as an available setting type

Review & Testing Checklist for Human

• Test horizontal growth prevention: Enter very long unbroken strings (e.g., a 500-character URL) and verify the textarea does NOT expand horizontally beyond its container
• Test vertical auto-grow: Enter multiline content and verify the textarea grows vertically from 100px up to 300px max-height, then shows a scrollbar
• Test with YAML content: Use the test script below with actual multiline YAML to verify the original use case from [FEATURE REQUEST] Add textarea type in advanced scripts with user settings #772 works correctly
• Verify no regressions: Check that other settings in the user script settings modal (text, checkbox, dropdown, format) still render correctly and aren't affected by the CSS changes
• Test browser compatibility: If possible, test in different Obsidian versions to verify field-sizing: content either works or degrades gracefully (should fall back to fixed 100px height with manual resize)

Suggested Test Script

module.exports = {
    entry: async (QuickAdd, settings) => {
        console.log("YAML Config:", settings["YAML Config"]);
        console.log("Long Text:", settings["Long Text"]);
    },
    settings: {
        name: "Textarea Test",
        author: "Test",
        options: {
            "YAML Config": {
                type: "textarea",
                defaultValue: "key: value\nkey2: value2\nkey3:\n  nested: value",
                placeholder: "Enter YAML configuration",
                description: "Multi-line YAML configuration"
            },
            "Long Text": {
                type: "textarea",
                defaultValue: "",
                placeholder: "Try pasting a very long URL or unbroken string here",
                description: "Test horizontal growth prevention"
            }
        }
    }
};

Notes

• The field-sizing: content CSS property is very new (2024) and may not be supported in older Electron/Chromium versions. If unsupported, the textarea will remain at min-height (100px) with manual vertical resize available - this is acceptable progressive enhancement.
• The horizontal growth issue required multiple fixes: the root cause was flex layout behavior where min-width: auto prevented the textarea's container from shrinking. The CSS rule .userScriptSettingsModal .setting-item-control { min-width: 0; } fixes this, but should be tested to ensure it doesn't affect other settings.
• Max-height is set to 300px - this can be adjusted if needed based on user feedback.
• The implementation follows the same pattern as existing input types (text, checkbox, dropdown, format).

---

Link to Devin run: https://app.devin.ai/sessions/a356e7a36ce14819891354aadacebe42
Requested by: Christian (christian@bagerbach.com) / @chhoumann

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
quickadd	Ready	Preview	Nov 8, 2025 2:22pm

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch devin/1762606142-add-textarea-type

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}