Clean up the code-open to all!

Now the code is very bigger.
If you can update some function to be generic. Or you find repeated code, you can submit a PR on this!
Note that the code should work the same as before and be readable and efficient !

Start by reviewing the JavaScript and React codebase to identify repeated functions or areas that could be made generic. Confirm current behavior in the virtual keyboard before proposing a focused refactor; done means the code remains functionally equivalent while becoming readable and efficient.

Written by the indexing model from the issue text.