diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js index ed737a7d96..09d2d79833 100644 --- a/src/autocomplete/RoomProvider.js +++ b/src/autocomplete/RoomProvider.js @@ -55,13 +55,8 @@ export default class RoomProvider extends AutocompleteProvider { const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId; return { completion: displayAlias, - entity: { - type: 'LINK', - mutability: 'IMMUTABLE', - data: { - url: 'https://matrix.to/#/' + displayAlias, - }, - }, + suffix: ' ', + href: 'https://matrix.to/#/' + displayAlias, component: ( } title={room.name} description={displayAlias} /> ), diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js index 0a262d30cf..9c93cf537f 100644 --- a/src/autocomplete/UserProvider.js +++ b/src/autocomplete/UserProvider.js @@ -56,13 +56,7 @@ export default class UserProvider extends AutocompleteProvider { return { completion: displayName, suffix: range.start === 0 ? ': ' : ' ', - entity: { - type: 'LINK', - mutability: 'IMMUTABLE', - data: { - url: 'https://matrix.to/#/' + user.userId, - }, - }, + href: 'https://matrix.to/#/' + user.userId, component: ( } diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 29f627180b..3ff93d7b24 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -43,6 +43,7 @@ import {Completion} from "../../../autocomplete/Autocompleter"; import Markdown from '../../../Markdown'; import ComposerHistoryManager from '../../../ComposerHistoryManager'; import MessageComposerStore from '../../../stores/MessageComposerStore'; +import { getDisplayAliasForRoom } from '../../../Rooms'; import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix'; const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN); @@ -198,6 +199,9 @@ export default class MessageComposerInput extends React.Component { const resource = matrixToMatch[1]; // The room/user ID const prefix = matrixToMatch[2]; // The first character of prefix + // Default to the room/user ID + let linkText = resource; + const isUserPill = prefix === '@'; const isRoomPill = prefix === '#' || prefix === '!'; @@ -212,12 +216,18 @@ export default class MessageComposerInput extends React.Component { // member. This could be improved by doing an async profile lookup. const member = this.props.room.getMember(resource) || new RoomMember(null, resource); + + linkText = member.name; + avatar = member ? : null; } else if (isRoomPill) { const room = prefix === '#' ? MatrixClientPeg.get().getRooms().find((r) => { return r.getCanonicalAlias() === resource; }) : MatrixClientPeg.get().getRoom(resource); + + linkText = getDisplayAliasForRoom(room) || resource; + avatar = room ? : null; } @@ -225,7 +235,7 @@ export default class MessageComposerInput extends React.Component { return ( {avatar} - {props.children} + {linkText} ); } @@ -936,14 +946,14 @@ export default class MessageComposerInput extends React.Component { return false; } - const {range = {}, completion = '', entity = null, suffix = ''} = displayedCompletion; + const {range = {}, completion = '', href = null, suffix = ''} = displayedCompletion; let entityKey; - if (entity) { - entityKey = Entity.create( - entity.type, - entity.mutability, - entity.data, - ); + let mdCompletion; + if (href) { + entityKey = Entity.create('LINK', 'IMMUTABLE', {url: href}); + if (!this.state.isRichtextEnabled) { + mdCompletion = `[${completion}](${href})`; + } } let contentState = Modifier.replaceText( @@ -951,7 +961,7 @@ export default class MessageComposerInput extends React.Component { RichText.textOffsetsToSelectionState( range, activeEditorState.getCurrentContent().getBlocksAsArray(), ), - completion, + mdCompletion || completion, null, entityKey, );