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