[FEATURE]: Improve inputDetector API by adding more websites with bugs

[ttebify]

Is your feature request related to a problem? Please describe.

The current implementation of the inputDetector API works well for a few websites, but there are still many more websites out there that may have bugs that prevent the tooltip from working correctly. To improve this, we need to add more website structures and input field selectors to the API.

To do this, we can follow the steps below:

1. Open the Tooltip.tsx file.
2. Locate the handleSelection function.
3. Uncomment the console.log(isTextInput, activeElement) line.
4. Open the website in the browser and copy the HTML element shown in the console log.
5. Inspect the copied element for common classnames, attributes, selectors, etc.
6. Add the new website structure and input field selectors to the websitesInputFieldConfigOptions array in src/config/input_field_configs.ts file.
7. Test the new configuration by using the website and checking if the tooltip works correctly.
8. If the tooltip doesn't work as expected, adjust the threshold value (between 0 and 1) to a suitable value, typically between 0.4 to 0.5.

This is an example for twitter:

export const websitesInputFieldConfigOptions: WebsiteDetectionOptions[] = [
  // Twitter
  {
    href: /twitter\.com\/compose\/tweet/,
    classNames: ["public-DraftEditor-content"],
    selectors: [
      "[data-testid='tweetTextarea_0']",
      "[role='textbox']",
      "[aria-multiline='true']",
      "[contenteditable='true']",
    ],
    attributes: ["spellcheck"],
    threshold: 0.5,
  },
];

We encourage developers to contribute to this effort by adding new website structures and input field selectors to the API. By doing this, we can make the inputDetector API more robust and cover a wider range of websites.

Thank you 🙏 🤩