OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'luke/feature-async-pills' of github.com:matrix-org/matrix-react-sdk into luke/feature-async-pills

pull/21833/head
Luke Barnard 2017-07-25 09:37:47 +01:00
parent ac597996e0 d13c4b510c
commit 11f3a1db72
5 changed files with 113 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/views/elements/Pill.js
View File

@ -173,11 +173,11 @@ const Pill = React.createClass({
if (this.state.pillType) {
return this.props.inMessage ?
<a className={classes} href={this.props.url}>
<a className={classes} href={this.props.url} title={resource}>
{avatar}
{linkText}
</a> :
<span className={classes}>
<span className={classes} title={resource}>
{avatar}
{linkText}
</span>;

38
src/components/views/rooms/MessageComposerInput.js
View File

@ -43,6 +43,10 @@ import Markdown from '../../../Markdown';
import ComposerHistoryManager from '../../../ComposerHistoryManager';
import MessageComposerStore from '../../../stores/MessageComposerStore';
import {MATRIXTO_URL_PATTERN, MATRIXTO_MD_LINK_PATTERN} from '../../../linkify-matrix';
const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
const REGEX_MATRIXTO_MARKDOWN_GLOBAL = new RegExp(MATRIXTO_MD_LINK_PATTERN, 'g');
import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
@ -727,6 +731,35 @@ export default class MessageComposerInput extends React.Component {
sendTextFn = this.client.sendEmoteMessage;
}
// Strip MD user (tab-completed) mentions to preserve plaintext mention behaviour
contentText = contentText.replace(REGEX_MATRIXTO_MARKDOWN_GLOBAL,
(markdownLink, text, resource, prefix, offset) => {
// Calculate the offset relative to the current block that the offset is in
let sum = 0;
const blocks = contentState.getBlocksAsArray();
let block;
for (let i = 0; i < blocks.length; i++) {
block = blocks[i];
sum += block.getLength();
if (sum > offset) {
sum -= block.getLength();
break;
}
}
offset -= sum;
const entityKey = block.getEntityAt(offset);
const entity = entityKey ? Entity.get(entityKey) : null;
if (entity && entity.getData().isCompletion && prefix === '@') {
// This is a completed mention, so do not insert MD link, just text
return text;
} else {
// This is either a MD link that was typed into the composer or another
// type of pill (e.g. room pill)
return markdownLink;
}
});
let sendMessagePromise;
if (contentHTML) {
sendMessagePromise = sendHtmlFn.call(
@ -890,7 +923,10 @@ export default class MessageComposerInput extends React.Component {
let entityKey;
let mdCompletion;
if (href) {
entityKey = Entity.create('LINK', 'IMMUTABLE', {url: href});
entityKey = Entity.create('LINK', 'IMMUTABLE', {
url: href,
isCompletion: true,
});
if (!this.state.isRichtextEnabled) {
mdCompletion = `[${completion}](${href})`;
}

2
src/linkify-matrix.js
View File

@ -168,6 +168,8 @@ matrixLinkify.VECTOR_URL_PATTERN = "^(?:https?:\/\/)?(?:"
+ ")(#.*)";
matrixLinkify.MATRIXTO_URL_PATTERN = "^(?:https?:\/\/)?(?:www\\.)?matrix\\.to/#/((#|@|!).*)";
matrixLinkify.MATRIXTO_MD_LINK_PATTERN =
'\\[([^\\]]*)\\]\\((?:https?:\/\/)?(?:www\\.)?matrix\\.to/#/((#|@|!)[^\\)]*)\\)';
matrixLinkify.MATRIXTO_BASE_URL= "https://matrix.to";
matrixLinkify.options = {

66
test/components/views/rooms/MessageComposerInput-test.js
View File

@ -9,6 +9,7 @@ import sdk from 'matrix-react-sdk';
import UserSettingsStore from '../../../../src/UserSettingsStore';
const MessageComposerInput = sdk.getComponent('views.rooms.MessageComposerInput');
import MatrixClientPeg from '../../../../src/MatrixClientPeg';
import RoomMember from 'matrix-js-sdk';
function addTextToDraft(text) {
const components = document.getElementsByClassName('public-DraftEditor-content');
@ -31,6 +32,7 @@ describe('MessageComposerInput', () => {
testUtils.beforeEach(this);
sandbox = testUtils.stubClient(sandbox);
client = MatrixClientPeg.get();
client.credentials = {userId: '@me:domain.com'};
parentDiv = document.createElement('div');
document.body.appendChild(parentDiv);
@ -236,4 +238,68 @@ describe('MessageComposerInput', () => {
expect(spy.calledOnce).toEqual(true);
expect(spy.args[0][1]).toEqual('Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nFusce congue sapien sed neque molestie volutpat.');
});
it('should strip tab-completed mentions so that only the display name is sent in the plain body in Markdown mode', () => {
// Sending a HTML message because we have entities in the composer (because of completions)
const spy = sinon.spy(client, 'sendHtmlMessage');
mci.enableRichtext(false);
mci.setDisplayedCompletion({
completion: 'Some Member',
selection: mci.state.editorState.getSelection(),
href: `https://matrix.to/#/@some_member:domain.bla`,
});
mci.handleReturn(sinon.stub());
expect(spy.args[0][1]).toEqual(
'Some Member',
'the plaintext body should only include the display name',
);
expect(spy.args[0][2]).toEqual(
'<a href="https://matrix.to/#/@some_member:domain.bla">Some Member</a>',
'the html body should contain an anchor tag with a matrix.to href and display name text',
);
});
it('should strip tab-completed mentions so that only the display name is sent in the plain body in RTE mode', () => {
// Sending a HTML message because we have entities in the composer (because of completions)
const spy = sinon.spy(client, 'sendHtmlMessage');
mci.enableRichtext(true);
mci.setDisplayedCompletion({
completion: 'Some Member',
selection: mci.state.editorState.getSelection(),
href: `https://matrix.to/#/@some_member:domain.bla`,
});
mci.handleReturn(sinon.stub());
expect(spy.args[0][1]).toEqual('Some Member');
expect(spy.args[0][2]).toEqual('<a href="https://matrix.to/#/@some_member:domain.bla">Some Member</a>');
});
it('should not strip non-tab-completed mentions when manually typing MD', () => {
// Sending a HTML message because we have entities in the composer (because of completions)
const spy = sinon.spy(client, 'sendHtmlMessage');
// Markdown mode enabled
mci.enableRichtext(false);
addTextToDraft('[My Not-Tab-Completed Mention](https://matrix.to/#/@some_member:domain.bla)');
mci.handleReturn(sinon.stub());
expect(spy.args[0][1]).toEqual('[My Not-Tab-Completed Mention](https://matrix.to/#/@some_member:domain.bla)');
expect(spy.args[0][2]).toEqual('<a href="https://matrix.to/#/@some_member:domain.bla">My Not-Tab-Completed Mention</a>');
});
it('should not strip arbitrary typed (i.e. not tab-completed) MD links', () => {
// Sending a HTML message because we have entities in the composer (because of completions)
const spy = sinon.spy(client, 'sendHtmlMessage');
// Markdown mode enabled
mci.enableRichtext(false);
addTextToDraft('[Click here](https://some.lovely.url)');
mci.handleReturn(sinon.stub());
expect(spy.args[0][1]).toEqual('[Click here](https://some.lovely.url)');
expect(spy.args[0][2]).toEqual('<a href="https://some.lovely.url">Click here</a>');
});
});

7
test/test-utils.js
View File

@ -238,7 +238,12 @@ export function mkStubRoom(roomId = null) {
return {
roomId,
getReceiptsForEvent: sinon.stub().returns([]),
getMember: sinon.stub().returns({}),
getMember: sinon.stub().returns({
userId: '@member:domain.bla',
name: 'Member',
roomId: roomId,
getAvatarUrl: () => 'mxc://avatar.url/image.png',
}),
getJoinedMembers: sinon.stub().returns([]),
getPendingEvents: () => [],
getLiveTimeline: () => stubTimeline,