Embed links

1 files changed, 15 insertions, 6 deletions

diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index e27e057b..6c78b4bc 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
@@ -8,14 +8,24 @@ import Icon from './Icon';
 import Avatar from './Avatar';
 import { UserLink } from './UserInfo';
 
-import { format } from '../utils/embed';
+import { format, embedUrls } from '../utils/embed';
 
 import './Message.css';
 
-function Message({ data, visitor, children, ...rest }) {
+export default function Message({ data, visitor, children, ...rest }) {
     const isCode = (data.tags || []).indexOf('code') >= 0;
     const likesSummary = data.likes ? `${data.likes}` : 'Recommend';
     const commentsSummary = data.replies ? `${data.replies}` : 'Comment';
+    const embedRef = useRef();
+    const msgRef = useRef();
+    useEffect(() => {
+        if (msgRef.current) {
+            embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
+            if (!embedRef.current.hasChildNodes()) {
+                embedRef.current.style.display = 'none';
+            }
+        }
+    }, []);
     return (
         <div className="msg-cont">
             <Recommendations forMessage={data} />
@@ -34,7 +44,7 @@ function Message({ data, visitor, children, ...rest }) {
             </header>
             {
                 data.body &&
-                <div className="msg-txt">
+                <div className="msg-txt" ref={msgRef}>
                     <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} />
                 </div>
             }
@@ -44,6 +54,7 @@ function Message({ data, visitor, children, ...rest }) {
                     <img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" /></a>
                 </p>
             }
+            <div className="embedContainer" ref={embedRef} />
             <nav className="l">
                 {visitor.uid === data.user.uid ? (
                     <Link to={{ pathname: `/${data.user.uname}/${data.mid}` }} className="a-like msg-button">
@@ -75,8 +86,6 @@ function Message({ data, visitor, children, ...rest }) {
     );
 }
 
-export default React.memo(Message);
-
 function MessageContainer({ isCode, data }) {
     return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<p dangerouslySetInnerHTML={data} />);
 }