Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 29cdd1f

Browse files
committed
user and room decorators, history & typing notifs
1 parent 96526c2 commit 29cdd1f

File tree

2 files changed

+71
-17
lines changed

2 files changed

+71
-17
lines changed

src/RichText.js

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle} from 'draft-js';
1+
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
22
const ReactDOM = require('react-dom');
3+
var sdk = require('./index');
34

45
const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
56
element: 'p' // draft uses <div> by default which we don't really like
@@ -33,3 +34,49 @@ export function contentStateToHTML(contentState:ContentState): String {
3334
export function HTMLtoContentState(html:String): ContentState {
3435
return ContentState.createFromBlockArray(convertFromHTML(html));
3536
}
37+
38+
const USERNAME_REGEX = /@\S+:\S+/g;
39+
const ROOM_REGEX = /#\S+:\S+/g;
40+
41+
export function getScopedDecorator(scope) {
42+
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
43+
44+
const usernameDecorator = {
45+
strategy: (contentBlock, callback) => {
46+
findWithRegex(USERNAME_REGEX, contentBlock, callback);
47+
},
48+
component: (props) => {
49+
console.log(props.children);
50+
console.log(props.children[0].props.text);
51+
const member = scope.room.getMember(props.children[0].props.text);
52+
console.log(scope);
53+
window.scope = scope;
54+
let name = null;
55+
if(!!member) {
56+
name = member.name;
57+
}
58+
console.log(member);
59+
const avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
60+
return <span className="mx_UserPill">{avatar} {props.children}</span>;
61+
}
62+
};
63+
const roomDecorator = {
64+
strategy: (contentBlock, callback) => {
65+
findWithRegex(ROOM_REGEX, contentBlock, callback);
66+
},
67+
component: (props) => {
68+
return <span className="mx_RoomPill">{props.children}</span>;
69+
}
70+
};
71+
72+
return new CompositeDecorator([usernameDecorator, roomDecorator]);
73+
}
74+
75+
function findWithRegex(regex, contentBlock, callback) {
76+
const text = contentBlock.getText();
77+
let matchArr, start;
78+
while ((matchArr = regex.exec(text)) !== null) {
79+
start = matchArr.index;
80+
callback(start, start + matchArr[0].length);
81+
}
82+
}

src/components/views/rooms/MessageComposerInput.js

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ marked.setOptions({
2727
smartypants: false
2828
});
2929

30-
import {Editor, EditorState, RichUtils} from 'draft-js';
30+
import {Editor, EditorState, RichUtils, CompositeDecorator} from 'draft-js';
3131

3232
var MatrixClientPeg = require("../../../MatrixClientPeg");
3333
var SlashCommands = require("../../../SlashCommands");
@@ -38,7 +38,7 @@ var sdk = require('../../../index');
3838
var dis = require("../../../dispatcher");
3939
var KeyCode = require("../../../KeyCode");
4040

41-
import {contentStateToHTML, HTMLtoContentState} from '../../../RichText';
41+
import {contentStateToHTML, HTMLtoContentState, getScopedDecorator} from '../../../RichText';
4242

4343
var TYPING_USER_TIMEOUT = 10000;
4444
var TYPING_SERVER_TIMEOUT = 30000;
@@ -54,13 +54,14 @@ export default class MessageComposerInput extends React.Component {
5454
this.onInputClick = this.onInputClick.bind(this);
5555

5656
this.state = {
57-
editorState: EditorState.createEmpty()
57+
editorState: EditorState.createEmpty(getScopedDecorator(this.props))
5858
};
5959
}
6060

6161
componentWillMount() {
6262
this.oldScrollHeight = 0;
6363
this.markdownEnabled = MARKDOWN_ENABLED;
64+
const component = this;
6465
this.sentHistory = {
6566
// The list of typed messages. Index 0 is more recent
6667
data: [],
@@ -73,7 +74,7 @@ export default class MessageComposerInput extends React.Component {
7374
// The textarea element to set text to.
7475
element: null,
7576

76-
init: function(element, roomId) {
77+
init: function (element, roomId) {
7778
this.roomId = roomId;
7879
this.element = element;
7980
this.position = -1;
@@ -88,7 +89,7 @@ export default class MessageComposerInput extends React.Component {
8889
}
8990
},
9091

91-
push: function(text) {
92+
push: function (text) {
9293
// store a message in the sent history
9394
this.data.unshift(text);
9495
window.sessionStorage.setItem(
@@ -101,7 +102,7 @@ export default class MessageComposerInput extends React.Component {
101102
},
102103

103104
// move in the history. Returns true if we managed to move.
104-
next: function(offset) {
105+
next: function (offset) {
105106
if (this.position === -1) {
106107
// user is going into the history, save the current line.
107108
this.originalText = this.element.value;
@@ -131,26 +132,26 @@ export default class MessageComposerInput extends React.Component {
131132
this.element.value = this.originalText;
132133
}
133134

134-
self.resizeInput();
135+
component.resizeInput();
135136
return true;
136137
},
137138

138-
saveLastTextEntry: () => {
139+
saveLastTextEntry: function () {
139140
// save the currently entered text in order to restore it later.
140141
// NB: This isn't 'originalText' because we want to restore
141142
// sent history items too!
142-
console.error('fixme');
143-
const contentHTML = contentStateToHTML(this.state.editorState.getCurrentContent());
143+
const contentHTML = contentStateToHTML(component.state.editorState.getCurrentContent());
144+
console.error(contentHTML);
144145
window.sessionStorage.setItem("input_" + this.roomId, contentHTML);
145146
},
146147

147-
setLastTextEntry: () => {
148-
console.error('fixme');
148+
setLastTextEntry: function () {
149149
const contentHTML = window.sessionStorage.getItem("input_" + this.roomId);
150+
console.error(contentHTML);
150151
if (contentHTML) {
151152
const content = HTMLtoContentState(contentHTML);
152-
this.state.editorState = EditorState.createWithContent(content);
153-
self.resizeInput();
153+
component.setState({editorState: EditorState.createWithContent(content, getScopedDecorator(this.props))});
154+
component.resizeInput();
154155
}
155156
}
156157
};
@@ -177,10 +178,10 @@ export default class MessageComposerInput extends React.Component {
177178
var editor = this.refs.editor;
178179
switch (payload.action) {
179180
case 'focus_composer':
180-
console.error('fixme');
181181
editor.focus();
182182
break;
183183
case 'insert_displayname':
184+
console.error('fixme');
184185
if (textarea.value.length) {
185186
var left = textarea.value.substring(0, textarea.selectionStart);
186187
var right = textarea.value.substring(textarea.selectionEnd);
@@ -426,6 +427,12 @@ export default class MessageComposerInput extends React.Component {
426427

427428
onChange(editorState) {
428429
this.setState({editorState});
430+
431+
if(editorState.getCurrentContent().hasText()) {
432+
this.onTypingActivity()
433+
} else {
434+
this.onFinishedTyping();
435+
}
429436
}
430437

431438
handleKeyCommand(command) {
@@ -451,7 +458,7 @@ export default class MessageComposerInput extends React.Component {
451458
MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);
452459

453460
this.setState({
454-
editorState: EditorState.createEmpty()
461+
editorState: EditorState.createEmpty(getScopedDecorator(this.props))
455462
});
456463

457464
return true;

0 commit comments

Comments
 (0)