keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

merge linkify component to messagebody as this is the only one using it

Browse Source
pull/2269/head
Audric Ackermann 3 years ago
parent e135cbd696
commit a115d385dd
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
2 changed files with 92 additions and 98 deletions
Show Stats Download Patch File Download Diff File

95
ts/components/conversation/Linkify.tsx
Unescape Escape View File

@ -1,95 +0,0 @@
import React from 'react';
import LinkifyIt from 'linkify-it';
import { RenderTextCallbackType } from '../../types/Util';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { shell } from 'electron';
import { MessageInteraction } from '../../interactions';
import { useDispatch } from 'react-redux';
import { LinkPreviews } from '../../util/linkPreviews';
const linkify = LinkifyIt();
type Props = {
text: string;
/** Allows you to customize now non-links are rendered. Simplest is just a <span>. */
renderNonLink?: RenderTextCallbackType;
isGroup: boolean;
};
const SUPPORTED_PROTOCOLS = /^(http|https):/i;
const defaultRenderNonLink = ({ text }: { text: string }) => <>{text}</>;
export const Linkify = (props: Props): JSX.Element => {
const { text, isGroup, renderNonLink } = props;
const results: Array<any> = [];
let count = 1;
const dispatch = useDispatch();
const matchData = linkify.match(text) || [];
let last = 0;
// disable click on <a> elements so clicking a message containing a link doesn't
// select the message.The link will still be opened in the browser.
const handleClick = (e: any) => {
e.preventDefault();
e.stopPropagation();
const url = e.target.href;
const openLink = () => {
void shell.openExternal(url);
};
dispatch(
updateConfirmModal({
title: window.i18n('linkVisitWarningTitle'),
message: window.i18n('linkVisitWarningMessage', url),
okText: window.i18n('open'),
cancelText: window.i18n('editMenuCopy'),
showExitIcon: true,
onClickOk: openLink,
onClickClose: () => {
dispatch(updateConfirmModal(null));
},
onClickCancel: () => {
MessageInteraction.copyBodyToClipboard(url);
},
})
);
};
const renderWith = renderNonLink || defaultRenderNonLink;
if (matchData.length === 0) {
return renderWith({ text, key: 0, isGroup });
}
matchData.forEach((match: { index: number; url: string; lastIndex: number; text: string }) => {
if (last < match.index) {
const textWithNoLink = text.slice(last, match.index);
results.push(renderWith({ text: textWithNoLink, isGroup, key: count++ }));
}
const { url, text: originalText } = match;
const isLink = SUPPORTED_PROTOCOLS.test(url) && !LinkPreviews.isLinkSneaky(url);
if (isLink) {
results.push(
<a key={count++} href={url} onClick={handleClick}>
{originalText}
</a>
);
} else {
results.push(renderWith({ text: originalText, isGroup, key: count++ }));
}
last = match.lastIndex;
});
if (last < text.length) {
results.push(renderWith({ text: text.slice(last), isGroup, key: count++ }));
}
return <>{results}</>;
};

95
ts/components/conversation/message/message-content/MessageBody.tsx
Unescape Escape View File

@ -1,16 +1,24 @@
import React from 'react';
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { shell } from 'electron';
import LinkifyIt from 'linkify-it';
import { RenderTextCallbackType } from '../../../../types/Util';
import { getEmojiSizeClass, SizeClassType } from '../../../../util/emoji';
import { AddMentions } from '../../AddMentions';
import { AddNewLines } from '../../AddNewLines';
import { Emojify } from '../../Emojify';
import { Linkify } from '../../Linkify';
import { MessageInteraction } from '../../../../interactions';
import { updateConfirmModal } from '../../../../state/ducks/modalDialog';
import { LinkPreviews } from '../../../../util/linkPreviews';
const linkify = LinkifyIt();
type Props = {
text: string;
/** If set, all emoji will be the same size. Otherwise, just one emoji will be large. */
disableJumbomoji: boolean;
/** If set, links will be left alone instead of turned into clickable `<a>` tags. */
/** If set, links will be left alone instead of turned into clickable `<a>` tags. Used in quotes, convo list item, etc */
disableLinks: boolean;
isGroup: boolean;
};
@ -77,6 +85,7 @@ const JsxSelectable = (jsx: JSX.Element): JSX.Element => {
</span>
);
};
export const MessageBody = (props: Props) => {
const { text, disableJumbomoji, disableLinks, isGroup } = props;
const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
@ -113,3 +122,83 @@ export const MessageBody = (props: Props) => {
/>
);
};
type LinkifyProps = {
text: string;
/** Allows you to customize now non-links are rendered. Simplest is just a <span>. */
renderNonLink: RenderTextCallbackType;
isGroup: boolean;
};
const SUPPORTED_PROTOCOLS = /^(http|https):/i;
const Linkify = (props: LinkifyProps): JSX.Element => {
const { text, isGroup, renderNonLink } = props;
const results: Array<any> = [];
let count = 1;
const dispatch = useDispatch();
const matchData = linkify.match(text) || [];
let last = 0;
// disable click on <a> elements so clicking a message containing a link doesn't
// select the message. The link will still be opened in the browser.
const handleClick = useCallback((e: any) => {
e.preventDefault();
e.stopPropagation();
const url = e.target.href;
const openLink = () => {
void shell.openExternal(url);
};
dispatch(
updateConfirmModal({
title: window.i18n('linkVisitWarningTitle'),
message: window.i18n('linkVisitWarningMessage', url),
okText: window.i18n('open'),
cancelText: window.i18n('editMenuCopy'),
showExitIcon: true,
onClickOk: openLink,
onClickClose: () => {
dispatch(updateConfirmModal(null));
},
onClickCancel: () => {
MessageInteraction.copyBodyToClipboard(url);
},
})
);
}, []);
if (matchData.length === 0) {
return renderNonLink({ text, key: 0, isGroup });
}
matchData.forEach((match: { index: number; url: string; lastIndex: number; text: string }) => {
if (last < match.index) {
const textWithNoLink = text.slice(last, match.index);
results.push(renderNonLink({ text: textWithNoLink, isGroup, key: count++ }));
}
const { url, text: originalText } = match;
const isLink = SUPPORTED_PROTOCOLS.test(url) && !LinkPreviews.isLinkSneaky(url);
if (isLink) {
results.push(
<a key={count++} href={url} onClick={handleClick}>
{originalText}
</a>
);
} else {
results.push(renderNonLink({ text: originalText, isGroup, key: count++ }));
}
last = match.lastIndex;
});
if (last < text.length) {
results.push(renderNonLink({ text: text.slice(last), isGroup, key: count++ }));
}
return <>{results}</>;
};

Write Preview
Loading…
Cancel
Save