diff --git a/.babelrc b/.babelrc index 8c7b66269d..6ba0e0dae0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { "presets": ["react", "es2015", "es2016"], - "plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-async-to-generator", "transform-runtime", "add-module-exports"] + "plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-async-to-bluebird", "transform-runtime", "add-module-exports"] } diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles index ffd492d491..55eaf75e4b 100644 --- a/.eslintignore.errorfiles +++ b/.eslintignore.errorfiles @@ -1,6 +1,5 @@ # autogenerated file: run scripts/generate-eslint-error-ignore-file to update. -src/AddThreepid.js src/async-components/views/dialogs/EncryptedEventDialog.js src/autocomplete/AutocompleteProvider.js src/autocomplete/Autocompleter.js @@ -9,8 +8,6 @@ src/autocomplete/DuckDuckGoProvider.js src/autocomplete/EmojiProvider.js src/autocomplete/RoomProvider.js src/autocomplete/UserProvider.js -src/Avatar.js -src/BasePlatform.js src/CallHandler.js src/component-index.js src/components/structures/ContextualMenu.js @@ -96,7 +93,6 @@ src/components/views/rooms/MessageComposerInput.js src/components/views/rooms/MessageComposerInputOld.js src/components/views/rooms/PresenceLabel.js src/components/views/rooms/ReadReceiptMarker.js -src/components/views/rooms/RoomHeader.js src/components/views/rooms/RoomList.js src/components/views/rooms/RoomNameEditor.js src/components/views/rooms/RoomPreviewBar.js @@ -115,16 +111,7 @@ src/components/views/settings/ChangePassword.js src/components/views/settings/DevicesPanel.js src/components/views/settings/DevicesPanelEntry.js src/components/views/settings/EnableNotificationsButton.js -src/components/views/voip/CallView.js -src/components/views/voip/IncomingCallBox.js -src/components/views/voip/VideoFeed.js -src/components/views/voip/VideoView.js src/ContentMessages.js -src/createRoom.js -src/DateUtils.js -src/email.js -src/Entities.js -src/extend.js src/HtmlUtils.js src/ImageUtils.js src/Invite.js @@ -135,30 +122,20 @@ src/Markdown.js src/MatrixClientPeg.js src/Modal.js src/Notifier.js -src/ObjectUtils.js -src/PasswordReset.js src/PlatformPeg.js src/Presence.js src/ratelimitedfunc.js -src/Resend.js src/RichText.js src/Roles.js -src/RoomListSorter.js -src/RoomNotifs.js src/Rooms.js src/ScalarAuthClient.js src/ScalarMessaging.js -src/SdkConfig.js -src/Skinner.js -src/SlashCommands.js -src/stores/LifecycleStore.js src/TabComplete.js src/TabCompleteEntries.js src/TextForEvent.js src/Tinter.js src/UiEffects.js src/Unread.js -src/UserActivity.js src/utils/DecryptFile.js src/utils/DMRoomMap.js src/utils/FormattingUtils.js diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000000..81770c6585 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,6 @@ +[include] +src/**/*.js +test/**/*.js + +[ignore] +node_modules/ diff --git a/.travis-test-riot.sh b/.travis-test-riot.sh index 4296c72e6c..87200871a5 100755 --- a/.travis-test-riot.sh +++ b/.travis-test-riot.sh @@ -22,8 +22,11 @@ git checkout "$curbranch" || git checkout develop mkdir node_modules npm install -(cd node_modules/matrix-js-sdk && npm install) +# use the version of js-sdk we just used in the react-sdk tests +rm -r node_modules/matrix-js-sdk +ln -s "$REACT_SDK_DIR/node_modules/matrix-js-sdk" node_modules/matrix-js-sdk +# ... and, of course, the version of react-sdk we just built rm -r node_modules/matrix-react-sdk ln -s "$REACT_SDK_DIR" node_modules/matrix-react-sdk diff --git a/.travis.yml b/.travis.yml index 918cec696b..4137d754bf 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,15 @@ +# we need trusty for the chrome addon +dist: trusty + +# we don't need sudo, so can run in a container, which makes startup much +# quicker. +sudo: false + language: node_js node_js: - node # Latest stable version of nodejs. +addons: + chrome: stable install: - npm install - (cd node_modules/matrix-js-sdk && npm install) diff --git a/jenkins.sh b/jenkins.sh index d9bb62855b..0979edfa13 100755 --- a/jenkins.sh +++ b/jenkins.sh @@ -2,10 +2,9 @@ set -e -export KARMAFLAGS="--no-colors" export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" -nvm use 4 +nvm use 6 set -x @@ -16,7 +15,7 @@ npm install (cd node_modules/matrix-js-sdk && npm install) # run the mocha tests -npm run test +npm run test -- --no-colors # run eslint npm run lintall -- -f checkstyle -o eslint.xml || true diff --git a/karma.conf.js b/karma.conf.js index d544248332..164cd9ce59 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -93,7 +93,18 @@ module.exports = function (config) { // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress', 'junit'], + reporters: ['logcapture', 'spec', 'junit', 'summary'], + + specReporter: { + suppressErrorSummary: false, // do print error summary + suppressFailed: false, // do print information about failed tests + suppressPassed: false, // do print information about passed tests + showSpecTiming: true, // print the time elapsed for each spec + }, + + client: { + captureLogs: true, + }, // web server port port: 9876, @@ -104,7 +115,10 @@ module.exports = function (config) { // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, + // + // This is strictly for logs that would be generated by the browser itself and we + // don't want to log about missing images, which are emitted on LOG_WARN. + logLevel: config.LOG_ERROR, // enable / disable watching file and executing tests whenever any file // changes @@ -116,11 +130,25 @@ module.exports = function (config) { browsers: [ 'Chrome', //'PhantomJS', + //'ChromeHeadless', ], + customLaunchers: { + 'ChromeHeadless': { + base: 'Chrome', + flags: [ + // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md + '--headless', + '--disable-gpu', + // Without a remote debugging port, Google Chrome exits immediately. + '--remote-debugging-port=9222', + ], + } + }, + // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits - singleRun: true, + // singleRun: false, // Concurrency level // how many browser should be started simultaneous diff --git a/package.json b/package.json index cbc06c9771..661db4b6bc 100644 --- a/package.json +++ b/package.json @@ -33,28 +33,30 @@ "scripts": { "reskindex": "node scripts/reskindex.js -h header", "reskindex:watch": "node scripts/reskindex.js -h header -w", - "build": "npm run reskindex && babel src -d lib --source-maps", - "build:watch": "babel src -w -d lib --source-maps", + "build": "npm run reskindex && babel src -d lib --source-maps --copy-files", + "build:watch": "babel src -w -d lib --source-maps --copy-files", + "emoji-data-strip": "node scripts/emoji-data-strip.js", "start": "parallelshell \"npm run build:watch\" \"npm run reskindex:watch\"", "lint": "eslint src/", "lintall": "eslint src/ test/", "clean": "rimraf lib", "prepublish": "npm run build && git rev-parse HEAD > git-revision.txt", - "test": "karma start $KARMAFLAGS --browsers PhantomJS", - "test-multi": "karma start $KARMAFLAGS --single-run=false" + "test": "karma start --single-run=true --browsers ChromeHeadless", + "test-multi": "karma start" }, "dependencies": { "babel-runtime": "^6.11.6", + "bluebird": "^3.5.0", "blueimp-canvas-to-blob": "^3.5.0", "browser-encrypt-attachment": "^0.3.0", "browser-request": "^0.3.3", "classnames": "^2.1.2", "commonmark": "^0.27.0", "counterpart": "^0.18.0", - "draft-js": "^0.8.1", - "draft-js-export-html": "^0.5.0", - "draft-js-export-markdown": "^0.2.0", - "emojione": "2.2.3", + "draft-js": "^0.11.0-alpha", + "draft-js-export-html": "^0.6.0", + "draft-js-export-markdown": "^0.3.0", + "emojione": "2.2.7", "file-saver": "^1.3.3", "filesize": "3.5.6", "flux": "2.1.1", @@ -64,16 +66,16 @@ "isomorphic-fetch": "^2.2.1", "linkifyjs": "^2.1.3", "lodash": "^4.13.1", - "matrix-js-sdk": "0.7.13", + "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop", "optimist": "^0.6.1", "prop-types": "^15.5.8", - "q": "^1.4.1", "react": "^15.4.0", "react-addons-css-transition-group": "15.3.2", "react-dom": "^15.4.0", "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", - "sanitize-html": "^1.11.1", + "sanitize-html": "^1.14.1", "text-encoding-utf-8": "^1.0.1", + "url": "^0.11.0", "velocity-vector": "vector-im/velocity#059e3b2", "whatwg-fetch": "^1.0.0" }, @@ -83,7 +85,7 @@ "babel-eslint": "^6.1.2", "babel-loader": "^6.2.5", "babel-plugin-add-module-exports": "^0.2.1", - "babel-plugin-transform-async-to-generator": "^6.16.0", + "babel-plugin-transform-async-to-bluebird": "^1.1.1", "babel-plugin-transform-class-properties": "^6.16.0", "babel-plugin-transform-object-rest-spread": "^6.16.0", "babel-plugin-transform-runtime": "^6.15.0", @@ -100,17 +102,19 @@ "eslint-plugin-react": "^6.9.0", "expect": "^1.16.0", "json-loader": "^0.5.3", - "karma": "^0.13.22", + "karma": "^1.7.0", "karma-chrome-launcher": "^0.2.3", "karma-cli": "^0.1.2", "karma-junit-reporter": "^0.4.1", + "karma-logcapture-reporter": "0.0.1", "karma-mocha": "^0.2.2", - "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.7", + "karma-spec-reporter": "^0.0.31", + "karma-summary-reporter": "^1.3.3", "karma-webpack": "^1.7.0", + "matrix-react-test-utils": "^0.1.1", "mocha": "^2.4.5", "parallelshell": "^1.2.0", - "phantomjs-prebuilt": "^2.1.7", "react-addons-test-utils": "^15.4.0", "require-json": "0.0.1", "rimraf": "^2.4.3", diff --git a/scripts/emoji-data-strip.js b/scripts/emoji-data-strip.js new file mode 100644 index 0000000000..40156471fe --- /dev/null +++ b/scripts/emoji-data-strip.js @@ -0,0 +1,26 @@ +#!/usr/bin/env node +const EMOJI_DATA = require('emojione/emoji.json'); +const EMOJI_SUPPORTED = Object.keys(require('emojione').emojioneList); +const fs = require('fs'); + +const output = Object.keys(EMOJI_DATA).map( + (key) => { + const datum = EMOJI_DATA[key]; + const newDatum = { + name: datum.name, + shortname: datum.shortname, + category: datum.category, + emoji_order: datum.emoji_order, + }; + if (datum.aliases_ascii.length > 0) { + newDatum.aliases_ascii = datum.aliases_ascii; + } + return newDatum; + } +).filter((datum) => { + return EMOJI_SUPPORTED.includes(datum.shortname); +}); + +// Write to a file in src. Changes should be checked into git. This file is copied by +// babel using --copy-files +fs.writeFileSync('./src/stripped-emoji.json', JSON.stringify(output)); diff --git a/src/AddThreepid.js b/src/AddThreepid.js index 8be7a19b13..337e38d867 100644 --- a/src/AddThreepid.js +++ b/src/AddThreepid.js @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -var MatrixClientPeg = require("./MatrixClientPeg"); +import MatrixClientPeg from './MatrixClientPeg'; import { _t } from './languageHandler'; /** @@ -44,7 +44,7 @@ class AddThreepid { this.sessionId = res.sid; return res; }, function(err) { - if (err.errcode == 'M_THREEPID_IN_USE') { + if (err.errcode === 'M_THREEPID_IN_USE') { err.message = _t('This email address is already in use'); } else if (err.httpStatus) { err.message = err.message + ` (Status ${err.httpStatus})`; @@ -69,7 +69,7 @@ class AddThreepid { this.sessionId = res.sid; return res; }, function(err) { - if (err.errcode == 'M_THREEPID_IN_USE') { + if (err.errcode === 'M_THREEPID_IN_USE') { err.message = _t('This phone number is already in use'); } else if (err.httpStatus) { err.message = err.message + ` (Status ${err.httpStatus})`; @@ -85,16 +85,15 @@ class AddThreepid { * the request failed. */ checkEmailLinkClicked() { - var identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1]; + const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1]; return MatrixClientPeg.get().addThreePid({ sid: this.sessionId, client_secret: this.clientSecret, - id_server: identityServerDomain + id_server: identityServerDomain, }, this.bind).catch(function(err) { if (err.httpStatus === 401) { err.message = _t('Failed to verify email address: make sure you clicked the link in the email'); - } - else if (err.httpStatus) { + } else if (err.httpStatus) { err.message += ` (Status ${err.httpStatus})`; } throw err; @@ -104,6 +103,7 @@ class AddThreepid { /** * Takes a phone number verification code as entered by the user and validates * it with the ID server, then if successful, adds the phone number. + * @param {string} token phone number verification code as entered by the user * @return {Promise} Resolves if the phone number was added. Rejects with an object * with a "message" property which contains a human-readable message detailing why * the request failed. @@ -119,7 +119,7 @@ class AddThreepid { return MatrixClientPeg.get().addThreePid({ sid: this.sessionId, client_secret: this.clientSecret, - id_server: identityServerDomain + id_server: identityServerDomain, }, this.bind); }); } diff --git a/src/Analytics.js b/src/Analytics.js index 92691da1ea..a82f57a144 100644 --- a/src/Analytics.js +++ b/src/Analytics.js @@ -15,7 +15,6 @@ */ import { getCurrentLanguage } from './languageHandler'; -import MatrixClientPeg from './MatrixClientPeg'; import PlatformPeg from './PlatformPeg'; import SdkConfig from './SdkConfig'; @@ -31,8 +30,18 @@ const customVariables = { 'User Type': 3, 'Chosen Language': 4, 'Instance': 5, + 'RTE: Uses Richtext Mode': 6, + 'Homeserver URL': 7, + 'Identity Server URL': 8, }; +function whitelistRedact(whitelist, str) { + if (whitelist.includes(str)) return str; + return ''; +} + +const whitelistedHSUrls = ["https://matrix.org"]; +const whitelistedISUrls = ["https://vector.im"]; class Analytics { constructor() { @@ -76,7 +85,7 @@ class Analytics { this._paq.push(['trackAllContentImpressions']); this._paq.push(['discardHashTag', false]); this._paq.push(['enableHeartBeatTimer']); - this._paq.push(['enableLinkTracking', true]); + // this._paq.push(['enableLinkTracking', true]); const platform = PlatformPeg.get(); this._setVisitVariable('App Platform', platform.getHumanReadableName()); @@ -130,20 +139,20 @@ class Analytics { this._paq.push(['deleteCookies']); } - login() { // not used currently - const cli = MatrixClientPeg.get(); - if (this.disabled || !cli) return; - - this._paq.push(['setUserId', `@${cli.getUserIdLocalpart()}:${cli.getDomain()}`]); - } - _setVisitVariable(key, value) { this._paq.push(['setCustomVariable', customVariables[key], key, value, 'visit']); } - setGuest(guest) { + setLoggedIn(isGuest, homeserverUrl, identityServerUrl) { if (this.disabled) return; - this._setVisitVariable('User Type', guest ? 'Guest' : 'Logged In'); + this._setVisitVariable('User Type', isGuest ? 'Guest' : 'Logged In'); + this._setVisitVariable('Homeserver URL', whitelistRedact(whitelistedHSUrls, homeserverUrl)); + this._setVisitVariable('Identity Server URL', whitelistRedact(whitelistedISUrls, identityServerUrl)); + } + + setRichtextMode(state) { + if (this.disabled) return; + this._setVisitVariable('RTE: Uses Richtext Mode', state ? 'on' : 'off'); } } diff --git a/src/Avatar.js b/src/Avatar.js index c0127d49af..d41a3f6a79 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -15,18 +15,18 @@ limitations under the License. */ 'use strict'; -var ContentRepo = require("matrix-js-sdk").ContentRepo; -var MatrixClientPeg = require('./MatrixClientPeg'); +import {ContentRepo} from 'matrix-js-sdk'; +import MatrixClientPeg from './MatrixClientPeg'; module.exports = { avatarUrlForMember: function(member, width, height, resizeMethod) { - var url = member.getAvatarUrl( + let url = member.getAvatarUrl( MatrixClientPeg.get().getHomeserverUrl(), Math.floor(width * window.devicePixelRatio), Math.floor(height * window.devicePixelRatio), resizeMethod, false, - false + false, ); if (!url) { // member can be null here currently since on invites, the JS SDK @@ -38,11 +38,11 @@ module.exports = { }, avatarUrlForUser: function(user, width, height, resizeMethod) { - var url = ContentRepo.getHttpUriForMxc( + const url = ContentRepo.getHttpUriForMxc( MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl, Math.floor(width * window.devicePixelRatio), Math.floor(height * window.devicePixelRatio), - resizeMethod + resizeMethod, ); if (!url || url.length === 0) { return null; @@ -51,11 +51,11 @@ module.exports = { }, defaultAvatarUrlForString: function(s) { - var images = ['76cfa6', '50e2c2', 'f4c371']; - var total = 0; - for (var i = 0; i < s.length; ++i) { + const images = ['76cfa6', '50e2c2', 'f4c371']; + let total = 0; + for (let i = 0; i < s.length; ++i) { total += s.charCodeAt(i); } return 'img/' + images[total % images.length] + '.png'; - } + }, }; diff --git a/src/BasePlatform.js b/src/BasePlatform.js index a920479823..5f8772c7aa 100644 --- a/src/BasePlatform.js +++ b/src/BasePlatform.js @@ -57,6 +57,7 @@ export default class BasePlatform { /** * Returns true if the platform supports displaying * notifications, otherwise false. + * @returns {boolean} whether the platform supports displaying notifications */ supportsNotifications(): boolean { return false; @@ -65,6 +66,7 @@ export default class BasePlatform { /** * Returns true if the application currently has permission * to display notifications. Otherwise false. + * @returns {boolean} whether the application has permission to display notifications */ maySendNotifications(): boolean { return false; diff --git a/src/CallHandler.js b/src/CallHandler.js index e3fbe9e5e3..8331d579df 100644 --- a/src/CallHandler.js +++ b/src/CallHandler.js @@ -143,7 +143,7 @@ function _setCallListeners(call) { pause("ringbackAudio"); play("busyAudio"); var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Call Timeout', ErrorDialog, { title: _t('Call Timeout'), description: _t('The remote side failed to pick up') + '.', }); @@ -205,7 +205,7 @@ function _onAction(payload) { _setCallState(undefined, newCall.roomId, "ended"); console.log("Can't capture screen: " + screenCapErrorString); const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, { title: _t('Unable to capture screen'), description: screenCapErrorString, }); @@ -225,7 +225,7 @@ function _onAction(payload) { case 'place_call': if (module.exports.getAnyActiveCall()) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, { title: _t('Existing Call'), description: _t('You are already in a call.'), }); @@ -235,7 +235,7 @@ function _onAction(payload) { // if the runtime env doesn't do VoIP, whine. if (!MatrixClientPeg.get().supportsVoip()) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, { title: _t('VoIP is unsupported'), description: _t('You cannot place VoIP calls in this browser.'), }); @@ -251,7 +251,7 @@ function _onAction(payload) { var members = room.getJoinedMembers(); if (members.length <= 1) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, { description: _t('You cannot place a call with yourself.'), }); return; @@ -277,13 +277,13 @@ function _onAction(payload) { console.log("Place conference call in %s", payload.room_id); if (!ConferenceHandler) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Conference call unsupported client', ErrorDialog, { description: _t('Conference calls are not supported in this client'), }); } else if (!MatrixClientPeg.get().supportsVoip()) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, { title: _t('VoIP is unsupported'), description: _t('You cannot place VoIP calls in this browser.'), }); @@ -296,13 +296,13 @@ function _onAction(payload) { // participant. // Therefore we disable conference calling in E2E rooms. const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Conference calls unsupported e2e', ErrorDialog, { description: _t('Conference calls are not supported in encrypted rooms'), }); } else { var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); - Modal.createDialog(QuestionDialog, { + Modal.createTrackedDialog('Call Handler', 'Conference calling in development', QuestionDialog, { title: _t('Warning!'), description: _t('Conference calling is in development and may not be reliable.'), onFinished: confirm=>{ @@ -314,7 +314,7 @@ function _onAction(payload) { }, function(err) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); console.error("Conference call failed: " + err); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Call Handler', 'Failed to set up conference call', ErrorDialog, { title: _t('Failed to set up conference call'), description: _t('Conference call failed.') + ' ' + ((err && err.message) ? err.message : ''), }); diff --git a/src/ComposerHistoryManager.js b/src/ComposerHistoryManager.js new file mode 100644 index 0000000000..2fff3882b4 --- /dev/null +++ b/src/ComposerHistoryManager.js @@ -0,0 +1,84 @@ +//@flow +/* +Copyright 2017 Aviral Dasgupta + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import {ContentState, convertToRaw, convertFromRaw} from 'draft-js'; +import * as RichText from './RichText'; +import Markdown from './Markdown'; +import _clamp from 'lodash/clamp'; + +type MessageFormat = 'html' | 'markdown'; + +class HistoryItem { + + // Keeping message for backwards-compatibility + message: string; + rawContentState: RawDraftContentState; + format: MessageFormat = 'html'; + + constructor(contentState: ?ContentState, format: ?MessageFormat) { + this.rawContentState = contentState ? convertToRaw(contentState) : null; + this.format = format; + } + + toContentState(outputFormat: MessageFormat): ContentState { + const contentState = convertFromRaw(this.rawContentState); + if (outputFormat === 'markdown') { + if (this.format === 'html') { + return ContentState.createFromText(RichText.stateToMarkdown(contentState)); + } + } else { + if (this.format === 'markdown') { + return RichText.htmlToContentState(new Markdown(contentState.getPlainText()).toHTML()); + } + } + // history item has format === outputFormat + return contentState; + } +} + +export default class ComposerHistoryManager { + history: Array = []; + prefix: string; + lastIndex: number = 0; + currentIndex: number = 0; + + constructor(roomId: string, prefix: string = 'mx_composer_history_') { + this.prefix = prefix + roomId; + + // TODO: Performance issues? + let item; + for(; item = sessionStorage.getItem(`${this.prefix}[${this.currentIndex}]`); this.currentIndex++) { + this.history.push( + Object.assign(new HistoryItem(), JSON.parse(item)), + ); + } + this.lastIndex = this.currentIndex; + } + + save(contentState: ContentState, format: MessageFormat) { + const item = new HistoryItem(contentState, format); + this.history.push(item); + this.currentIndex = this.lastIndex + 1; + sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item)); + } + + getItem(offset: number, format: MessageFormat): ?ContentState { + this.currentIndex = _clamp(this.currentIndex + offset, 0, this.lastIndex - 1); + const item = this.history[this.currentIndex]; + return item ? item.toContentState(format) : null; + } +} diff --git a/src/ContentMessages.js b/src/ContentMessages.js index 315c312b9f..93057fafed 100644 --- a/src/ContentMessages.js +++ b/src/ContentMessages.js @@ -16,7 +16,7 @@ limitations under the License. 'use strict'; -var q = require('q'); +import Promise from 'bluebird'; var extend = require('./extend'); var dis = require('./dispatcher'); var MatrixClientPeg = require('./MatrixClientPeg'); @@ -52,7 +52,7 @@ const MAX_HEIGHT = 600; * and a thumbnail key. */ function createThumbnail(element, inputWidth, inputHeight, mimeType) { - const deferred = q.defer(); + const deferred = Promise.defer(); var targetWidth = inputWidth; var targetHeight = inputHeight; @@ -95,7 +95,7 @@ function createThumbnail(element, inputWidth, inputHeight, mimeType) { * @return {Promise} A promise that resolves with the html image element. */ function loadImageElement(imageFile) { - const deferred = q.defer(); + const deferred = Promise.defer(); // Load the file into an html element const img = document.createElement("img"); @@ -154,7 +154,7 @@ function infoForImageFile(matrixClient, roomId, imageFile) { * @return {Promise} A promise that resolves with the video image element. */ function loadVideoElement(videoFile) { - const deferred = q.defer(); + const deferred = Promise.defer(); // Load the file into an html element const video = document.createElement("video"); @@ -210,7 +210,7 @@ function infoForVideoFile(matrixClient, roomId, videoFile) { * is read. */ function readFileAsArrayBuffer(file) { - const deferred = q.defer(); + const deferred = Promise.defer(); const reader = new FileReader(); reader.onload = function(e) { deferred.resolve(e.target.result); @@ -229,11 +229,13 @@ function readFileAsArrayBuffer(file) { * @param {MatrixClient} matrixClient The matrix client to upload the file with. * @param {String} roomId The ID of the room being uploaded to. * @param {File} file The file to upload. + * @param {Function?} progressHandler optional callback to be called when a chunk of + * data is uploaded. * @return {Promise} A promise that resolves with an object. * If the file is unencrypted then the object will have a "url" key. * If the file is encrypted then the object will have a "file" key. */ -function uploadFile(matrixClient, roomId, file) { +function uploadFile(matrixClient, roomId, file, progressHandler) { if (matrixClient.isRoomEncrypted(roomId)) { // If the room is encrypted then encrypt the file before uploading it. // First read the file into memory. @@ -245,7 +247,9 @@ function uploadFile(matrixClient, roomId, file) { const encryptInfo = encryptResult.info; // Pass the encrypted data as a Blob to the uploader. const blob = new Blob([encryptResult.data]); - return matrixClient.uploadContent(blob).then(function(url) { + return matrixClient.uploadContent(blob, { + progressHandler: progressHandler, + }).then(function(url) { // If the attachment is encrypted then bundle the URL along // with the information needed to decrypt the attachment and // add it under a file key. @@ -257,7 +261,9 @@ function uploadFile(matrixClient, roomId, file) { }); }); } else { - const basePromise = matrixClient.uploadContent(file); + const basePromise = matrixClient.uploadContent(file, { + progressHandler: progressHandler, + }); const promise1 = basePromise.then(function(url) { // If the attachment isn't encrypted then include the URL directly. return {"url": url}; @@ -288,7 +294,7 @@ class ContentMessages { content.info.mimetype = file.type; } - const def = q.defer(); + const def = Promise.defer(); if (file.type.indexOf('image/') == 0) { content.msgtype = 'm.image'; infoForImageFile(matrixClient, roomId, file).then(imageInfo=>{ @@ -326,23 +332,24 @@ class ContentMessages { dis.dispatch({action: 'upload_started'}); var error; + + function onProgress(ev) { + upload.total = ev.total; + upload.loaded = ev.loaded; + dis.dispatch({action: 'upload_progress', upload: upload}); + } + return def.promise.then(function() { // XXX: upload.promise must be the promise that // is returned by uploadFile as it has an abort() // method hacked onto it. upload.promise = uploadFile( - matrixClient, roomId, file + matrixClient, roomId, file, onProgress, ); return upload.promise.then(function(result) { content.file = result.file; content.url = result.url; }); - }).progress(function(ev) { - if (ev) { - upload.total = ev.total; - upload.loaded = ev.loaded; - dis.dispatch({action: 'upload_progress', upload: upload}); - } }).then(function(url) { return matrixClient.sendMessage(roomId, content); }, function(err) { @@ -353,7 +360,7 @@ class ContentMessages { desc = _t('The file \'%(fileName)s\' exceeds this home server\'s size limit for uploads', {fileName: upload.fileName}); } var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); - Modal.createDialog(ErrorDialog, { + Modal.createTrackedDialog('Upload failed', '', ErrorDialog, { title: _t('Upload Failed'), description: desc, }); diff --git a/src/DateUtils.js b/src/DateUtils.js index 545d92dd3b..78eef57eae 100644 --- a/src/DateUtils.js +++ b/src/DateUtils.js @@ -54,24 +54,25 @@ function pad(n) { function twelveHourTime(date) { let hours = date.getHours() % 12; const minutes = pad(date.getMinutes()); - const ampm = date.getHours() >= 12 ? 'PM' : 'AM'; - hours = pad(hours ? hours : 12); + const ampm = date.getHours() >= 12 ? _t('PM') : _t('AM'); + hours = hours ? hours : 12; // convert 0 -> 12 return `${hours}:${minutes}${ampm}`; } module.exports = { formatDate: function(date, showTwelveHour=false) { - var now = new Date(); + const now = new Date(); const days = getDaysArray(); const months = getMonthsArray(); if (date.toDateString() === now.toDateString()) { return this.formatTime(date); - } - else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) { + } else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) { // TODO: use standard date localize function provided in counterpart - return _t('%(weekDayName)s %(time)s', {weekDayName: days[date.getDay()], time: this.formatTime(date, showTwelveHour)}); - } - else if (now.getFullYear() === date.getFullYear()) { + return _t('%(weekDayName)s %(time)s', { + weekDayName: days[date.getDay()], + time: this.formatTime(date, showTwelveHour), + }); + } else if (now.getFullYear() === date.getFullYear()) { // TODO: use standard date localize function provided in counterpart return _t('%(weekDayName)s, %(monthName)s %(day)s %(time)s', { weekDayName: days[date.getDay()], diff --git a/src/Entities.js b/src/Entities.js index 7c3909f36f..21abd9c473 100644 --- a/src/Entities.js +++ b/src/Entities.js @@ -14,8 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -var React = require('react'); -var sdk = require('./index'); +import sdk from './index'; function isMatch(query, name, uid) { query = query.toLowerCase(); @@ -33,8 +32,8 @@ function isMatch(query, name, uid) { } // split spaces in name and try matching constituent parts - var parts = name.split(" "); - for (var i = 0; i < parts.length; i++) { + const parts = name.split(" "); + for (let i = 0; i < parts.length; i++) { if (parts[i].indexOf(query) === 0) { return true; } @@ -67,7 +66,7 @@ class Entity { class MemberEntity extends Entity { getJsx() { - var MemberTile = sdk.getComponent("rooms.MemberTile"); + const MemberTile = sdk.getComponent("rooms.MemberTile"); return ( ); @@ -84,6 +83,7 @@ class UserEntity extends Entity { super(model); this.showInviteButton = Boolean(showInviteButton); this.inviteFn = inviteFn; + this.onClick = this.onClick.bind(this); } onClick() { @@ -93,15 +93,15 @@ class UserEntity extends Entity { } getJsx() { - var UserTile = sdk.getComponent("rooms.UserTile"); + const UserTile = sdk.getComponent("rooms.UserTile"); return ( + showInviteButton={this.showInviteButton} onClick={this.onClick} /> ); } matches(queryString) { - var name = this.model.displayName || this.model.userId; + const name = this.model.displayName || this.model.userId; return isMatch(queryString, name, this.model.userId); } } @@ -109,7 +109,7 @@ class UserEntity extends Entity { module.exports = { newEntity: function(jsx, matchFn) { - var entity = new Entity(); + const entity = new Entity(); entity.getJsx = function() { return jsx; }; @@ -137,5 +137,5 @@ module.exports = { return users.map(function(u) { return new UserEntity(u, showInviteButton, inviteFn); }); - } + }, }; diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index aec32092ed..87e714083b 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -23,6 +23,7 @@ var linkifyMatrix = require('./linkify-matrix'); import escape from 'lodash/escape'; import emojione from 'emojione'; import classNames from 'classnames'; +import MatrixClientPeg from './MatrixClientPeg'; emojione.imagePathSVG = 'emojione/svg/'; // Store PNG path for displaying many flags at once (for increased performance over SVG) @@ -37,7 +38,7 @@ const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/; * because we want to include emoji shortnames in title text */ export function unicodeToImage(str) { - let replaceWith, unicode, alt; + let replaceWith, unicode, alt, short, fname; const mappedUnicode = emojione.mapUnicodeToShort(); str = str.replace(emojione.regUnicode, function(unicodeChar) { @@ -49,11 +50,14 @@ export function unicodeToImage(str) { // get the unicode codepoint from the actual char unicode = emojione.jsEscapeMap[unicodeChar]; + short = mappedUnicode[unicode]; + fname = emojione.emojioneList[short].fname; + // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname alt = (emojione.unicodeAlt) ? emojione.convert(unicode.toUpperCase()) : mappedUnicode[unicode]; const title = mappedUnicode[unicode]; - replaceWith = `${alt}`; + replaceWith = `${alt}`; return replaceWith; } }); @@ -84,7 +88,7 @@ export function charactersToImageNode(alt, useSvg, ...unicode) { } -export function stripParagraphs(html: string): string { +export function processHtmlForSending(html: string): string { const contentDiv = document.createElement('div'); contentDiv.innerHTML = html; @@ -93,10 +97,21 @@ export function stripParagraphs(html: string): string { } let contentHTML = ""; - for (let i=0; i'; + contentHTML += element.innerHTML; + // Don't add a
for the last

