search

webscopeio / react-textarea-autocomplete

📝 React component implements configurable GitHub's like textarea autocomplete.
MIT License
451 stars 80 forks source link

Any experiences using this with nested data (i.e. populating triggers in a tree structure)? #82

Closed chrisdakin closed 6 years ago

chrisdakin commented 6 years ago

For instance, I'm using this in a markdown editor to populate JSON data that gets transformed like a variable. So if I have:

  user: {
    name: {
      first "John",
      last: "Doe"
    },
    age: ...
  },
  location: {
    address: ...
  }
}

and my triggers are { and ., I want users to be able to type {user. and have the next autocomplete populate with name and age.

So far I'm dynamically populating the list of triggers but they're all on the top level. I was thinking about keeping a string of the current "selection" in state and updating triggers every time there's an update, but there are a ton of edge cases with that and I'm wondering if anyone has any experiencing doing this kind of thing.

Edit: I just realized if there were a way to use a string as a trigger instead of a character I could populate my triggers with my entire JSON tree. Any chance of this or some sort of regex matching becoming a thing with this library?

jukben commented 6 years ago

Hey! That's an interesting idea, someone created an issue about "custom based" trigger, check it out this https://github.com/webscopeio/react-textarea-autocomplete/issues/77 You might want to collab on it as well, I'm curious about your ideas.

Anyway, if you want to achieve JSON autocomplete always start with { char, it should be possible to just implement { trigger to return all possible paths based of the value? (e.g {user. trigger will get user. as value so you can compute the possible items to show in autocomplete)