imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3378 from matrix-org/bwindels/cider-md-legend

Browse source 
New composer: show markdown legend on focus
This commit is contained in:
Bruno Windels 2019-09-02 14:59:44 +00:00 • committed by GitHub
commit 422f482a6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/rooms/BasicMessageComposer.js
View file

@ -226,15 +226,21 @@ export default class BasicMessageEditor extends React.Component {
return this.getCaret().offset === this._lastTextLength;
}
_onBlur = () => {
_onBlur = (event) => {
document.removeEventListener("selectionchange", this._onSelectionChange);
if (this.props.onBlur) {
this.props.onBlur(event);
}
}
_onFocus = () => {
_onFocus = (event) => {
document.addEventListener("selectionchange", this._onSelectionChange);
// force to recalculate
this._lastSelection = null;
this._refreshLastCaretIfNeeded();
if (this.props.onFocus) {
this.props.onFocus(event);
}
}
_onSelectionChange = () => {

22
src/components/views/rooms/SendMessageComposer.js
View file

@ -33,6 +33,7 @@ import sdk from '../../../index';
import Modal from '../../../Modal';
import { _t } from '../../../languageHandler';
import ContentMessages from '../../../ContentMessages';
import classNames from "classnames";
function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@ -87,6 +88,7 @@ export default class SendMessageComposer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {};
this.model = null;
this._editorRef = null;
this.currentlyComposedEditorState = null;
@ -330,7 +332,18 @@ export default class SendMessageComposer extends React.Component {
}
}
_onFocus = () => {
this.setState({focused: true});
}
_onBlur = () => {
this.setState({focused: false});
}
render() {
const legendClasses = classNames("mx_SendMessageComposer_legend", {
"mx_SendMessageComposer_legend_shown": this.state.focused,
});
return (
<div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
<div className="mx_SendMessageComposer_overlayWrapper">
@ -343,7 +356,16 @@ export default class SendMessageComposer extends React.Component {
label={this.props.placeholder}
placeholder={this.props.placeholder}
onChange={this._saveStoredEditorState}
onFocus={this._onFocus}
onBlur={this._onBlur}
/>
<div className={legendClasses}>
<strong>**bold**</strong>
<em>_italic_</em>
<span>&lt;del&gt;strikethrough&lt;/del&gt;</span>
<code>`code`</code>
<span>&gt; quote</span>
</div>
</div>
);
}