Copying message copy span html instead of text

[GhazanfarKhan]

Hi, when you copy a message from message component it will copy html not the actual text. Attaching screenshot.

[GhazanfarKhan]

It is accepting any html.

[GhazanfarKhan]

Is there any way I can disable html pasting

[supersnager]

@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

[GhazanfarKhan]

@supersnager thanks.

[GhazanfarKhan]

Hi @supersnager

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

[GhazanfarKhan]

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

[supersnager]

@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"));
         }} />

[GhazanfarKhan]

Thanks for this workaround.