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
})}