diff --git a/components/ArticleReply/index.js b/components/ArticleReply/index.js index 2ca8514d..26fd2150 100644 --- a/components/ArticleReply/index.js +++ b/components/ArticleReply/index.js @@ -4,6 +4,7 @@ import gql from 'graphql-tag'; import { Box, Divider } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; +import { LINE_URL } from 'constants/urls'; import { nl2br, linkify } from 'lib/text'; import { TYPE_NAME } from 'constants/replyType'; import ExpandableText from 'components/ExpandableText'; @@ -130,13 +131,18 @@ const ArticleReply = React.memo( const classes = useStyles({ replyType }); const renderFooter = () => { + const articleUrl = + typeof window !== 'undefined' + ? // Construct Article URL without search strings (usually gibberish 1st-party trackers) + window.location.origin + window.location.pathname + : ''; const copyText = typeof window !== 'undefined' ? `${TYPE_NAME[reply.type]} \n【${t`Reason`}】${( reply.text || '' - ).trim()}\n↓${t`Details`}↓\n${ - window.location.href - }\n↓${t`Reference`}↓\n${reply.reference}` + ).trim()}\n↓${t`Details`}↓\n${articleUrl}\n↓${t`Reference`}↓\n${ + reply.reference + }\n--\n🤔 在 LINE 看到可疑訊息?加「真的假的」好友,查謠言與詐騙 ➡️ ${LINE_URL}` : ''; return ( @@ -209,7 +215,9 @@ const ArticleReply = React.memo( )}
- {nl2br(linkify(reply.text))} + + {nl2br(linkify(reply.text))} +
{renderReference()} diff --git a/pages/article/[id].js b/pages/article/[id].js index 632c1749..e380b1ab 100644 --- a/pages/article/[id].js +++ b/pages/article/[id].js @@ -16,7 +16,10 @@ import { usePushToDataLayer } from 'lib/gtm'; import { format, formatDistanceToNow } from 'lib/dateWithLocale'; import isValid from 'date-fns/isValid'; +import { LINE_URL } from 'constants/urls'; +import AddIcon from '@material-ui/icons/AddCircleOutline'; +import Fab from '@material-ui/core/Fab'; import AppLayout from 'components/AppLayout'; import Ribbon from 'components/Ribbon'; import Hyperlinks from 'components/Hyperlinks'; @@ -127,6 +130,24 @@ const useStyles = makeStyles(theme => ({ textOverflow: 'ellipsis', lineClamp: 5, }, + lineFab: { + position: 'fixed', + zIndex: theme.zIndex.speedDial, + right: 20, + bottom: 20, + background: theme.palette.common.green1, + color: '#fff', + height: 52, + borderRadius: 32, + + '&:hover': { + background: theme.palette.common.green2, + }, + }, + lineFabText: { + lineHeight: '20px', + margin: '0 12px', + }, })); const LOAD_ARTICLE = gql` @@ -246,6 +267,18 @@ function ArticlePage() { setFlashMessage(error.toString()); }, []); + const handleCopy = useCallback(e => { + const selection = document.getSelection(); + const articleUrl = window.location.origin + window.location.pathname; + + e.clipboardData.setData( + 'text/plain', + selection.toString() + + `\n📋 節錄自 Cofacts 真的假的:${articleUrl}\n🤔 在 LINE 看到可疑訊息?加「真的假的」好友,查謠言與詐騙 ➡️ ${LINE_URL}` + ); + e.preventDefault(); + }, []); + const handleFormClose = () => setShowForm(false); const article = data?.GetArticle; @@ -322,7 +355,7 @@ function ArticlePage() { )} - + {nl2br( linkify(text, { props: { @@ -390,6 +423,7 @@ function ArticlePage() { mt={3} id="current-replies" ref={replySectionRef} + onCopy={handleCopy} >

{t`${article.articleReplies.length} replies to the message`}

@@ -430,6 +464,24 @@ function ArticlePage() { onClose={() => setFlashMessage('')} message={flashMessage} /> + {!currentUser && ( + + + + LINE 機器人 +
+ 查謠言詐騙 +
+
+ )} ); }