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

send the actual m.replace event from composer content

Browse source
This commit is contained in:
Bruno Windels 2019-05-14 10:37:57 +01:00
parent 34dbe5f314
commit 759a4a54ef
2 changed files with 28 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/elements/_MessageEditor.scss
View file

@ -47,16 +47,13 @@ limitations under the License.
.buttons { .buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: end; justify-content: end;
padding: 5px 0; padding: 5px 0;
.mx_AccessibleButton { .mx_AccessibleButton {
background-color: $button-bg-color; margin-left: 5px;
border-radius: 4px;
padding: 5px 40px; padding: 5px 40px;
color: $button-fg-color;
font-weight: 600;
} }
} }

39
src/components/views/elements/MessageEditor.js
View file

@ -21,11 +21,12 @@ import dis from '../../../dispatcher';
import EditorModel from '../../../editor/model'; import EditorModel from '../../../editor/model';
import {setCaretPosition} from '../../../editor/caret'; import {setCaretPosition} from '../../../editor/caret';
import {getCaretOffsetAndText} from '../../../editor/dom'; import {getCaretOffsetAndText} from '../../../editor/dom';
import {htmlSerialize, textSerialize, requiresHtml} from '../../../editor/serialize';
import parseEvent from '../../../editor/parse-event'; import parseEvent from '../../../editor/parse-event';
import Autocomplete from '../rooms/Autocomplete'; import Autocomplete from '../rooms/Autocomplete';
// import AutocompleteModel from '../../../editor/autocomplete'; // import AutocompleteModel from '../../../editor/autocomplete';
import {PartCreator} from '../../../editor/parts'; import {PartCreator} from '../../../editor/parts';
import {renderModel, rerenderModel} from '../../../editor/render'; import {renderModel} from '../../../editor/render';
import {MatrixEvent, MatrixClient} from 'matrix-js-sdk'; import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
export default class MessageEditor extends React.Component { export default class MessageEditor extends React.Component {
@ -109,6 +110,26 @@ export default class MessageEditor extends React.Component {
dis.dispatch({action: "edit_event", event: null}); dis.dispatch({action: "edit_event", event: null});
} }
_onSaveClicked = () => {
const content = {
"msgtype": "m.text",
"body": textSerialize(this.model),
"m.relates_to": {
"rel_type": "m.replace",
"event_id": this.props.event.getId(),
},
};
if (requiresHtml(this.model)) {
content.format = "org.matrix.custom.html";
content.formatted_body = htmlSerialize(this.model);
}
const roomId = this.props.event.getRoomId();
this.context.matrixClient.sendMessage(roomId, content);
dis.dispatch({action: "edit_event", event: null});
}
_collectEditorRef = (ref) => { _collectEditorRef = (ref) => {
this._editorRef = ref; this._editorRef = ref;
} }
@ -130,15 +151,6 @@ export default class MessageEditor extends React.Component {
} }
render() { render() {
// const parts = this.state.parts.map((p, i) => {
// const key = `${i}-${p.type}`;
// switch (p.type) {
// case "plain": return p.text;
// case "room-pill": return (<span key={key} className="room-pill">{p.text}</span>);
// case "user-pill": return (<span key={key} className="user-pill">{p.text}</span>);
// }
// });
// const modelOutput = JSON.stringify(this.state.parts, undefined, 2);
let autoComplete; let autoComplete;
if (this.state.autoComplete) { if (this.state.autoComplete) {
const query = this.state.query; const query = this.state.query;
@ -161,14 +173,13 @@ export default class MessageEditor extends React.Component {
className="editor" className="editor"
contentEditable="true" contentEditable="true"
tabIndex="1" tabIndex="1"
// suppressContentEditableWarning={true}
onInput={this._onInput} onInput={this._onInput}
onKeyDown={this._onKeyDown} onKeyDown={this._onKeyDown}
ref={this._collectEditorRef} ref={this._collectEditorRef}
> ></div>
</div>
<div className="buttons"> <div className="buttons">
<AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton> <AccessibleButton kind="secondary" onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
<AccessibleButton kind="primary" onClick={this._onSaveClicked}>{_t("Save")}</AccessibleButton>
</div> </div>
<code className="model"></code> <code className="model"></code>
</div>; </div>;