{this.formatAppTileName()}
{/* Edit widget */}
- {/* 
*/}
+ />}
{/* Delete widget */}
{
this.processQuery(query, selection).then(() => {
deferred.resolve();
@@ -176,7 +176,7 @@ export default class Autocomplete extends React.Component {
}
forceComplete() {
- const done = Q.defer();
+ const done = Promise.defer();
this.setState({
forceComplete: true,
hide: false,
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 63737d5fad..37a9bcd0cd 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -17,7 +17,7 @@ var React = require('react');
import { _t } from '../../../languageHandler';
var classNames = require('classnames');
var Matrix = require("matrix-js-sdk");
-var q = require('q');
+import Promise from 'bluebird';
var MatrixClientPeg = require("../../../MatrixClientPeg");
var Modal = require("../../../Modal");
var Entities = require("../../../Entities");
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index e4ba6bbe81..14f52706ec 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -41,7 +41,6 @@ export default class MessageComposer extends React.Component {
this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
this.onInputStateChanged = this.onInputStateChanged.bind(this);
this.onEvent = this.onEvent.bind(this);
- this.onPageUnload = this.onPageUnload.bind(this);
this.state = {
autocompleteQuery: '',
@@ -62,21 +61,12 @@ export default class MessageComposer extends React.Component {
// marked as encrypted.
// XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
MatrixClientPeg.get().on("event", this.onEvent);
-
- window.addEventListener('beforeunload', this.onPageUnload);
}
componentWillUnmount() {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("event", this.onEvent);
}
- window.removeEventListener('beforeunload', this.onPageUnload);
- }
-
- onPageUnload(event) {
- if (this.messageComposerInput) {
- this.messageComposerInput.sentHistory.saveLastTextEntry();
- }
}
onEvent(event) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index e9dc216fa7..d4ae55f03a 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -16,16 +16,17 @@ limitations under the License.
import React from 'react';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
-import {Editor, EditorState, RichUtils, CompositeDecorator,
- convertFromRaw, convertToRaw, Modifier, EditorChangeType,
- getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState} from 'draft-js';
+import {Editor, EditorState, RichUtils, CompositeDecorator, Modifier,
+ getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState,
+ Entity} from 'draft-js';
import classNames from 'classnames';
import escape from 'lodash/escape';
-import Q from 'q';
+import Promise from 'bluebird';
import MatrixClientPeg from '../../../MatrixClientPeg';
import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
+import {RoomMember} from 'matrix-js-sdk';
import SlashCommands from '../../../SlashCommands';
import KeyCode from '../../../KeyCode';
import Modal from '../../../Modal';
@@ -43,6 +44,14 @@ import Markdown from '../../../Markdown';
import ComposerHistoryManager from '../../../ComposerHistoryManager';
import MessageComposerStore from '../../../stores/MessageComposerStore';
+import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix';
+const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
+
+import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
+const EMOJI_SHORTNAMES = Object.keys(emojioneList);
+const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
+const REGEX_EMOJI_WHITESPACE = new RegExp('(' + asciiRegexp + ')\\s$');
+
const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
const ZWS_CODE = 8203;
@@ -156,15 +165,72 @@ export default class MessageComposerInput extends React.Component {
this.client = MatrixClientPeg.get();
}
+ findLinkEntities(contentBlock, callback) {
+ contentBlock.findEntityRanges(
+ (character) => {
+ const entityKey = character.getEntity();
+ return (
+ entityKey !== null &&
+ Entity.get(entityKey).getType() === 'LINK'
+ );
+ }, callback,
+ );
+ }
/*
* "Does the right thing" to create an EditorState, based on:
* - whether we've got rich text mode enabled
* - contentState was passed in
*/
createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
- let decorators = richText ? RichText.getScopedRTDecorators(this.props) :
- RichText.getScopedMDDecorators(this.props),
- compositeDecorator = new CompositeDecorator(decorators);
+ const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
+ RichText.getScopedMDDecorators(this.props);
+ decorators.push({
+ strategy: this.findLinkEntities.bind(this),
+ component: (props) => {
+ const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+ const {url} = Entity.get(props.entityKey).getData();
+ const matrixToMatch = REGEX_MATRIXTO.exec(url);
+ const isUserPill = matrixToMatch[2] === '@';
+ const isRoomPill = matrixToMatch[2] === '#' || matrixToMatch[2] === '!';
+
+ const classes = classNames({
+ "mx_UserPill": isUserPill,
+ "mx_RoomPill": isRoomPill,
+ });
+
+ let avatar = null;
+ if (isUserPill) {
+ // If this user is not a member of this room, default to the empty
+ // member. This could be improved by doing an async profile lookup.
+ const member = this.props.room.getMember(matrixToMatch[1]) ||
+ new RoomMember(null, matrixToMatch[1]);
+ avatar = member ? : null;
+ } else if (isRoomPill) {
+ const room = matrixToMatch[2] === '#' ?
+ MatrixClientPeg.get().getRooms().find((r) => {
+ return r.getCanonicalAlias() === matrixToMatch[1];
+ }) : MatrixClientPeg.get().getRoom(matrixToMatch[1]);
+ avatar = room ? : null;
+ }
+
+ if (isUserPill || isRoomPill) {
+ return (
+
+ {avatar}
+ {props.children}
+
+ );
+ }
+
+ return (
+
+ {props.children}
+
+ );
+ },
+ });
+ const compositeDecorator = new CompositeDecorator(decorators);
let editorState = null;
if (contentState) {
@@ -319,6 +385,60 @@ export default class MessageComposerInput extends React.Component {
onEditorContentChanged = (editorState: EditorState) => {
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
+ const currentBlock = editorState.getSelection().getStartKey();
+ const currentSelection = editorState.getSelection();
+ const currentStartOffset = editorState.getSelection().getStartOffset();
+
+ const block = editorState.getCurrentContent().getBlockForKey(currentBlock);
+ const text = block.getText();
+
+ const entityBeforeCurrentOffset = block.getEntityAt(currentStartOffset - 1);
+ const entityAtCurrentOffset = block.getEntityAt(currentStartOffset);
+
+ // If the cursor is on the boundary between an entity and a non-entity and the
+ // text before the cursor has whitespace at the end, set the entity state of the
+ // character before the cursor (the whitespace) to null. This allows the user to
+ // stop editing the link.
+ if (entityBeforeCurrentOffset && !entityAtCurrentOffset &&
+ /\s$/.test(text.slice(0, currentStartOffset))) {
+ editorState = RichUtils.toggleLink(
+ editorState,
+ currentSelection.merge({
+ anchorOffset: currentStartOffset - 1,
+ focusOffset: currentStartOffset,
+ }),
+ null,
+ );
+ // Reset selection
+ editorState = EditorState.forceSelection(editorState, currentSelection);
+ }
+
+ // Automatic replacement of plaintext emoji to Unicode emoji
+ if (UserSettingsStore.getSyncedSetting('MessageComposerInput.autoReplaceEmoji', false)) {
+ // The first matched group includes just the matched plaintext emoji
+ const emojiMatch = REGEX_EMOJI_WHITESPACE.exec(text.slice(0, currentStartOffset));
+ if(emojiMatch) {
+ // plaintext -> hex unicode
+ const emojiUc = asciiList[emojiMatch[1]];
+ // hex unicode -> shortname -> actual unicode
+ const unicodeEmoji = shortnameToUnicode(EMOJI_UNICODE_TO_SHORTNAME[emojiUc]);
+ const newContentState = Modifier.replaceText(
+ editorState.getCurrentContent(),
+ currentSelection.merge({
+ anchorOffset: currentStartOffset - emojiMatch[0].length,
+ focusOffset: currentStartOffset,
+ }),
+ unicodeEmoji,
+ );
+ editorState = EditorState.push(
+ editorState,
+ newContentState,
+ 'insert-characters',
+ );
+ editorState = EditorState.forceSelection(editorState, newContentState.getSelectionAfter());
+ }
+ }
+
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
this.setState({
editorState,
@@ -517,10 +637,13 @@ export default class MessageComposerInput extends React.Component {
}
const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
- // If we're in any of these three types of blocks, shift enter should insert soft newlines
- // And just enter should end the block
- // XXX: Empirically enter does not end these blocks
- if(['blockquote', 'unordered-list-item', 'ordered-list-item'].includes(currentBlockType)) {
+ if(
+ ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item']
+ .includes(currentBlockType)
+ ) {
+ // By returning false, we allow the default draft-js key binding to occur,
+ // which in this case invokes "split-block". This creates a new block of the
+ // same type, allowing the user to delete it with backspace.
return false;
}
@@ -581,6 +704,15 @@ export default class MessageComposerInput extends React.Component {
}
});
}
+ if (!shouldSendHTML) {
+ const hasLink = blocks.some((block) => {
+ return block.getCharacterList().filter((c) => {
+ const entityKey = c.getEntity();
+ return entityKey && Entity.get(entityKey).getType() === 'LINK';
+ }).size > 0;
+ });
+ shouldSendHTML = hasLink;
+ }
if (shouldSendHTML) {
contentHTML = HtmlUtils.processHtmlForSending(
RichText.contentStateToHTML(contentState),
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index d255670a52..d6a973f648 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.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 React from 'react';
import { _t, _tJsx } from '../../../languageHandler';
import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -183,8 +183,14 @@ module.exports = React.createClass({
});
},
+ /**
+ * Returns a promise which resolves once all of the save operations have completed or failed.
+ *
+ * The result is a list of promise state snapshots, each with the form
+ * `{ state: "fulfilled", value: v }` or `{ state: "rejected", reason: r }`.
+ */
save: function() {
- var stateWasSetDefer = q.defer();
+ var stateWasSetDefer = Promise.defer();
// the caller may have JUST called setState on stuff, so we need to re-render before saving
// else we won't use the latest values of things.
// We can be a bit cheeky here and set a loading flag, and listen for the callback on that
@@ -194,8 +200,18 @@ module.exports = React.createClass({
this.setState({ _loading: false});
});
+ function mapPromiseToSnapshot(p) {
+ return p.then((r) => {
+ return { state: "fulfilled", value: r };
+ }, (e) => {
+ return { state: "rejected", reason: e };
+ });
+ }
+
return stateWasSetDefer.promise.then(() => {
- return q.allSettled(this._calcSavePromises());
+ return Promise.all(
+ this._calcSavePromises().map(mapPromiseToSnapshot),
+ );
});
},
@@ -282,7 +298,7 @@ module.exports = React.createClass({
// color scheme
var p;
p = this.saveColor();
- if (!q.isFulfilled(p)) {
+ if (!p.isFulfilled()) {
promises.push(p);
}
@@ -294,7 +310,7 @@ module.exports = React.createClass({
// encryption
p = this.saveEnableEncryption();
- if (!q.isFulfilled(p)) {
+ if (!p.isFulfilled()) {
promises.push(p);
}
@@ -305,25 +321,25 @@ module.exports = React.createClass({
},
saveAliases: function() {
- if (!this.refs.alias_settings) { return [q()]; }
+ if (!this.refs.alias_settings) { return [Promise.resolve()]; }
return this.refs.alias_settings.saveSettings();
},
saveColor: function() {
- if (!this.refs.color_settings) { return q(); }
+ if (!this.refs.color_settings) { return Promise.resolve(); }
return this.refs.color_settings.saveSettings();
},
saveUrlPreviewSettings: function() {
- if (!this.refs.url_preview_settings) { return q(); }
+ if (!this.refs.url_preview_settings) { return Promise.resolve(); }
return this.refs.url_preview_settings.saveSettings();
},
saveEnableEncryption: function() {
- if (!this.refs.encrypt) { return q(); }
+ if (!this.refs.encrypt) { return Promise.resolve(); }
var encrypt = this.refs.encrypt.checked;
- if (!encrypt) { return q(); }
+ if (!encrypt) { return Promise.resolve(); }
var roomId = this.props.room.roomId;
return MatrixClientPeg.get().sendStateEvent(
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 099ae2deae..14ec9806b4 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -21,7 +21,7 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
var Modal = require("../../../Modal");
var sdk = require("../../../index");
-import q from 'q';
+import Promise from 'bluebird';
import AccessibleButton from '../elements/AccessibleButton';
import { _t } from '../../../languageHandler';
@@ -161,7 +161,7 @@ module.exports = React.createClass({
},
_optionallySetEmail: function() {
- const deferred = q.defer();
+ const deferred = Promise.defer();
// Ask for an email otherwise the user has no way to reset their password
const SetEmailDialog = sdk.getComponent("dialogs.SetEmailDialog");
Modal.createDialog(SetEmailDialog, {
diff --git a/src/createRoom.js b/src/createRoom.js
index 916405776d..74e4b3c2fc 100644
--- a/src/createRoom.js
+++ b/src/createRoom.js
@@ -21,7 +21,7 @@ import { _t } from './languageHandler';
import dis from "./dispatcher";
import * as Rooms from "./Rooms";
-import q from 'q';
+import Promise from 'bluebird';
/**
* Create a new room, and switch to it.
@@ -42,7 +42,7 @@ function createRoom(opts) {
const client = MatrixClientPeg.get();
if (client.isGuest()) {
dis.dispatch({action: 'view_set_mxid'});
- return q(null);
+ return Promise.resolve(null);
}
const defaultPreset = opts.dmUserId ? 'trusted_private_chat' : 'private_chat';
@@ -92,7 +92,7 @@ function createRoom(opts) {
if (opts.dmUserId) {
return Rooms.setDMRoom(roomId, opts.dmUserId);
} else {
- return q();
+ return Promise.resolve();
}
}).then(function() {
// NB createRoom doesn't block on the client seeing the echo that the
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4e40415589..8ba15045a8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -956,5 +956,6 @@
"Featured Rooms:": "Featured Rooms:",
"Error whilst fetching joined groups": "Error whilst fetching joined groups",
"Featured Users:": "Featured Users:",
- "Edit Group": "Edit Group"
+ "Edit Group": "Edit Group",
+ "Automatically replace plain text Emoji": "Automatically replace plain text Emoji"
}
diff --git a/src/languageHandler.js b/src/languageHandler.js
index 1f0e6326e0..e956d4f8bd 100644
--- a/src/languageHandler.js
+++ b/src/languageHandler.js
@@ -17,7 +17,7 @@ limitations under the License.
import request from 'browser-request';
import counterpart from 'counterpart';
-import q from 'q';
+import Promise from 'bluebird';
import React from 'react';
import UserSettingsStore from './UserSettingsStore';
@@ -231,7 +231,7 @@ export function getCurrentLanguage() {
}
function getLangsJson() {
- const deferred = q.defer();
+ const deferred = Promise.defer();
request(
{ method: "GET", url: i18nFolder + 'languages.json' },
@@ -247,7 +247,7 @@ function getLangsJson() {
}
function getLanguage(langPath) {
- const deferred = q.defer();
+ const deferred = Promise.defer();
let response_return = {};
request(
diff --git a/src/utils/DecryptFile.js b/src/utils/DecryptFile.js
index 8b5f014f2c..04496e4204 100644
--- a/src/utils/DecryptFile.js
+++ b/src/utils/DecryptFile.js
@@ -20,7 +20,7 @@ import encrypt from 'browser-encrypt-attachment';
import 'isomorphic-fetch';
// Grab the client so that we can turn mxc:// URLs into https:// URLS.
import MatrixClientPeg from '../MatrixClientPeg';
-import q from 'q';
+import Promise from 'bluebird';
/**
@@ -28,7 +28,7 @@ import q from 'q';
* @return {Promise} A promise that resolves with the data:// URI.
*/
export function readBlobAsDataUri(file) {
- var deferred = q.defer();
+ var deferred = Promise.defer();
var reader = new FileReader();
reader.onload = function(e) {
deferred.resolve(e.target.result);
@@ -53,7 +53,7 @@ export function readBlobAsDataUri(file) {
export function decryptFile(file) {
const url = MatrixClientPeg.get().mxcUrlToHttp(file.url);
// Download the encrypted file as an array buffer.
- return q(fetch(url)).then(function(response) {
+ return Promise.resolve(fetch(url)).then(function(response) {
return response.arrayBuffer();
}).then(function(responseData) {
// Decrypt the array buffer using the information taken from
diff --git a/src/utils/MultiInviter.js b/src/utils/MultiInviter.js
index 68a0800ed7..c26cc6b52e 100644
--- a/src/utils/MultiInviter.js
+++ b/src/utils/MultiInviter.js
@@ -15,7 +15,7 @@ limitations under the License.
*/
import {getAddressType, inviteToRoom} from '../Invite';
-import q from 'q';
+import Promise from 'bluebird';
/**
* Invites multiple addresses to a room, handling rate limiting from the server
@@ -55,7 +55,7 @@ export default class MultiInviter {
this.errorTexts[addr] = 'Unrecognised address';
}
}
- this.deferred = q.defer();
+ this.deferred = Promise.defer();
this._inviteMore(0);
return this.deferred.promise;
diff --git a/test/components/structures/ScrollPanel-test.js b/test/components/structures/ScrollPanel-test.js
index a783f424e7..e7d3d7b0e6 100644
--- a/test/components/structures/ScrollPanel-test.js
+++ b/test/components/structures/ScrollPanel-test.js
@@ -18,7 +18,7 @@ var React = require('react');
var ReactDOM = require("react-dom");
var ReactTestUtils = require('react-addons-test-utils');
var expect = require('expect');
-var q = require('q');
+import Promise from 'bluebird';
var sdk = require('matrix-react-sdk');
@@ -58,7 +58,7 @@ var Tester = React.createClass({
if (handler) {
res = handler();
} else {
- res = q(false);
+ res = Promise.resolve(false);
}
if (defer) {
@@ -74,7 +74,7 @@ var Tester = React.createClass({
/* returns a promise which will resolve when the fill happens */
awaitFill: function(dir) {
console.log("ScrollPanel Tester: awaiting " + dir + " fill");
- var defer = q.defer();
+ var defer = Promise.defer();
this._fillDefers[dir] = defer;
return defer.promise;
},
@@ -94,7 +94,7 @@ var Tester = React.createClass({
/* returns a promise which will resolve when a scroll event happens */
awaitScroll: function() {
console.log("Awaiting scroll");
- this._scrollDefer = q.defer();
+ this._scrollDefer = Promise.defer();
return this._scrollDefer.promise;
},
@@ -168,7 +168,7 @@ describe('ScrollPanel', function() {
const sp = tester.scrollPanel();
let retriesRemaining = 1;
const awaitReady = function() {
- return q().then(() => {
+ return Promise.resolve().then(() => {
if (sp._pendingFillRequests.b === false &&
sp._pendingFillRequests.f === false
) {
@@ -195,7 +195,7 @@ describe('ScrollPanel', function() {
it('should handle scrollEvent strangeness', function() {
const events = [];
- return q().then(() => {
+ return Promise.resolve().then(() => {
// initialise with a load of events
for (let i = 0; i < 20; i++) {
events.push(i+80);
@@ -227,7 +227,7 @@ describe('ScrollPanel', function() {
it('should not get stuck in #528 workaround', function(done) {
var events = [];
- q().then(() => {
+ Promise.resolve().then(() => {
// initialise with a bunch of events
for (var i = 0; i < 40; i++) {
events.push(i);
diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index 748e37bee3..98ec65b8e8 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -18,7 +18,7 @@ var React = require('react');
var ReactDOM = require('react-dom');
var ReactTestUtils = require('react-addons-test-utils');
var expect = require('expect');
-var q = require('q');
+import Promise from 'bluebird';
var sinon = require('sinon');
var jssdk = require('matrix-js-sdk');
@@ -145,20 +145,20 @@ describe('TimelinePanel', function() {
// panel isn't paginating
var awaitPaginationCompletion = function() {
if(!panel.state.forwardPaginating)
- return q();
+ return Promise.resolve();
else
- return q.delay(0).then(awaitPaginationCompletion);
+ return Promise.delay(0).then(awaitPaginationCompletion);
};
// helper function which will return a promise which resolves when
// the TimelinePanel fires a scroll event
var awaitScroll = function() {
- scrollDefer = q.defer();
+ scrollDefer = Promise.defer();
return scrollDefer.promise;
};
// let the first round of pagination finish off
- q.delay(5).then(() => {
+ Promise.delay(5).then(() => {
expect(panel.state.canBackPaginate).toBe(false);
expect(scryEventTiles(panel).length).toEqual(N_EVENTS);
@@ -214,7 +214,7 @@ describe('TimelinePanel', function() {
client.paginateEventTimeline = sinon.spy((tl, opts) => {
console.log("paginate:", opts);
expect(opts.backwards).toBe(true);
- return q(true);
+ return Promise.resolve(true);
});
var rendered = ReactDOM.render(
@@ -279,7 +279,7 @@ describe('TimelinePanel', function() {
// helper function which will return a promise which resolves when
// the TimelinePanel fires a scroll event
var awaitScroll = function() {
- scrollDefer = q.defer();
+ scrollDefer = Promise.defer();
return scrollDefer.promise.then(() => {
console.log("got scroll event; scrollTop now " +
diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.js b/test/components/views/dialogs/InteractiveAuthDialog-test.js
index ecfaba4e2c..f606793132 100644
--- a/test/components/views/dialogs/InteractiveAuthDialog-test.js
+++ b/test/components/views/dialogs/InteractiveAuthDialog-test.js
@@ -15,7 +15,7 @@ limitations under the License.
*/
import expect from 'expect';
-import q from 'q';
+import Promise from 'bluebird';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-addons-test-utils';
@@ -50,7 +50,7 @@ describe('InteractiveAuthDialog', function () {
it('Should successfully complete a password flow', function() {
const onFinished = sinon.spy();
- const doRequest = sinon.stub().returns(q({a:1}));
+ const doRequest = sinon.stub().returns(Promise.resolve({a:1}));
// tell the stub matrixclient to return a real userid
var client = MatrixClientPeg.get();
@@ -110,7 +110,7 @@ describe('InteractiveAuthDialog', function () {
);
// let the request complete
- return q.delay(1);
+ return Promise.delay(1);
}).then(() => {
expect(onFinished.callCount).toEqual(1);
expect(onFinished.calledWithExactly(true, {a:1})).toBe(true);
diff --git a/test/components/views/rooms/MessageComposerInput-test.js b/test/components/views/rooms/MessageComposerInput-test.js
index 6d4b4e69cc..fe379afcff 100644
--- a/test/components/views/rooms/MessageComposerInput-test.js
+++ b/test/components/views/rooms/MessageComposerInput-test.js
@@ -3,7 +3,7 @@ import ReactTestUtils from 'react-addons-test-utils';
import ReactDOM from 'react-dom';
import expect, {createSpy} from 'expect';
import sinon from 'sinon';
-import Q from 'q';
+import Promise from 'bluebird';
import * as testUtils from '../../../test-utils';
import sdk from 'matrix-react-sdk';
import UserSettingsStore from '../../../../src/UserSettingsStore';
@@ -47,7 +47,7 @@ describe('MessageComposerInput', () => {
// warnings
// (please can we make the components not setState() after
// they are unmounted?)
- Q.delay(10).done(() => {
+ Promise.delay(10).done(() => {
if (parentDiv) {
ReactDOM.unmountComponentAtNode(parentDiv);
parentDiv.remove();
diff --git a/test/stores/RoomViewStore-test.js b/test/stores/RoomViewStore-test.js
index adcae90e9b..be598de8da 100644
--- a/test/stores/RoomViewStore-test.js
+++ b/test/stores/RoomViewStore-test.js
@@ -7,7 +7,7 @@ import RoomViewStore from '../../src/stores/RoomViewStore';
import peg from '../../src/MatrixClientPeg';
import * as testUtils from '../test-utils';
-import q from 'q';
+import Promise from 'bluebird';
const dispatch = testUtils.getDispatchForStore(RoomViewStore);
@@ -39,7 +39,7 @@ describe('RoomViewStore', function() {
});
it('can be used to view a room by alias and join', function(done) {
- peg.get().getRoomIdForAlias.returns(q({room_id: "!randomcharacters:aser.ver"}));
+ peg.get().getRoomIdForAlias.returns(Promise.resolve({room_id: "!randomcharacters:aser.ver"}));
peg.get().joinRoom = (roomAddress) => {
expect(roomAddress).toBe("#somealias2:aser.ver");
done();
diff --git a/test/test-utils.js b/test/test-utils.js
index bc6b484bb5..23f16a2e4c 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -1,7 +1,7 @@
"use strict";
import sinon from 'sinon';
-import q from 'q';
+import Promise from 'bluebird';
import peg from '../src/MatrixClientPeg';
import dis from '../src/dispatcher';
@@ -75,12 +75,12 @@ export function createTestClient() {
on: sinon.stub(),
removeListener: sinon.stub(),
isRoomEncrypted: sinon.stub().returns(false),
- peekInRoom: sinon.stub().returns(q(mkStubRoom())),
+ peekInRoom: sinon.stub().returns(Promise.resolve(mkStubRoom())),
- paginateEventTimeline: sinon.stub().returns(q()),
- sendReadReceipt: sinon.stub().returns(q()),
- getRoomIdForAlias: sinon.stub().returns(q()),
- getProfileInfo: sinon.stub().returns(q({})),
+ paginateEventTimeline: sinon.stub().returns(Promise.resolve()),
+ sendReadReceipt: sinon.stub().returns(Promise.resolve()),
+ getRoomIdForAlias: sinon.stub().returns(Promise.resolve()),
+ getProfileInfo: sinon.stub().returns(Promise.resolve({})),
getAccountData: (type) => {
return mkEvent({
type,
@@ -89,9 +89,9 @@ export function createTestClient() {
});
},
setAccountData: sinon.stub(),
- sendTyping: sinon.stub().returns(q({})),
- sendTextMessage: () => q({}),
- sendHtmlMessage: () => q({}),
+ sendTyping: sinon.stub().returns(Promise.resolve({})),
+ sendTextMessage: () => Promise.resolve({}),
+ sendHtmlMessage: () => Promise.resolve({}),
getSyncState: () => "SYNCING",
generateClientSecret: () => "t35tcl1Ent5ECr3T",
isGuest: () => false,
@@ -101,13 +101,13 @@ export function createTestClient() {
export function createTestRtsClient(teamMap, sidMap) {
return {
getTeamsConfig() {
- return q(Object.keys(teamMap).map((token) => teamMap[token]));
+ return Promise.resolve(Object.keys(teamMap).map((token) => teamMap[token]));
},
trackReferral(referrer, emailSid, clientSecret) {
- return q({team_token: sidMap[emailSid]});
+ return Promise.resolve({team_token: sidMap[emailSid]});
},
getTeam(teamToken) {
- return q(teamMap[teamToken]);
+ return Promise.resolve(teamMap[teamToken]);
},
};
}
*/}
+ />}
{/* Delete widget */}
{
this.processQuery(query, selection).then(() => {
deferred.resolve();
@@ -176,7 +176,7 @@ export default class Autocomplete extends React.Component {
}
forceComplete() {
- const done = Q.defer();
+ const done = Promise.defer();
this.setState({
forceComplete: true,
hide: false,
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 63737d5fad..37a9bcd0cd 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -17,7 +17,7 @@ var React = require('react');
import { _t } from '../../../languageHandler';
var classNames = require('classnames');
var Matrix = require("matrix-js-sdk");
-var q = require('q');
+import Promise from 'bluebird';
var MatrixClientPeg = require("../../../MatrixClientPeg");
var Modal = require("../../../Modal");
var Entities = require("../../../Entities");
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index e4ba6bbe81..14f52706ec 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -41,7 +41,6 @@ export default class MessageComposer extends React.Component {
this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
this.onInputStateChanged = this.onInputStateChanged.bind(this);
this.onEvent = this.onEvent.bind(this);
- this.onPageUnload = this.onPageUnload.bind(this);
this.state = {
autocompleteQuery: '',
@@ -62,21 +61,12 @@ export default class MessageComposer extends React.Component {
// marked as encrypted.
// XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
MatrixClientPeg.get().on("event", this.onEvent);
-
- window.addEventListener('beforeunload', this.onPageUnload);
}
componentWillUnmount() {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("event", this.onEvent);
}
- window.removeEventListener('beforeunload', this.onPageUnload);
- }
-
- onPageUnload(event) {
- if (this.messageComposerInput) {
- this.messageComposerInput.sentHistory.saveLastTextEntry();
- }
}
onEvent(event) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index e9dc216fa7..d4ae55f03a 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -16,16 +16,17 @@ limitations under the License.
import React from 'react';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
-import {Editor, EditorState, RichUtils, CompositeDecorator,
- convertFromRaw, convertToRaw, Modifier, EditorChangeType,
- getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState} from 'draft-js';
+import {Editor, EditorState, RichUtils, CompositeDecorator, Modifier,
+ getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState,
+ Entity} from 'draft-js';
import classNames from 'classnames';
import escape from 'lodash/escape';
-import Q from 'q';
+import Promise from 'bluebird';
import MatrixClientPeg from '../../../MatrixClientPeg';
import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
+import {RoomMember} from 'matrix-js-sdk';
import SlashCommands from '../../../SlashCommands';
import KeyCode from '../../../KeyCode';
import Modal from '../../../Modal';
@@ -43,6 +44,14 @@ import Markdown from '../../../Markdown';
import ComposerHistoryManager from '../../../ComposerHistoryManager';
import MessageComposerStore from '../../../stores/MessageComposerStore';
+import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix';
+const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
+
+import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
+const EMOJI_SHORTNAMES = Object.keys(emojioneList);
+const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
+const REGEX_EMOJI_WHITESPACE = new RegExp('(' + asciiRegexp + ')\\s$');
+
const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
const ZWS_CODE = 8203;
@@ -156,15 +165,72 @@ export default class MessageComposerInput extends React.Component {
this.client = MatrixClientPeg.get();
}
+ findLinkEntities(contentBlock, callback) {
+ contentBlock.findEntityRanges(
+ (character) => {
+ const entityKey = character.getEntity();
+ return (
+ entityKey !== null &&
+ Entity.get(entityKey).getType() === 'LINK'
+ );
+ }, callback,
+ );
+ }
/*
* "Does the right thing" to create an EditorState, based on:
* - whether we've got rich text mode enabled
* - contentState was passed in
*/
createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
- let decorators = richText ? RichText.getScopedRTDecorators(this.props) :
- RichText.getScopedMDDecorators(this.props),
- compositeDecorator = new CompositeDecorator(decorators);
+ const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
+ RichText.getScopedMDDecorators(this.props);
+ decorators.push({
+ strategy: this.findLinkEntities.bind(this),
+ component: (props) => {
+ const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+ const {url} = Entity.get(props.entityKey).getData();
+ const matrixToMatch = REGEX_MATRIXTO.exec(url);
+ const isUserPill = matrixToMatch[2] === '@';
+ const isRoomPill = matrixToMatch[2] === '#' || matrixToMatch[2] === '!';
+
+ const classes = classNames({
+ "mx_UserPill": isUserPill,
+ "mx_RoomPill": isRoomPill,
+ });
+
+ let avatar = null;
+ if (isUserPill) {
+ // If this user is not a member of this room, default to the empty
+ // member. This could be improved by doing an async profile lookup.
+ const member = this.props.room.getMember(matrixToMatch[1]) ||
+ new RoomMember(null, matrixToMatch[1]);
+ avatar = member ?