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/CHANGELOG.md b/CHANGELOG.md index ed6fb3ba36..8bc4bbcfce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,117 @@ +Changes in [0.9.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.7) (2017-06-22) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.6...v0.9.7) + + * Fix ability to invite users with caps in their user IDs + [\#1128](https://github.com/matrix-org/matrix-react-sdk/pull/1128) + * Fix another race with first-sync + [\#1131](https://github.com/matrix-org/matrix-react-sdk/pull/1131) + * Make the indexeddb worker script work again + [\#1132](https://github.com/matrix-org/matrix-react-sdk/pull/1132) + * Use the web worker when clearing js-sdk stores + [\#1133](https://github.com/matrix-org/matrix-react-sdk/pull/1133) + +Changes in [0.9.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.6) (2017-06-20) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.5...v0.9.6) + + * Fix infinite spinner on email registration + [\#1120](https://github.com/matrix-org/matrix-react-sdk/pull/1120) + * Translate help promots in room list + [\#1121](https://github.com/matrix-org/matrix-react-sdk/pull/1121) + * Internationalise the drop targets + [\#1122](https://github.com/matrix-org/matrix-react-sdk/pull/1122) + * Fix another infinite spin on register + [\#1124](https://github.com/matrix-org/matrix-react-sdk/pull/1124) + + +Changes in [0.9.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.5) (2017-06-19) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.5-rc.2...v0.9.5) + + * Don't peek when creating a room + [\#1113](https://github.com/matrix-org/matrix-react-sdk/pull/1113) + * More translations & translation fixes + + +Changes in [0.9.5-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.5-rc.2) (2017-06-16) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.5-rc.1...v0.9.5-rc.2) + + * Avoid getting stuck in a loop in CAS login + [\#1109](https://github.com/matrix-org/matrix-react-sdk/pull/1109) + * Update from Weblate. + [\#1101](https://github.com/matrix-org/matrix-react-sdk/pull/1101) + * Correctly inspect state when rejecting invite + [\#1108](https://github.com/matrix-org/matrix-react-sdk/pull/1108) + * Make sure to pass the roomAlias to the preview header if we have it + [\#1107](https://github.com/matrix-org/matrix-react-sdk/pull/1107) + * Make sure captcha disappears when container does + [\#1106](https://github.com/matrix-org/matrix-react-sdk/pull/1106) + * Fix URL previews + [\#1105](https://github.com/matrix-org/matrix-react-sdk/pull/1105) + +Changes in [0.9.5-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.5-rc.1) (2017-06-15) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.4...v0.9.5-rc.1) + + * Groundwork for tests including a teamserver login + [\#1098](https://github.com/matrix-org/matrix-react-sdk/pull/1098) + * Show a spinner when accepting an invite and waitingForRoom + [\#1100](https://github.com/matrix-org/matrix-react-sdk/pull/1100) + * Display a spinner until new room object after join success + [\#1099](https://github.com/matrix-org/matrix-react-sdk/pull/1099) + * Luke/attempt fix peeking regression + [\#1097](https://github.com/matrix-org/matrix-react-sdk/pull/1097) + * Show correct text in set email password dialog (2) + [\#1096](https://github.com/matrix-org/matrix-react-sdk/pull/1096) + * Don't create a guest login if user went to /login + [\#1092](https://github.com/matrix-org/matrix-react-sdk/pull/1092) + * Give password confirmation correct title, description + [\#1095](https://github.com/matrix-org/matrix-react-sdk/pull/1095) + * Make enter submit change password form + [\#1094](https://github.com/matrix-org/matrix-react-sdk/pull/1094) + * When not specified, remove roomAlias state in RoomViewStore + [\#1093](https://github.com/matrix-org/matrix-react-sdk/pull/1093) + * Update from Weblate. + [\#1091](https://github.com/matrix-org/matrix-react-sdk/pull/1091) + * Fixed pagination infinite loop caused by long messages + [\#1045](https://github.com/matrix-org/matrix-react-sdk/pull/1045) + * Clear persistent storage on login and logout + [\#1085](https://github.com/matrix-org/matrix-react-sdk/pull/1085) + * DM guessing: prefer oldest joined member + [\#1087](https://github.com/matrix-org/matrix-react-sdk/pull/1087) + * Ask for email address after setting password for the first time + [\#1090](https://github.com/matrix-org/matrix-react-sdk/pull/1090) + * i18n for setting password flow + [\#1089](https://github.com/matrix-org/matrix-react-sdk/pull/1089) + * remove mx_filterFlipColor from verified e2e icon so its not purple :/ + [\#1088](https://github.com/matrix-org/matrix-react-sdk/pull/1088) + * width and height must be int otherwise synapse cries + [\#1083](https://github.com/matrix-org/matrix-react-sdk/pull/1083) + * remove RoomViewStore listener from MatrixChat on unmount + [\#1084](https://github.com/matrix-org/matrix-react-sdk/pull/1084) + * Add script to copy translations between files + [\#1082](https://github.com/matrix-org/matrix-react-sdk/pull/1082) + * Only process user_directory response if it's for the current query + [\#1081](https://github.com/matrix-org/matrix-react-sdk/pull/1081) + * Fix regressions with starting a 1-1. + [\#1080](https://github.com/matrix-org/matrix-react-sdk/pull/1080) + * allow forcing of TURN + [\#1079](https://github.com/matrix-org/matrix-react-sdk/pull/1079) + * Remove a bunch of dead code from react-sdk + [\#1077](https://github.com/matrix-org/matrix-react-sdk/pull/1077) + * Improve error logging/reporting in megolm import/export + [\#1061](https://github.com/matrix-org/matrix-react-sdk/pull/1061) + * Delinting + [\#1064](https://github.com/matrix-org/matrix-react-sdk/pull/1064) + * Show reason for a call hanging up unexpectedly. + [\#1071](https://github.com/matrix-org/matrix-react-sdk/pull/1071) + * Add reason for ban in room settings + [\#1072](https://github.com/matrix-org/matrix-react-sdk/pull/1072) + * adds mx_filterFlipColor so that the dark theme will invert this image + [\#1070](https://github.com/matrix-org/matrix-react-sdk/pull/1070) + Changes in [0.9.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.4) (2017-06-14) =================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.3...v0.9.4) diff --git a/jenkins.sh b/jenkins.sh index d9bb62855b..a0e8d2e893 100755 --- a/jenkins.sh +++ b/jenkins.sh @@ -2,7 +2,6 @@ set -e -export KARMAFLAGS="--no-colors" export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" nvm use 4 @@ -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..d8a6c25cc6 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -116,11 +116,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 151b6d6170..9daaa38da7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "0.9.4", + "version": "0.9.7", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -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": "^0.9.1", "draft-js-export-html": "^0.5.0", "draft-js-export-markdown": "^0.2.0", - "emojione": "2.2.3", + "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.11", + "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", @@ -105,12 +107,11 @@ "karma-cli": "^0.1.2", "karma-junit-reporter": "^0.4.1", "karma-mocha": "^0.2.2", - "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.7", "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/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 d0d8e0c74e..5f8772c7aa 100644 --- a/src/BasePlatform.js +++ b/src/BasePlatform.js @@ -17,6 +17,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import dis from './dispatcher'; + /** * Base class for classes that provide platform-specific functionality * eg. Setting an application badge or displaying notifications @@ -27,6 +29,16 @@ export default class BasePlatform { constructor() { this.notificationCount = 0; this.errorDidOccur = false; + + dis.register(this._onAction.bind(this)); + } + + _onAction(payload: Object) { + switch (payload.action) { + case 'on_logged_out': + this.setNotificationCount(0); + break; + } } // Used primarily for Analytics @@ -45,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; @@ -53,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/ComposerHistoryManager.js b/src/ComposerHistoryManager.js new file mode 100644 index 0000000000..1ae836574b --- /dev/null +++ b/src/ComposerHistoryManager.js @@ -0,0 +1,82 @@ +//@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} from 'draft-js'; +import * as RichText from './RichText'; +import Markdown from './Markdown'; +import _flow from 'lodash/flow'; +import _clamp from 'lodash/clamp'; + +type MessageFormat = 'html' | 'markdown'; + +class HistoryItem { + message: string = ''; + format: MessageFormat = 'html'; + + constructor(message: string, format: MessageFormat) { + this.message = message; + this.format = format; + } + + toContentState(format: MessageFormat): ContentState { + let {message} = this; + if (format === 'markdown') { + if (this.format === 'html') { + message = _flow([RichText.htmlToContentState, RichText.stateToMarkdown])(message); + } + return ContentState.createFromText(message); + } else { + if (this.format === 'markdown') { + message = new Markdown(message).toHTML(); + } + return RichText.htmlToContentState(message); + } + } +} + +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; + } + + addItem(message: string, format: MessageFormat) { + const item = new HistoryItem(message, 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..9239de9d8f 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) { diff --git a/src/DateUtils.js b/src/DateUtils.js index 0bce7c8a16..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) { - var now = new Date(); + formatDate: function(date, showTwelveHour=false) { + 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)}); - } - 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()], @@ -80,7 +81,7 @@ module.exports = { time: this.formatTime(date), }); } - return this.formatFullDate(date); + return this.formatFullDate(date, showTwelveHour); }, formatFullDate: function(date, showTwelveHour=false) { 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..20b444b8da 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'],
         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
new file mode 100644
index 0000000000..1da4922153
--- /dev/null
+++ b/src/KeyRequestHandler.js
@@ -0,0 +1,138 @@
+/*
+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.
+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 sdk from './index';
+import Modal from './Modal';
+
+export default class KeyRequestHandler {
+    constructor(matrixClient) {
+        this._matrixClient = matrixClient;
+
+        // the user/device for which we currently have a dialog open
+        this._currentUser = null;
+        this._currentDevice = null;
+
+        // userId -> deviceId -> [keyRequest]
+        this._pendingKeyRequests = Object.create(null);
+    }
+
+    handleKeyRequest(keyRequest) {
+        const userId = keyRequest.userId;
+        const deviceId = keyRequest.deviceId;
+        const requestId = keyRequest.requestId;
+
+        if (!this._pendingKeyRequests[userId]) {
+            this._pendingKeyRequests[userId] = Object.create(null);
+        }
+        if (!this._pendingKeyRequests[userId][deviceId]) {
+            this._pendingKeyRequests[userId][deviceId] = [];
+        }
+
+        // check if we already have this request
+        const requests = this._pendingKeyRequests[userId][deviceId];
+        if (requests.find((r) => r.requestId === requestId)) {
+            console.log("Already have this key request, ignoring");
+            return;
+        }
+
+        requests.push(keyRequest);
+
+        if (this._currentUser) {
+            // ignore for now
+            console.log("Key request, but we already have a dialog open");
+            return;
+        }
+
+        this._processNextRequest();
+    }
+
+    handleKeyRequestCancellation(cancellation) {
+        // see if we can find the request in the queue
+        const userId = cancellation.userId;
+        const deviceId = cancellation.deviceId;
+        const requestId = cancellation.requestId;
+
+        if (userId === this._currentUser && deviceId === this._currentDevice) {
+            console.log(
+                "room key request cancellation for the user we currently have a"
+                + " dialog open for",
+            );
+            // TODO: update the dialog. For now, we just ignore the
+            // cancellation.
+            return;
+        }
+
+        if (!this._pendingKeyRequests[userId]) {
+            return;
+        }
+        const requests = this._pendingKeyRequests[userId][deviceId];
+        if (!requests) {
+            return;
+        }
+        const idx = requests.findIndex((r) => r.requestId === requestId);
+        if (idx < 0) {
+            return;
+        }
+        console.log("Forgetting room key request");
+        requests.splice(idx, 1);
+        if (requests.length === 0) {
+            delete this._pendingKeyRequests[userId][deviceId];
+            if (Object.keys(this._pendingKeyRequests[userId]).length === 0) {
+                delete this._pendingKeyRequests[userId];
+            }
+        }
+    }
+
+    _processNextRequest() {
+        const userId = Object.keys(this._pendingKeyRequests)[0];
+        if (!userId) {
+            return;
+        }
+        const deviceId = Object.keys(this._pendingKeyRequests[userId])[0];
+        if (!deviceId) {
+            return;
+        }
+        console.log(`Starting KeyShareDialog for ${userId}:${deviceId}`);
+
+        const finished = (r) => {
+            this._currentUser = null;
+            this._currentDevice = null;
+
+            if (r) {
+                for (const req of this._pendingKeyRequests[userId][deviceId]) {
+                    req.share();
+                }
+            }
+            delete this._pendingKeyRequests[userId][deviceId];
+            if (Object.keys(this._pendingKeyRequests[userId]).length === 0) {
+                delete this._pendingKeyRequests[userId];
+            }
+
+            this._processNextRequest();
+        };
+
+        const KeyShareDialog = sdk.getComponent("dialogs.KeyShareDialog");
+        Modal.createDialog(KeyShareDialog, {
+            matrixClient: this._matrixClient,
+            userId: userId,
+            deviceId: deviceId,
+            onFinished: finished,
+        });
+        this._currentUser = userId;
+        this._currentDevice = deviceId;
+    }
+}
+
diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 39a159869c..eb2156e780 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';
@@ -29,32 +29,25 @@ import DMRoomMap from './utils/DMRoomMap';
 import RtsClient from './RtsClient';
 import Modal from './Modal';
 import sdk from './index';
-import { _t } from './languageHandler';
 
 /**
  * Called at startup, to attempt to build a logged-in Matrix session. It tries
  * a number of things:
  *
- * 1. if we have a loginToken in the (real) query params, it uses that to log
- *    in.
  *
- * 2. if we have a guest access token in the fragment query params, it uses
+ * 1. if we have a guest access token in the fragment query params, it uses
  *    that.
  *
- * 3. if an access token is stored in local storage (from a previous session),
+ * 2. if an access token is stored in local storage (from a previous session),
  *    it uses that.
  *
- * 4. it attempts to auto-register as a guest user.
+ * 3. it attempts to auto-register as a guest user.
  *
  * If any of steps 1-4 are successful, it will call {_doSetLoggedIn}, which in
  * turn will raise on_logged_in and will_start_client events.
  *
  * @param {object} opts
  *
- * @param {object} opts.realQueryParams: string->string map of the
- *     query-parameters extracted from the real query-string of the starting
- *     URI.
- *
  * @param {object} opts.fragmentQueryParams: string->string map of the
  *     query-parameters extracted from the #-fragment of the starting URI.
  *
@@ -68,9 +61,10 @@ import { _t } from './languageHandler';
  *     true; defines the IS to use.
  *
  * @returns {Promise} a promise which resolves when the above process completes.
+ *     Resolves to `true` if we ended up starting a session, or `false` if we
+ *     failed.
  */
 export function loadSession(opts) {
-    const realQueryParams = opts.realQueryParams || {};
     const fragmentQueryParams = opts.fragmentQueryParams || {};
     let enableGuest = opts.enableGuest || false;
     const guestHsUrl = opts.guestHsUrl;
@@ -82,14 +76,6 @@ export function loadSession(opts) {
         enableGuest = false;
     }
 
-    if (realQueryParams.loginToken) {
-        if (!realQueryParams.homeserver) {
-            console.warn("Cannot log in with token: can't determine HS URL to use");
-        } else {
-            return _loginWithToken(realQueryParams, defaultDeviceDisplayName);
-        }
-    }
-
     if (enableGuest &&
         fragmentQueryParams.guest_user_id &&
         fragmentQueryParams.guest_access_token
@@ -101,12 +87,12 @@ export function loadSession(opts) {
             homeserverUrl: guestHsUrl,
             identityServerUrl: guestIsUrl,
             guest: true,
-        }, true);
+        }, true).then(() => true);
     }
 
     return _restoreFromLocalStorage().then((success) => {
         if (success) {
-            return;
+            return true;
         }
 
         if (enableGuest) {
@@ -114,10 +100,30 @@ export function loadSession(opts) {
         }
 
         // fall back to login screen
+        return false;
     });
 }
 
