Multi-line text area support for editable settings in Vibe Coding blocks

Currently, when using useTextSetting in Vibe Coding blocks, the UI only provides a single-line text input field. When users enter text with line breaks (by pressing Enter or pasting multi-line content), the line breaks are not preserved in the saved value.

Use case:
I need to allow content editors to enter multiple paragraphs or lines of text (e.g., additional descriptions, disclaimers, or formatted content) that should be displayed with proper line breaks on the page.

Current workaround limitations:

  • Using whitespace-pre-wrap CSS doesn’t help because line breaks aren’t saved
  • Using array settings adds unnecessary complexity for simple multi-line text
  • Using separator characters (like semicolons) is not intuitive for content editors

Proposed solution:
Add a multiline or textarea option to useTextSetting, or introduce a new setting type like useLongTextSetting that:

  • Displays a textarea input in the Settings UI
  • Preserves line breaks when saving
  • Allows content editors to easily enter and format multi-line content

Example:

const description = useTextSetting({
  name: "description",
  label: "Description",
  multiline: true, // or use a new useLongTextSetting hook
  initialValue: "Line 1\nLine 2\nLine 3"
});

This would greatly improve the content editing experience for blocks that need more than single-line text inputs.

Thanks, sharing with the team :slight_smile:

1 Like