+ if (i !== contentDiv.children.length - 1) { + contentHTML += '
'; + } + } else if (element.tagName.toLowerCase() === 'pre') { + // Replace "
\n" with "\n" within `

` tags because the 
 is
+            // redundant. This is a workaround for a bug in draft-js-export-html:
+            //   https://github.com/sstur/draft-js-export-html/issues/62
+            contentHTML += '
' +
+                element.innerHTML.replace(/
\n/g, '\n').trim() +
+                '
';
         } else {
             const temp = document.createElement('div');
             temp.appendChild(element.cloneNode(true));
@@ -107,33 +122,39 @@ export function stripParagraphs(html: string): string {
     return contentHTML;
 }
 
-var sanitizeHtmlParams = {
+/*
+ * Given an untrusted HTML string, return a React node with an sanitized version
+ * of that HTML.
+ */
+export function sanitizedHtmlNode(insaneHtml) {
+    const saneHtml =  sanitizeHtml(insaneHtml, sanitizeHtmlParams);
+
+    return 
;
+}
+
+const sanitizeHtmlParams = {
     allowedTags: [
         'font', // custom to matrix for IRC-style font coloring
         'del', // for markdown
         'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
         'nl', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
-        'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span',
+        'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span', 'img',
     ],
     allowedAttributes: {
         // custom ones first:
         font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         span: ['data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
-        // We don't currently allow img itself by default, but this
-        // would make sense if we did
-        img: ['src'],
+        img: ['src', 'width', 'height', 'alt', 'title'],
         ol: ['start'],
+        code: ['class'], // We don't actually allow all classes, we filter them in transformTags
     },
     // Lots of these won't come up by default because we don't allow them
     selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
     // URL schemes we permit
     allowedSchemes: ['http', 'https', 'ftp', 'mailto'],
 
-    // DO NOT USE. sanitize-html allows all URL starting with '//'
-    // so this will always allow links to whatever scheme the
-    // host page is served over.
-    allowedSchemesByTag: {},
+    allowProtocolRelative: false,
 
     transformTags: { // custom to matrix
         // add blank targets to all hyperlinks except vector URLs
@@ -165,6 +186,33 @@ var sanitizeHtmlParams = {
             attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
             return { tagName: tagName, attribs : attribs };
         },
+        'img': function(tagName, attribs) {
+            // Strip out imgs that aren't `mxc` here instead of using allowedSchemesByTag
+            // because transformTags is used _before_ we filter by allowedSchemesByTag and
+            // we don't want to allow images with `https?` `src`s.
+            if (!attribs.src.startsWith('mxc://')) {
+                return { tagName, attribs: {}};
+            }
+            attribs.src = MatrixClientPeg.get().mxcUrlToHttp(
+                attribs.src,
+                attribs.width || 800,
+                attribs.height || 600,
+            );
+            return { tagName: tagName, attribs: attribs };
+        },
+        'code': function(tagName, attribs) {
+            if (typeof attribs.class !== 'undefined') {
+                // Filter out all classes other than ones starting with language- for syntax highlighting.
+                let classes = attribs.class.split(/\s+/).filter(function(cl) {
+                    return cl.startsWith('language-');
+                });
+                attribs.class = classes.join(' ');
+            }
+            return {
+                tagName: tagName,
+                attribs: attribs,
+            };
+        },
         '*': function(tagName, attribs) {
             // Delete any style previously assigned, style is an allowedTag for font and span
             // because attributes are stripped after transforming
diff --git a/src/KeyCode.js b/src/KeyCode.js
index 28aafc00cb..ec5595b71b 100644
--- a/src/KeyCode.js
+++ b/src/KeyCode.js
@@ -21,6 +21,7 @@ module.exports = {
     ENTER: 13,
     SHIFT: 16,
     ESCAPE: 27,
+    SPACE: 32,
     PAGE_UP: 33,
     PAGE_DOWN: 34,
     END: 35,
@@ -30,7 +31,30 @@ module.exports = {
     RIGHT: 39,
     DOWN: 40,
     DELETE: 46,
+    KEY_A: 65,
+    KEY_B: 66,
+    KEY_C: 67,
     KEY_D: 68,
     KEY_E: 69,
+    KEY_F: 70,
+    KEY_G: 71,
+    KEY_H: 72,
+    KEY_I: 73,
+    KEY_J: 74,
+    KEY_K: 75,
+    KEY_L: 76,
     KEY_M: 77,
+    KEY_N: 78,
+    KEY_O: 79,
+    KEY_P: 80,
+    KEY_Q: 81,
+    KEY_R: 82,
+    KEY_S: 83,
+    KEY_T: 84,
+    KEY_U: 85,
+    KEY_V: 86,
+    KEY_W: 87,
+    KEY_X: 88,
+    KEY_Y: 89,
+    KEY_Z: 90,
 };
diff --git a/src/KeyRequestHandler.js b/src/KeyRequestHandler.js
index 1da4922153..0b54d88e5f 100644
--- a/src/KeyRequestHandler.js
+++ b/src/KeyRequestHandler.js
@@ -125,7 +125,7 @@ export default class KeyRequestHandler {
         };
 
         const KeyShareDialog = sdk.getComponent("dialogs.KeyShareDialog");
-        Modal.createDialog(KeyShareDialog, {
+        Modal.createTrackedDialog('Key Share', 'Process Next Request', KeyShareDialog, {
             matrixClient: this._matrixClient,
             userId: userId,
             deviceId: deviceId,
diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 06f5d9ef00..4d8911f7a6 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import q from 'q';
+import Promise from 'bluebird';
 import Matrix from 'matrix-js-sdk';
 
 import MatrixClientPeg from './MatrixClientPeg';
@@ -116,12 +116,12 @@ export function loadSession(opts) {
  */
 export function attemptTokenLogin(queryParams, defaultDeviceDisplayName) {
     if (!queryParams.loginToken) {
-        return q(false);
+        return Promise.resolve(false);
     }
 
     if (!queryParams.homeserver) {
         console.warn("Cannot log in with token: can't determine HS URL to use");
-        return q(false);
+        return Promise.resolve(false);
     }
 
     // create a temporary MatrixClient to do the login
@@ -197,7 +197,7 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
 //      localStorage (e.g. teamToken, isGuest etc.)
 function _restoreFromLocalStorage() {
     if (!localStorage) {
-        return q(false);
+        return Promise.resolve(false);
     }
     const hsUrl = localStorage.getItem("mx_hs_url");
     const isUrl = localStorage.getItem("mx_is_url") || 'https://matrix.org';
@@ -229,18 +229,18 @@ function _restoreFromLocalStorage() {
         }
     } else {
         console.log("No previous session found.");
-        return q(false);
+        return Promise.resolve(false);
     }
 }
 
 function _handleRestoreFailure(e) {
     console.log("Unable to restore session", e);
 
-    const def = q.defer();
+    const def = Promise.defer();
     const SessionRestoreErrorDialog =
           sdk.getComponent('views.dialogs.SessionRestoreErrorDialog');
 
-    Modal.createDialog(SessionRestoreErrorDialog, {
+    Modal.createTrackedDialog('Session Restore Error', '', SessionRestoreErrorDialog, {
         error: e.message,
         onFinished: (success) => {
             def.resolve(success);
@@ -309,13 +309,16 @@ async function _doSetLoggedIn(credentials, clearStorage) {
     // because `teamPromise` may take some time to resolve, breaking the assumption that
     // `setLoggedIn` takes an "instant" to complete, and dispatch `on_logged_in` a few ms
     // later than MatrixChat might assume.
-    dis.dispatch({action: 'on_logging_in'});
+    //
+    // we fire it *synchronously* to make sure it fires before on_logged_in.
+    // (dis.dispatch uses `setTimeout`, which does not guarantee ordering.)
+    dis.dispatch({action: 'on_logging_in'}, true);
 
     if (clearStorage) {
         await _clearStorage();
     }
 
-    Analytics.setGuest(credentials.guest);
+    Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl, credentials.identityServerUrl);
 
     // Resolves by default
     let teamPromise = Promise.resolve(null);
@@ -344,6 +347,9 @@ async function _doSetLoggedIn(credentials, clearStorage) {
                     localStorage.setItem("mx_team_token", body.team_token);
                 }
                 return body.team_token;
+            }, (err) => {
+                console.warn(`Failed to get team token on login: ${err}` );
+                return null;
             });
         }
     } else {
@@ -354,9 +360,6 @@ async function _doSetLoggedIn(credentials, clearStorage) {
 
     teamPromise.then((teamToken) => {
         dis.dispatch({action: 'on_logged_in', teamToken: teamToken});
-    }, (err) => {
-        console.warn("Failed to get team token on login", err);
-        dis.dispatch({action: 'on_logged_in', teamToken: null});
     });
 
     startMatrixClient();
@@ -419,6 +422,8 @@ export function logout() {
  * listen for events while a session is logged in.
  */
 function startMatrixClient() {
+    console.log(`Lifecycle: Starting MatrixClient`);
+
     // dispatch this before starting the matrix client: it's used
     // to add listeners for the 'sync' event so otherwise we'd have
     // a race condition (and we need to dispatch synchronously for this
diff --git a/src/Login.js b/src/Login.js
index 8225509919..049b79c2f4 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -18,7 +18,7 @@ limitations under the License.
 import Matrix from "matrix-js-sdk";
 import { _t } from "./languageHandler";
 
-import q from 'q';
+import Promise from 'bluebird';
 import url from 'url';
 
 export default class Login {
@@ -144,7 +144,7 @@ export default class Login {
 
         const client = this._createTemporaryClient();
         return client.login('m.login.password', loginParams).then(function(data) {
-            return q({
+            return Promise.resolve({
                 homeserverUrl: self._hsUrl,
                 identityServerUrl: self._isUrl,
                 userId: data.user_id,
@@ -160,7 +160,7 @@ export default class Login {
                     });
 
                     return fbClient.login('m.login.password', loginParams).then(function(data) {
-                        return q({
+                        return Promise.resolve({
                             homeserverUrl: self._fallbackHsUrl,
                             identityServerUrl: self._isUrl,
                             userId: data.user_id,
diff --git a/src/Markdown.js b/src/Markdown.js
index 4a46ce4f24..6e735c6f0e 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -17,7 +17,7 @@ limitations under the License.
 import commonmark from 'commonmark';
 import escape from 'lodash/escape';
 
-const ALLOWED_HTML_TAGS = ['del'];
+const ALLOWED_HTML_TAGS = ['del', 'u'];
 
 // These types of node are definitely text
 const TEXT_NODES = ['text', 'softbreak', 'linebreak', 'paragraph', 'document'];
@@ -55,6 +55,25 @@ function is_multi_line(node) {
     return par.firstChild != par.lastChild;
 }
 
+import linkifyMatrix from './linkify-matrix';
+import * as linkify from 'linkifyjs';
+linkifyMatrix(linkify);
+
+// Thieved from draft-js-export-markdown
+function escapeMarkdown(s) {
+    return s.replace(/[*_`]/g, '\\$&');
+}
+
+// Replace URLs, room aliases and user IDs with md-escaped URLs
+function linkifyMarkdown(s) {
+    const links = linkify.find(s);
+    links.forEach((l) => {
+        // This may replace several instances of `l.value` at once, but that's OK
+        s = s.replace(l.value, escapeMarkdown(l.value));
+    });
+    return s;
+}
+
 /**
  * Class that wraps commonmark, adding the ability to see whether
  * a given message actually uses any markdown syntax or whether
@@ -62,7 +81,7 @@ function is_multi_line(node) {
  */
 export default class Markdown {
     constructor(input) {
-        this.input = input;
+        this.input = linkifyMarkdown(input);
 
         const parser = new commonmark.Parser();
         this.parsed = parser.parse(this.input);
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 0676e4600f..4264828c7b 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -77,22 +77,38 @@ class MatrixClientPeg {
         this._createClient(creds);
     }
 
-    start() {
+    async start() {
+        // try to initialise e2e on the new client
+        try {
+            // check that we have a version of the js-sdk which includes initCrypto
+            if (this.matrixClient.initCrypto) {
+                await this.matrixClient.initCrypto();
+            }
+        } catch(e) {
+            // this can happen for a number of reasons, the most likely being
+            // that the olm library was missing. It's not fatal.
+            console.warn("Unable to initialise e2e: " + e);
+        }
+
         const opts = utils.deepCopy(this.opts);
         // the react sdk doesn't work without this, so don't allow
         opts.pendingEventOrdering = "detached";
 
-        let promise = this.matrixClient.store.startup();
-        // log any errors when starting up the database (if one exists)
-        promise.catch((err) => {
+        try {
+            let promise = this.matrixClient.store.startup();
+            console.log(`MatrixClientPeg: waiting for MatrixClient store to initialise`);
+            await promise;
+        } catch(err) {
+            // log any errors when starting up the database (if one exists)
             console.error(`Error starting matrixclient store: ${err}`);
-        });
+        }
 
         // regardless of errors, start the client. If we did error out, we'll
         // just end up doing a full initial /sync.
-        promise.finally(() => {
-            this.get().startClient(opts);
-        });
+
+        console.log(`MatrixClientPeg: really starting MatrixClient`);
+        this.get().startClient(opts);
+        console.log(`MatrixClientPeg: MatrixClient started`);
     }
 
     getCredentials(): MatrixClientCreds {
diff --git a/src/Modal.js b/src/Modal.js
index e100105a88..79fcaaefd1 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -103,13 +103,20 @@ class ModalManager {
         return container;
     }
 
+    createTrackedDialog(analyticsAction, analyticsInfo, Element, props, className) {
+        Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
+        return this.createDialog(Element, props, className);
+    }
+
     createDialog(Element, props, className) {
-        if (props && props.title) {
-            Analytics.trackEvent('Modal', props.title, 'createDialog');
-        }
         return this.createDialogAsync((cb) => {cb(Element);}, props, className);
     }
 
+    createTrackedDialogAsync(analyticsId, loader, props, className) {
+        Analytics.trackEvent('Modal', analyticsId);
+        return this.createDialogAsync(loader, props, className);
+    }
+
     /**
      * Open a modal view.
      *
diff --git a/src/Notifier.js b/src/Notifier.js
index 40a65d4106..1bb435307d 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -142,7 +142,7 @@ const Notifier = {
                         ? _t('Riot does not have permission to send you notifications - please check your browser settings')
                         : _t('Riot was not given permission to send notifications - please try again');
                     const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Unable to enable Notifications', result, ErrorDialog, {
                         title: _t('Unable to enable Notifications'),
                         description,
                     });
diff --git a/src/ObjectUtils.js b/src/ObjectUtils.js
index 5fac588a4f..07d8b465af 100644
--- a/src/ObjectUtils.js
+++ b/src/ObjectUtils.js
@@ -23,8 +23,8 @@ limitations under the License.
  * { key: $KEY, val: $VALUE, place: "add|del" }
  */
 module.exports.getKeyValueArrayDiffs = function(before, after) {
-    var results = [];
-    var delta = {};
+    const results = [];
+    const delta = {};
     Object.keys(before).forEach(function(beforeKey) {
         delta[beforeKey] = delta[beforeKey] || 0; // init to 0 initially
         delta[beforeKey]--; // keys present in the past have -ve values
@@ -46,9 +46,9 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
                     results.push({ place: "del", key: muxedKey, val: beforeVal });
                 });
                 break;
-            case 0: // A mix of added/removed keys
+            case 0: {// A mix of added/removed keys
                 // compare old & new vals
-                var itemDelta = {};
+                const itemDelta = {};
                 before[muxedKey].forEach(function(beforeVal) {
                     itemDelta[beforeVal] = itemDelta[beforeVal] || 0;
                     itemDelta[beforeVal]--;
@@ -68,9 +68,9 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
                     }
                 });
                 break;
+            }
             default:
-                console.error("Calculated key delta of " + delta[muxedKey] +
-                              " - this should never happen!");
+                console.error("Calculated key delta of " + delta[muxedKey] + " - this should never happen!");
                 break;
         }
     });
@@ -79,8 +79,10 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
 };
 
 /**
- * Shallow-compare two objects for equality: each key and value must be
- * identical
+ * Shallow-compare two objects for equality: each key and value must be identical
+ * @param {Object} objA First object to compare against the second
+ * @param {Object} objB Second object to compare against the first
+ * @return {boolean} whether the two objects have same key=values
  */
 module.exports.shallowEqual = function(objA, objB) {
     if (objA === objB) {
@@ -92,15 +94,15 @@ module.exports.shallowEqual = function(objA, objB) {
         return false;
     }
 
-    var keysA = Object.keys(objA);
-    var keysB = Object.keys(objB);
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
 
     if (keysA.length !== keysB.length) {
         return false;
     }
 
-    for (var i = 0; i < keysA.length; i++) {
-        var key = keysA[i];
+    for (let i = 0; i < keysA.length; i++) {
+        const key = keysA[i];
         if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
             return false;
         }
diff --git a/src/PageTypes.js b/src/PageTypes.js
index d87b363a6f..66d930c288 100644
--- a/src/PageTypes.js
+++ b/src/PageTypes.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,4 +23,6 @@ export default {
     CreateRoom: "create_room",
     RoomDirectory: "room_directory",
     UserView: "user_view",
+    GroupView: "group_view",
+    MyGroups: "my_groups",
 };
diff --git a/src/PasswordReset.js b/src/PasswordReset.js
index 0739ca0a24..71fc4f6b31 100644
--- a/src/PasswordReset.js
+++ b/src/PasswordReset.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var Matrix = require("matrix-js-sdk");
+import * as Matrix from 'matrix-js-sdk';
 import { _t } from './languageHandler';
 
 /**
@@ -34,7 +34,7 @@ class PasswordReset {
     constructor(homeserverUrl, identityUrl) {
         this.client = Matrix.createClient({
             baseUrl: homeserverUrl,
-            idBaseUrl: identityUrl
+            idBaseUrl: identityUrl,
         });
         this.clientSecret = this.client.generateClientSecret();
         this.identityServerDomain = identityUrl.split("://")[1];
@@ -53,7 +53,7 @@ class PasswordReset {
             this.sessionId = res.sid;
             return res;
         }, function(err) {
-            if (err.errcode == 'M_THREEPID_NOT_FOUND') {
+            if (err.errcode === 'M_THREEPID_NOT_FOUND') {
                  err.message = _t('This email address was not found');
             } else if (err.httpStatus) {
                 err.message = err.message + ` (Status ${err.httpStatus})`;
@@ -75,16 +75,15 @@ class PasswordReset {
             threepid_creds: {
                 sid: this.sessionId,
                 client_secret: this.clientSecret,
-                id_server: this.identityServerDomain
-            }
+                id_server: this.identityServerDomain,
+            },
         }, this.password).catch(function(err) {
             if (err.httpStatus === 401) {
                 err.message = _t('Failed to verify email address: make sure you clicked the link in the email');
-            }
-            else if (err.httpStatus === 404) {
-                err.message = _t('Your email address does not appear to be associated with a Matrix ID on this Homeserver.');
-            }
-            else if (err.httpStatus) {
+            } else if (err.httpStatus === 404) {
+                err.message =
+                    _t('Your email address does not appear to be associated with a Matrix ID on this Homeserver.');
+            } else if (err.httpStatus) {
                 err.message += ` (Status ${err.httpStatus})`;
             }
             throw err;
diff --git a/src/Resend.js b/src/Resend.js
index bbd980ea7f..1fee5854ea 100644
--- a/src/Resend.js
+++ b/src/Resend.js
@@ -14,10 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var MatrixClientPeg = require('./MatrixClientPeg');
-var dis = require('./dispatcher');
-var sdk = require('./index');
-var Modal = require('./Modal');
+import MatrixClientPeg from './MatrixClientPeg';
+import dis from './dispatcher';
 import { EventStatus } from 'matrix-js-sdk';
 
 module.exports = {
@@ -37,12 +35,10 @@ module.exports = {
     },
     resend: function(event) {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
-        MatrixClientPeg.get().resendEvent(
-            event, room
-        ).done(function(res) {
+        MatrixClientPeg.get().resendEvent(event, room).done(function(res) {
             dis.dispatch({
                 action: 'message_sent',
-                event: event
+                event: event,
             });
         }, function(err) {
             // XXX: temporary logging to try to diagnose
@@ -58,7 +54,7 @@ module.exports = {
 
             dis.dispatch({
                 action: 'message_send_failed',
-                event: event
+                event: event,
             });
         });
     },
@@ -66,7 +62,7 @@ module.exports = {
         MatrixClientPeg.get().cancelPendingEvent(event);
         dis.dispatch({
             action: 'message_send_cancelled',
-            event: event
+            event: event,
         });
     },
 };
diff --git a/src/RichText.js b/src/RichText.js
index b1793d0ddf..cbd3b9ae18 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -16,6 +16,7 @@ import * as sdk from './index';
 import * as emojione from 'emojione';
 import {stateToHTML} from 'draft-js-export-html';
 import {SelectionRange} from "./autocomplete/Autocompleter";
+import {stateToMarkdown as __stateToMarkdown} from 'draft-js-export-markdown';
 
 const MARKDOWN_REGEX = {
     LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
@@ -30,10 +31,28 @@ const USERNAME_REGEX = /@\S+:\S+/g;
 const ROOM_REGEX = /#\S+:\S+/g;
 const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp, 'g');
 
-export const contentStateToHTML = stateToHTML;
+const ZWS_CODE = 8203;
+const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
+export function stateToMarkdown(state) {
+    return __stateToMarkdown(state)
+        .replace(
+            ZWS, // draft-js-export-markdown adds these
+            ''); // this is *not* a zero width space, trust me :)
+}
 
-export function HTMLtoContentState(html: string): ContentState {
-    return ContentState.createFromBlockArray(convertFromHTML(html));
+export const contentStateToHTML = (contentState: ContentState) => {
+    return stateToHTML(contentState, {
+        inlineStyles: {
+            UNDERLINE: {
+                element: 'u'
+            }
+        }
+    });
+};
+
+export function htmlToContentState(html: string): ContentState {
+    const blockArray = convertFromHTML(html).contentBlocks;
+    return ContentState.createFromBlockArray(blockArray);
 }
 
 function unicodeToEmojiUri(str) {
@@ -72,7 +91,7 @@ function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: numb
 
 // Workaround for https://github.com/facebook/draft-js/issues/414
 let emojiDecorator = {
-    strategy: (contentBlock, callback) => {
+    strategy: (contentState, contentBlock, callback) => {
         findWithRegex(EMOJI_REGEX, contentBlock, callback);
     },
     component: (props) => {
@@ -95,38 +114,13 @@ let emojiDecorator = {
  * Returns a composite decorator which has access to provided scope.
  */
 export function getScopedRTDecorators(scope: any): CompositeDecorator {
-    let MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-
-    let usernameDecorator = {
-        strategy: (contentBlock, callback) => {
-            findWithRegex(USERNAME_REGEX, contentBlock, callback);
-        },
-        component: (props) => {
-            let member = scope.room.getMember(props.children[0].props.text);
-            // unused until we make these decorators immutable (autocomplete needed)
-            let name = member ? member.name : null;
-            let avatar = member ?  : null;
-            return {avatar}{props.children};
-        }
-    };
-
-    let roomDecorator = {
-        strategy: (contentBlock, callback) => {
-            findWithRegex(ROOM_REGEX, contentBlock, callback);
-        },
-        component: (props) => {
-            return {props.children};
-        }
-    };
-
-    // TODO Re-enable usernameDecorator and roomDecorator
     return [emojiDecorator];
 }
 
 export function getScopedMDDecorators(scope: any): CompositeDecorator {
     let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map(
         (style) => ({
-            strategy: (contentBlock, callback) => {
+            strategy: (contentState, contentBlock, callback) => {
                 return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
             },
             component: (props) => (
@@ -137,7 +131,7 @@ export function getScopedMDDecorators(scope: any): CompositeDecorator {
         }));
 
     markdownDecorators.push({
-        strategy: (contentBlock, callback) => {
+        strategy: (contentState, contentBlock, callback) => {
             return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback);
         },
         component: (props) => (
@@ -146,9 +140,9 @@ export function getScopedMDDecorators(scope: any): CompositeDecorator {
             
         )
     });
-    markdownDecorators.push(emojiDecorator);
-
-    return markdownDecorators;
+    // markdownDecorators.push(emojiDecorator);
+    // TODO Consider renabling "syntax highlighting" when we can do it properly
+    return [emojiDecorator];
 }
 
 /**
@@ -208,31 +202,36 @@ export function selectionStateToTextOffsets(selectionState: SelectionState,
 export function textOffsetsToSelectionState({start, end}: SelectionRange,
                                             contentBlocks: Array): SelectionState {
     let selectionState = SelectionState.createEmpty();
-
-    for (let block of contentBlocks) {
-        let blockLength = block.getLength();
-
-        if (start !== -1 && start < blockLength) {
-            selectionState = selectionState.merge({
-                anchorKey: block.getKey(),
-                anchorOffset: start,
-            });
-            start = -1;
-        } else {
-            start -= blockLength;
+    // Subtract block lengths from `start` and `end` until they are less than the current
+    // block length (accounting for the NL at the end of each block). Set them to -1 to
+    // indicate that the corresponding selection state has been determined.
+    for (const block of contentBlocks) {
+        const blockLength = block.getLength();
+        // -1 indicating that the position start position has been found
+        if (start !== -1) {
+            if (start < blockLength + 1) {
+                selectionState = selectionState.merge({
+                    anchorKey: block.getKey(),
+                    anchorOffset: start,
+                });
+                start = -1; // selection state for the start calculated
+            } else {
+                start -= blockLength + 1; // +1 to account for newline between blocks
+            }
         }
-
-        if (end !== -1 && end <= blockLength) {
-            selectionState = selectionState.merge({
-                focusKey: block.getKey(),
-                focusOffset: end,
-            });
-            end = -1;
-        } else {
-            end -= blockLength;
+        // -1 indicating that the position end position has been found
+        if (end !== -1) {
+            if (end < blockLength + 1) {
+                selectionState = selectionState.merge({
+                    focusKey: block.getKey(),
+                    focusOffset: end,
+                });
+                end = -1; // selection state for the end calculated
+            } else {
+                end -= blockLength + 1; // +1 to account for newline between blocks
+            }
         }
     }
-
     return selectionState;
 }
 
@@ -249,7 +248,7 @@ export function attachImmutableEntitiesToEmoji(editorState: EditorState): Editor
             const existingEntityKey = block.getEntityAt(start);
             if (existingEntityKey) {
                 // avoid manipulation in case the emoji already has an entity
-                const entity = Entity.get(existingEntityKey);
+                const entity = newContentState.getEntity(existingEntityKey);
                 if (entity && entity.get('type') === 'emoji') {
                     return;
                 }
@@ -259,7 +258,10 @@ export function attachImmutableEntitiesToEmoji(editorState: EditorState): Editor
                 .set('anchorOffset', start)
                 .set('focusOffset', end);
             const emojiText = plainText.substring(start, end);
-            const entityKey = Entity.create('emoji', 'IMMUTABLE', { emojiUnicode: emojiText });
+            newContentState = newContentState.createEntity(
+                'emoji', 'IMMUTABLE', { emojiUnicode: emojiText }
+            );
+            const entityKey = newContentState.getLastCreatedEntityKey();
             newContentState = Modifier.replaceText(
                 newContentState,
                 selection,
@@ -286,3 +288,14 @@ export function attachImmutableEntitiesToEmoji(editorState: EditorState): Editor
 
     return editorState;
 }
+
+export function hasMultiLineSelection(editorState: EditorState): boolean {
+    const selectionState = editorState.getSelection();
+    const anchorKey = selectionState.getAnchorKey();
+    const currentContent = editorState.getCurrentContent();
+    const currentContentBlock = currentContent.getBlockForKey(anchorKey);
+    const start = selectionState.getStartOffset();
+    const end = selectionState.getEndOffset();
+    const selectedText = currentContentBlock.getText().slice(start, end);
+    return selectedText.includes('\n');
+}
diff --git a/src/Roles.js b/src/Roles.js
index 8c1f711bbe..83d8192c67 100644
--- a/src/Roles.js
+++ b/src/Roles.js
@@ -19,7 +19,7 @@ export function levelRoleMap() {
     return {
         undefined: _t('Default'),
         0: _t('User'),
-        50:  _t('Moderator'),
+        50: _t('Moderator'),
         100: _t('Admin'),
     };
 }
diff --git a/src/RoomListSorter.js b/src/RoomListSorter.js
index 7a43c1891e..c06cc60c97 100644
--- a/src/RoomListSorter.js
+++ b/src/RoomListSorter.js
@@ -19,8 +19,7 @@ limitations under the License.
 function tsOfNewestEvent(room) {
     if (room.timeline.length) {
         return room.timeline[room.timeline.length - 1].getTs();
-    }
-    else {
+    } else {
         return Number.MAX_SAFE_INTEGER;
     }
 }
@@ -32,5 +31,5 @@ function mostRecentActivityFirst(roomList) {
 }
 
 module.exports = {
-    mostRecentActivityFirst: mostRecentActivityFirst
+    mostRecentActivityFirst,
 };
diff --git a/src/RoomNotifs.js b/src/RoomNotifs.js
index 7cb7d4b9de..5cc078dc59 100644
--- a/src/RoomNotifs.js
+++ b/src/RoomNotifs.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import MatrixClientPeg from './MatrixClientPeg';
 import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
-import q from 'q';
+import Promise from 'bluebird';
 
 export const ALL_MESSAGES_LOUD = 'all_messages_loud';
 export const ALL_MESSAGES = 'all_messages';
@@ -52,7 +52,7 @@ export function getRoomNotifsState(roomId) {
 }
 
 export function setRoomNotifsState(roomId, newState) {
-    if (newState == MUTE) {
+    if (newState === MUTE) {
         return setRoomNotifsStateMuted(roomId);
     } else {
         return setRoomNotifsStateUnmuted(roomId, newState);
@@ -80,14 +80,14 @@ function setRoomNotifsStateMuted(roomId) {
                 kind: 'event_match',
                 key: 'room_id',
                 pattern: roomId,
-            }
+            },
         ],
         actions: [
             'dont_notify',
-        ]
+        ],
     }));
 
-    return q.all(promises);
+    return Promise.all(promises);
 }
 
 function setRoomNotifsStateUnmuted(roomId, newState) {
@@ -99,16 +99,16 @@ function setRoomNotifsStateUnmuted(roomId, newState) {
         promises.push(cli.deletePushRule('global', 'override', overrideMuteRule.rule_id));
     }
 
-    if (newState == 'all_messages') {
+    if (newState === 'all_messages') {
         const roomRule = cli.getRoomPushRule('global', roomId);
         if (roomRule) {
             promises.push(cli.deletePushRule('global', 'room', roomRule.rule_id));
         }
-    } else if (newState == 'mentions_only') {
+    } else if (newState === 'mentions_only') {
         promises.push(cli.addPushRule('global', 'room', roomId, {
             actions: [
                 'dont_notify',
-            ]
+            ],
         }));
         // https://matrix.org/jira/browse/SPEC-400
         promises.push(cli.setPushRuleEnabled('global', 'room', roomId, true));
@@ -119,14 +119,14 @@ function setRoomNotifsStateUnmuted(roomId, newState) {
                 {
                     set_tweak: 'sound',
                     value: 'default',
-                }
-            ]
+                },
+            ],
         }));
         // https://matrix.org/jira/browse/SPEC-400
         promises.push(cli.setPushRuleEnabled('global', 'room', roomId, true));
     }
 
-    return q.all(promises);
+    return Promise.all(promises);
 }
 
 function findOverrideMuteRule(roomId) {
@@ -145,20 +145,10 @@ function isRuleForRoom(roomId, rule) {
         return false;
     }
     const cond = rule.conditions[0];
-    if (
-        cond.kind == 'event_match' &&
-        cond.key == 'room_id' &&
-        cond.pattern == roomId
-    ) {
-        return true;
-    }
-    return false;
+    return (cond.kind === 'event_match' && cond.key === 'room_id' && cond.pattern === roomId);
 }
 
 function isMuteRule(rule) {
-    return (
-        rule.actions.length == 1 &&
-        rule.actions[0] == 'dont_notify'
-    );
+    return (rule.actions.length === 1 && rule.actions[0] === 'dont_notify');
 }
 
diff --git a/src/Rooms.js b/src/Rooms.js
index 3ac7c68533..2e3f4457f0 100644
--- a/src/Rooms.js
+++ b/src/Rooms.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import MatrixClientPeg from './MatrixClientPeg';
-import q from 'q';
+import Promise from 'bluebird';
 
 /**
  * Given a room object, return the alias we should use for it,
@@ -102,7 +102,7 @@ export function guessAndSetDMRoom(room, isDirect) {
  */
 export function setDMRoom(roomId, userId) {
     if (MatrixClientPeg.get().isGuest()) {
-        return q();
+        return Promise.resolve();
     }
 
     const mDirectEvent = MatrixClientPeg.get().getAccountData('m.direct');
diff --git a/src/ScalarAuthClient.js b/src/ScalarAuthClient.js
index e1928e15d4..b1d17b93a9 100644
--- a/src/ScalarAuthClient.js
+++ b/src/ScalarAuthClient.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var q = require("q");
+import Promise from 'bluebird';
 var request = require('browser-request');
 
 var SdkConfig = require('./SdkConfig');
@@ -39,7 +39,7 @@ class ScalarAuthClient {
     // Returns a scalar_token string
     getScalarToken() {
         var tok = window.localStorage.getItem("mx_scalar_token");
-        if (tok) return q(tok);
+        if (tok) return Promise.resolve(tok);
 
         // No saved token, so do the dance to get one. First, we
         // need an openid bearer token from the HS.
@@ -53,7 +53,7 @@ class ScalarAuthClient {
     }
 
     exchangeForScalarToken(openid_token_object) {
-        var defer = q.defer();
+        var defer = Promise.defer();
 
         var scalar_rest_url = SdkConfig.get().integrations_rest_url;
         request({
@@ -76,10 +76,13 @@ class ScalarAuthClient {
         return defer.promise;
     }
 
-    getScalarInterfaceUrlForRoom(roomId) {
+    getScalarInterfaceUrlForRoom(roomId, screen) {
         var url = SdkConfig.get().integrations_ui_url;
         url += "?scalar_token=" + encodeURIComponent(this.scalarToken);
         url += "&room_id=" + encodeURIComponent(roomId);
+        if (screen) {
+            url += '&screen=' + encodeURIComponent(screen);
+        }
         return url;
     }
 
@@ -89,4 +92,3 @@ class ScalarAuthClient {
 }
 
 module.exports = ScalarAuthClient;
-
diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index c1b975e8e8..d14d439d66 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,7 +18,7 @@ limitations under the License.
 /*
 Listens for incoming postMessage requests from the integrations UI URL. The following API is exposed:
 {
-    action: "invite" | "membership_state" | "bot_options" | "set_bot_options",
+    action: "invite" | "membership_state" | "bot_options" | "set_bot_options" | etc... ,
     room_id: $ROOM_ID,
     user_id: $USER_ID
     // additional request fields
@@ -109,6 +110,99 @@ Example:
     response: 78
 }
 
+can_send_event
+--------------
+Check if the client can send the given event into the given room. If the client
+is unable to do this, an error response is returned instead of 'response: false'.
+
+Request:
+ - room_id is the room to do the check in.
+ - event_type is the event type which will be sent.
+ - is_state is true if the event to be sent is a state event.
+Response:
+true
+Example:
+{
+    action: "can_send_event",
+    is_state: false,
+    event_type: "m.room.message",
+    room_id: "!foo:bar",
+    response: true
+}
+
+set_widget
+----------
+Set a new widget in the room. Clobbers based on the ID.
+
+Request:
+ - `room_id` (String) is the room to set the widget in.
+ - `widget_id` (String) is the ID of the widget to add (or replace if it already exists).
+   It can be an arbitrary UTF8 string and is purely for distinguishing between widgets.
+ - `url` (String) is the URL that clients should load in an iframe to run the widget.
+   All widgets must have a valid URL. If the URL is `null` (not `undefined`), the
+   widget will be removed from the room.
+ - `type` (String) is the type of widget, which is provided as a hint for matrix clients so they
+   can configure/lay out the widget in different ways. All widgets must have a type.
+ - `name` (String) is an optional human-readable string about the widget.
+ - `data` (Object) is some optional data about the widget, and can contain arbitrary key/value pairs.
+Response:
+{
+    success: true
+}
+Example:
+{
+    action: "set_widget",
+    room_id: "!foo:bar",
+    widget_id: "abc123",
+    url: "http://widget.url",
+    type: "example",
+    response: {
+        success: true
+    }
+}
+
+get_widgets
+-----------
+Get a list of all widgets in the room. The response is an array
+of state events.
+
+Request:
+ - `room_id` (String) is the room to get the widgets in.
+Response:
+[
+    {
+        type: "im.vector.modular.widgets",
+        state_key: "wid1",
+        content: {
+            type: "grafana",
+            url: "https://grafanaurl",
+            name: "dashboard",
+            data: {key: "val"}
+        }
+        room_id: “!foo:bar”,
+        sender: "@alice:localhost"
+    }
+]
+Example:
+{
+    action: "get_widgets",
+    room_id: "!foo:bar",
+    response: [
+        {
+            type: "im.vector.modular.widgets",
+            state_key: "wid1",
+            content: {
+                type: "grafana",
+                url: "https://grafanaurl",
+                name: "dashboard",
+                data: {key: "val"}
+            }
+            room_id: “!foo:bar”,
+            sender: "@alice:localhost"
+        }
+    ]
+}
+
 
 membership_state AND bot_options
 --------------------------------
@@ -191,6 +285,87 @@ function inviteUser(event, roomId, userId) {
     });
 }
 
+function setWidget(event, roomId) {
+    const widgetId = event.data.widget_id;
+    const widgetType = event.data.type;
+    const widgetUrl = event.data.url;
+    const widgetName = event.data.name; // optional
+    const widgetData = event.data.data; // optional
+
+    const client = MatrixClientPeg.get();
+    if (!client) {
+        sendError(event, _t('You need to be logged in.'));
+        return;
+    }
+
+    // both adding/removing widgets need these checks
+    if (!widgetId || widgetUrl === undefined) {
+        sendError(event, _t("Unable to create widget."), new Error("Missing required widget fields."));
+        return;
+    }
+
+    if (widgetUrl !== null) { // if url is null it is being deleted, don't need to check name/type/etc
+        // check types of fields
+        if (widgetName !== undefined && typeof widgetName !== 'string') {
+            sendError(event, _t("Unable to create widget."), new Error("Optional field 'name' must be a string."));
+            return;
+        }
+        if (widgetData !== undefined && !(widgetData instanceof Object)) {
+            sendError(event, _t("Unable to create widget."), new Error("Optional field 'data' must be an Object."));
+            return;
+        }
+        if (typeof widgetType !== 'string') {
+            sendError(event, _t("Unable to create widget."), new Error("Field 'type' must be a string."));
+            return;
+        }
+        if (typeof widgetUrl !== 'string') {
+            sendError(event, _t("Unable to create widget."), new Error("Field 'url' must be a string or null."));
+            return;
+        }
+    }
+
+    let content = {
+        type: widgetType,
+        url: widgetUrl,
+        name: widgetName,
+        data: widgetData,
+    };
+    if (widgetUrl === null) { // widget is being deleted
+        content = {};
+    }
+
+    client.sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId).done(() => {
+        sendResponse(event, {
+            success: true,
+        });
+    }, (err) => {
+        sendError(event, _t('Failed to send request.'), err);
+    });
+}
+
+function getWidgets(event, roomId) {
+    const client = MatrixClientPeg.get();
+    if (!client) {
+        sendError(event, _t('You need to be logged in.'));
+        return;
+    }
+    const room = client.getRoom(roomId);
+    if (!room) {
+        sendError(event, _t('This room is not recognised.'));
+        return;
+    }
+    const stateEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
+    // Only return widgets which have required fields
+    let widgetStateEvents = [];
+    stateEvents.forEach((ev) => {
+        if (ev.getContent().type && ev.getContent().url) {
+            widgetStateEvents.push(ev.event); // return the raw event
+        }
+    })
+
+    sendResponse(event, widgetStateEvents);
+}
+
 function setPlumbingState(event, roomId, status) {
     if (typeof status !== 'string') {
         throw new Error('Plumbing state status should be a string');
@@ -287,6 +462,42 @@ function getMembershipCount(event, roomId) {
     sendResponse(event, count);
 }
 
+function canSendEvent(event, roomId) {
+    const evType = "" + event.data.event_type; // force stringify
+    const isState = Boolean(event.data.is_state);
+    const client = MatrixClientPeg.get();
+    if (!client) {
+        sendError(event, _t('You need to be logged in.'));
+        return;
+    }
+    const room = client.getRoom(roomId);
+    if (!room) {
+        sendError(event, _t('This room is not recognised.'));
+        return;
+    }
+    const me = client.credentials.userId;
+    const member = room.getMember(me);
+    if (!member || member.membership !== "join") {
+        sendError(event, _t('You are not in this room.'));
+        return;
+    }
+
+    let canSend = false;
+    if (isState) {
+        canSend = room.currentState.maySendStateEvent(evType, me);
+    }
+    else {
+        canSend = room.currentState.maySendEvent(evType, me);
+    }
+
+    if (!canSend) {
+        sendError(event, _t('You do not have permission to do that in this room.'));
+        return;
+    }
+
+    sendResponse(event, true);
+}
+
 function returnStateEvent(event, roomId, eventType, stateKey) {
     const client = MatrixClientPeg.get();
     if (!client) {
@@ -332,7 +543,7 @@ const onMessage = function(event) {
     // All strings start with the empty string, so for sanity return if the length
     // of the event origin is 0.
     let url = SdkConfig.get().integrations_ui_url;
-    if (event.origin.length === 0 || !url.startsWith(event.origin)) {
+    if (event.origin.length === 0 || !url.startsWith(event.origin) || !event.data.action) {
         return; // don't log this - debugging APIs like to spam postMessage which floods the log otherwise
     }
 
@@ -367,7 +578,7 @@ const onMessage = function(event) {
             return;
         }
 
-        // Getting join rules does not require userId
+        // These APIs don't require userId
         if (event.data.action === "join_rules_state") {
             getJoinRules(event, roomId);
             return;
@@ -377,6 +588,15 @@ const onMessage = function(event) {
         } else if (event.data.action === "get_membership_count") {
             getMembershipCount(event, roomId);
             return;
+        } else if (event.data.action === "set_widget") {
+            setWidget(event, roomId);
+            return;
+        } else if (event.data.action === "get_widgets") {
+            getWidgets(event, roomId);
+            return;
+        } else if (event.data.action === "can_send_event") {
+            canSendEvent(event, roomId);
+            return;
         }
 
         if (!userId) {
@@ -409,12 +629,27 @@ const onMessage = function(event) {
     });
 };
 
+let listenerCount = 0;
 module.exports = {
     startListening: function() {
-        window.addEventListener("message", onMessage, false);
+        if (listenerCount === 0) {
+            window.addEventListener("message", onMessage, false);
+        }
+        listenerCount += 1;
     },
 
     stopListening: function() {
-        window.removeEventListener("message", onMessage);
+        listenerCount -= 1;
+        if (listenerCount === 0) {
+            window.removeEventListener("message", onMessage);
+        }
+        if (listenerCount < 0) {
+            // Make an error so we get a stack trace
+            const e = new Error(
+                "ScalarMessaging: mismatched startListening / stopListening detected." +
+                " Negative count"
+            );
+            console.error(e);
+        }
     },
 };
diff --git a/src/SdkConfig.js b/src/SdkConfig.js
index 8d8e93a889..48ebf011f2 100644
--- a/src/SdkConfig.js
+++ b/src/SdkConfig.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var DEFAULTS = {
+const DEFAULTS = {
     // URL to a page we show in an iframe to configure integrations
     integrations_ui_url: "https://scalar.vector.im/",
     // Base URL to the REST interface of the integrations server
@@ -30,8 +30,8 @@ class SdkConfig {
     }
 
     static put(cfg) {
-        var defaultKeys = Object.keys(DEFAULTS);
-        for (var i = 0; i < defaultKeys.length; ++i) {
+        const defaultKeys = Object.keys(DEFAULTS);
+        for (let i = 0; i < defaultKeys.length; ++i) {
             if (cfg[defaultKeys[i]] === undefined) {
                 cfg[defaultKeys[i]] = DEFAULTS[defaultKeys[i]];
             }
diff --git a/src/Skinner.js b/src/Skinner.js
index 0688c9fc26..f47572ba01 100644
--- a/src/Skinner.js
+++ b/src/Skinner.js
@@ -51,19 +51,18 @@ class Skinner {
         if (this.components !== null) {
             throw new Error(
                 "Attempted to load a skin while a skin is already loaded"+
-                "If you want to change the active skin, call resetSkin first"
-            );
+                "If you want to change the active skin, call resetSkin first");
         }
         this.components = {};
-        var compKeys = Object.keys(skinObject.components);
-        for (var i = 0; i < compKeys.length; ++i) {
-            var comp = skinObject.components[compKeys[i]];
+        const compKeys = Object.keys(skinObject.components);
+        for (let i = 0; i < compKeys.length; ++i) {
+            const comp = skinObject.components[compKeys[i]];
             this.addComponent(compKeys[i], comp);
         }
     }
 
     addComponent(name, comp) {
-        var slot = name;
+        let slot = name;
         if (comp.replaces !== undefined) {
             if (comp.replaces.indexOf('.') > -1) {
                 slot = comp.replaces;
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index 185ea504ac..e5378d4347 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -68,7 +68,7 @@ const commands = {
     ddg: new Command("ddg", "", function(roomId, args) {
         const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
         // TODO Don't explain this away, actually show a search UI here.
-        Modal.createDialog(ErrorDialog, {
+        Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
             title: _t('/ddg is not a command'),
             description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
         });
@@ -186,7 +186,7 @@ const commands = {
                     if (targetRoomId) { break; }
                 }
                 if (!targetRoomId) {
-                    return reject(_t("Unrecognised room alias:") +  ' ' + roomAlias);
+                    return reject(_t("Unrecognised room alias:") + ' ' + roomAlias);
                 }
             }
         }
@@ -301,52 +301,52 @@ const commands = {
                 const deviceId = matches[2];
                 const fingerprint = matches[3];
 
-                const device = MatrixClientPeg.get().getStoredDevice(userId, deviceId);
-                if (!device) {
-                    return reject(_t(`Unknown (user, device) pair:`) + ` (${userId}, ${deviceId})`);
-                }
+                return success(
+                    // Promise.resolve to handle transition from static result to promise; can be removed
+                    // in future
+                    Promise.resolve(MatrixClientPeg.get().getStoredDevice(userId, deviceId)).then((device) => {
+                        if (!device) {
+                            throw new Error(_t(`Unknown (user, device) pair:`) + ` (${userId}, ${deviceId})`);
+                        }
 
-                if (device.isVerified()) {
-                    if (device.getFingerprint() === fingerprint) {
-                        return reject(_t(`Device already verified!`));
-                    } else {
-                        return reject(_t(`WARNING: Device already verified, but keys do NOT MATCH!`));
-                    }
-                }
+                        if (device.isVerified()) {
+                            if (device.getFingerprint() === fingerprint) {
+                                throw new Error(_t(`Device already verified!`));
+                            } else {
+                                throw new Error(_t(`WARNING: Device already verified, but keys do NOT MATCH!`));
+                            }
+                        }
 
-                if (device.getFingerprint() === fingerprint) {
-                    MatrixClientPeg.get().setDeviceVerified(
-                        userId, deviceId, true,
-                    );
+                        if (device.getFingerprint() !== fingerprint) {
+                            const fprint = device.getFingerprint();
+                            throw new Error(
+                                _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
+                                   ' %(deviceId)s is "%(fprint)s" which does not match the provided key' +
+                                   ' "%(fingerprint)s". This could mean your communications are being intercepted!',
+                                   {deviceId: deviceId, fprint: fprint, userId: userId, fingerprint: fingerprint}));
+                        }
 
-                    // Tell the user we verified everything!
-                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                    Modal.createDialog(QuestionDialog, {
-                        title: _t("Verified key"),
-                        description: (
-                            

-                                

-                                {
-                                    _t("The signing key you provided matches the signing key you received " +
-                                    "from %(userId)s's device %(deviceId)s. Device marked as verified.",
-                                    {userId: userId, deviceId: deviceId})
-                                }
-                                

-                            

-                        ),
-                        hasCancelButton: false,
-                    });
-
-                    return success();
-                } else {
-                    const fprint = device.getFingerprint();
-                    return reject(
-                        _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
-                           ' %(deviceId)s is "%(fprint)s" which does not match the provided key' +
-                           ' "%(fingerprint)s". This could mean your communications are being intercepted!',
-                            {deviceId: deviceId, fprint: fprint, userId: userId, fingerprint: fingerprint})
-                    );
-                }
+                        return MatrixClientPeg.get().setDeviceVerified(userId, deviceId, true);
+                    }).then(() => {
+                        // Tell the user we verified everything
+                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                        Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
+                            title: _t("Verified key"),
+                            description: (
+                                

+                                  

+                                    {
+                                        _t("The signing key you provided matches the signing key you received " +
+                                           "from %(userId)s's device %(deviceId)s. Device marked as verified.",
+                                           {userId: userId, deviceId: deviceId})
+                                    }
+                                  

+                                

+                            ),
+                            hasCancelButton: false,
+                        });
+                    }),
+                );
             }
         }
         return reject(this.getUsage());
diff --git a/src/TabComplete.js b/src/TabComplete.js
deleted file mode 100644
index 59ecc2ae20..0000000000
--- a/src/TabComplete.js
+++ /dev/null
@@ -1,391 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Entry, MemberEntry, CommandEntry } from './TabCompleteEntries';
-import SlashCommands from './SlashCommands';
-import MatrixClientPeg from './MatrixClientPeg';
-
-const DELAY_TIME_MS = 1000;
-const KEY_TAB = 9;
-const KEY_SHIFT = 16;
-const KEY_WINDOWS = 91;
-
-// NB: DO NOT USE \b its "words" are roman alphabet only!
-//
-// Capturing group containing the start
-// of line or a whitespace char
-//     \_______________       __________Capturing group of 0 or more non-whitespace chars
-//                    _|__  _|_         followed by the end of line
-//                   /    \/   \
-const MATCH_REGEX = /(^|\s)(\S*)$/;
-
-class TabComplete {
-
-    constructor(opts) {
-        opts.allowLooping = opts.allowLooping || false;
-        opts.autoEnterTabComplete = opts.autoEnterTabComplete || false;
-        opts.onClickCompletes = opts.onClickCompletes || false;
-        this.opts = opts;
-        this.completing = false;
-        this.list = []; // full set of tab-completable things
-        this.matchedList = []; // subset of completable things to loop over
-        this.currentIndex = 0; // index in matchedList currently
-        this.originalText = null; // original input text when tab was first hit
-        this.textArea = opts.textArea; // DOMElement
-        this.isFirstWord = false; // true if you tab-complete on the first word
-        this.enterTabCompleteTimerId = null;
-        this.inPassiveMode = false;
-
-        // Map tracking ordering of the room members.
-        // userId: integer, highest comes first.
-        this.memberTabOrder = {};
-
-        // monotonically increasing counter used for tracking ordering of members
-        this.memberOrderSeq = 0;
-    }
-
-    /**
-     * Call this when a a UI element representing a tab complete entry has been clicked
-     * @param {entry} The entry that was clicked
-     */
-    onEntryClick(entry) {
-        if (this.opts.onClickCompletes) {
-            this.completeTo(entry);
-        }
-    }
-
-    loadEntries(room) {
-        this._makeEntries(room);
-        this._initSorting(room);
-        this._sortEntries();
-    }
-
-    onMemberSpoke(member) {
-        if (this.memberTabOrder[member.userId] === undefined) {
-            this.list.push(new MemberEntry(member));
-        }
-        this.memberTabOrder[member.userId] = this.memberOrderSeq++;
-        this._sortEntries();
-    }
-
-    /**
-     * @param {DOMElement}
-     */
-    setTextArea(textArea) {
-        this.textArea = textArea;
-    }
-
-    /**
-     * @return {Boolean}
-     */
-    isTabCompleting() {
-        // actually have things to tab over
-        return this.completing && this.matchedList.length > 1;
-    }
-
-    stopTabCompleting() {
-        this.completing = false;
-        this.currentIndex = 0;
-        this._notifyStateChange();
-    }
-
-    startTabCompleting(passive) {
-        this.originalText = this.textArea.value; // cache starting text
-
-        // grab the partial word from the text which we'll be tab-completing
-        var res = MATCH_REGEX.exec(this.originalText);
-        if (!res) {
-            this.matchedList = [];
-            return;
-        }
-        // ES6 destructuring; ignore first element (the complete match)
-        var [, boundaryGroup, partialGroup] = res;
-
-        if (partialGroup.length === 0 && passive) {
-            return;
-        }
-
-        this.isFirstWord = partialGroup.length === this.originalText.length;
-
-        this.completing = true;
-        this.currentIndex = 0;
-
-        this.matchedList = [
-            new Entry(partialGroup) // first entry is always the original partial
-        ];
-
-        // find matching entries in the set of entries given to us
-        this.list.forEach((entry) => {
-            if (entry.text.toLowerCase().indexOf(partialGroup.toLowerCase()) === 0) {
-                this.matchedList.push(entry);
-            }
-        });
-
-        // console.log("calculated completions => %s", JSON.stringify(this.matchedList));
-    }
-
-    /**
-     * Do an auto-complete with the given word. This terminates the tab-complete.
-     * @param {Entry} entry The tab-complete entry to complete to.
-     */
-    completeTo(entry) {
-        this.textArea.value = this._replaceWith(
-            entry.getFillText(), true, entry.getSuffix(this.isFirstWord)
-        );
-        this.stopTabCompleting();
-        // keep focus on the text area
-        this.textArea.focus();
-    }
-
-    /**
-     * @param {Number} numAheadToPeek Return *up to* this many elements.
-     * @return {Entry[]}
-     */
-    peek(numAheadToPeek) {
-        if (this.matchedList.length === 0) {
-            return [];
-        }
-        var peekList = [];
-
-        // return the current match item and then one with an index higher, and
-        // so on until we've reached the requested limit. If we hit the end of
-        // the list of options we're done.
-        for (var i = 0; i < numAheadToPeek; i++) {
-            var nextIndex;
-            if (this.opts.allowLooping) {
-                nextIndex = (this.currentIndex + i) % this.matchedList.length;
-            }
-            else {
-                nextIndex = this.currentIndex + i;
-                if (nextIndex === this.matchedList.length) {
-                    break;
-                }
-            }
-            peekList.push(this.matchedList[nextIndex]);
-        }
-        // console.log("Peek list(%s): %s", numAheadToPeek, JSON.stringify(peekList));
-        return peekList;
-    }
-
-    handleTabPress(passive, shiftKey) {
-        var wasInPassiveMode = this.inPassiveMode && !passive;
-        this.inPassiveMode = passive;
-
-        if (!this.completing) {
-            this.startTabCompleting(passive);
-        }
-
-        if (shiftKey) {
-            this.nextMatchedEntry(-1);
-        }
-        else {
-            // if we were in passive mode we got out of sync by incrementing the
-            // index to show the peek view but not set the text area. Therefore,
-            // we want to set the *current* index rather than the *next* index.
-            this.nextMatchedEntry(wasInPassiveMode ? 0 : 1);
-        }
-        this._notifyStateChange();
-    }
-
-    /**
-     * @param {DOMEvent} e
-     */
-    onKeyDown(ev) {
-        if (!this.textArea) {
-            console.error("onKeyDown called before a