From a48524e7adfb1e9bd768e111be6f6dfa104ac06c Mon Sep 17 00:00:00 2001 From: patak Date: Thu, 19 Jan 2023 11:26:01 +0100 Subject: [PATCH] feat: inline some mentions to reduce spacing (#1307) --- composables/content-parse.ts | 21 ++++++++--- tests/content-rich.test.ts | 70 ++++++++++++++++++++++++++---------- 2 files changed, 68 insertions(+), 23 deletions(-) diff --git a/composables/content-parse.ts b/composables/content-parse.ts index 2891be12..cd0ce75e 100644 --- a/composables/content-parse.ts +++ b/composables/content-parse.ts @@ -469,6 +469,7 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus? return node const mentions: (Node | undefined)[] = [] const children = node.children as Node[] + let trimContentStart: (() => void) | undefined for (const child of children) { // mention if (isMention(child)) { @@ -480,8 +481,11 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus? } // other content, stop collapsing else { - if (child.type === TEXT_NODE) - child.value = child.value.trimStart() + if (child.type === TEXT_NODE) { + trimContentStart = () => { + child.value = child.value.trimStart() + } + } // remove
after mention if (child.name === 'br') mentions.push(undefined) @@ -495,6 +499,7 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus? let mentionsCount = 0 let contextualMentionsCount = 0 let removeNextSpacing = false + const contextualMentions = mentions.filter((mention) => { if (!mention) return false @@ -508,24 +513,30 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus? mentionsCount++ if (inReplyToStatus) { const mentionHandle = getMentionHandle(mention) - if (inReplyToStatus.account.acct === mentionHandle || inReplyToStatus.mentions.some(m => m.acct === mentionHandle)) + if (inReplyToStatus.account.acct === mentionHandle || inReplyToStatus.mentions.some(m => m.acct === mentionHandle)) { + removeNextSpacing = true return false + } } contextualMentionsCount++ } return true - }) + }) as Node[] // We have a special case for single mentions that are part of a reply. // We already have the replying to badge in this case or the status is connected to the previous one. // This is needed because the status doesn't included the in Reply to handle, only the account id. // But this covers the majority of cases. const showMentions = !(contextualMentionsCount === 0 || (mentionsCount === 1 && status?.inReplyToAccountId)) + const grouped = contextualMentionsCount > 2 + if (grouped) + trimContentStart?.() const contextualChildren = children.slice(mentions.length) + const mentionNodes = showMentions ? (grouped ? [h('mention-group', null, ...contextualMentions)] : contextualMentions) : [] return { ...node, - children: showMentions ? [h('mention-group', null, ...contextualMentions), ...contextualChildren] : contextualChildren, + children: [...mentionNodes, ...contextualChildren], } } } diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts index e56cba11..bf9ed51e 100644 --- a/tests/content-rich.test.ts +++ b/tests/content-rich.test.ts @@ -91,21 +91,21 @@ describe('content-rich', () => { }) expect(formatted).toMatchInlineSnapshot(` "

- - content + + + content { `) }) - it('shows some collapsed mentions', async () => { + it('shows some collapsed mentions inline', async () => { const { formatted } = await render('

@elk @antfu content

', { collapseMentionLink: true, inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status, }) expect(formatted).toMatchInlineSnapshot(` "

- - + content +

+ " + `) + }) + + it('shows some collapsed mentions grouped', async () => { + const { formatted } = await render('

@elk @antfu @patak @sxzzcontent

', { + collapseMentionLink: true, + inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status, + }) + expect(formatted).toMatchInlineSnapshot(` + "

+ + + content