search

chatscope / chat-ui-kit-react

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
https://chatscope.io
MIT License
1.34k stars 116 forks source link

Text-only in MessageInput #94

Closed titocosta closed 1 year ago

titocosta commented 1 year ago

When I copy and paste into MessageInput, it picks up formatting and injects HTML tags into the strings. I prefer to keep the input field as text-only.

How can I inject the contenteditable="plaintext-only" attribute into the underlying contenteditable element?

supersnager commented 1 year ago

@titocosta You need to get a reference to the contenteditable, and set the attribute manually. I answered how to get the reference in your previous question: https://github.com/chatscope/chat-ui-kit-react/issues/93#issuecomment-1504801333

If you already have the reference, you can set the attribute: 

editorRef.current?.setAttribute("contenteditable", "plaintext-only");

However, I'm not sure if using contenteditable="plaintext-only" is a good idea because it's not supported in Firefox. Maybe it would be better to handle the "paste" event and clean pasted text by yourself? Here is how to do it: https://github.com/chatscope/chat-ui-kit-react/issues/82#issuecomment-1416852042

Also check this thread: https://github.com/chatscope/chat-ui-kit-react/issues/22#issuecomment-815653617