Vue Quick Fix Implementation

In modern web development, providing instant feedback and intelligent suggestions to users is crucial for a smooth user experience. This challenge focuses on implementing "quick fixes" within a Vue.js application. Quick fixes are actions that users can trigger to automatically resolve common issues or apply standard formatting, thereby improving code quality and efficiency.

Problem Description

Your task is to create a Vue.js component that simulates a simple text editor, allowing users to input and edit text. The component should provide a "quick fix" feature that, when triggered, automatically applies predefined transformations to the user's input. Specifically, you need to implement two quick fixes:

1. Title Case Conversion: Convert the selected text (or the entire text if no selection is made) to title case. Title case means capitalizing the first letter of each word and ensuring the rest of the letters are lowercase.
2. Remove Extra Whitespace: Remove any leading/trailing whitespace from the entire text and collapse multiple internal whitespace characters into a single space.

Key Requirements:

• Create a Vue.js component (using TypeScript and Composition API) that renders a textarea element for user input.
• Implement a button or mechanism to trigger the quick fix functionality.
• When the quick fix is triggered, apply the "Title Case Conversion" and "Remove Extra Whitespace" transformations sequentially.
• The component should display the modified text within the textarea.
• Handle cases where there is no text selected in the textarea.

Expected Behavior:

• User types or pastes text into the textarea.
• User clicks the "Apply Quick Fixes" button.
• The text in the textarea is updated to be in title case and have normalized whitespace.

Edge Cases to Consider:

• Empty textarea.
• textarea with only whitespace.
• textarea with text containing special characters or numbers.
• The definition of a "word" for title casing should be robust (e.g., consider hyphens). For this challenge, we'll assume words are separated by spaces.

Examples

Example 1:

Input:
Textarea content: " this is a SAMPLE text with   extra spaces. "

User clicks "Apply Quick Fixes".

Output:
Textarea content: "This Is A Sample Text With Extra Spaces."

Explanation: The input text is converted to title case, and leading/trailing/internal whitespace is normalized.

Example 2:

Input:
Textarea content: "hello world"

User clicks "Apply Quick Fixes".

Output:
Textarea content: "Hello World"

Explanation: Standard title case conversion and whitespace normalization.

Example 3:

Input:
Textarea content: "  leading and trailing  "

User clicks "Apply Quick Fixes".

Output:
Textarea content: "Leading And Trailing"

Explanation: Demonstrates the removal of leading and trailing whitespace, along with title casing.

Constraints

• The Vue.js application should be built using Vue 3 with TypeScript and the Composition API.
• The solution should be implemented within a single .vue file component.
• The number of quick fix operations to implement is strictly two.
• Performance is not a critical concern for this specific problem, but the solution should be reasonably efficient for typical text inputs.

Notes

• You'll need to manage the textarea's value using Vue's reactivity system (ref or reactive).
• Consider how to handle text selection within the textarea if you want to apply fixes only to the selected portion (though for this challenge, applying to the whole text is acceptable).
• For title casing, a simple approach of splitting by spaces and capitalizing each word's first letter will suffice.
• For whitespace normalization, JavaScript's built-in trim() and regular expressions are your friends.