Copying message copy span html instead of text about chat-ui-kit-react HOT 8 CLOSED

It is accepting any html.

from chat-ui-kit-react.

Is there any way I can disable html pasting

from chat-ui-kit-react.

@GhazanfarKhan Thank you for your question.

If you need to sanitize data pasted to <MessageInput />, you can use onPaste event handler.

Here is simple example:

  const [ value, setValue ] = useState(""); 

  return <MessageInput  onChange={(val) => setValue(val)} value={value} onPaste={(evt) => {
                evt.preventDefault();
                setValue(evt.clipboardData.getData("text"));
         }} />

Useful links:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
• https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

from chat-ui-kit-react.

@supersnager thanks.

from chat-ui-kit-react.

Hi @supersnager

Send button is disabled when do the above steps you describe.

from chat-ui-kit-react.

Hi @supersnager, send button is disabled while do pasting but when I type something it was undisabled.

from chat-ui-kit-react.

@GhazanfarKhan Internal state of a send button is tracked by onChange internal handler. Paste event, not invokes this handler.
I will think, how to deal with it when the paste event occurs.

However, as a workaround, you can use the sendDisabled property of the <MessageInput /> component to handle the state of this button yourself:

  const [ value, setValue ] = useState(""); 
  const [sendDisabled, setSendDisabled] = useState(true);
            useEffect(() => {
                setSendDisabled(value.length===0);
            },[value]);

  return <MessageInput  sendDisabled={sendDisabled} onChange={(val) => setValue(val)} value={value} onPaste={(evt) => {
                evt.preventDefault();
                setValue(evt.clipboardData.getData("text"));
         }} />

from chat-ui-kit-react.

Thanks for this workaround.

from chat-ui-kit-react.