when adding practices, good to have autocompletes for different additional data added to notes

[kapil1garg]

some resources that could help:

• annotation component in react: https://jonathanmh.com/p/building-a-text-annotation-component-with-react/
• more annotations but probs more than I need: https://react-annotation.susielu.com/

another thing is getting autocompletes. some things to resolve in doing this:

• position of input: https://stackoverflow.com/questions/4928586/get-caret-position-in-html-input
• https://www.reddit.com/r/javascript/comments/4519vr/autocomplete_plugin_for_contenteditable_div/
• pretty helpful blog post: https://medium.com/streak-developer-blog/the-complexities-of-implementing-inline-autocomplete-for-content-editables-e358c0ed504b
• https://primer.style/react/drafts/InlineAutocomplete

simple code chunk:

const App = () => {
  const [suggestions, setSuggestions] = useState([]);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setSuggestions(getSuggestions(value));
  };

  const renderSuggestions = () => {
    return (
      <ul>
        {suggestions.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  };

  return (
    <div>
      <input
        type="text"
        onChange={handleInputChange}
        value={value}
      />
      {suggestions.length > 0 && renderSuggestions()}
    </div>
  );
};