Inserting HTML into a Snackbar message

Question

So I'm forking off a sample Twilio video chat app (https://github.com/twilio/twilio-video-app-react). For the chat feature, Snackbar messages are employed. Which works fine. But I want to allow the user to send a message starting with http, so that the message will then be sent as a hyperlink URL.

The ChatInput component works fine for displaying this message as a hyperlink URL for the local user (i.e. - the sender). But the DataTrack event handler for the remote users doesn't display the message as a hyperlink. Just displays the literal text.

Here is the ChatInput.tsx, where any message starting with http will show up correctly for the local user.

import React, { useState } from 'react';
import { Button, FormControl, TextField } from '@material-ui/core';
import { useSnackbar } from 'notistack';
import useVideoContext from '../../../hooks/useVideoContext/useVideoContext';

export default function ChatInput() {
  const [message, setMessage] = useState('');
  const { room } = useVideoContext();
  const { enqueueSnackbar } = useSnackbar();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setMessage(e.target.value);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (message) {
      // Get the LocalDataTrack that we published to the room.
      const [localDataTrackPublication] = [...room.localParticipant.dataTracks.values()];

      // Construct a message to send
      const fullMessage = `${room.localParticipant.identity} says: ${message}`;

      if (message.startsWith('http')) {
        // Send the message
        localDataTrackPublication.track.send(`<a href="${message}">${message}</a>`);

        // Render the message locally so the local participant can see that their message was sent.
        enqueueSnackbar(<a href={message}>{message}</a>);
      } else {
        // Send the full message
        localDataTrackPublication.track.send(fullMessage);

        // Render the full message locally so the local participant can see that their message was sent.
        enqueueSnackbar(fullMessage);
      }
      //Reset the text field
      setMessage('');
    }
  };

  return (
    <form autoComplete="off" style={{ display: 'flex', alignItems: 'center' }} onSubmit={handleSubmit}>
      <FormControl>
        <label htmlFor="chat-snack-input" style={{ color: 'black' }}>
          Say something:
        </label>
        <TextField value={message} autoFocus={true} onChange={handleChange} id="chat-snack-input" size="small" />
      </FormControl>
      <Button type="submit" color="primary" variant="contained" style={{ marginLeft: '0.8em' }}>
        Send
      </Button>
    </form>
  );
}

And here is the DataTrack.ts, which only displays the string literal for any remote user.

import { useEffect } from 'react';
import { DataTrack as IDataTrack } from 'twilio-video';
import { useSnackbar } from 'notistack';

var stringToHTML = function (str) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};

export default function DataTrack({ track }: { track: IDataTrack }) {
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    const handleMessage = (message: string) => { 
    if (message.startsWith('http')) {
        const newMessage = stringToHTML(message);
        enqueueSnackbar(newMessage);
        }
    else {
    enqueueSnackbar(message); }
    };
    track.on('message', handleMessage);
    return () => {
      track.off('message', handleMessage);
    };
  }, [track, enqueueSnackbar]);

  return null; // This component does not return any HTML, so we will return 'null' instead.
}

Any suggestions as to how I can get the remote users to receive the same hyperlink URL that the sender sees?

Answer 1

Appreciate the feedback. I was handling the message two different ways depending if a URL was being passed along or not. Actually the project author actually provided a clean solution. Installing the Linkify package allows just those string elements inferred to be HTML to be formatted as such.

Here is the reworked DataTrack.tsx contents. Works like a champ!

import React from 'react';
import { useEffect } from 'react';
import { DataTrack as IDataTrack } from 'twilio-video';
import { useSnackbar } from 'notistack';

import Linkify from 'react-linkify';

export default function DataTrack({ track }: { track: IDataTrack }) {
  const { enqueueSnackbar } = useSnackbar();
  useEffect(() => {
    const handleMessage = (message: string) =>
      enqueueSnackbar(
        <Linkify
          componentDecorator={(decoratedHref, decoratedText, key) => (
            <a target="_blank" rel="noopener" href={decoratedHref} key={key}>
              {decoratedText}
            </a>
          )}
        >
          {message}
        </Linkify>
      );
    track.on('message', handleMessage);
    return () => {
      track.off('message', handleMessage);
    };
  }, [track, enqueueSnackbar]);

  return null; // This component does not return any HTML, so we will return 'null' instead.
}

Answer 2

TL;DR: the function stringToHTML is returnign a DOM element reference not a React element when passing the message to NotiStack, try wrapping it with a React element:

//const newMessage = stringToHTML(message);
enqueueSnackbar(<div dangerouslySetInnerHTML={{__html:message}} />);

NL;PR: And/Or I'm not sure why your are passing the message value to NotiStack differently in the two components:

if (message.startsWith('http')) { 
//local user
 enqueueSnackbar(<a href={message}>{message}</a>); //1)
//vs.  remote user
const newMessage = stringToHTML(message);
enqueueSnackbar(newMessage); // should it be the same as 1)?