Refactor suggestions display

src/angular-app/bellows/apps/translate/editor/_editor.scss

@@ -100,25 +100,12 @@ ng-quill-editor .ql-editor.drop-box {
 
 .ql-suggest-tooltip {
     background-color: #DEDEDE;
-    border-radius: 12px;
+    border: 1px solid darkgray;
     color: #373a3c;
-    padding: 0.2rem;
+    padding: 0.1rem;
     position: absolute;
     z-index: $zindex-dropdown;
-}
-
-.ql-suggest-tooltip-arrow {
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid #DEDEDE;
-    content: " ";
-    display: block;
-    top: -6px;
-    left: 50%;
-    margin-left: -6px;
-    position: absolute;
-    box-sizing: border-box;
-    z-index: $zindex-tooltip;
+    white-space: nowrap;
 }
 
 .ql-suggestions {

src/angular-app/bellows/apps/translate/editor/document-editor.ts

@@ -366,7 +366,7 @@ export class TargetDocumentEditor extends DocumentEditor {
     }
     const insertText = this.machine.getSuggestionText(suggestionIndex);
     this.quill.insertText(range.index, insertText + ' ', Quill.sources.USER);
-    this.quill.setSelection(range.index + insertText.length, 1, Quill.sources.USER);
+    setTimeout(() => this.quill.setSelection(range.index + insertText.length, 1, Quill.sources.USER));
     this.metricService.onSuggestionTaken();
   }
 
@@ -421,8 +421,8 @@ export class TargetDocumentEditor extends DocumentEditor {
 
     const selection = this.quill.getSelection();
     const tooltip = (this.quill.theme as SuggestionsTheme).suggestionsTooltip;
-    tooltip.show();
     tooltip.position(this.quill.getBounds(selection.index, selection.length));
+    tooltip.show();
     this.isShowingSuggestions = true;
   }
 

src/angular-app/bellows/apps/translate/editor/editor.component.ts

@@ -80,6 +80,16 @@ export class TranslateEditorController implements angular.IController {
           disableEnter: {
             key: 'enter',
             handler: (range: RangeStatic, context: any) => this.focusedEditor.isEnterAllowed(range, context)
+          },
+          hideSuggestions: {
+            key: 'escape',
+            handler: (range: RangeStatic, context: any) => {
+              if (this.target.hasFocus) {
+                this.target.hideSuggestions();
+                return false;
+              }
+              return true;
+            }
           }
         }
       }

src/angular-app/bellows/apps/translate/editor/quill/suggestions-theme.ts

