frontend: add inline embed to publication content

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 (
+    <SizableText color="$blue9" fontWeight="600">
+      {(accountId &&
+        accountQuery.status == 'success' &&
+        `@${account?.profile?.alias}`) ||
+        `@${accountId?.slice(0, 5) + '...' + accountId?.slice(-5)}`}
+    </SizableText>
+  )
+}

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' ? (
     <EmbedWrapper hmRef={props.id}>
-      <EmbedContentAccount account={accountQuery.data} />
+      <EmbedContentAccount account={accountQuery.data!} />
     </EmbedWrapper>
   ) : null
 }
+
+export function AppInlineEmbed(props: InlineEmbedComponentProps) {
+  const accountId = props?.type == 'a' ? props.eid : undefined
+  const accountQuery = useAccount(accountId)
+  return (
+    <SizableText color="$blue9" fontWeight="600">
+      {(accountId &&
+        accountQuery.status == 'success' &&
+        `@${accountQuery.data?.profile?.alias}`) ||
+        `@${accountId?.slice(0, 5) + '...' + accountId?.slice(-5)}`}
+    </SizableText>
+  )
+}

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

frontend/packages/shared/src/publication-content.tsx

@@ -74,6 +74,7 @@ export type EntityComponentsRecord = {
   PublicationCard: React.FC<EntityComponentProps>
   PublicationContent: React.FC<EntityComponentProps>
   CommentCard: React.FC<EntityComponentProps>
+  InlineEmbed: React.FC<InlineEmbedComponentProps>
 }
 
 export type PublicationContentContextValue = {
@@ -100,6 +101,8 @@ export const publicationContentContext =
 export type EntityComponentProps = BlockContentProps &
   ReturnType<typeof unpackHmId>
 
+export type InlineEmbedComponentProps = ReturnType<typeof unpackHmId>
+
 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 (
             <Text
-              key={index}
+              key={`${content.type}-${index}`}
               color={hmTextColor(linkType)}
               textDecorationColor={hmTextColor(linkType)}
               style={{textDecorationLine}}
@@ -1010,6 +1016,11 @@ function InlineContentView({
             </a>
           )
         }
+
+        if (content.type == 'inline-embed') {
+          const unpackedRef = unpackHmId(content.ref)
+          return <InlineEmbed key={content.ref} {...unpackedRef} />
+        }
         return null
       })}
     </Text>