mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Insert MD links when autocompleting in MD mode

Browse source 
These will appear decorated because they are inserted as entities. It was necessary to modify pills to have an explicit linkText that is derived from the `href` being pillified (and is thus no longer the inserted completion but rather the display name (or user ID) or room alias.
This commit is contained in:
Luke Barnard 2017-07-20 15:09:59 +01:00
parent 199b771051
commit 84fe51a162
3 changed files with 21 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/autocomplete/RoomProvider.js
View file

@ -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: (
<PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
),

8
src/autocomplete/UserProvider.js
View file

@ -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: (
<PillCompletion
initialComponent={<MemberAvatar member={user} width={24} height={24}/>}

27
src/components/views/rooms/MessageComposerInput.js
View file

@ -198,6 +198,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 +215,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 ? <MemberAvatar member={member} width={16} height={16}/> : null;
} else if (isRoomPill) {
const room = prefix === '#' ?
MatrixClientPeg.get().getRooms().find((r) => {
return r.getCanonicalAlias() === resource;
}) : MatrixClientPeg.get().getRoom(resource);
linkText = room.getCanonicalAlias();
avatar = room ? <RoomAvatar room={room} width={16} height={16}/> : null;
}
@ -225,7 +234,7 @@ export default class MessageComposerInput extends React.Component {
return (
<span className={classes}>
{avatar}
{props.children}
{linkText}
</span>
);
}
@ -928,14 +937,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(
@ -943,7 +952,7 @@ export default class MessageComposerInput extends React.Component {
RichText.textOffsetsToSelectionState(
range, activeEditorState.getCurrentContent().getBlocksAsArray(),
),
completion,
mdCompletion || completion,
null,
entityKey,
);