mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2024-12-26 17:36:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

render matrix room and event link content (#1938)
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled
Details

Browse source
This commit is contained in:
Ajay Bura 2024-09-09 20:51:52 +10:00 committed by GitHub
parent 96df140153
commit 5482f8e72e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/app/plugins/react-custom-html-parser.tsx
View file

@ -14,7 +14,12 @@ import { IntermediateRepresentation, Opts as LinkifyOpts, OptFn } from 'linkifyj
import Linkify from 'linkify-react';
import { ErrorBoundary } from 'react-error-boundary';
import * as css from '../styles/CustomHtml.css';
import { getMxIdLocalPart, getCanonicalAliasRoomId, isRoomAlias, mxcUrlToHttp } from '../utils/matrix';
import {
getMxIdLocalPart,
getCanonicalAliasRoomId,
isRoomAlias,
mxcUrlToHttp,
} from '../utils/matrix';
import { getMemberDisplayName } from '../utils/room';
import { EMOJI_PATTERN, URL_NEG_LB } from '../utils/regex';
import { getHexcodeForEmoji, getShortcodeFor } from './emoji';
@ -44,7 +49,8 @@ export const LINKIFY_OPTS: LinkifyOpts = {
};
export const makeMentionCustomProps = (
handleMentionClick?: ReactEventHandler<HTMLElement>
handleMentionClick?: ReactEventHandler<HTMLElement>,
content?: string
): ComponentPropsWithoutRef<'a'> => ({
style: { cursor: 'pointer' },
target: '_blank',
@ -53,6 +59,7 @@ export const makeMentionCustomProps = (
tabIndex: handleMentionClick ? 0 : -1,
onKeyDown: handleMentionClick ? onEnterOrSpace(handleMentionClick) : undefined,
onClick: handleMentionClick,
children: content,
});
export const renderMatrixMention = (
@ -72,8 +79,9 @@ export const renderMatrixMention = (
className={css.Mention({ highlight: mx.getUserId() === userId })}
data-mention-id={userId}
>
{`@${(currentRoom && getMemberDisplayName(currentRoom, userId)) ?? getMxIdLocalPart(userId)
}`}
{`@${
(currentRoom && getMemberDisplayName(currentRoom, userId)) ?? getMxIdLocalPart(userId)
}`}
</a>
);
}
@ -85,6 +93,8 @@ export const renderMatrixMention = (
isRoomAlias(roomIdOrAlias) ? getCanonicalAliasRoomId(mx, roomIdOrAlias) : roomIdOrAlias
);
const fallbackContent = mentionRoom ? `#${mentionRoom.name}` : roomIdOrAlias;
return (
<a
href={href}
@ -95,7 +105,7 @@ export const renderMatrixMention = (
data-mention-id={mentionRoom?.roomId ?? roomIdOrAlias}
data-mention-via={viaServers?.join(',')}
>
{mentionRoom ? `#${mentionRoom.name}` : roomIdOrAlias}
{customProps.children ? customProps.children : fallbackContent}
</a>
);
}
@ -118,7 +128,9 @@ export const renderMatrixMention = (
data-mention-event-id={eventId}
data-mention-via={viaServers?.join(',')}
>
Message: {mentionRoom ? `#${mentionRoom.name}` : roomIdOrAlias}
{customProps.children
? customProps.children
: `Message: ${mentionRoom ? `#${mentionRoom.name}` : roomIdOrAlias}`}
</a>
);
}
@ -327,12 +339,17 @@ export const getReactCustomHtmlParser = (
}
if (name === 'a' && testMatrixTo(tryDecodeURIComponent(props.href))) {
const content = children.find((child) => !(child instanceof DOMText))
? undefined
: children.map((c) => (c instanceof DOMText ? c.data : '')).join();
const mention = renderMatrixMention(
mx,
roomId,
tryDecodeURIComponent(props.href),
makeMentionCustomProps(params.handleMentionClick)
makeMentionCustomProps(params.handleMentionClick, content)
);
if (mention) return mention;
}