search

webscopeio / react-textarea-autocomplete

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

Returning Dom elements in output instead of just texts #196

Open noobmaster19 opened 4 years ago

noobmaster19 commented 4 years ago

Hey , great package so far ! I was thinking of utilizing 'antd' tag components to distinguish the selected item and the normal texts , however it seems that it is not possible to return anything other than strings within the output method , is this an intended effect? If it is , is there a way where i can go around it and add in components within the output?

jukben commented 4 years ago

That component property won't help? With that you can render text returned from output function as you wish, don't you?

jonathanzong commented 3 years ago

I was hoping for this too. In a data provider, the component property allows you to arbitrarily render the suggestions in the autocomplete list, but the output text itself has to be a string. Instead, I want to be able to wrap the output text in tags. So for example, instead of replacing ":smile:" with "😊", I want to be able to replace ":smile:" with <span className="smile-emoji">smile</span> (or whatever) so that I can style it arbitrarily.

To support this, the library would need to support the option to use ContentEditable instead of textarea. It's currently not easy because this would necessitate controlling the caret position without relying on the selectionStart/selectionEnd stuff that only exists fortextarea. e.g. https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div

tobiasbueschel commented 3 years ago

Adding to what @jonathanzong said, it would be great to support this as it would help to easily build features such as:

Input text

Hello @jukben how are you?

Renders to (I'm omitting some span elements for brevity)

Hello <a href="https://github.com/jukben" target="_blank" /> how are you?
jukben commented 3 years ago

Haha, love it @tobiasbueschel! I would love to help, but unfortunately the architecture is so rusty that it's not feasible to extend the API.

I'm looking for maintainer who would lead complete rewrite.

tobiasbueschel commented 3 years ago

@jukben that could be a fun project, I wish I would have some more time! We would probably have to do something like this: https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.tsx

Happy Wednesday!