Add Prefix and Suffix to Every Line Add a prefix and/or suffix to each line of text.

The tool's core functionality relies on React's useState hook to store the prefix, suffix, and skipEmpty state variables. When the user inputs a prefix or suffix, the corresponding state variable is updated using the setPrefix or setSuffix function. The skipEmpty state is toggled using the setSkipEmpty function when the checkbox is clicked. Under the hood, the onProcess callback function uses the split method to divide the input string into an array of lines separated by newline characters (\n). It then maps over this array, applying the prefix and suffix to each line using simple string concatenation.

The tool's ability to handle empty lines is facilitated by the skipEmpty state variable, which determines whether to apply the prefix and suffix to all lines or only non-empty ones. If skipEmpty is true, the trim method is used to remove whitespace from each line, and if the resulting string is empty, the line is returned unchanged. This approach ensures that empty lines are preserved in their original form when the skip-empty-lines option is enabled. The processed lines are then joined back together using the join method with a newline character (\n) as the separator.

The TextToolLayout component from the @/components/shared directory provides a basic structure for the tool's interface, including input fields for setting custom prefixes and suffixes. These input fields use React's onChange event handler to update the corresponding state variables when the user types in a new prefix or suffix. The glass-input class is applied to these input fields to provide a consistent visual style throughout the application. By using React's useCallback hook to memoize the onProcess function, the tool ensures that it only re-renders when necessary, improving performance and reducing unnecessary computations.