From 0d6453baecbb1385b19fc159bce04c1b861cce5a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 16:21:30 +0300 Subject: [PATCH 1/4] fix emoji reactions notifs being non-expandable --- src/components/notification/notification.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 247b73848..8692c6190 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -138,7 +138,7 @@ const Notification = { return highlightStyle(highlight[user.screen_name]) }, expandable () { - return (new Set(['like', '-pleroma:emoji_reaction', 'repeat'])).has(this.notification.type) + return (new Set(['like', 'pleroma:emoji_reaction', 'repeat'])).has(this.notification.type) }, user () { return this.$store.getters.findUser(this.notification.from_profile.id) From 26a2232e1841a359d3f34200d38ca9c897b1f30a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 16:21:44 +0300 Subject: [PATCH 2/4] fix incorrect collapse state --- src/components/notification/notification.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 28ab1b9b8..76ede11e2 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -255,7 +255,7 @@ class="status-content" :compact="!statusExpanded" :status="notification.status" - :collapse="statusExpanded" + :collapse="!statusExpanded" @click="toggleStatusExpanded()" /> From 8780e0191e7213b141cf36efa40365401304b06d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 16:35:40 +0300 Subject: [PATCH 3/4] proper collapse --- src/components/rich_content/rich_content.jsx | 19 +++++++++++++++++-- src/components/status_body/status_body.vue | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 9466603cd..599985c3b 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -86,6 +86,12 @@ export default { required: false, type: Boolean, default: false + }, + // Collapse newlines + collapse: { + required: false, + type: Boolean, + default: false } }, // NEVER EVER TOUCH DATA INSIDE RENDER @@ -281,11 +287,20 @@ export default { const pass1 = convertHtmlToTree(html).map(processItem) const pass2 = [...pass1].reverse().map(processItemReverse).reverse() + // DO NOT USE SLOTS they cause a re-render feedback loop here. // slots updated -> rerender -> emit -> update up the tree -> rerender -> ... // at least until vue3? - const result = - { pass2 } + const result = + + { + this.collapse + ? pass2.map(x => { + if (!Array.isArray(x)) return x.replace(/\n/g, ' ') + return x.map(y => y.type === 'br' ? ' ' : y) + }) + : pass2 + } const event = { diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 1291533c9..0735e8d98 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -38,7 +38,8 @@ v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)" :class="{ '-single-line': singleLine }" class="text media-body" - :html="collapse ? collapsedStatus : status.raw_html" + :html="status.raw_html" + :collapse="collapse" :emoji="status.emojis" :handle-links="true" :faint="compact" From bebb3fcfa62270ee0d358febe241ebde2f4d73e3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 17:28:19 +0300 Subject: [PATCH 4/4] better click handler --- src/components/notification/notification.js | 25 +++++++++++++++++++ src/components/notification/notification.vue | 4 ++- src/components/status_body/status_body.js | 1 + .../status_content/status_content.js | 1 + 4 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 8692c6190..3edf21de7 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -42,6 +42,7 @@ library.add( const Notification = { data () { return { + selecting: false, statusExpanded: false, unmuted: false, showingApproveConfirmDialog: false, @@ -62,11 +63,35 @@ const Notification = { UserLink, ConfirmModal }, + mounted () { + document.addEventListener('selectionchange', this.onContentSelect) + }, + unmounted () { + document.removeEventListener('selectionchange', this.onContentSelect) + }, methods: { toggleStatusExpanded () { if (!this.expandable) return this.statusExpanded = !this.statusExpanded }, + onContentSelect () { + const { isCollapsed, anchorNode, offsetNode } = document.getSelection() + if (isCollapsed) { + this.selecting = false + return + } + const within = this.$refs.root.contains(anchorNode) || this.$refs.root.contains(offsetNode) + if (within) { + this.selecting = true + } else { + this.selecting = false + } + }, + onContentClick (e) { + if (!this.selecting && !e.target.closest('a') && !e.target.closest('button')) { + this.toggleStatusExpanded() + } + }, generateUserProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) }, diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 76ede11e2..b639b9c88 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -1,6 +1,7 @@ diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index e89d1d173..f23055955 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -41,6 +41,7 @@ const StatusContent = { parseReadyDone: false } }, + emits: ['parseReady'], computed: { localCollapseSubjectDefault () { return this.mergedConfig.collapseMessageWithSubject diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index f61ba0d05..364123f49 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -65,6 +65,7 @@ const StatusContent = { 'controlledShowingLongSubject', 'controlledToggleShowingLongSubject' ], + emits: ['parseReady', 'mediaplay', 'mediapause'], data () { return { uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),