@inboxsdk/core 0.2.28-alpha.3 → 0.2.28-alpha.5

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/setupLinkPopovers.js

@@ -0,0 +1,109 @@
+import * as Kefir from 'kefir';
+import toItemWithLifetimeStream from '../../../../lib/toItemWithLifetimeStream';
+import makeMutationObserverChunkedStream from '../../../../lib/dom/make-mutation-observer-chunked-stream';
+import SafeEventEmitter from '../../../../lib/safe-event-emitter';
+class LinkPopOver extends SafeEventEmitter {
+    _linkEl;
+    _popOverEl;
+    constructor(linkEl, popOverEl) {
+        super();
+        this._linkEl = linkEl;
+        this._popOverEl = popOverEl;
+    }
+    getLinkElement() {
+        return this._linkEl;
+    }
+    addSection() {
+        let containerEl = this._popOverEl.querySelector('.inboxsdk__linkPopOver_section_container');
+        if (!containerEl) {
+            containerEl = document.createElement('div');
+            containerEl.className = 'inboxsdk__linkPopOver_section_container';
+            this._popOverEl.appendChild(containerEl);
+        }
+        return new LinkPopOverSection(this, containerEl);
+    }
+}
+class LinkPopOverSection {
+    _el = document.createElement('div');
+    constructor(linkPopOver, containerEl) {
+        this._el.className = 'inboxsdk__linkPopOver_section';
+        containerEl.appendChild(this._el);
+        linkPopOver.on('close', () => {
+            this.remove();
+        });
+    }
+    getElement() {
+        return this._el;
+    }
+    remove() {
+        this._el.remove();
+    }
+}
+function getSelectedLink(gmailComposeView) {
+    const focusNode = document.getSelection()?.focusNode;
+    if (!focusNode) {
+        return null;
+    }
+    if (focusNode instanceof Text) {
+        if (focusNode.previousSibling instanceof HTMLAnchorElement &&
+            document.getSelection()?.anchorOffset === 0) {
+            // For capturing link creation cases where the cursor ends up behind the link
+            return focusNode.previousSibling;
+        }
+        else if (focusNode.nextSibling instanceof HTMLAnchorElement) {
+            // google's popover appears when clicking just in front of a link as well
+            return focusNode.nextSibling;
+        }
+    }
+    return findLinkParent(focusNode, gmailComposeView.getBodyElement());
+}
+function findLinkParent(node, composeBody) {
+    if (node instanceof HTMLAnchorElement) {
+        return node;
+    }
+    else if (!node || node === composeBody) {
+        return null;
+    }
+    else {
+        return findLinkParent(node.parentElement, composeBody);
+    }
+}
+export default function setupLinkPopOvers(gmailComposeView) {
+    return toItemWithLifetimeStream(gmailComposeView
+        .getGmailDriver()
+        .getTagTree()
+        .getAllByTag('composeLinkPopOverContainer')).flatMap(({ el, removalStream }) => {
+        const popOverEl = el.getValue();
+        let existingLinkPopOver = null;
+        removalStream.onValue(() => {
+            if (existingLinkPopOver) {
+                existingLinkPopOver.emit('close');
+                existingLinkPopOver = null;
+            }
+        });
+        return makeMutationObserverChunkedStream(popOverEl, {
+            attributes: true,
+            attributeFilter: ['style'],
+        })
+            .toProperty(() => null)
+            .takeUntilBy(removalStream)
+            .flatMap(() => {
+            if (existingLinkPopOver) {
+                existingLinkPopOver.emit('close');
+                existingLinkPopOver = null;
+            }
+            if (popOverEl.style.visibility === 'visible') {
+                const linkEl = getSelectedLink(gmailComposeView);
+                if (linkEl && gmailComposeView.getElement().contains(linkEl)) {
+                    const linkPopOver = new LinkPopOver(linkEl, popOverEl);
+                    existingLinkPopOver = linkPopOver;
+                    return Kefir.constant({
+                        eventName: 'linkPopOver',
+                        data: linkPopOver,
+                    });
+                }
+            }
+            return Kefir.never();
+        });
+    });
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/size-fixer.js

@@ -1,26 +1,26 @@
-/* @flow */
-
-import includes from 'lodash/includes';
-import startsWith from 'lodash/startsWith';
-import findIndex from 'lodash/findIndex';
-import once from 'lodash/once';
-import Kefir from 'kefir';
-import delayAsap from '../../../../lib/delay-asap';
-import makeMutationObserverChunkedStream from '../../../../lib/dom/make-mutation-observer-chunked-stream';
-import cssSelectorEscape from '../../../../lib/css-selector-escape';
-import type GmailComposeView from '../gmail-compose-view';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = sizeFixer;
+var _includes = _interopRequireDefault(require("lodash/includes"));
+var _startsWith = _interopRequireDefault(require("lodash/startsWith"));
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+var _once = _interopRequireDefault(require("lodash/once"));
+var _kefir = _interopRequireDefault(require("kefir"));
+var _delayAsap = _interopRequireDefault(require("../../../../lib/delay-asap"));
+var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../../lib/dom/make-mutation-observer-chunked-stream"));
+var _cssSelectorEscape = _interopRequireDefault(require("../../../../lib/css-selector-escape"));
 const MATERIAL_UI_GMAIL_STATUS_HEIGHT = 60;
 const MATERIAL_UI_TOP_FORM_HEIGHT = 72;
-
-const SELECTOR_ESCAPE_HATCH_PREFIX =
-  'body:not(.inboxsdk_hack_disableComposeSizeFixer) ';
-
-var getSizeFixerSheet: () => CSSStyleSheet = once(() => {
-  const style: HTMLStyleElement = (document.createElement('style'): any);
+const SELECTOR_ESCAPE_HATCH_PREFIX = 'body:not(.inboxsdk_hack_disableComposeSizeFixer) ';
+var getSizeFixerSheet = (0, _once.default)(() => {
+  const style = document.createElement('style');
   style.type = 'text/css';
   style.className = 'inboxsdk__compose_size_fixer';
-  (document.head: any).appendChild(style);
+  document.head.appendChild(style);
   var sheet = style.sheet;
   if (!(sheet instanceof CSSStyleSheet)) {
     throw new Error('Could not add stylesheet');
@@ -29,47 +29,28 @@ var getSizeFixerSheet: () => CSSStyleSheet = once(() => {
 });
 
 // Gets a css selector string for a given id
-function byId(id: string): string {
-  return '#' + cssSelectorEscape(id);
+function byId(id) {
+  return '#' + (0, _cssSelectorEscape.default)(id);
 }
-
-export default function sizeFixer(
-  driver: Object,
-  gmailComposeView: GmailComposeView
-) {
-  if (
-    gmailComposeView.isInlineReplyForm() ||
-    gmailComposeView.getElement().classList.contains('inboxsdk__size_fixer')
-  ) {
+function sizeFixer(driver, gmailComposeView) {
+  if (gmailComposeView.isInlineReplyForm() || gmailComposeView.getElement().classList.contains('inboxsdk__size_fixer')) {
     return;
   }
   gmailComposeView.getElement().classList.add('inboxsdk__size_fixer');
-
   var composeEvents = gmailComposeView.getEventStream();
   var stopper = composeEvents.filter(() => false).beforeEnd(() => null);
-  var resizeEvents = composeEvents
-    .filter((e) => includes(['resize', 'fullscreenChanged'], e.eventName))
-    .merge(delayAsap(null));
-
-  var statusAreaParent: HTMLElement = (gmailComposeView.getStatusArea()
-    .parentElement: any);
-  var scrollBody: HTMLElement = gmailComposeView.getScrollBody();
-
+  var resizeEvents = composeEvents.filter(e => (0, _includes.default)(['resize', 'fullscreenChanged'], e.eventName)).merge((0, _delayAsap.default)(null));
+  var statusAreaParent = gmailComposeView.getStatusArea().parentElement;
+  var scrollBody = gmailComposeView.getScrollBody();
   var sheet = getSizeFixerSheet();
   var topForm = gmailComposeView.getTopFormElement();
   var composeId = gmailComposeView.getElement().id;
   if (!composeId) {
-    composeId =
-      gmailComposeView.getElement().id = `x${Math.random()}x${Date.now()}`;
+    composeId = gmailComposeView.getElement().id = `x${Math.random()}x${Date.now()}`;
   }
-
-  function setRuleForSelector(selector: string, rule: string) {
-    const fullSelector =
-      SELECTOR_ESCAPE_HATCH_PREFIX + byId(composeId) + ' ' + selector;
-    const ix = findIndex(
-      sheet.cssRules,
-      (cssRule) => cssRule.selectorText === fullSelector
-    );
+  function setRuleForSelector(selector, rule) {
+    const fullSelector = SELECTOR_ESCAPE_HATCH_PREFIX + byId(composeId) + ' ' + selector;
+    const ix = (0, _findIndex.default)(sheet.cssRules, cssRule => cssRule.selectorText === fullSelector);
     if (ix !== -1) {
       sheet.deleteRule(ix);
     }
@@ -77,101 +58,66 @@ export default function sizeFixer(
   }
 
   // Emit resize events when the recipients area is toggled
-  makeMutationObserverChunkedStream(statusAreaParent, { attributes: true })
-    .takeUntilBy(stopper)
-    .onValue(() => {
-      gmailComposeView.getElement().dispatchEvent(
-        new CustomEvent('resize', {
-          bubbles: false,
-          cancelable: false,
-          detail: null,
-        })
-      );
-    });
-
-  resizeEvents
-    .bufferBy(resizeEvents.flatMap((x) => delayAsap(null)))
-    .filter((x) => x.length > 0)
-    .merge(makeMutationObserverChunkedStream(scrollBody, { attributes: true }))
-    .takeUntilBy(stopper)
-    .onValue(() => {
-      const statusUnexpectedHeight = Math.max(
-        statusAreaParent.offsetHeight - MATERIAL_UI_GMAIL_STATUS_HEIGHT,
-        0
-      );
-
-      const topFormUnexpectedHeight = Math.max(
-        topForm.offsetHeight - MATERIAL_UI_TOP_FORM_HEIGHT,
-        0
-      );
-
-      const unexpectedHeight = statusUnexpectedHeight + topFormUnexpectedHeight;
-
-      const maybeBody = gmailComposeView.getMaybeBodyElement();
-
-      /**
-       * In order to support dynamic height in non-fullscreen mode,
-       * get height of the inner element of scrollBody
-       * this way we still can override height values of scrollBody,
-       * but recalculate them based on actual height of an inner child
-       */
-      const scrollBodyInner = scrollBody.querySelector('.qz');
-      const height = scrollBodyInner?.offsetHeight || scrollBody.offsetHeight;
-
-      const maxHeight = parseInt(
-        scrollBody.style.getPropertyValue('max-height'),
-        10
-      );
-
-      const isFullScreen = gmailComposeView.isFullscreen();
-
-      const newMaxHeight = maxHeight - unexpectedHeight;
-      const newHeight = height > newMaxHeight ? newMaxHeight : null;
-
-      const scrollBodyCssRules = [`max-height: ${newMaxHeight}px !important;`];
-      let maybeBodyCssRules;
-
-      if (newHeight) {
-        scrollBodyCssRules.push(`height: ${newHeight}px !important;`);
-      }
-
-      if (isFullScreen) {
-        // in non fullscreen mode compose window can get taller on user input,
-        // but in fullscreen mode, compose window size is static so not only max-height
-        // should be updated, but also min-height of scrollBody and maybeBody
-
-        // NOTE: max-height and min-height in full screen are same
-        scrollBodyCssRules.push(`min-height: ${newMaxHeight}px !important;`);
-
-        const maybeBodyMinHeight =
-          parseInt(maybeBody?.style.minHeight, 10) || maxHeight;
-        const maybeBodyNewMinHeight = maybeBodyMinHeight - unexpectedHeight;
-
-        maybeBodyCssRules = `min-height: ${maybeBodyNewMinHeight}px !important;`;
-      }
-
-      if (scrollBodyCssRules.length > 0) {
-        setRuleForSelector(byId(scrollBody.id), scrollBodyCssRules.join('\n'));
-      }
-
-      if (maybeBodyCssRules && maybeBody) {
-        setRuleForSelector(byId(maybeBody.id), maybeBodyCssRules);
-      }
-    });
-
+  (0, _makeMutationObserverChunkedStream.default)(statusAreaParent, {
+    attributes: true
+  }).takeUntilBy(stopper).onValue(() => {
+    gmailComposeView.getElement().dispatchEvent(new CustomEvent('resize', {
+      bubbles: false,
+      cancelable: false,
+      detail: null
+    }));
+  });
+  resizeEvents.bufferBy(resizeEvents.flatMap(x => (0, _delayAsap.default)(null))).filter(x => x.length > 0).merge((0, _makeMutationObserverChunkedStream.default)(scrollBody, {
+    attributes: true
+  })).takeUntilBy(stopper).onValue(() => {
+    const statusUnexpectedHeight = Math.max(statusAreaParent.offsetHeight - MATERIAL_UI_GMAIL_STATUS_HEIGHT, 0);
+    const topFormUnexpectedHeight = Math.max(topForm.offsetHeight - MATERIAL_UI_TOP_FORM_HEIGHT, 0);
+    const unexpectedHeight = statusUnexpectedHeight + topFormUnexpectedHeight;
+    const maybeBody = gmailComposeView.getMaybeBodyElement();
+
+    /**
+     * In order to support dynamic height in non-fullscreen mode,
+     * get height of the inner element of scrollBody
+     * this way we still can override height values of scrollBody,
+     * but recalculate them based on actual height of an inner child
+     */
+    const scrollBodyInner = scrollBody.querySelector('.qz');
+    const height = (scrollBodyInner === null || scrollBodyInner === void 0 ? void 0 : scrollBodyInner.offsetHeight) || scrollBody.offsetHeight;
+    const maxHeight = parseInt(scrollBody.style.getPropertyValue('max-height'), 10);
+    const isFullScreen = gmailComposeView.isFullscreen();
+    const newMaxHeight = maxHeight - unexpectedHeight;
+    const newHeight = height > newMaxHeight ? newMaxHeight : null;
+    const scrollBodyCssRules = [`max-height: ${newMaxHeight}px !important;`];
+    let maybeBodyCssRules;
+    if (newHeight) {
+      scrollBodyCssRules.push(`height: ${newHeight}px !important;`);
+    }
+    if (isFullScreen) {
+      // in non fullscreen mode compose window can get taller on user input,
+      // but in fullscreen mode, compose window size is static so not only max-height
+      // should be updated, but also min-height of scrollBody and maybeBody
+
+      // NOTE: max-height and min-height in full screen are same
+      scrollBodyCssRules.push(`min-height: ${newMaxHeight}px !important;`);
+      const maybeBodyMinHeight = parseInt(maybeBody === null || maybeBody === void 0 ? void 0 : maybeBody.style.minHeight, 10) || maxHeight;
+      const maybeBodyNewMinHeight = maybeBodyMinHeight - unexpectedHeight;
+      maybeBodyCssRules = `min-height: ${maybeBodyNewMinHeight}px !important;`;
+    }
+    if (scrollBodyCssRules.length > 0) {
+      setRuleForSelector(byId(scrollBody.id), scrollBodyCssRules.join('\n'));
+    }
+    if (maybeBodyCssRules && maybeBody) {
+      setRuleForSelector(byId(maybeBody.id), maybeBodyCssRules);
+    }
+  });
   stopper.onValue(() => {
     // Go through the rules array backwards so that we remove them in backwards
     // order. If we went through in ascending order, we'd have to worry about
     // the list shrinking out from under us.
     for (let ix = sheet.cssRules.length - 1; ix >= 0; ix--) {
-      if (
-        startsWith(
-          (sheet.cssRules: any)[ix].selectorText,
-          SELECTOR_ESCAPE_HATCH_PREFIX + byId(composeId) + ' '
-        )
-      ) {
+      if ((0, _startsWith.default)(sheet.cssRules[ix].selectorText, SELECTOR_ESCAPE_HATCH_PREFIX + byId(composeId) + ' ')) {
         sheet.deleteRule(ix);
       }
     }
   });
-}
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/update-insert-more-area-left.js

@@ -1,28 +1,19 @@
-/* @flow */
-
-import type GmailComposeView from '../gmail-compose-view';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = updateInsertMoreAreaLeft;
 const updateAreaSet = new WeakSet();
-
-export default function updateInsertMoreAreaLeft(
-  gmailComposeView: GmailComposeView,
-  oldFormattingAreaOffsetLeft: number
-) {
+function updateInsertMoreAreaLeft(gmailComposeView, oldFormattingAreaOffsetLeft) {
   if (updateAreaSet.has(gmailComposeView)) return;
-
   updateAreaSet.add(gmailComposeView);
-
   window.requestAnimationFrame(() => {
     updateAreaSet.delete(gmailComposeView);
     if (gmailComposeView.isDestroyed()) return;
-    var newFormattingAreaOffsetLeft =
-      gmailComposeView._getFormattingAreaOffsetLeft();
-    var insertMoreAreaLeft = parseInt(
-      gmailComposeView.getInsertMoreArea().style.left,
-      10
-    );
+    var newFormattingAreaOffsetLeft = gmailComposeView._getFormattingAreaOffsetLeft();
+    var insertMoreAreaLeft = parseInt(gmailComposeView.getInsertMoreArea().style.left, 10);
     var diff = newFormattingAreaOffsetLeft - oldFormattingAreaOffsetLeft;
-    gmailComposeView.getInsertMoreArea().style.left =
-      insertMoreAreaLeft + diff + 'px';
+    gmailComposeView.getInsertMoreArea().style.left = insertMoreAreaLeft + diff + 'px';
   });
-}
+}