PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Pillify room notif pills in composer

Browse source
This commit is contained in:
David Baker 2017-11-06 15:11:42 +00:00
parent 49ee78dab1
commit adc4290451
1 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -58,6 +58,9 @@ const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
const ZWS_CODE = 8203; const ZWS_CODE = 8203;
const ZWS = String.fromCharCode(ZWS_CODE); // zero width space const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
const ATROOMPILL_ENTITY_TYPE = 'ATROOMPILL';
function stateToMarkdown(state) { function stateToMarkdown(state) {
return __stateToMarkdown(state) return __stateToMarkdown(state)
.replace( .replace(
@ -188,13 +191,16 @@ export default class MessageComposerInput extends React.Component {
this.client = MatrixClientPeg.get(); this.client = MatrixClientPeg.get();
} }
findLinkEntities(contentState: ContentState, contentBlock: ContentBlock, callback) { findPillEntities(contentState: ContentState, contentBlock: ContentBlock, callback) {
contentBlock.findEntityRanges( contentBlock.findEntityRanges(
(character) => { (character) => {
const entityKey = character.getEntity(); const entityKey = character.getEntity();
return ( return (
entityKey !== null && entityKey !== null &&
contentState.getEntity(entityKey).getType() === 'LINK' (
contentState.getEntity(entityKey).getType() === 'LINK' ||
contentState.getEntity(entityKey).getType() === ATROOMPILL_ENTITY_TYPE
)
); );
}, callback, }, callback,
); );
@ -210,11 +216,19 @@ export default class MessageComposerInput extends React.Component {
RichText.getScopedMDDecorators(this.props); RichText.getScopedMDDecorators(this.props);
const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false); const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false);
decorators.push({ decorators.push({
strategy: this.findLinkEntities.bind(this), strategy: this.findPillEntities.bind(this),
component: (entityProps) => { component: (entityProps) => {
const Pill = sdk.getComponent('elements.Pill'); const Pill = sdk.getComponent('elements.Pill');
const type = entityProps.contentState.getEntity(entityProps.entityKey).getType();
const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData(); const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData();
if (Pill.isPillUrl(url)) { if (type === ATROOMPILL_ENTITY_TYPE) {
return <Pill
type={Pill.TYPE_AT_ROOM_MENTION}
room={this.props.room}
offsetKey={entityProps.offsetKey}
shouldShowPillAvatar={shouldShowPillAvatar}
/>;
} else if (Pill.isPillUrl(url)) {
return <Pill return <Pill
url={url} url={url}
room={this.props.room} room={this.props.room}
@ -784,7 +798,7 @@ export default class MessageComposerInput extends React.Component {
const pt = contentState.getBlocksAsArray().map((block) => { const pt = contentState.getBlocksAsArray().map((block) => {
let blockText = block.getText(); let blockText = block.getText();
let offset = 0; let offset = 0;
this.findLinkEntities(contentState, block, (start, end) => { this.findPillEntities(contentState, block, (start, end) => {
const entity = contentState.getEntity(block.getEntityAt(start)); const entity = contentState.getEntity(block.getEntityAt(start));
if (entity.getType() !== 'LINK') { if (entity.getType() !== 'LINK') {
return; return;
@ -989,6 +1003,11 @@ export default class MessageComposerInput extends React.Component {
isCompletion: true, isCompletion: true,
}); });
entityKey = contentState.getLastCreatedEntityKey(); entityKey = contentState.getLastCreatedEntityKey();
} else if (completion === '@room') {
contentState = contentState.createEntity(ATROOMPILL_ENTITY_TYPE, 'IMMUTABLE', {
isCompletion: true,
});
entityKey = contentState.getLastCreatedEntityKey();
} }
let selection; let selection;