Ability to expand quote in translations

morethanwords · morethanwords · commit aa5be025fcd7 · 2026-02-20T23:00:30.000+04:00
diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts
@@ -38,6 +38,7 @@ import {i18n} from '@lib/langPack';
 import wrapEmojiText from '@richTextProcessor/wrapEmojiText';
 import wrapWebPageDescription from '@components/wrappers/webPageDescription';
 import Button from '@components/button';
+import onQuoteClick from '@helpers/dom/onQuoteClick';
 
 type AppMediaViewerTargetType = {
   element: HTMLElement,
@@ -49,12 +50,20 @@ type AppMediaViewerTargetType = {
 
 export const onMediaCaptionClick = (caption: HTMLElement, e: MouseEvent) => {
   const a = findUpTag(e.target, 'A');
+  const spoiler = findUpClassName(e.target, 'spoiler');
+  const quoteDiv = findUpClassName(e.target, 'quote-like-collapsable');
+  const isSpoilerVisible = caption.classList.contains('is-spoiler-visible');
+  if(quoteDiv && !a && (!spoiler || isSpoilerVisible)) {
+    if(onQuoteClick(e, quoteDiv)) {
+      return;
+    }
+  }
+
   if(!a || a.classList.contains('timestamp')) {
     return;
   }
 
-  const spoiler = findUpClassName(e.target, 'spoiler');
-  if(a instanceof HTMLAnchorElement && (!spoiler || caption.classList.contains('is-spoiler-visible'))) { // close viewer if it's t.me/ redirect
+  if(a instanceof HTMLAnchorElement && (!spoiler || isSpoilerVisible)) { // close viewer if it's t.me/ redirect
     const onclick = a.getAttribute('onclick');
     if(!onclick || onclick.includes('showMaskedAlert')) {
       return;
diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts
@@ -218,6 +218,8 @@ import {setPeerColorToElement} from '@components/peerColors';
 import {showStarGiftOfferButtons, StarGiftOfferBubble, StarGiftOfferReplyMarkup} from '@components/chat/bubbles/starGiftOffer';
 import {wrapSolidComponent} from '@helpers/solid/wrapSolidComponent';
 import wrapDice from '@components/chat/bubbleParts/dice';
+import animateSomethingWithScroll from '@helpers/animateSomethingWithScroll';
+import onQuoteClick from '@helpers/dom/onQuoteClick';
 
 export type BubbleContext = {
   bubble: HTMLElement,
@@ -2715,41 +2717,8 @@ export default class ChatBubbles {
 
     const quoteDiv: HTMLElement = findUpClassName(target, 'quote-like-collapsable');
     if(quoteDiv) {
-      const isTruncated = quoteDiv.classList.contains('is-truncated');
-      const isExpanded = quoteDiv.classList.contains('is-expanded');
-      const isGood = isTruncated || isExpanded;
-      if(isGood && window.getSelection().isCollapsed) {
-        cancelEvent(e);
-
-        const hasAnimations = liteMode.isAvailable('animations');
-        if(hasAnimations) {
-          (quoteDiv as any).ignoreQuoteResize = Infinity;
-        }
-
-        const scrollSaver = this.createScrollSaver(true);
-        scrollSaver.save();
-
-        let onTransitionEnd: (e: TransitionEvent) => void;
-
-        const animationPromise = hasAnimations ? Promise.race([
-          pause(1000).then(() => {
-            quoteDiv.removeEventListener('transitionend', onTransitionEnd);
-          }),
-          new Promise<void>((resolve) => {
-            onTransitionEnd = (e: TransitionEvent) => {
-              if(e.target === quoteDiv) {
-                resolve();
-                delete (quoteDiv as any).ignoreQuoteResize;
-              }
-            };
-
-            quoteDiv.addEventListener('transitionend', onTransitionEnd, {once: true});
-          })
-        ]) : Promise.resolve();
-
-        this.animateSomethingWithScroll(animationPromise, scrollSaver);
-        quoteDiv.classList.toggle('is-expanded');
-        quoteDiv.classList.toggle('is-truncated', isExpanded);
+      const isGood = onQuoteClick(e, quoteDiv, this.scrollable, () => this.createScrollSaver(true));
+      if(isGood) {
         return;
       }
     }
@@ -3800,21 +3769,7 @@ export default class ChatBubbles {
       scrollSaver.save();
     }
 
-    let finished = false;
-    promise.then(() => {
-      finished = true;
-    });
-
-    dispatchHeavyAnimationEvent(promise);
-
-    scrollSaver && animateSingle(() => {
-      if(finished) {
-        return false;
-      }
-
-      scrollSaver.restore();
-      return true;
-    }, this.scrollable.container);
+    animateSomethingWithScroll(promise, this.scrollable, scrollSaver);
   }
 
   public deleteMessagesByIds(fullMids: FullMid[], permanent = true, ignoreOnScroll?: boolean) {
diff --git a/src/helpers/animateSomethingWithScroll.ts b/src/helpers/animateSomethingWithScroll.ts
@@ -0,0 +1,22 @@
+import Scrollable from '@components/scrollable';
+import {animateSingle} from '@helpers/animation';
+import ScrollSaver from '@helpers/scrollSaver';
+import {dispatchHeavyAnimationEvent} from '@hooks/useHeavyAnimationCheck';
+
+export default function animateSomethingWithScroll(promise: Promise<any>, scrollable: Scrollable, scrollSaver: ScrollSaver) {
+  let finished = false;
+  promise.then(() => {
+    finished = true;
+  });
+
+  dispatchHeavyAnimationEvent(promise);
+
+  animateSingle(() => {
+    if(finished) {
+      return false;
+    }
+
+    scrollSaver.restore();
+    return true;
+  }, scrollable.container);
+}
diff --git a/src/helpers/dom/onQuoteClick.ts b/src/helpers/dom/onQuoteClick.ts
@@ -0,0 +1,56 @@
+import Scrollable from '@components/scrollable';
+import animateSomethingWithScroll from '@helpers/animateSomethingWithScroll';
+import cancelEvent from '@helpers/dom/cancelEvent';
+import liteMode from '@helpers/liteMode';
+import pause from '@helpers/schedulers/pause';
+import ScrollSaver from '@helpers/scrollSaver';
+
+export default function onQuoteClick(
+  e: Event,
+  quoteDiv: HTMLElement,
+  scrollable?: Scrollable,
+  createScrollSaver?: () => ScrollSaver
+) {
+  const isTruncated = quoteDiv.classList.contains('is-truncated');
+  const isExpanded = quoteDiv.classList.contains('is-expanded');
+  const isGood = isTruncated || isExpanded;
+  if(isGood && window.getSelection().isCollapsed) {
+    cancelEvent(e);
+
+    if(createScrollSaver) {
+      const hasAnimations = liteMode.isAvailable('animations');
+      if(hasAnimations) {
+        (quoteDiv as any).ignoreQuoteResize = Infinity;
+      }
+
+      const scrollSaver = createScrollSaver();
+      scrollSaver.save();
+
+      let onTransitionEnd: (e: TransitionEvent) => void;
+
+      const animationPromise = hasAnimations ? Promise.race([
+        pause(1000).then(() => {
+          quoteDiv.removeEventListener('transitionend', onTransitionEnd);
+        }),
+        new Promise<void>((resolve) => {
+          onTransitionEnd = (e: TransitionEvent) => {
+            if(e.target === quoteDiv) {
+              resolve();
+              delete (quoteDiv as any).ignoreQuoteResize;
+            }
+          };
+
+          quoteDiv.addEventListener('transitionend', onTransitionEnd, {once: true});
+        })
+      ]) : Promise.resolve();
+
+      animateSomethingWithScroll(animationPromise, scrollable, scrollSaver);
+    }
+
+    quoteDiv.classList.toggle('is-expanded');
+    quoteDiv.classList.toggle('is-truncated', isExpanded);
+    return true;
+  }
+
+  return false;
+}