@@ -27,7 +27,6 @@ export type DropFunction = (file: File, editor: Quill, event: DragEvent | Clipbo
 export type PasteFunction = (item: DataTransferItem, editor: Quill, event: ClipboardEvent) => void;
 
 export function registerSuggestionsTheme(): void {
-  const QuillTooltip = Quill.import('ui/tooltip') as typeof Tooltip;
   const QuillModule = Quill.import('core/module') as typeof Module;
   const QuillSnowTheme = Quill.import('themes/snow') as typeof SnowTheme;
   const QuillToolbar = Quill.import('modules/toolbar') as typeof Toolbar;
@@ -241,30 +240,76 @@ export function registerSuggestionsTheme(): void {
   });
 
   // Add a suggest tooltip to Quill
-  class SuggestionsTooltip extends QuillTooltip {
-    static TEMPLATE = '<span class="ql-suggest-tooltip-arrow"></span>';
+  class SuggestionsTooltip implements Tooltip {
+    quill: Quill;
+    boundsContainer: HTMLElement;
+    root: HTMLElement;
 
-    constructor(quill: Quill, boundsContainer: BoundsStatic) {
-      super(quill, boundsContainer);
+    private top: number;
+
+    constructor(quill: Quill, boundsContainer: HTMLElement) {
+      this.quill = quill;
+      this.boundsContainer = boundsContainer || document.body;
       this.root = quill.addContainer('ql-suggest-tooltip');
-      this.root.innerHTML = SuggestionsTooltip.TEMPLATE;
-      const offset = parseInt(window.getComputedStyle(this.root).marginTop, 10);
-      this.quill.root.addEventListener('scroll', () => {
-        this.root.style.marginTop = (-1 * this.quill.root.scrollTop) + offset + 'px';
-      });
+      if (this.quill.root === this.quill.scrollingContainer) {
+        this.quill.root.addEventListener('scroll', () => {
+          this.updateVisibility();
+        });
+      }
       this.hide();
     }
 
+    hide(): void {
+      this.root.classList.add('ql-hidden');
+    }
+
     position(reference: any): number {
-      const shift = (super.position(reference) as number);
-      const top = reference.bottom + this.quill.root.scrollTop + 10;
-      this.root.style.top = top + 'px';
-      const arrow = this.root.querySelector('.ql-suggest-tooltip-arrow') as HTMLElement;
-      arrow.style.marginLeft = '';
-      if (shift === 0) {
-        return shift;
+      const left = reference.left;
+      // root.scrollTop should be 0 if scrollContainer !== root
+      this.top = reference.bottom + this.quill.root.scrollTop;
+      this.root.style.left = left + 'px';
+      this.root.style.top = this.top + 'px';
+      this.root.classList.remove('ql-flip');
+      const containerBounds = this.boundsContainer.getBoundingClientRect();
+      const rootBounds = this.root.getBoundingClientRect();
+      let shift = 0;
+      if (rootBounds.right > containerBounds.right) {
+        shift = containerBounds.right - rootBounds.right;
+        this.root.style.left = (left + shift) + 'px';
+      }
+      if (rootBounds.left < containerBounds.left) {
+        shift = containerBounds.left - rootBounds.left;
+        this.root.style.left = (left + shift) + 'px';
+      }
+      if (rootBounds.bottom > containerBounds.bottom) {
+        const height = rootBounds.bottom - rootBounds.top;
+        const verticalShift = reference.bottom - reference.top + height;
+        this.top -= verticalShift;
+        this.root.style.top = this.top + 'px';
+        this.root.classList.add('ql-flip');
+      }
+      this.updateVisibility();
+      return shift;
+    }
+
+    show(): void {
+      this.root.classList.remove('ql-editing');
+      this.root.classList.remove('ql-hidden');
+    }
+
+    private updateVisibility(): void {
+      const marginTop = -this.quill.root.scrollTop;
+      const offsetTop = marginTop + this.top;
+      const offsetBottom = offsetTop + this.root.clientHeight;
+      if (offsetTop < 0 || offsetBottom > this.quill.scrollingContainer.clientHeight) {
+        if (this.root.style.visibility !== 'hidden') {
+          this.root.style.visibility = 'hidden';
+          this.root.style.marginTop = -this.top + 'px';
+        }
+      } else {
+        this.root.style.marginTop = marginTop + 'px';
+        this.root.style.visibility = '';
       }
-      arrow.style.marginLeft = (-1 * shift - arrow.offsetWidth / 2) + 'px';
     }
   }
 
@@ -363,8 +408,7 @@ export function registerSuggestionsTheme(): void {
 
     constructor(quill: Quill, options: QuillOptionsStatic) {
       super(quill, options);
-      const QuillSuggestionsTooltip = Quill.import('ui/suggest-tooltip');
-      this.suggestionsTooltip = new QuillSuggestionsTooltip(this.quill, this.options.bounds);
+      this.suggestionsTooltip = new SuggestionsTooltip(this.quill, this.options.bounds as HTMLElement);
     }
 
     extendToolbar(toolbar: any): void {
@@ -455,7 +499,6 @@ export function registerSuggestionsTheme(): void {
   Quill.register('blots/para', ParaBlock);
   Quill.register('blots/chapter', ChapterEmbed);
   Quill.register('blots/scroll', Scroll, true);
-  Quill.register('ui/suggest-tooltip', SuggestionsTooltip);
   Quill.register('modules/suggestions', Suggestions);
   Quill.register('modules/dragAndDrop', DragAndDrop);
   Quill.register('modules/toolbar', MultiEditorToolbar, true);

typings/quill.d.ts

@@ -38,9 +38,9 @@ declare module 'quill' {
 
   export class Tooltip {
     quill: Quill;
-    boundsContainer: BoundsStatic | Element;
+    boundsContainer: HTMLElement;
     root: HTMLElement;
-    constructor(quill: Quill, boundsContainer: BoundsStatic);
+    constructor(quill: Quill, boundsContainer: HTMLElement);
     hide(): void;
     position(reference: any): number;
     show(): void;