bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

StatusContent: prevent bubbling of mentions, links, hashtags, and "Read more" button

Browse source
This commit is contained in:
Alex Gleason 2022-11-19 15:30:09 -06:00
parent 6a8d7e4ed3
commit 4c57968914
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/soapbox/components/status-content.tsx
View file

@ -12,6 +12,7 @@ import { isRtl } from '../rtl';
import Poll from './polls/poll'; import Poll from './polls/poll';
import './status-content.css'; import './status-content.css';
import StopPropagation from './stop-propagation';
import type { Status, Mention } from 'soapbox/types/entities'; import type { Status, Mention } from 'soapbox/types/entities';
@ -29,10 +30,12 @@ interface IReadMoreButton {
/** Button to expand a truncated status (due to too much content) */ /** Button to expand a truncated status (due to too much content) */
const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => ( const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
<StopPropagation>
<button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}> <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
<FormattedMessage id='status.read_more' defaultMessage='Read more' /> <FormattedMessage id='status.read_more' defaultMessage='Read more' />
<Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth /> <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
</button> </button>
</StopPropagation>
); );
interface IStatusContent { interface IStatusContent {
@ -103,6 +106,10 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
link.setAttribute('title', link.href); link.setAttribute('title', link.href);
link.addEventListener('click', onLinkClick.bind(link), false); link.addEventListener('click', onLinkClick.bind(link), false);
} }
// Prevent bubbling
link.addEventListener('mouseup', e => e.stopPropagation());
link.addEventListener('mousedown', e => e.stopPropagation());
}); });
}; };