Indent/Dedent Text Add or remove indentation from text with spaces or tabs.

The tool works under the hood by using React's useState and useCallback hooks to manage its state and handle user input. When a user selects either indent or dedent mode, the tool updates its internal state with the chosen action. The amount of indentation and whether to use tabs or spaces are also stored in this state. The onProcess function is then called with the user's text input, at which point it splits the input into individual lines using the split method with a newline character as the separator.

In indent mode, the tool uses JavaScript's repeat method to create a string of spaces that will be prepended to each line, or a tab character if the useTab option is enabled. This string is then concatenated with each line using the map method and finally joined back together into a single string with newline characters in between. The TextToolLayout component from the @/components/shared directory handles rendering this output.

When operating in dedent mode, the tool checks each line to see if it starts with a tab character or spaces. If useTab is enabled, it simply removes one leading tab character if present using slicing. For space-based dedentation, it iterates over the characters at the start of each line and counts how many spaces are there until it reaches either a non-space character or has removed the specified amount of spaces. This count is then used to slice off the leading whitespace from the line.

The tool uses JavaScript's built-in string methods like split, map, join, and slicing for text manipulation, while React handles the user interface updates based on state changes triggered by user interactions with form elements such as radio buttons and checkboxes. The amount of spaces to add or remove is constrained between 1 and 16 using Math.max and Math.min functions when handling input from a number type input field.