2016-03-24 14:25:41 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
2016-06-11 13:22:08 +03:00
|
|
|
import React from 'react';
|
2016-07-08 10:24:28 +03:00
|
|
|
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2017-07-13 15:26:13 +03:00
|
|
|
import {Editor, EditorState, RichUtils, CompositeDecorator, Modifier,
|
|
|
|
getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState,
|
|
|
|
Entity} from 'draft-js';
|
2016-06-11 13:22:08 +03:00
|
|
|
|
2016-09-04 18:33:40 +03:00
|
|
|
import classNames from 'classnames';
|
2016-09-05 15:08:53 +03:00
|
|
|
import escape from 'lodash/escape';
|
2017-07-12 15:58:14 +03:00
|
|
|
import Promise from 'bluebird';
|
2016-05-27 07:45:55 +03:00
|
|
|
|
2016-07-08 10:24:28 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
|
2017-07-14 19:04:28 +03:00
|
|
|
import {RoomMember} from 'matrix-js-sdk';
|
2016-07-08 10:24:28 +03:00
|
|
|
import SlashCommands from '../../../SlashCommands';
|
2017-06-02 23:46:08 +03:00
|
|
|
import KeyCode from '../../../KeyCode';
|
2016-07-08 10:24:28 +03:00
|
|
|
import Modal from '../../../Modal';
|
|
|
|
import sdk from '../../../index';
|
2017-05-25 13:39:08 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-07-08 10:24:28 +03:00
|
|
|
import dis from '../../../dispatcher';
|
2016-09-05 15:08:53 +03:00
|
|
|
import UserSettingsStore from '../../../UserSettingsStore';
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-06-11 19:54:09 +03:00
|
|
|
import * as RichText from '../../../RichText';
|
2016-09-16 18:02:08 +03:00
|
|
|
import * as HtmlUtils from '../../../HtmlUtils';
|
2016-09-13 13:11:52 +03:00
|
|
|
import Autocomplete from './Autocomplete';
|
|
|
|
import {Completion} from "../../../autocomplete/Autocompleter";
|
2016-09-23 20:50:25 +03:00
|
|
|
import Markdown from '../../../Markdown';
|
2017-03-10 18:04:31 +03:00
|
|
|
import ComposerHistoryManager from '../../../ComposerHistoryManager';
|
2017-07-05 12:24:55 +03:00
|
|
|
import MessageComposerStore from '../../../stores/MessageComposerStore';
|
|
|
|
|
2017-07-14 19:04:28 +03:00
|
|
|
import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix';
|
|
|
|
const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
|
|
|
|
|
2017-07-13 19:37:43 +03:00
|
|
|
import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
|
|
|
|
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
|
|
|
|
const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
|
|
|
|
const REGEX_EMOJI_WHITESPACE = new RegExp('(' + asciiRegexp + ')\\s$');
|
|
|
|
|
2016-06-11 13:22:08 +03:00
|
|
|
const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
|
|
|
|
|
2016-09-09 15:37:42 +03:00
|
|
|
const ZWS_CODE = 8203;
|
|
|
|
const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
|
|
|
|
function stateToMarkdown(state) {
|
|
|
|
return __stateToMarkdown(state)
|
|
|
|
.replace(
|
|
|
|
ZWS, // draft-js-export-markdown adds these
|
|
|
|
''); // this is *not* a zero width space, trust me :)
|
|
|
|
}
|
2016-06-14 16:44:09 +03:00
|
|
|
|
2017-07-12 20:03:13 +03:00
|
|
|
function onSendMessageFailed(err, room) {
|
|
|
|
// XXX: temporary logging to try to diagnose
|
|
|
|
// https://github.com/vector-im/riot-web/issues/3148
|
|
|
|
console.log('MessageComposer got send failure: ' + err.name + '('+err+')');
|
|
|
|
if (err.name === "UnknownDeviceError") {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'unknown_device_error',
|
|
|
|
err: err,
|
|
|
|
room: room,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'message_send_failed',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-03-24 14:25:41 +03:00
|
|
|
/*
|
|
|
|
* The textInput part of the MessageComposer
|
|
|
|
*/
|
2016-05-28 09:28:22 +03:00
|
|
|
export default class MessageComposerInput extends React.Component {
|
2016-11-30 20:16:33 +03:00
|
|
|
static propTypes = {
|
|
|
|
// a callback which is called when the height of the composer is
|
|
|
|
// changed due to a change in content.
|
|
|
|
onResize: React.PropTypes.func,
|
|
|
|
|
|
|
|
// js-sdk Room object
|
|
|
|
room: React.PropTypes.object.isRequired,
|
|
|
|
|
|
|
|
// called with current plaintext content (as a string) whenever it changes
|
|
|
|
onContentChanged: React.PropTypes.func,
|
|
|
|
|
|
|
|
onInputStateChanged: React.PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2016-07-08 10:24:28 +03:00
|
|
|
static getKeyBinding(e: SyntheticKeyboardEvent): string {
|
|
|
|
// C-m => Toggles between rich text and markdown modes
|
2017-06-02 23:46:08 +03:00
|
|
|
if (e.keyCode === KeyCode.KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
|
2016-07-08 10:24:28 +03:00
|
|
|
return 'toggle-mode';
|
|
|
|
}
|
|
|
|
|
2017-06-27 17:17:57 +03:00
|
|
|
// Allow opening of dev tools. getDefaultKeyBinding would be 'italic' for KEY_I
|
|
|
|
if (e.keyCode === KeyCode.KEY_I && e.shiftKey && e.ctrlKey) {
|
|
|
|
// When null is returned, draft-js will NOT preventDefault, allowing dev tools
|
|
|
|
// to be toggled when the editor is focussed
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-07-08 10:24:28 +03:00
|
|
|
return getDefaultKeyBinding(e);
|
|
|
|
}
|
|
|
|
|
2016-09-13 13:11:52 +03:00
|
|
|
static getBlockStyle(block: ContentBlock): ?string {
|
|
|
|
if (block.getType() === 'strikethrough') {
|
|
|
|
return 'mx_Markdown_STRIKETHROUGH';
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-07-08 10:24:28 +03:00
|
|
|
client: MatrixClient;
|
2016-09-13 13:11:52 +03:00
|
|
|
autocomplete: Autocomplete;
|
2017-03-10 18:04:31 +03:00
|
|
|
historyManager: ComposerHistoryManager;
|
2016-07-08 10:24:28 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
this.onAction = this.onAction.bind(this);
|
2016-06-11 21:41:27 +03:00
|
|
|
this.handleReturn = this.handleReturn.bind(this);
|
|
|
|
this.handleKeyCommand = this.handleKeyCommand.bind(this);
|
2016-09-13 13:11:52 +03:00
|
|
|
this.onEditorContentChanged = this.onEditorContentChanged.bind(this);
|
2016-06-21 16:03:39 +03:00
|
|
|
this.onUpArrow = this.onUpArrow.bind(this);
|
|
|
|
this.onDownArrow = this.onDownArrow.bind(this);
|
|
|
|
this.onTab = this.onTab.bind(this);
|
2016-09-13 13:11:52 +03:00
|
|
|
this.onEscape = this.onEscape.bind(this);
|
|
|
|
this.setDisplayedCompletion = this.setDisplayedCompletion.bind(this);
|
2016-09-07 20:22:14 +03:00
|
|
|
this.onMarkdownToggleClicked = this.onMarkdownToggleClicked.bind(this);
|
2017-06-27 19:10:28 +03:00
|
|
|
this.onTextPasted = this.onTextPasted.bind(this);
|
2016-05-27 07:45:55 +03:00
|
|
|
|
2017-04-26 00:17:25 +03:00
|
|
|
const isRichtextEnabled = UserSettingsStore.getSyncedSetting('MessageComposerInput.isRichTextEnabled', false);
|
2016-06-14 21:43:34 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
this.state = {
|
2016-09-13 13:11:52 +03:00
|
|
|
// whether we're in rich text or markdown mode
|
2016-09-05 15:08:53 +03:00
|
|
|
isRichtextEnabled,
|
2016-09-13 13:11:52 +03:00
|
|
|
|
|
|
|
// the currently displayed editor state (note: this is always what is modified on input)
|
2017-07-05 13:49:34 +03:00
|
|
|
editorState: this.createEditorState(
|
|
|
|
isRichtextEnabled,
|
|
|
|
MessageComposerStore.getContentState(this.props.room.roomId),
|
|
|
|
),
|
2016-09-13 13:11:52 +03:00
|
|
|
|
|
|
|
// the original editor state, before we started tabbing through completions
|
|
|
|
originalEditorState: null,
|
2017-06-29 19:02:19 +03:00
|
|
|
|
|
|
|
// the virtual state "above" the history stack, the message currently being composed that
|
|
|
|
// we want to persist whilst browsing history
|
|
|
|
currentlyComposedEditorState: null,
|
2017-07-05 20:14:22 +03:00
|
|
|
|
|
|
|
// whether there were any completions
|
|
|
|
someCompletions: null,
|
2016-05-27 07:45:55 +03:00
|
|
|
};
|
2016-06-11 13:22:08 +03:00
|
|
|
|
2016-06-11 21:41:27 +03:00
|
|
|
this.client = MatrixClientPeg.get();
|
2016-06-11 13:22:08 +03:00
|
|
|
}
|
|
|
|
|
2017-07-13 15:26:13 +03:00
|
|
|
findLinkEntities(contentBlock, callback) {
|
|
|
|
contentBlock.findEntityRanges(
|
|
|
|
(character) => {
|
|
|
|
const entityKey = character.getEntity();
|
|
|
|
return (
|
|
|
|
entityKey !== null &&
|
|
|
|
Entity.get(entityKey).getType() === 'LINK'
|
|
|
|
);
|
|
|
|
}, callback,
|
|
|
|
);
|
|
|
|
}
|
2016-09-13 13:11:52 +03:00
|
|
|
/*
|
2016-06-11 13:22:08 +03:00
|
|
|
* "Does the right thing" to create an EditorState, based on:
|
|
|
|
* - whether we've got rich text mode enabled
|
|
|
|
* - contentState was passed in
|
|
|
|
*/
|
2016-06-12 00:51:18 +03:00
|
|
|
createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
|
2017-07-13 15:26:13 +03:00
|
|
|
const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
|
|
|
|
RichText.getScopedMDDecorators(this.props);
|
|
|
|
decorators.push({
|
2017-07-13 15:47:08 +03:00
|
|
|
strategy: this.findLinkEntities.bind(this),
|
|
|
|
component: (props) => {
|
2017-07-14 19:04:28 +03:00
|
|
|
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
|
|
|
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
2017-07-13 15:26:13 +03:00
|
|
|
const {url} = Entity.get(props.entityKey).getData();
|
2017-07-17 17:53:29 +03:00
|
|
|
|
|
|
|
// Default to the empty array if no match for simplicity
|
|
|
|
// resource and prefix will be undefined instead of throwing
|
|
|
|
const matrixToMatch = REGEX_MATRIXTO.exec(url) || [];
|
|
|
|
|
|
|
|
const resource = matrixToMatch[1]; // The room/user ID
|
|
|
|
const prefix = matrixToMatch[2]; // The first character of prefix
|
|
|
|
|
|
|
|
const isUserPill = prefix === '@';
|
|
|
|
const isRoomPill = prefix === '#' || prefix === '!';
|
2017-07-14 19:04:28 +03:00
|
|
|
|
|
|
|
const classes = classNames({
|
|
|
|
"mx_UserPill": isUserPill,
|
|
|
|
"mx_RoomPill": isRoomPill,
|
|
|
|
});
|
|
|
|
|
|
|
|
let avatar = null;
|
|
|
|
if (isUserPill) {
|
|
|
|
// If this user is not a member of this room, default to the empty
|
|
|
|
// member. This could be improved by doing an async profile lookup.
|
2017-07-17 17:53:29 +03:00
|
|
|
const member = this.props.room.getMember(resource) ||
|
|
|
|
new RoomMember(null, resource);
|
2017-07-14 19:04:28 +03:00
|
|
|
avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
|
|
|
|
} else if (isRoomPill) {
|
2017-07-17 17:53:29 +03:00
|
|
|
const room = prefix === '#' ?
|
2017-07-14 19:04:28 +03:00
|
|
|
MatrixClientPeg.get().getRooms().find((r) => {
|
2017-07-17 17:53:29 +03:00
|
|
|
return r.getCanonicalAlias() === resource;
|
|
|
|
}) : MatrixClientPeg.get().getRoom(resource);
|
2017-07-14 19:04:28 +03:00
|
|
|
avatar = room ? <RoomAvatar room={room} width={16} height={16}/> : null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isUserPill || isRoomPill) {
|
|
|
|
return (
|
|
|
|
<span className={classes}>
|
|
|
|
{avatar}
|
|
|
|
{props.children}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-07-13 15:26:13 +03:00
|
|
|
return (
|
2017-07-13 15:47:08 +03:00
|
|
|
<a href={url}>
|
|
|
|
{props.children}
|
|
|
|
</a>
|
2017-07-13 15:26:13 +03:00
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
const compositeDecorator = new CompositeDecorator(decorators);
|
2016-06-12 00:51:18 +03:00
|
|
|
|
2016-06-14 21:43:34 +03:00
|
|
|
let editorState = null;
|
2016-06-12 00:51:18 +03:00
|
|
|
if (contentState) {
|
2016-06-14 21:43:34 +03:00
|
|
|
editorState = EditorState.createWithContent(contentState, compositeDecorator);
|
2016-06-12 00:51:18 +03:00
|
|
|
} else {
|
2016-06-14 21:43:34 +03:00
|
|
|
editorState = EditorState.createEmpty(compositeDecorator);
|
2016-06-12 00:51:18 +03:00
|
|
|
}
|
2016-06-14 21:43:34 +03:00
|
|
|
|
|
|
|
return EditorState.moveFocusToEnd(editorState);
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
componentDidMount() {
|
2016-03-24 14:25:41 +03:00
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2017-03-10 18:04:31 +03:00
|
|
|
this.historyManager = new ComposerHistoryManager(this.props.room.roomId);
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
componentWillUnmount() {
|
2016-03-24 14:25:41 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-09-05 15:08:53 +03:00
|
|
|
componentWillUpdate(nextProps, nextState) {
|
|
|
|
// this is dirty, but moving all this state to MessageComposer is dirtier
|
|
|
|
if (this.props.onInputStateChanged && nextState !== this.state) {
|
|
|
|
const state = this.getSelectionInfo(nextState.editorState);
|
|
|
|
state.isRichtextEnabled = nextState.isRichtextEnabled;
|
|
|
|
this.props.onInputStateChanged(state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-02-09 23:03:06 +03:00
|
|
|
onAction = (payload) => {
|
|
|
|
const editor = this.refs.editor;
|
2016-09-05 15:08:53 +03:00
|
|
|
let contentState = this.state.editorState.getCurrentContent();
|
2016-06-11 13:22:08 +03:00
|
|
|
|
2016-03-24 14:25:41 +03:00
|
|
|
switch (payload.action) {
|
|
|
|
case 'focus_composer':
|
2016-05-27 07:45:55 +03:00
|
|
|
editor.focus();
|
2016-03-24 14:25:41 +03:00
|
|
|
break;
|
2016-06-11 13:22:08 +03:00
|
|
|
|
|
|
|
// TODO change this so we insert a complete user alias
|
|
|
|
|
2016-09-05 15:08:53 +03:00
|
|
|
case 'insert_displayname': {
|
|
|
|
contentState = Modifier.replaceText(
|
|
|
|
contentState,
|
|
|
|
this.state.editorState.getSelection(),
|
2017-02-09 23:03:06 +03:00
|
|
|
`${payload.displayname}: `,
|
2016-09-05 15:08:53 +03:00
|
|
|
);
|
|
|
|
let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
|
|
|
|
editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
|
2016-09-13 13:11:52 +03:00
|
|
|
this.onEditorContentChanged(editorState);
|
2016-09-05 15:08:53 +03:00
|
|
|
editor.focus();
|
|
|
|
}
|
2016-11-30 20:16:33 +03:00
|
|
|
break;
|
2016-09-05 15:08:53 +03:00
|
|
|
|
|
|
|
case 'quote': {
|
2016-11-21 12:19:40 +03:00
|
|
|
let {body, formatted_body} = payload.event.getContent();
|
2016-09-05 15:08:53 +03:00
|
|
|
formatted_body = formatted_body || escape(body);
|
|
|
|
if (formatted_body) {
|
2017-06-23 19:35:07 +03:00
|
|
|
let content = RichText.htmlToContentState(`<blockquote>${formatted_body}</blockquote>`);
|
2016-09-05 15:08:53 +03:00
|
|
|
if (!this.state.isRichtextEnabled) {
|
2017-03-10 18:04:31 +03:00
|
|
|
content = ContentState.createFromText(RichText.stateToMarkdown(content));
|
2016-09-05 15:08:53 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
const blockMap = content.getBlockMap();
|
|
|
|
let startSelection = SelectionState.createEmpty(contentState.getFirstBlock().getKey());
|
|
|
|
contentState = Modifier.splitBlock(contentState, startSelection);
|
|
|
|
startSelection = SelectionState.createEmpty(contentState.getFirstBlock().getKey());
|
|
|
|
contentState = Modifier.replaceWithFragment(contentState,
|
|
|
|
startSelection,
|
|
|
|
blockMap);
|
|
|
|
startSelection = SelectionState.createEmpty(contentState.getFirstBlock().getKey());
|
2016-09-13 13:11:52 +03:00
|
|
|
if (this.state.isRichtextEnabled) {
|
2016-09-05 15:08:53 +03:00
|
|
|
contentState = Modifier.setBlockType(contentState, startSelection, 'blockquote');
|
2016-09-13 13:11:52 +03:00
|
|
|
}
|
2017-06-29 19:22:34 +03:00
|
|
|
let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
|
|
|
|
editorState = EditorState.moveSelectionToEnd(editorState);
|
2016-09-13 13:11:52 +03:00
|
|
|
this.onEditorContentChanged(editorState);
|
2016-06-11 13:22:08 +03:00
|
|
|
editor.focus();
|
2016-03-24 14:25:41 +03:00
|
|
|
}
|
2016-09-05 15:08:53 +03:00
|
|
|
}
|
2016-11-30 20:16:33 +03:00
|
|
|
break;
|
2016-03-24 14:25:41 +03:00
|
|
|
}
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
onTypingActivity() {
|
2016-03-24 14:25:41 +03:00
|
|
|
this.isTyping = true;
|
|
|
|
if (!this.userTypingTimer) {
|
|
|
|
this.sendTyping(true);
|
|
|
|
}
|
|
|
|
this.startUserTypingTimer();
|
|
|
|
this.startServerTypingTimer();
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
onFinishedTyping() {
|
2016-03-24 14:25:41 +03:00
|
|
|
this.isTyping = false;
|
|
|
|
this.sendTyping(false);
|
|
|
|
this.stopUserTypingTimer();
|
|
|
|
this.stopServerTypingTimer();
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
startUserTypingTimer() {
|
2016-03-24 14:25:41 +03:00
|
|
|
this.stopUserTypingTimer();
|
2017-02-09 23:03:06 +03:00
|
|
|
const self = this;
|
|
|
|
this.userTypingTimer = setTimeout(function() {
|
2016-03-24 14:25:41 +03:00
|
|
|
self.isTyping = false;
|
|
|
|
self.sendTyping(self.isTyping);
|
|
|
|
self.userTypingTimer = null;
|
|
|
|
}, TYPING_USER_TIMEOUT);
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
stopUserTypingTimer() {
|
2016-03-24 14:25:41 +03:00
|
|
|
if (this.userTypingTimer) {
|
|
|
|
clearTimeout(this.userTypingTimer);
|
|
|
|
this.userTypingTimer = null;
|
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
startServerTypingTimer() {
|
2016-03-24 14:25:41 +03:00
|
|
|
if (!this.serverTypingTimer) {
|
2017-02-09 23:03:06 +03:00
|
|
|
const self = this;
|
|
|
|
this.serverTypingTimer = setTimeout(function() {
|
2016-03-24 14:25:41 +03:00
|
|
|
if (self.isTyping) {
|
|
|
|
self.sendTyping(self.isTyping);
|
|
|
|
self.startServerTypingTimer();
|
|
|
|
}
|
|
|
|
}, TYPING_SERVER_TIMEOUT / 2);
|
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
stopServerTypingTimer() {
|
2016-03-24 14:25:41 +03:00
|
|
|
if (this.serverTypingTimer) {
|
|
|
|
clearTimeout(this.servrTypingTimer);
|
|
|
|
this.serverTypingTimer = null;
|
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
sendTyping(isTyping) {
|
2017-04-21 23:50:26 +03:00
|
|
|
if (UserSettingsStore.getSyncedSetting('dontSendTypingNotifications', false)) return;
|
2016-03-24 14:25:41 +03:00
|
|
|
MatrixClientPeg.get().sendTyping(
|
|
|
|
this.props.room.roomId,
|
2017-02-09 23:03:06 +03:00
|
|
|
this.isTyping, TYPING_SERVER_TIMEOUT,
|
2016-03-24 14:25:41 +03:00
|
|
|
).done();
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
refreshTyping() {
|
2016-03-24 14:25:41 +03:00
|
|
|
if (this.typingTimeout) {
|
|
|
|
clearTimeout(this.typingTimeout);
|
|
|
|
this.typingTimeout = null;
|
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
}
|
|
|
|
|
2016-12-30 17:12:36 +03:00
|
|
|
// Called by Draft to change editor contents
|
|
|
|
onEditorContentChanged = (editorState: EditorState) => {
|
2016-07-08 10:24:28 +03:00
|
|
|
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
|
2016-09-13 13:11:52 +03:00
|
|
|
|
2017-07-13 15:28:51 +03:00
|
|
|
const currentBlock = editorState.getSelection().getStartKey();
|
|
|
|
const currentSelection = editorState.getSelection();
|
|
|
|
const currentStartOffset = editorState.getSelection().getStartOffset();
|
|
|
|
|
|
|
|
const block = editorState.getCurrentContent().getBlockForKey(currentBlock);
|
|
|
|
const text = block.getText();
|
|
|
|
|
|
|
|
const entityBeforeCurrentOffset = block.getEntityAt(currentStartOffset - 1);
|
|
|
|
const entityAtCurrentOffset = block.getEntityAt(currentStartOffset);
|
|
|
|
|
|
|
|
// If the cursor is on the boundary between an entity and a non-entity and the
|
|
|
|
// text before the cursor has whitespace at the end, set the entity state of the
|
|
|
|
// character before the cursor (the whitespace) to null. This allows the user to
|
|
|
|
// stop editing the link.
|
|
|
|
if (entityBeforeCurrentOffset && !entityAtCurrentOffset &&
|
|
|
|
/\s$/.test(text.slice(0, currentStartOffset))) {
|
|
|
|
editorState = RichUtils.toggleLink(
|
|
|
|
editorState,
|
|
|
|
currentSelection.merge({
|
|
|
|
anchorOffset: currentStartOffset - 1,
|
|
|
|
focusOffset: currentStartOffset,
|
|
|
|
}),
|
|
|
|
null,
|
|
|
|
);
|
|
|
|
// Reset selection
|
|
|
|
editorState = EditorState.forceSelection(editorState, currentSelection);
|
|
|
|
}
|
|
|
|
|
2017-07-13 19:37:43 +03:00
|
|
|
// Automatic replacement of plaintext emoji to Unicode emoji
|
|
|
|
if (UserSettingsStore.getSyncedSetting('MessageComposerInput.autoReplaceEmoji', false)) {
|
|
|
|
// The first matched group includes just the matched plaintext emoji
|
|
|
|
const emojiMatch = REGEX_EMOJI_WHITESPACE.exec(text.slice(0, currentStartOffset));
|
|
|
|
if(emojiMatch) {
|
|
|
|
// plaintext -> hex unicode
|
|
|
|
const emojiUc = asciiList[emojiMatch[1]];
|
|
|
|
// hex unicode -> shortname -> actual unicode
|
|
|
|
const unicodeEmoji = shortnameToUnicode(EMOJI_UNICODE_TO_SHORTNAME[emojiUc]);
|
|
|
|
const newContentState = Modifier.replaceText(
|
|
|
|
editorState.getCurrentContent(),
|
|
|
|
currentSelection.merge({
|
|
|
|
anchorOffset: currentStartOffset - emojiMatch[0].length,
|
|
|
|
focusOffset: currentStartOffset,
|
|
|
|
}),
|
|
|
|
unicodeEmoji,
|
|
|
|
);
|
|
|
|
editorState = EditorState.push(
|
|
|
|
editorState,
|
|
|
|
newContentState,
|
|
|
|
'insert-characters',
|
|
|
|
);
|
|
|
|
editorState = EditorState.forceSelection(editorState, newContentState.getSelectionAfter());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-30 17:12:36 +03:00
|
|
|
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
|
2016-09-13 13:11:52 +03:00
|
|
|
this.setState({
|
|
|
|
editorState,
|
2016-12-30 17:12:36 +03:00
|
|
|
originalEditorState: null,
|
|
|
|
});
|
|
|
|
};
|
2016-06-09 21:23:09 +03:00
|
|
|
|
2016-12-30 17:12:36 +03:00
|
|
|
/**
|
|
|
|
* We're overriding setState here because it's the most convenient way to monitor changes to the editorState.
|
|
|
|
* Doing it using a separate function that calls setState is a possibility (and was the old approach), but that
|
|
|
|
* approach requires a callback and an extra setState whenever trying to set multiple state properties.
|
|
|
|
*
|
|
|
|
* @param state
|
|
|
|
* @param callback
|
|
|
|
*/
|
|
|
|
setState(state, callback) {
|
|
|
|
if (state.editorState != null) {
|
2017-02-09 23:36:06 +03:00
|
|
|
state.editorState = RichText.attachImmutableEntitiesToEmoji(
|
|
|
|
state.editorState);
|
2016-06-17 02:28:09 +03:00
|
|
|
|
2016-12-30 17:12:36 +03:00
|
|
|
if (state.editorState.getCurrentContent().hasText()) {
|
|
|
|
this.onTypingActivity();
|
|
|
|
} else {
|
|
|
|
this.onFinishedTyping();
|
|
|
|
}
|
2016-09-04 18:33:40 +03:00
|
|
|
|
2017-07-05 12:24:55 +03:00
|
|
|
// Record the editor state for this room so that it can be retrieved after
|
|
|
|
// switching to another room and back
|
|
|
|
dis.dispatch({
|
2017-07-05 13:49:34 +03:00
|
|
|
action: 'content_state',
|
2017-07-05 12:24:55 +03:00
|
|
|
room_id: this.props.room.roomId,
|
2017-07-05 13:49:34 +03:00
|
|
|
content_state: state.editorState.getCurrentContent(),
|
2017-07-05 12:24:55 +03:00
|
|
|
});
|
|
|
|
|
2016-12-30 17:12:36 +03:00
|
|
|
if (!state.hasOwnProperty('originalEditorState')) {
|
|
|
|
state.originalEditorState = null;
|
|
|
|
}
|
2016-06-17 02:28:09 +03:00
|
|
|
}
|
2016-09-13 13:11:52 +03:00
|
|
|
|
2017-02-09 23:36:06 +03:00
|
|
|
super.setState(state, () => {
|
2016-12-30 17:12:36 +03:00
|
|
|
if (callback != null) {
|
2017-02-09 23:36:06 +03:00
|
|
|
callback();
|
2016-12-30 17:12:36 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.onContentChanged) {
|
2017-02-09 23:36:06 +03:00
|
|
|
const textContent = this.state.editorState
|
|
|
|
.getCurrentContent().getPlainText();
|
|
|
|
const selection = RichText.selectionStateToTextOffsets(
|
|
|
|
this.state.editorState.getSelection(),
|
|
|
|
this.state.editorState.getCurrentContent().getBlocksAsArray());
|
2016-12-30 17:12:36 +03:00
|
|
|
this.props.onContentChanged(textContent, selection);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
|
2016-06-11 19:54:09 +03:00
|
|
|
enableRichtext(enabled: boolean) {
|
2017-03-10 18:04:31 +03:00
|
|
|
if (enabled === this.state.isRichtextEnabled) return;
|
|
|
|
|
2016-09-08 00:16:56 +03:00
|
|
|
let contentState = null;
|
2016-06-12 00:51:18 +03:00
|
|
|
if (enabled) {
|
2016-09-23 20:50:25 +03:00
|
|
|
const md = new Markdown(this.state.editorState.getCurrentContent().getPlainText());
|
2017-06-23 19:35:07 +03:00
|
|
|
contentState = RichText.htmlToContentState(md.toHTML());
|
2016-06-11 19:54:09 +03:00
|
|
|
} else {
|
2017-03-10 18:04:31 +03:00
|
|
|
let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
|
2016-09-08 08:51:39 +03:00
|
|
|
if (markdown[markdown.length - 1] === '\n') {
|
|
|
|
markdown = markdown.substring(0, markdown.length - 1); // stateToMarkdown tacks on an extra newline (?!?)
|
|
|
|
}
|
2016-09-08 00:16:56 +03:00
|
|
|
contentState = ContentState.createFromText(markdown);
|
2016-06-11 19:54:09 +03:00
|
|
|
}
|
2016-06-12 00:13:57 +03:00
|
|
|
|
2016-12-30 17:12:36 +03:00
|
|
|
this.setState({
|
|
|
|
editorState: this.createEditorState(enabled, contentState),
|
|
|
|
isRichtextEnabled: enabled,
|
2016-09-13 14:16:20 +03:00
|
|
|
});
|
2016-12-30 17:12:36 +03:00
|
|
|
UserSettingsStore.setSyncedSetting('MessageComposerInput.isRichTextEnabled', enabled);
|
2016-06-11 19:54:09 +03:00
|
|
|
}
|
2016-06-11 13:22:08 +03:00
|
|
|
|
2016-11-30 20:16:33 +03:00
|
|
|
handleKeyCommand = (command: string): boolean => {
|
2016-07-08 10:24:28 +03:00
|
|
|
if (command === 'toggle-mode') {
|
2016-06-11 19:54:09 +03:00
|
|
|
this.enableRichtext(!this.state.isRichtextEnabled);
|
2016-06-11 13:22:08 +03:00
|
|
|
return true;
|
|
|
|
}
|
2016-06-11 19:54:09 +03:00
|
|
|
let newState: ?EditorState = null;
|
|
|
|
|
|
|
|
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
|
2016-09-07 20:22:14 +03:00
|
|
|
if (this.state.isRichtextEnabled) {
|
|
|
|
// These are block types, not handled by RichUtils by default.
|
|
|
|
const blockCommands = ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item'];
|
2017-07-18 19:52:04 +03:00
|
|
|
const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
|
2016-09-07 20:22:14 +03:00
|
|
|
if (blockCommands.includes(command)) {
|
2017-07-18 19:52:04 +03:00
|
|
|
newState = RichUtils.toggleBlockType(this.state.editorState, command);
|
2016-09-07 20:22:14 +03:00
|
|
|
} else if (command === 'strike') {
|
|
|
|
// this is the only inline style not handled by Draft by default
|
2017-07-18 19:52:04 +03:00
|
|
|
newState = RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH');
|
|
|
|
} else if (command === 'backspace' && currentBlockType !== 'unstyled') {
|
|
|
|
const currentStartOffset = this.state.editorState.getSelection().getStartOffset();
|
|
|
|
if (currentStartOffset === 0) {
|
|
|
|
// Toggle current block type (setting it to 'unstyled')
|
|
|
|
newState = RichUtils.toggleBlockType(this.state.editorState, currentBlockType);
|
|
|
|
}
|
2016-09-07 20:22:14 +03:00
|
|
|
}
|
|
|
|
} else {
|
2017-07-19 17:00:25 +03:00
|
|
|
const contentState = this.state.editorState.getCurrentContent();
|
|
|
|
const multipleLinesSelected = RichText.hasMultiLineSelection(this.state.editorState);
|
|
|
|
|
|
|
|
const selectionState = this.state.editorState.getSelection();
|
|
|
|
const start = selectionState.getStartOffset();
|
|
|
|
const end = selectionState.getEndOffset();
|
|
|
|
|
|
|
|
// If multiple lines are selected or nothing is selected, insert a code block
|
|
|
|
// instead of applying inline code formatting. This is an attempt to mimic what
|
|
|
|
// happens in non-MD mode.
|
|
|
|
const treatInlineCodeAsBlock = multipleLinesSelected || start === end;
|
|
|
|
const textMdCodeBlock = (text) => `\`\`\`\n${text}\n\`\`\`\n`;
|
2017-02-09 23:03:06 +03:00
|
|
|
const modifyFn = {
|
|
|
|
'bold': (text) => `**${text}**`,
|
|
|
|
'italic': (text) => `*${text}*`,
|
2017-07-06 15:49:13 +03:00
|
|
|
'underline': (text) => `<u>${text}</u>`,
|
2017-06-23 20:19:06 +03:00
|
|
|
'strike': (text) => `<del>${text}</del>`,
|
2017-07-19 17:00:25 +03:00
|
|
|
// ("code" is triggered by ctrl+j by draft-js by default)
|
|
|
|
'code': (text) => treatInlineCodeAsBlock ? textMdCodeBlock(text) : `\`${text}\``,
|
|
|
|
'code-block': textMdCodeBlock,
|
2017-07-03 17:23:24 +03:00
|
|
|
'blockquote': (text) => text.split('\n').map((line) => `> ${line}\n`).join('') + '\n',
|
2017-03-07 01:45:28 +03:00
|
|
|
'unordered-list-item': (text) => text.split('\n').map((line) => `\n- ${line}`).join(''),
|
|
|
|
'ordered-list-item': (text) => text.split('\n').map((line, i) => `\n${i + 1}. ${line}`).join(''),
|
2016-06-11 19:54:09 +03:00
|
|
|
}[command];
|
|
|
|
|
2017-07-03 17:23:24 +03:00
|
|
|
const selectionAfterOffset = {
|
|
|
|
'bold': -2,
|
|
|
|
'italic': -1,
|
2017-07-06 15:49:13 +03:00
|
|
|
'underline': -4,
|
2017-07-03 17:23:24 +03:00
|
|
|
'strike': -6,
|
2017-07-19 17:00:25 +03:00
|
|
|
'code': treatInlineCodeAsBlock ? -5 : -1,
|
2017-07-03 17:23:24 +03:00
|
|
|
'code-block': -5,
|
|
|
|
'blockquote': -2,
|
|
|
|
}[command];
|
|
|
|
|
|
|
|
// Returns a function that collapses a selectionState to its end and moves it by offset
|
|
|
|
const collapseAndOffsetSelection = (selectionState, offset) => {
|
|
|
|
const key = selectionState.getEndKey();
|
|
|
|
return new SelectionState({
|
|
|
|
anchorKey: key, anchorOffset: offset,
|
|
|
|
focusKey: key, focusOffset: offset,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2016-07-08 10:24:28 +03:00
|
|
|
if (modifyFn) {
|
2017-07-03 17:23:24 +03:00
|
|
|
const previousSelection = this.state.editorState.getSelection();
|
|
|
|
const newContentState = RichText.modifyText(contentState, previousSelection, modifyFn);
|
2016-06-11 19:54:09 +03:00
|
|
|
newState = EditorState.push(
|
|
|
|
this.state.editorState,
|
2017-07-03 17:23:24 +03:00
|
|
|
newContentState,
|
2017-02-09 23:03:06 +03:00
|
|
|
'insert-characters',
|
2016-06-11 19:54:09 +03:00
|
|
|
);
|
2017-07-03 17:23:24 +03:00
|
|
|
|
|
|
|
let newSelection = newContentState.getSelectionAfter();
|
|
|
|
// If the selection range is 0, move the cursor inside the formatted body
|
|
|
|
if (previousSelection.getStartOffset() === previousSelection.getEndOffset() &&
|
|
|
|
previousSelection.getStartKey() === previousSelection.getEndKey() &&
|
|
|
|
selectionAfterOffset !== undefined
|
|
|
|
) {
|
|
|
|
const selectedBlock = newContentState.getBlockForKey(previousSelection.getAnchorKey());
|
|
|
|
const blockLength = selectedBlock.getText().length;
|
|
|
|
const newOffset = blockLength + selectionAfterOffset;
|
|
|
|
newSelection = collapseAndOffsetSelection(newSelection, newOffset);
|
|
|
|
}
|
|
|
|
|
|
|
|
newState = EditorState.forceSelection(newState, newSelection);
|
2016-06-11 19:54:09 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-01-20 17:22:27 +03:00
|
|
|
if (newState == null) {
|
2016-06-11 19:54:09 +03:00
|
|
|
newState = RichUtils.handleKeyCommand(this.state.editorState, command);
|
2017-01-20 17:22:27 +03:00
|
|
|
}
|
2016-06-11 19:54:09 +03:00
|
|
|
|
|
|
|
if (newState != null) {
|
2016-12-30 17:12:36 +03:00
|
|
|
this.setState({editorState: newState});
|
2016-05-27 07:45:55 +03:00
|
|
|
return true;
|
|
|
|
}
|
2016-09-04 18:33:40 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2017-06-27 19:10:28 +03:00
|
|
|
onTextPasted(text: string, html?: string) {
|
|
|
|
const currentSelection = this.state.editorState.getSelection();
|
|
|
|
const currentContent = this.state.editorState.getCurrentContent();
|
|
|
|
|
|
|
|
let contentState = null;
|
2017-07-06 13:52:02 +03:00
|
|
|
if (html && this.state.isRichtextEnabled) {
|
2017-06-27 19:10:28 +03:00
|
|
|
contentState = Modifier.replaceWithFragment(
|
|
|
|
currentContent,
|
|
|
|
currentSelection,
|
|
|
|
RichText.htmlToContentState(html).getBlockMap(),
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
contentState = Modifier.replaceText(currentContent, currentSelection, text);
|
|
|
|
}
|
|
|
|
|
|
|
|
let newEditorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
|
|
|
|
|
|
|
|
newEditorState = EditorState.forceSelection(newEditorState, contentState.getSelectionAfter());
|
|
|
|
this.onEditorContentChanged(newEditorState);
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
handleReturn(ev) {
|
2016-07-03 19:45:13 +03:00
|
|
|
if (ev.shiftKey) {
|
2017-03-10 18:04:31 +03:00
|
|
|
this.onEditorContentChanged(RichUtils.insertSoftNewline(this.state.editorState));
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2017-03-07 02:09:38 +03:00
|
|
|
const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
|
2017-07-13 20:42:37 +03:00
|
|
|
if(
|
|
|
|
['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item']
|
|
|
|
.includes(currentBlockType)
|
|
|
|
) {
|
|
|
|
// By returning false, we allow the default draft-js key binding to occur,
|
|
|
|
// which in this case invokes "split-block". This creates a new block of the
|
|
|
|
// same type, allowing the user to delete it with backspace.
|
2017-07-18 19:52:04 +03:00
|
|
|
// See handleKeyCommand (when command === 'backspace')
|
2017-03-07 02:09:38 +03:00
|
|
|
return false;
|
2016-07-03 19:45:13 +03:00
|
|
|
}
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
const contentState = this.state.editorState.getCurrentContent();
|
2016-07-03 19:45:13 +03:00
|
|
|
if (!contentState.hasText()) {
|
2016-05-28 09:28:22 +03:00
|
|
|
return true;
|
2016-07-03 19:45:13 +03:00
|
|
|
}
|
2016-09-23 20:50:25 +03:00
|
|
|
|
2016-03-24 14:25:41 +03:00
|
|
|
|
2016-06-11 13:22:08 +03:00
|
|
|
let contentText = contentState.getPlainText(), contentHTML;
|
|
|
|
|
2017-02-09 23:03:06 +03:00
|
|
|
const cmd = SlashCommands.processInput(this.props.room.roomId, contentText);
|
2016-06-11 21:41:27 +03:00
|
|
|
if (cmd) {
|
|
|
|
if (!cmd.error) {
|
|
|
|
this.setState({
|
2017-02-09 23:03:06 +03:00
|
|
|
editorState: this.createEditorState(),
|
2016-06-11 21:41:27 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
if (cmd.promise) {
|
2017-02-09 23:03:06 +03:00
|
|
|
cmd.promise.then(function() {
|
2016-06-11 21:41:27 +03:00
|
|
|
console.log("Command success.");
|
2017-02-09 23:03:06 +03:00
|
|
|
}, function(err) {
|
2016-06-11 21:41:27 +03:00
|
|
|
console.error("Command failure: %s", err);
|
2017-02-09 23:03:06 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2016-06-11 21:41:27 +03:00
|
|
|
Modal.createDialog(ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Server error"),
|
2017-06-01 17:44:56 +03:00
|
|
|
description: ((err && err.message) ? err.message : _t("Server unavailable, overloaded, or something else went wrong.")),
|
2016-06-11 21:41:27 +03:00
|
|
|
});
|
|
|
|
});
|
2017-02-09 23:03:06 +03:00
|
|
|
} else if (cmd.error) {
|
2016-06-11 21:41:27 +03:00
|
|
|
console.error(cmd.error);
|
2017-02-09 23:03:06 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2016-06-11 21:41:27 +03:00
|
|
|
Modal.createDialog(ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Command error"),
|
2017-02-09 23:03:06 +03:00
|
|
|
description: cmd.error,
|
2016-06-11 21:41:27 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2016-09-05 15:08:53 +03:00
|
|
|
if (this.state.isRichtextEnabled) {
|
2017-06-29 20:08:57 +03:00
|
|
|
// We should only send HTML if any block is styled or contains inline style
|
|
|
|
let shouldSendHTML = false;
|
|
|
|
const blocks = contentState.getBlocksAsArray();
|
|
|
|
if (blocks.some((block) => block.getType() !== 'unstyled')) {
|
|
|
|
shouldSendHTML = true;
|
|
|
|
} else {
|
|
|
|
const characterLists = blocks.map((block) => block.getCharacterList());
|
|
|
|
// For each block of characters, determine if any inline styles are applied
|
|
|
|
// and if yes, send HTML
|
|
|
|
characterLists.forEach((characters) => {
|
|
|
|
const numberOfStylesForCharacters = characters.map(
|
|
|
|
(character) => character.getStyle().toArray().length,
|
|
|
|
).toArray();
|
|
|
|
// If any character has more than 0 inline styles applied, send HTML
|
|
|
|
if (numberOfStylesForCharacters.some((styles) => styles > 0)) {
|
|
|
|
shouldSendHTML = true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2017-07-13 15:27:49 +03:00
|
|
|
if (!shouldSendHTML) {
|
2017-07-13 15:41:17 +03:00
|
|
|
const hasLink = blocks.some((block) => {
|
2017-07-13 15:27:49 +03:00
|
|
|
return block.getCharacterList().filter((c) => {
|
2017-07-13 15:41:17 +03:00
|
|
|
const entityKey = c.getEntity();
|
|
|
|
return entityKey && Entity.get(entityKey).getType() === 'LINK';
|
2017-07-13 15:27:49 +03:00
|
|
|
}).size > 0;
|
|
|
|
});
|
2017-07-13 15:41:17 +03:00
|
|
|
shouldSendHTML = hasLink;
|
2017-07-13 15:27:49 +03:00
|
|
|
}
|
2017-06-29 20:08:57 +03:00
|
|
|
if (shouldSendHTML) {
|
|
|
|
contentHTML = HtmlUtils.processHtmlForSending(
|
|
|
|
RichText.contentStateToHTML(contentState),
|
|
|
|
);
|
|
|
|
}
|
2016-06-11 13:22:08 +03:00
|
|
|
} else {
|
2016-09-23 20:50:25 +03:00
|
|
|
const md = new Markdown(contentText);
|
2016-12-02 21:58:35 +03:00
|
|
|
if (md.isPlainText()) {
|
2017-01-18 21:29:11 +03:00
|
|
|
contentText = md.toPlaintext();
|
2016-12-02 21:58:35 +03:00
|
|
|
} else {
|
2017-01-19 13:55:36 +03:00
|
|
|
contentHTML = md.toHTML();
|
2016-09-23 20:50:25 +03:00
|
|
|
}
|
2016-06-11 13:22:08 +03:00
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
|
2016-09-23 20:50:25 +03:00
|
|
|
let sendHtmlFn = this.client.sendHtmlMessage;
|
|
|
|
let sendTextFn = this.client.sendTextMessage;
|
2016-06-11 21:41:27 +03:00
|
|
|
|
2017-06-30 17:45:10 +03:00
|
|
|
if (this.state.isRichtextEnabled) {
|
|
|
|
this.historyManager.addItem(
|
|
|
|
contentHTML ? contentHTML : contentText,
|
|
|
|
contentHTML ? 'html' : 'markdown',
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
// Always store MD input as input history
|
|
|
|
this.historyManager.addItem(contentText, 'markdown');
|
|
|
|
}
|
2017-03-10 18:04:31 +03:00
|
|
|
|
2017-07-03 17:47:03 +03:00
|
|
|
if (contentText.startsWith('/me')) {
|
|
|
|
contentText = contentText.substring(4);
|
|
|
|
// bit of a hack, but the alternative would be quite complicated
|
|
|
|
if (contentHTML) contentHTML = contentHTML.replace(/\/me ?/, '');
|
|
|
|
sendHtmlFn = this.client.sendHtmlEmote;
|
|
|
|
sendTextFn = this.client.sendEmoteMessage;
|
|
|
|
}
|
|
|
|
|
2016-09-23 20:50:25 +03:00
|
|
|
let sendMessagePromise;
|
|
|
|
if (contentHTML) {
|
|
|
|
sendMessagePromise = sendHtmlFn.call(
|
2017-02-09 23:03:06 +03:00
|
|
|
this.client, this.props.room.roomId, contentText, contentHTML,
|
2016-09-23 20:50:25 +03:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
sendMessagePromise = sendTextFn.call(this.client, this.props.room.roomId, contentText);
|
|
|
|
}
|
2016-06-11 13:22:08 +03:00
|
|
|
|
2017-01-25 22:06:15 +03:00
|
|
|
sendMessagePromise.done((res) => {
|
2016-06-11 13:22:08 +03:00
|
|
|
dis.dispatch({
|
2016-09-16 18:02:08 +03:00
|
|
|
action: 'message_sent',
|
2016-06-11 13:22:08 +03:00
|
|
|
});
|
2017-01-26 17:09:25 +03:00
|
|
|
}, (e) => onSendMessageFailed(e, this.props.room));
|
2016-05-27 07:45:55 +03:00
|
|
|
|
|
|
|
this.setState({
|
2016-09-16 18:02:08 +03:00
|
|
|
editorState: this.createEditorState(),
|
2016-05-27 07:45:55 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
return true;
|
2017-06-28 17:20:16 +03:00
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
onUpArrow = (e) => {
|
|
|
|
this.onVerticalArrow(e, true);
|
|
|
|
};
|
2017-06-28 17:29:07 +03:00
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
onDownArrow = (e) => {
|
|
|
|
this.onVerticalArrow(e, false);
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-06-21 16:03:39 +03:00
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
onVerticalArrow = (e, up) => {
|
2017-07-05 12:24:55 +03:00
|
|
|
if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
// Select history only if we are not currently auto-completing
|
|
|
|
if (this.autocomplete.state.completionList.length === 0) {
|
2017-06-30 16:27:26 +03:00
|
|
|
// Don't go back in history if we're in the middle of a multi-line message
|
|
|
|
const selection = this.state.editorState.getSelection();
|
|
|
|
const blockKey = selection.getStartKey();
|
|
|
|
const firstBlock = this.state.editorState.getCurrentContent().getFirstBlock();
|
|
|
|
const lastBlock = this.state.editorState.getCurrentContent().getLastBlock();
|
|
|
|
|
|
|
|
let canMoveUp = false;
|
|
|
|
let canMoveDown = false;
|
|
|
|
if (blockKey === firstBlock.getKey()) {
|
2017-07-04 12:12:06 +03:00
|
|
|
canMoveUp = selection.getStartOffset() === selection.getEndOffset() &&
|
|
|
|
selection.getStartOffset() === 0;
|
2017-06-30 16:27:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (blockKey === lastBlock.getKey()) {
|
2017-07-04 12:12:06 +03:00
|
|
|
canMoveDown = selection.getStartOffset() === selection.getEndOffset() &&
|
|
|
|
selection.getStartOffset() === lastBlock.getText().length;
|
2017-06-30 16:27:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if ((up && !canMoveUp) || (!up && !canMoveDown)) return;
|
|
|
|
|
|
|
|
const selected = this.selectHistory(up);
|
|
|
|
if (selected) {
|
|
|
|
// We're selecting history, so prevent the key event from doing anything else
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
2017-06-29 17:07:06 +03:00
|
|
|
} else {
|
2017-06-30 16:27:26 +03:00
|
|
|
this.moveAutocompleteSelection(up);
|
2017-06-29 17:07:06 +03:00
|
|
|
}
|
2017-06-28 17:20:16 +03:00
|
|
|
};
|
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
selectHistory = async (up) => {
|
|
|
|
const delta = up ? -1 : 1;
|
|
|
|
|
2017-06-29 19:02:19 +03:00
|
|
|
// True if we are not currently selecting history, but composing a message
|
|
|
|
if (this.historyManager.currentIndex === this.historyManager.history.length) {
|
|
|
|
// We can't go any further - there isn't any more history, so nop.
|
|
|
|
if (!up) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
currentlyComposedEditorState: this.state.editorState,
|
|
|
|
});
|
|
|
|
} else if (this.historyManager.currentIndex + delta === this.historyManager.history.length) {
|
|
|
|
// True when we return to the message being composed currently
|
|
|
|
this.setState({
|
|
|
|
editorState: this.state.currentlyComposedEditorState,
|
|
|
|
});
|
|
|
|
this.historyManager.currentIndex = this.historyManager.history.length;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
const newContent = this.historyManager.getItem(delta, this.state.isRichtextEnabled ? 'html' : 'markdown');
|
|
|
|
if (!newContent) return false;
|
|
|
|
let editorState = EditorState.push(
|
|
|
|
this.state.editorState,
|
|
|
|
newContent,
|
|
|
|
'insert-characters',
|
|
|
|
);
|
|
|
|
|
|
|
|
// Move selection to the end of the selected history
|
|
|
|
let newSelection = SelectionState.createEmpty(newContent.getLastBlock().getKey());
|
|
|
|
newSelection = newSelection.merge({
|
|
|
|
focusOffset: newContent.getLastBlock().getLength(),
|
|
|
|
anchorOffset: newContent.getLastBlock().getLength(),
|
|
|
|
});
|
|
|
|
editorState = EditorState.forceSelection(editorState, newSelection);
|
|
|
|
|
|
|
|
this.setState({editorState});
|
|
|
|
return true;
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-09-13 13:11:52 +03:00
|
|
|
|
2017-02-09 23:03:06 +03:00
|
|
|
onTab = async (e) => {
|
2017-07-05 20:14:22 +03:00
|
|
|
this.setState({
|
|
|
|
someCompletions: null,
|
|
|
|
});
|
2017-06-29 17:07:06 +03:00
|
|
|
e.preventDefault();
|
2017-02-09 23:36:06 +03:00
|
|
|
if (this.autocomplete.state.completionList.length === 0) {
|
2017-06-29 17:07:06 +03:00
|
|
|
// Force completions to show for the text currently entered
|
2017-07-05 20:14:22 +03:00
|
|
|
const completionCount = await this.autocomplete.forceComplete();
|
|
|
|
this.setState({
|
|
|
|
someCompletions: completionCount > 0,
|
|
|
|
});
|
2017-06-29 17:07:06 +03:00
|
|
|
// Select the first item by moving "down"
|
|
|
|
await this.moveAutocompleteSelection(false);
|
2017-02-09 23:36:06 +03:00
|
|
|
} else {
|
2017-06-29 17:07:06 +03:00
|
|
|
await this.moveAutocompleteSelection(e.shiftKey);
|
2016-06-21 16:03:39 +03:00
|
|
|
}
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-06-21 16:03:39 +03:00
|
|
|
|
2017-06-29 17:07:06 +03:00
|
|
|
moveAutocompleteSelection = (up) => {
|
|
|
|
const completion = up ? this.autocomplete.onUpArrow() : this.autocomplete.onDownArrow();
|
|
|
|
return this.setDisplayedCompletion(completion);
|
|
|
|
};
|
|
|
|
|
2017-02-10 01:10:57 +03:00
|
|
|
onEscape = async (e) => {
|
2016-09-13 13:11:52 +03:00
|
|
|
e.preventDefault();
|
|
|
|
if (this.autocomplete) {
|
|
|
|
this.autocomplete.onEscape(e);
|
2016-06-21 16:03:39 +03:00
|
|
|
}
|
2017-02-10 01:10:57 +03:00
|
|
|
await this.setDisplayedCompletion(null); // restore originalEditorState
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-06-21 16:03:39 +03:00
|
|
|
|
2016-09-13 13:11:52 +03:00
|
|
|
/* If passed null, restores the original editor content from state.originalEditorState.
|
|
|
|
* If passed a non-null displayedCompletion, modifies state.originalEditorState to compute new state.editorState.
|
|
|
|
*/
|
2016-11-30 20:16:33 +03:00
|
|
|
setDisplayedCompletion = async (displayedCompletion: ?Completion): boolean => {
|
2016-09-13 13:11:52 +03:00
|
|
|
const activeEditorState = this.state.originalEditorState || this.state.editorState;
|
|
|
|
|
|
|
|
if (displayedCompletion == null) {
|
|
|
|
if (this.state.originalEditorState) {
|
2017-02-10 01:10:57 +03:00
|
|
|
let editorState = this.state.originalEditorState;
|
|
|
|
// This is a workaround from https://github.com/facebook/draft-js/issues/458
|
|
|
|
// Due to the way we swap editorStates, Draft does not rerender at times
|
|
|
|
editorState = EditorState.forceSelection(editorState,
|
|
|
|
editorState.getSelection());
|
|
|
|
this.setState({editorState});
|
|
|
|
|
2016-09-13 13:11:52 +03:00
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2017-07-17 17:53:29 +03:00
|
|
|
const {range = {}, completion = '', entity = null} = displayedCompletion;
|
|
|
|
let entityKey;
|
|
|
|
if (entity) {
|
|
|
|
entityKey = Entity.create(
|
|
|
|
entity.type,
|
|
|
|
entity.mutability,
|
|
|
|
entity.data,
|
|
|
|
);
|
|
|
|
}
|
2016-09-13 13:11:52 +03:00
|
|
|
|
2017-02-09 23:03:06 +03:00
|
|
|
const contentState = Modifier.replaceText(
|
2016-09-13 13:11:52 +03:00
|
|
|
activeEditorState.getCurrentContent(),
|
2017-07-17 17:53:29 +03:00
|
|
|
RichText.textOffsetsToSelectionState(
|
|
|
|
range, activeEditorState.getCurrentContent().getBlocksAsArray(),
|
|
|
|
),
|
2017-02-09 23:03:06 +03:00
|
|
|
completion,
|
2017-07-17 17:53:29 +03:00
|
|
|
null,
|
|
|
|
entityKey,
|
2016-07-03 19:45:13 +03:00
|
|
|
);
|
|
|
|
|
2016-09-13 13:11:52 +03:00
|
|
|
let editorState = EditorState.push(activeEditorState, contentState, 'insert-characters');
|
2016-07-08 10:24:28 +03:00
|
|
|
editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
|
2016-12-30 17:12:36 +03:00
|
|
|
this.setState({editorState, originalEditorState: activeEditorState});
|
2016-07-03 19:45:13 +03:00
|
|
|
|
|
|
|
// for some reason, doing this right away does not update the editor :(
|
2017-02-10 01:10:57 +03:00
|
|
|
// setTimeout(() => this.refs.editor.focus(), 50);
|
2016-09-13 13:11:52 +03:00
|
|
|
return true;
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-07-03 19:45:13 +03:00
|
|
|
|
2016-09-07 20:22:14 +03:00
|
|
|
onFormatButtonClicked(name: "bold" | "italic" | "strike" | "code" | "underline" | "quote" | "bullet" | "numbullet", e) {
|
2016-09-08 00:16:56 +03:00
|
|
|
e.preventDefault(); // don't steal focus from the editor!
|
2016-09-07 20:22:14 +03:00
|
|
|
const command = {
|
2016-11-30 20:16:33 +03:00
|
|
|
code: 'code-block',
|
|
|
|
quote: 'blockquote',
|
|
|
|
bullet: 'unordered-list-item',
|
|
|
|
numbullet: 'ordered-list-item',
|
|
|
|
}[name] || name;
|
2016-09-07 20:22:14 +03:00
|
|
|
this.handleKeyCommand(command);
|
2016-09-04 18:33:40 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/* returns inline style and block type of current SelectionState so MessageComposer can render formatting
|
2016-11-30 20:16:33 +03:00
|
|
|
buttons. */
|
2016-09-04 18:33:40 +03:00
|
|
|
getSelectionInfo(editorState: EditorState) {
|
|
|
|
const styleName = {
|
|
|
|
BOLD: 'bold',
|
|
|
|
ITALIC: 'italic',
|
|
|
|
STRIKETHROUGH: 'strike',
|
2016-09-07 20:22:14 +03:00
|
|
|
UNDERLINE: 'underline',
|
2016-09-04 18:33:40 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
const originalStyle = editorState.getCurrentInlineStyle().toArray();
|
|
|
|
const style = originalStyle
|
2017-02-09 23:03:06 +03:00
|
|
|
.map((style) => styleName[style] || null)
|
|
|
|
.filter((styleName) => !!styleName);
|
2016-09-04 18:33:40 +03:00
|
|
|
|
|
|
|
const blockName = {
|
2016-09-07 20:22:14 +03:00
|
|
|
'code-block': 'code',
|
2017-01-20 17:22:27 +03:00
|
|
|
'blockquote': 'quote',
|
2016-09-04 18:33:40 +03:00
|
|
|
'unordered-list-item': 'bullet',
|
|
|
|
'ordered-list-item': 'numbullet',
|
|
|
|
};
|
|
|
|
const originalBlockType = editorState.getCurrentContent()
|
|
|
|
.getBlockForKey(editorState.getSelection().getStartKey())
|
|
|
|
.getType();
|
|
|
|
const blockType = blockName[originalBlockType] || null;
|
|
|
|
|
|
|
|
return {
|
|
|
|
style,
|
|
|
|
blockType,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-02-09 23:03:06 +03:00
|
|
|
onMarkdownToggleClicked = (e) => {
|
2016-09-08 00:16:56 +03:00
|
|
|
e.preventDefault(); // don't steal focus from the editor!
|
|
|
|
this.handleKeyCommand('toggle-mode');
|
2016-11-30 20:16:33 +03:00
|
|
|
};
|
2016-09-07 20:22:14 +03:00
|
|
|
|
2016-05-27 07:45:55 +03:00
|
|
|
render() {
|
2016-09-13 13:11:52 +03:00
|
|
|
const activeEditorState = this.state.originalEditorState || this.state.editorState;
|
2016-06-11 13:22:08 +03:00
|
|
|
|
2016-09-04 18:33:40 +03:00
|
|
|
// From https://github.com/facebook/draft-js/blob/master/examples/rich/rich.html#L92
|
|
|
|
// If the user changes block type before entering any text, we can
|
|
|
|
// either style the placeholder or hide it.
|
|
|
|
let hidePlaceholder = false;
|
2016-09-13 13:11:52 +03:00
|
|
|
const contentState = activeEditorState.getCurrentContent();
|
2016-09-04 18:33:40 +03:00
|
|
|
if (!contentState.hasText()) {
|
|
|
|
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
|
|
|
|
hidePlaceholder = true;
|
|
|
|
}
|
2016-06-11 13:22:08 +03:00
|
|
|
}
|
|
|
|
|
2016-09-04 18:33:40 +03:00
|
|
|
const className = classNames('mx_MessageComposer_input', {
|
2016-11-30 20:16:33 +03:00
|
|
|
mx_MessageComposer_input_empty: hidePlaceholder,
|
2017-07-05 20:14:22 +03:00
|
|
|
mx_MessageComposer_input_error: this.state.someCompletions === false,
|
2016-09-04 18:33:40 +03:00
|
|
|
});
|
|
|
|
|
2016-09-13 13:11:52 +03:00
|
|
|
const content = activeEditorState.getCurrentContent();
|
|
|
|
const contentText = content.getPlainText();
|
|
|
|
const selection = RichText.selectionStateToTextOffsets(activeEditorState.getSelection(),
|
|
|
|
activeEditorState.getCurrentContent().getBlocksAsArray());
|
|
|
|
|
2016-03-24 14:25:41 +03:00
|
|
|
return (
|
2016-09-13 13:11:52 +03:00
|
|
|
<div className="mx_MessageComposer_input_wrapper">
|
|
|
|
<div className="mx_MessageComposer_autocomplete_wrapper">
|
|
|
|
<Autocomplete
|
|
|
|
ref={(e) => this.autocomplete = e}
|
|
|
|
onConfirm={this.setDisplayedCompletion}
|
|
|
|
query={contentText}
|
2016-11-30 20:16:33 +03:00
|
|
|
selection={selection}/>
|
2016-09-13 13:11:52 +03:00
|
|
|
</div>
|
|
|
|
<div className={className}>
|
2017-01-21 00:00:22 +03:00
|
|
|
<img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
|
2016-09-13 13:11:52 +03:00
|
|
|
onMouseDown={this.onMarkdownToggleClicked}
|
2017-05-23 17:16:31 +03:00
|
|
|
title={ this.state.isRichtextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
|
2016-09-13 13:11:52 +03:00
|
|
|
src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
|
|
|
|
<Editor ref="editor"
|
2017-06-03 18:52:45 +03:00
|
|
|
dir="auto"
|
2017-02-21 18:33:44 +03:00
|
|
|
placeholder={this.props.placeholder}
|
2016-09-13 13:11:52 +03:00
|
|
|
editorState={this.state.editorState}
|
|
|
|
onChange={this.onEditorContentChanged}
|
|
|
|
blockStyleFn={MessageComposerInput.getBlockStyle}
|
|
|
|
keyBindingFn={MessageComposerInput.getKeyBinding}
|
|
|
|
handleKeyCommand={this.handleKeyCommand}
|
|
|
|
handleReturn={this.handleReturn}
|
2017-06-27 19:10:28 +03:00
|
|
|
handlePastedText={this.onTextPasted}
|
2017-05-17 03:41:42 +03:00
|
|
|
handlePastedFiles={this.props.onFilesPasted}
|
2016-09-13 13:11:52 +03:00
|
|
|
stripPastedStyles={!this.state.isRichtextEnabled}
|
|
|
|
onTab={this.onTab}
|
|
|
|
onUpArrow={this.onUpArrow}
|
|
|
|
onDownArrow={this.onDownArrow}
|
|
|
|
onEscape={this.onEscape}
|
2016-11-30 20:16:33 +03:00
|
|
|
spellCheck={true}/>
|
2016-09-13 13:11:52 +03:00
|
|
|
</div>
|
2016-03-24 14:25:41 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-01-20 17:22:27 +03:00
|
|
|
}
|
2016-05-27 07:45:55 +03:00
|
|
|
|
2016-05-28 09:28:22 +03:00
|
|
|
MessageComposerInput.propTypes = {
|
2016-05-27 07:45:55 +03:00
|
|
|
// a callback which is called when the height of the composer is
|
|
|
|
// changed due to a change in content.
|
|
|
|
onResize: React.PropTypes.func,
|
|
|
|
|
|
|
|
// js-sdk Room object
|
2016-06-17 02:28:09 +03:00
|
|
|
room: React.PropTypes.object.isRequired,
|
|
|
|
|
|
|
|
// called with current plaintext content (as a string) whenever it changes
|
2016-06-21 16:03:39 +03:00
|
|
|
onContentChanged: React.PropTypes.func,
|
|
|
|
|
2017-05-17 03:41:42 +03:00
|
|
|
onFilesPasted: React.PropTypes.func,
|
2017-01-08 04:20:59 +03:00
|
|
|
|
2016-10-10 19:51:26 +03:00
|
|
|
onInputStateChanged: React.PropTypes.func,
|
2016-05-27 07:45:55 +03:00
|
|
|
};
|