diff --git a/frontend/apps/site/src/site-embeds.tsx b/frontend/apps/site/src/site-embeds.tsx index 9ec2bfcff..fe36a603d 100644 --- a/frontend/apps/site/src/site-embeds.tsx +++ b/frontend/apps/site/src/site-embeds.tsx @@ -7,6 +7,7 @@ import { EmbedContentGroup, EntityComponentProps, ErrorBlock, + InlineEmbedComponentProps, PublicationCardView, PublicationContentProvider, UnpackedHypermediaId, @@ -55,6 +56,7 @@ export function SitePublicationContentProvider({ PublicationContent: EmbedPublicationContent, PublicationCard: EmbedPublicationCard, CommentCard: EmbedComment, + InlineEmbed: SiteInlineEmbed, }} onLinkClick={(href, e) => { e.stopPropagation() @@ -309,3 +311,17 @@ export function EmbedAccount(props: EntityComponentProps) { function stripHMLinkPrefix(link: string) { return link.replace(/^hm:\//, '') } + +export function SiteInlineEmbed(props: InlineEmbedComponentProps) { + const accountId = props?.type == 'a' ? props.eid : undefined + const accountQuery = trpc.account.get.useQuery({accountId}) + const account = accountQuery.data?.account + return ( + + {(accountId && + accountQuery.status == 'success' && + `@${account?.profile?.alias}`) || + `@${accountId?.slice(0, 5) + '...' + accountId?.slice(-5)}`} + + ) +} diff --git a/frontend/packages/app/components/app-embeds.tsx b/frontend/packages/app/components/app-embeds.tsx index 4f1703194..cd04a5108 100644 --- a/frontend/packages/app/components/app-embeds.tsx +++ b/frontend/packages/app/components/app-embeds.tsx @@ -7,6 +7,7 @@ import { EmbedContentAccount, EmbedContentGroup, EntityComponentProps, + InlineEmbedComponentProps, PublicationCardView, blockStyles, createHmId, @@ -236,7 +237,20 @@ export function EmbedAccount(props: EntityComponentProps) { return accountQuery.status == 'success' ? ( - + ) : null } + +export function AppInlineEmbed(props: InlineEmbedComponentProps) { + const accountId = props?.type == 'a' ? props.eid : undefined + const accountQuery = useAccount(accountId) + return ( + + {(accountId && + accountQuery.status == 'success' && + `@${accountQuery.data?.profile?.alias}`) || + `@${accountId?.slice(0, 5) + '...' + accountId?.slice(-5)}`} + + ) +} diff --git a/frontend/packages/app/pages/publication-content-provider.tsx b/frontend/packages/app/pages/publication-content-provider.tsx index af03187db..fa922364d 100644 --- a/frontend/packages/app/pages/publication-content-provider.tsx +++ b/frontend/packages/app/pages/publication-content-provider.tsx @@ -9,6 +9,7 @@ import { import 'allotment/dist/style.css' import {useAppContext} from '../app-context' import { + AppInlineEmbed, EmbedAccount, EmbedComment, EmbedGroup, @@ -41,6 +42,7 @@ export function AppPublicationContentProvider({ PublicationCard: EmbedPublicationCard, PublicationContent: EmbedPublicationContent, CommentCard: EmbedComment, + InlineEmbed: AppInlineEmbed, }} onLinkClick={(href, e) => { e.preventDefault() diff --git a/frontend/packages/shared/src/publication-content.tsx b/frontend/packages/shared/src/publication-content.tsx index 38c42893c..dbd128e42 100644 --- a/frontend/packages/shared/src/publication-content.tsx +++ b/frontend/packages/shared/src/publication-content.tsx @@ -74,6 +74,7 @@ export type EntityComponentsRecord = { PublicationCard: React.FC PublicationContent: React.FC CommentCard: React.FC + InlineEmbed: React.FC } export type PublicationContentContextValue = { @@ -100,6 +101,8 @@ export const publicationContentContext = export type EntityComponentProps = BlockContentProps & ReturnType +export type InlineEmbedComponentProps = ReturnType + export function PublicationContentProvider({ children, debugTop = 0, @@ -870,7 +873,10 @@ function InlineContentView({ linkType?: LinkType fontSize?: number }) { - const {onLinkClick, textUnit} = usePublicationContentContext() + const {onLinkClick, textUnit, entityComponents} = + usePublicationContentContext() + + const InlineEmbed = entityComponents.InlineEmbed const fSize = fontSize || textUnit return ( @@ -976,7 +982,7 @@ function InlineContentView({ return ( ) } + + if (content.type == 'inline-embed') { + const unpackedRef = unpackHmId(content.ref) + return + } return null })}