diff --git a/src/view/com/composer/text-input/web/TagDecorator.ts b/src/view/com/composer/text-input/web/TagDecorator.ts index 18b5a7e704..68d187119d 100644 --- a/src/view/com/composer/text-input/web/TagDecorator.ts +++ b/src/view/com/composer/text-input/web/TagDecorator.ts @@ -31,10 +31,11 @@ function getDecorations(doc: ProsemirrorNode) { let match while ((match = TAG_REGEX.exec(textContent))) { - const [, m] = match + const [m] = match + const hasLeadingSpace = /^\s/.test(m) const tag = m.trim().replace(/\p{P}+$/gu, '') if (tag.length > 66) continue - const from = match.index + 1 + const from = match.index + (hasLeadingSpace ? 1 : 0) const to = from + tag.length + 1 decorations.push( Decoration.inline(paragraphNode.pos + from, paragraphNode.pos + to, { diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 5f17237458..a242a3d206 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -2,7 +2,7 @@ import React, {useMemo} from 'react' import {observer} from 'mobx-react-lite' import {Linking, StyleSheet, View} from 'react-native' import Clipboard from '@react-native-clipboard/clipboard' -import {AtUri, AppBskyFeedDefs} from '@atproto/api' +import {AtUri, AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -326,11 +326,33 @@ export const PostThreadItem = observer(function PostThreadItem({ )} + + {AppBskyFeedPost.isRecord(item.post.record) && + item.post.record.tags?.length ? ( + + {item.post.record.tags.map(tag => ( + + #{tag} + + ))} + + ) : null} + + {hasEngagement ? ( {item.post.repostCount ? ( @@ -720,4 +742,9 @@ const styles = StyleSheet.create({ // @ts-ignore web only cursor: 'pointer', }, + tag: { + paddingVertical: 4, + paddingHorizontal: 8, + borderRadius: 4, + }, }) diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx index 0dc13fd34c..b17cf1eb94 100644 --- a/src/view/com/util/text/RichText.tsx +++ b/src/view/com/util/text/RichText.tsx @@ -69,6 +69,7 @@ export function RichText({ for (const segment of richText.segments()) { const link = segment.link const mention = segment.mention + const tag = segment.tag if (mention && AppBskyRichtextFacet.validateMention(mention).success) { els.push( , ) + } else if (tag && AppBskyRichtextFacet.validateTag(tag).success) { + els.push( + , + ) } else { els.push(segment.text) }