Returning Dom elements in output instead of just texts

[noobmaster19]

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]

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

[jonathanzong]

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]

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]

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]

@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!