-function _loginWithToken(queryParams, defaultDeviceDisplayName) {
+/**
+ * @param {Object} queryParams    string->string map of the
+ *     query-parameters extracted from the real query-string of the starting
+ *     URI.
+ *
+ * @param {String} defaultDeviceDisplayName
+ *
+ * @returns {Promise} promise which resolves to true if we completed the token
+ *    login, else false
+ */
+export function attemptTokenLogin(queryParams, defaultDeviceDisplayName) {
+    if (!queryParams.loginToken) {
+        return Promise.resolve(false);
+    }
+
+    if (!queryParams.homeserver) {
+        console.warn("Cannot log in with token: can't determine HS URL to use");
+        return Promise.resolve(false);
+    }
+
     // create a temporary MatrixClient to do the login
     const client = Matrix.createClient({
         baseUrl: queryParams.homeserver,
@@ -130,22 +136,26 @@ function _loginWithToken(queryParams, defaultDeviceDisplayName) {
         },
     ).then(function(data) {
         console.log("Logged in with token");
-        return _doSetLoggedIn({
-            userId: data.user_id,
-            deviceId: data.device_id,
-            accessToken: data.access_token,
-            homeserverUrl: queryParams.homeserver,
-            identityServerUrl: queryParams.identityServer,
-            guest: false,
-        }, true);
-    }, (err) => {
+        return _clearStorage().then(() => {
+            _persistCredentialsToLocalStorage({
+                userId: data.user_id,
+                deviceId: data.device_id,
+                accessToken: data.access_token,
+                homeserverUrl: queryParams.homeserver,
+                identityServerUrl: queryParams.identityServer,
+                guest: false,
+            });
+            return true;
+        });
+    }).catch((err) => {
         console.error("Failed to log in with login token: " + err + " " +
                       err.data);
+        return false;
     });
 }
 
 function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
-    console.log("Doing guest login on %s", hsUrl);
+    console.log(`Doing guest login on ${hsUrl}`);
 
     // TODO: we should probably de-duplicate this and Login.loginAsGuest.
     // Not really sure where the right home for it is.
@@ -160,7 +170,7 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
             initial_device_display_name: defaultDeviceDisplayName,
         },
     }).then((creds) => {
-        console.log("Registered as guest: %s", creds.user_id);
+        console.log(`Registered as guest: ${creds.user_id}`);
         return _doSetLoggedIn({
             userId: creds.user_id,
             deviceId: creds.device_id,
@@ -168,9 +178,10 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
             homeserverUrl: hsUrl,
             identityServerUrl: isUrl,
             guest: true,
-        }, true);
+        }, true).then(() => true);
     }, (err) => {
         console.error("Failed to register as guest: " + err + " " + err.data);
+        return false;
     });
 }
 
