omarstreak

InboxSDK.load(2, 'YOUR_APP_ID_HERE', {suppressAddonTitle: 'YOUR_ADD_ON_TITLE_HERE'}).then(function(sdk){
  //more code
});

omarstreak

import Kefir from 'kefir';

class ThreadDataManager {
  constructor(){
    Kefir.stream(emitter => {this._emitter = emitter; return () => null});
    this._threadData = {}; //map from threadID to thread data
  }
  
  setThreadData(threadID, data){
    this._threadData[threadID] = data;

omarstreak

<div contenteditable="true">
  <div>
    hi <span contenteditable="false">&lt;contact_givenName&gt;</span>,
  </div>
  <div>
    How are you?
  </div>
</div>

omarstreak

var INSTALL_CHECK = 'chrome-extension://pnnfemgpilpdaojpnkjdgfgbnnjojfik/blank.png';

function isExtensionInstalled() {
	//we have different logic for Chrome vs Safari
	if(BrowserDetect.browser === 'Chrome'){
		// the Chrome extension makes an image "web accessible", so we have the page try to load that image.
		// if it loads successfully then the Streak extension is installed. If the image does not load successfully, then the image is not installed
		var img = new Image();
		img.onload = function() {
			clearInterval(installTimerId);

omarstreak

div input {
  background-color: lightgreen;
  border-radius: 5px;
  padding: 0 5px;
}

omarstreak

/*! Streak launches new features to users every day. Users love our fast updates and quick response to bugs.
 * In order to accomplish this we use the popular InboxSDK library (www.inboxsdk.com). Its used by
 * several large organizations: 
 *   Dropbox (https://chrome.google.com/webstore/detail/dropbox-for-gmail-beta/dpdmhfocilnekecfjgimjdeckachfbec)
 *   HubSpot (https://chrome.google.com/webstore/detail/hubspot-sales/oiiaigjnkhngdbnoookogelabohpglmd)
 *   Stripe (https://chrome.google.com/webstore/detail/stripe-for-gmail/dhnddbohjigcdbcfjdngilgkdcbjjhna)
 *   Giphy (https://chrome.google.com/webstore/detail/giphy-for-gmail/andgibkjiikabclfdkecpmdkfanpdapf)
 *   Clearbit (https://chrome.google.com/webstore/detail/clearbit-connect-supercha/pmnhcgfcafcnkbengdcanjablaabjplo)
 * The use of the library is similar to using other popular javascript libraries like jQuery and Underscore
 *

omarstreak

import containByScreen from 'contain-by-screen';

function positionMenuAtCaret({menuContainer, cursorContext, activeQuery}: {menuContainer: HTMLElement; cursorContext: CursorContext; activeQuery: string;}){
  let textNode = cursorContext.textNode;
  const menuLeftEdgeCharaterPosition = Math.max(cursorContext.cursorCharacterPosition - activeQuery.length, 0);
  const range = document.createRange();
  range.setStart(textNode, menuLeftEdgeCharaterPosition);
  range.setEnd(textNode, menuLeftEdgeCharaterPosition);
  range.collapse(true);

omarstreak

Kefir.merge([
  Kefir.fromEvents(input, 'keyup'),
  Kefir.fromEvents(input, 'input'),
  Kefir.fromEvents(input, 'click'),
  Kefir.fromEvents(input, 'focus')
])
.takeUntilBy(elementDestroyedObservable)
.debounce(100)
.onValue(() => /* do some stuff */)

omarstreak

/* @flow */

/* this code heavily borrows from https://github.com/zurb/tribute */

export type CursorContext = {
  textNode: Node;
  textNodeParent: Node;
  textNodeContent: string;
  textBeforeCursor: string;
  textAfterCursor: string;

omarstreak

function pasteText({replacementText, cursorContext, activeQuery}: {replacementText: string; cursorContext: CursorContext; activeQuery: string;}){
  // update text node content with replaced text
  const lastIndex = cursorContext.textBeforeCursor.lastIndexOf(activeQuery);
  cursorContext.textNode.textContent = cursorContext.textNodeContent.substring(0, lastIndex) + replacementText + cursorContext.textAfterCursor;

  const selection = document.getSelection();
  if(!selection) return;

  // put cursor at the end of the replaced text
  const range = document.createRange();