diff --git a/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue b/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue index 15d14c3b..d41b37ba 100644 --- a/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue +++ b/app/modules/tweets/components/Tweet/subComponents/Content/Content.vue @@ -4,10 +4,17 @@

- + +

@@ -32,7 +39,7 @@ import type { Content } from '~/modules/tweets/types' import TweetMedia from '../TweetMedia/TweetMedia.vue' import QuotedTweet from '../QuotedTweet/QuotedTweet.vue' -import { ref, onMounted, onBeforeUnmount } from 'vue' +import { ref, computed, onMounted, onBeforeUnmount } from 'vue' import { useRouter } from 'vue-router' import { parseLinks } from '~/lib/utils' @@ -42,6 +49,28 @@ const props = defineProps<{ const root = ref(null) const router = useRouter() +const isExpanded = ref(false) +const MAX_LENGTH = 200 + +const shouldShowMore = computed(() => { + return props.content.text.length > MAX_LENGTH +}) + +const displayText = computed(() => { + const text = props.content.text + const parsedText = parseLinks(text, false, false, props.content.mentions) + + if (!shouldShowMore.value || isExpanded.value) { + return parsedText + } + + const truncatedText = text.substring(0, MAX_LENGTH) + return parseLinks(truncatedText, false, false, props.content.mentions) +}) + +const toggleExpanded = () => { + isExpanded.value = !isExpanded.value +} function onRootClick(e: Event) { const target = e.target as HTMLElement | null