This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* this file is the "app" file that loads the sdk and brings up the iframe */ | |
function log() { | |
console.log.apply(console, ['iframe-test'].concat(Array.prototype.slice.call(arguments))); | |
} | |
InboxSDK.load(1, 'iframe-test').then(function(sdk) { | |
sdk.Compose.registerComposeViewHandler(function(composeView) { | |
composeView.addButton({ | |
title: "iframe test", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! 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 | |
* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
To inject a button into composes there's 5 main strategies an extension developer can use, each strategy has large tradeoffs | |
mainly around performance and ease of implementation. The result is that most extension developers opt for the | |
easy to implement but poor performing strategy. | |
*/ | |
/* | |
Strategy 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener('DOMNodeInserted', function(e){ | |
if(e.target.classList.contains('An')){ | |
addButton(e.target); | |
} | |
}); | |
$('.An').forEach(addButton); | |
function addButton(composeNode){ | |
var button = $('<div class="wG J-Z-I"><div class="J-J5-Ji J-Z-I-Kv-H"><div class="J-J5-Ji J-Z-I-J6-H"><div class="aA7 aaA aMZ"><img src="//composeIcon" /></div></div></div></div>'); | |
button.click(function(e){ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
InboxSDK.load(2, 'YOUR_APP_ID_HERE', {suppressAddonTitle: 'YOUR_ADD_ON_TITLE_HERE'}).then(function(sdk){ | |
//more code | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @flow */ | |
/* this code heavily borrows from https://github.com/zurb/tribute */ | |
export type CursorContext = { | |
textNode: Node; | |
textNodeParent: Node; | |
textNodeContent: string; | |
textBeforeCursor: string; | |
textAfterCursor: string; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 */) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div contenteditable="true"> | |
<div> | |
hi <span contenteditable="false"><contact_givenName></span>, | |
</div> | |
<div> | |
How are you? | |
</div> | |
</div> |