@@ -186,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';
@@ -203,7 +214,7 @@ function _restoreFromLocalStorage() {
     }
 
     if (accessToken && userId && hsUrl) {
-        console.log("Restoring session for %s", userId);
+        console.log(`Restoring session for ${userId}`);
         try {
             return _doSetLoggedIn({
                 userId: userId,
@@ -218,34 +229,19 @@ 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);
 
-    let msg = e.message;
-    if (msg == "OLM.BAD_LEGACY_ACCOUNT_PICKLE") {
-        msg = _t(
-            'You need to log back in to generate end-to-end encryption keys'
-            + ' for this device and submit the public key to your homeserver.'
-            + ' This is a once off; sorry for the inconvenience.',
-        );
-
-        _clearStorage();
-
-        return q.reject(new Error(
-            _t('Unable to restore previous session') + ': ' + msg,
-        ));
-    }
-
-    const def = q.defer();
+    const def = Promise.defer();
     const SessionRestoreErrorDialog =
           sdk.getComponent('views.dialogs.SessionRestoreErrorDialog');
 
     Modal.createDialog(SessionRestoreErrorDialog, {
-        error: msg,
+        error: e.message,
         onFinished: (success) => {
             def.resolve(success);
         },
@@ -282,10 +278,12 @@ export function initRtsClient(url) {
  * storage before starting the new client.
  *
  * @param {MatrixClientCreds} credentials The credentials to use
+ *
+ * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
 export function setLoggedIn(credentials) {
     stopMatrixClient();
-    _doSetLoggedIn(credentials, true);
+    return _doSetLoggedIn(credentials, true);
 }
 
 /**
@@ -295,23 +293,26 @@ export function setLoggedIn(credentials) {
  * @param {MatrixClientCreds} credentials
  * @param {Boolean} clearStorage
  *
- * returns a Promise which resolves once the client has been started
+ * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
 async function _doSetLoggedIn(credentials, clearStorage) {
     credentials.guest = Boolean(credentials.guest);
 
     console.log(
-        "setLoggedIn: mxid:", credentials.userId,
-        "deviceId:", credentials.deviceId,
-        "guest:", credentials.guest,
-        "hs:", credentials.homeserverUrl,
+        "setLoggedIn: mxid: " + credentials.userId +
+        " deviceId: " + credentials.deviceId +
+        " guest: " + credentials.guest +
+        " hs: " + credentials.homeserverUrl,
     );
 
     // This is dispatched to indicate that the user is still in the process of logging in
     // 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();
@@ -322,23 +323,10 @@ async function _doSetLoggedIn(credentials, clearStorage) {
     // Resolves by default
     let teamPromise = Promise.resolve(null);
 
-    // persist the session
+
     if (localStorage) {
         try {
-            localStorage.setItem("mx_hs_url", credentials.homeserverUrl);
-            localStorage.setItem("mx_is_url", credentials.identityServerUrl);
-            localStorage.setItem("mx_user_id", credentials.userId);
-            localStorage.setItem("mx_access_token", credentials.accessToken);
-            localStorage.setItem("mx_is_guest", JSON.stringify(credentials.guest));
-
-            // if we didn't get a deviceId from the login, leave mx_device_id unset,
-            // rather than setting it to "undefined".
-            //
-            // (in this case MatrixClient doesn't bother with the crypto stuff
-            // - that's fine for us).
-            if (credentials.deviceId) {
-                localStorage.setItem("mx_device_id", credentials.deviceId);
-            }
+            _persistCredentialsToLocalStorage(credentials);
 
             // The user registered as a PWLU (PassWord-Less User), the generated password
             // is cached here such that the user can change it at a later time.
@@ -349,8 +337,6 @@ async function _doSetLoggedIn(credentials, clearStorage) {
                     cachedPassword: credentials.password,
                 });
             }
-
-            console.log("Session persisted for %s", credentials.userId);
         } catch (e) {
             console.warn("Error using local storage: can't persist session!", e);
         }
@@ -361,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 {
@@ -371,12 +360,29 @@ 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();
+    return MatrixClientPeg.get();
+}
+
+function _persistCredentialsToLocalStorage(credentials) {
+    localStorage.setItem("mx_hs_url", credentials.homeserverUrl);
+    localStorage.setItem("mx_is_url", credentials.identityServerUrl);
+    localStorage.setItem("mx_user_id", credentials.userId);
+    localStorage.setItem("mx_access_token", credentials.accessToken);
+    localStorage.setItem("mx_is_guest", JSON.stringify(credentials.guest));
+
+    // if we didn't get a deviceId from the login, leave mx_device_id unset,
+    // rather than setting it to "undefined".
+    //
+    // (in this case MatrixClient doesn't bother with the crypto stuff
+    // - that's fine for us).
+    if (credentials.deviceId) {
+        localStorage.setItem("mx_device_id", credentials.deviceId);
+    }
+
+    console.log(`Session persisted for ${credentials.userId}`);
 }
 
 /**
@@ -416,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 8db6e99b89..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,
@@ -178,11 +178,18 @@ export default class Login {
     }
 
     redirectToCas() {
-      var client = this._createTemporaryClient();
-      var parsedUrl = url.parse(window.location.href, true);
+      const client = this._createTemporaryClient();
+      const parsedUrl = url.parse(window.location.href, true);
+
+      // XXX: at this point, the fragment will always be #/login, which is no
+      // use to anyone. Ideally, we would get the intended fragment from
+      // MatrixChat.screenAfterLogin so that you could follow #/room links etc
+      // through a CAS login.
+      parsedUrl.hash = "";
+
       parsedUrl.query["homeserver"] = client.getHomeserverUrl();
       parsedUrl.query["identityServer"] = client.getIdentityServerUrl();
-      var casUrl = client.getCasLoginUrl(url.format(parsedUrl));
+      const casUrl = client.getCasLoginUrl(url.format(parsedUrl));
       window.location.href = casUrl;
     }
 }
diff --git a/src/Markdown.js b/src/Markdown.js
index 4a46ce4f24..5730e42a09 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'];
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 47370e2142..4264828c7b 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.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.
@@ -47,7 +48,6 @@ class MatrixClientPeg {
         this.opts = {
             initialSyncLimit: 20,
         };
-        this.indexedDbWorkerScript = null;
     }
 
     /**
@@ -58,7 +58,7 @@ class MatrixClientPeg {
      * @param {string} script href to the script to be passed to the web worker
      */
     setIndexedDbWorkerScript(script) {
-        this.indexedDbWorkerScript = script;
+        createMatrixClient.indexedDbWorkerScript = script;
     }
 
     get(): MatrixClient {
@@ -77,20 +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) => { console.error(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 {
@@ -127,7 +145,7 @@ class MatrixClientPeg {
             timelineSupport: true,
         };
 
-        this.matrixClient = createMatrixClient(opts);
+        this.matrixClient = createMatrixClient(opts, this.indexedDbWorkerScript);
 
         // we're going to add eventlisteners for each matrix event tile, so the
         // potential number of event listeners is quite high.
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..c060565e2f 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,9 +31,26 @@ 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 {
+export const contentStateToHTML = (contentState: ContentState) => {
+    return stateToHTML(contentState, {
+        inlineStyles: {
+            UNDERLINE: {
+                element: 'u'
+            }
+        }
+    });
+};
+
+export function htmlToContentState(html: string): ContentState {
     return ContentState.createFromBlockArray(convertFromHTML(html));
 }
 
@@ -95,31 +113,6 @@ 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];
 }
 
@@ -146,9 +139,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];
 }
 
 /**
@@ -286,3 +279,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..dea3d27751 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -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,54 @@ 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.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 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