aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Message.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-08 17:12:18 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit603c3960422fc9976d270cf8dc57afd245caa6e4 (patch)
treec4bcabc940546eb0d605d5815c6d69b24baad2e1 /vnext/src/components/Message.js
parent820a5033db1a629f62d24fcfec2b2505abcb0b93 (diff)
Embed links
Diffstat (limited to 'vnext/src/components/Message.js')
-rw-r--r--vnext/src/components/Message.js21
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} />);
}