From b0225329c99b1b78bdff9ee71b48532d651d8705 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Tue, 25 Jan 2022 22:17:41 +0400
Subject: [PATCH] Markup tooltip: Fix displaying tooltip when changing
 selection with keyboard Change position of tooltip when changing selection

---
 src/components/chat/markupTooltip.ts | 18 +++++++++++++-----
 src/helpers/dom/getVisibleRect.ts    |  3 +--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts
index 086eb129..eb4747d4 100644
--- a/src/components/chat/markupTooltip.ts
+++ b/src/components/chat/markupTooltip.ts
@@ -17,6 +17,7 @@ import { attachClickEvent } from "../../helpers/dom/clickEvent";
 import getSelectedNodes from "../../helpers/dom/getSelectedNodes";
 import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty";
 import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue";
+import getVisibleRect from "../../helpers/dom/getVisibleRect";
 //import { logger } from "../../lib/logger";
 
 export default class MarkupTooltip {
@@ -251,7 +252,9 @@ export default class MarkupTooltip {
 
     this.container.style.maxWidth = inputRect.width + 'px';
 
-    const selectionTop = selectionRect.top + (bodyRect.top * -1);
+    const visibleRect = getVisibleRect(undefined, this.appImManager.chat.input.messageInput, false, selectionRect);
+
+    const selectionTop = visibleRect.rect.top/* selectionRect.top */ + (bodyRect.top * -1);
     
     const currentTools = this.container.classList.contains('is-link') ? this.wrapper.lastElementChild : this.wrapper.firstElementChild;
 
@@ -333,12 +336,12 @@ export default class MarkupTooltip {
     //document.removeEventListener('mouseup', this.onMouseUp);
   }; */
 
-  private onMouseUpSingle = (e: Event) => {
+  private onMouseUpSingle = (e?: Event) => {
     //this.log('onMouseUpSingle');
     this.waitingForMouseUp = false;
 
     if(IS_TOUCH_SUPPORTED) {
-      cancelEvent(e);
+      e && cancelEvent(e);
       if(this.mouseUpCounter++ === 0) {
         this.resetSelection(this.savedRange);
       } else {
@@ -383,7 +386,8 @@ export default class MarkupTooltip {
         return;
       }
 
-      if(document.activeElement !== this.appImManager.chat.input.messageInput) {
+      const messageInput = this.appImManager.chat.input.messageInput;
+      if(document.activeElement !== messageInput) {
         this.hide();
         return;
       }
@@ -412,8 +416,12 @@ export default class MarkupTooltip {
             this.show();
           }, {once: true, passive: false}); */
         }
-      } else {
+      } else if(this.container && this.container.classList.contains('is-visible')) {
+        this.setTooltipPosition();
+      } else if(messageInput.matches(':active')) {
         this.setMouseUpEvent();
+      } else {
+        this.show();
       }
     });
   }
diff --git a/src/helpers/dom/getVisibleRect.ts b/src/helpers/dom/getVisibleRect.ts
index fd2663a5..ca0a88f1 100644
--- a/src/helpers/dom/getVisibleRect.ts
+++ b/src/helpers/dom/getVisibleRect.ts
@@ -4,8 +4,7 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
-export default function getVisibleRect(element: HTMLElement, overflowElement: HTMLElement, lookForSticky?: boolean) {
-  const rect = element.getBoundingClientRect();
+export default function getVisibleRect(element: HTMLElement, overflowElement: HTMLElement, lookForSticky?: boolean, rect = element.getBoundingClientRect()) {
   const overflowRect = overflowElement.getBoundingClientRect();
 
   let {top: overflowTop, bottom: overflowBottom} = overflowRect;