2019-05-06 15:41:15 +00:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector 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.
|
|
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import {_t} from '../../../languageHandler';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import dis from '../../../dispatcher';
|
2019-05-07 14:27:09 +00:00
|
|
|
import EditorModel from '../../../editor/model';
|
|
|
|
import {getCaretOffset, setCaretPosition} from '../../../editor/caret';
|
2019-05-07 15:31:37 +00:00
|
|
|
import parseEvent from '../../../editor/parse-event';
|
2019-05-08 12:31:43 +00:00
|
|
|
import {renderModel, rerenderModel} from '../../../editor/render';
|
2019-05-06 15:41:15 +00:00
|
|
|
import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
|
|
|
|
|
|
|
|
export default class MessageEditor extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
// the latest event in this chain of replies
|
|
|
|
event: PropTypes.instanceOf(MatrixEvent).isRequired,
|
|
|
|
// called when the ReplyThread contents has changed, including EventTiles thereof
|
|
|
|
// onHeightChanged: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
2019-05-07 15:31:37 +00:00
|
|
|
this.model = new EditorModel(parseEvent(this.props.event));
|
2019-05-08 12:31:43 +00:00
|
|
|
this.state = {};
|
|
|
|
this._editorRef = null;
|
2019-05-07 14:27:09 +00:00
|
|
|
}
|
|
|
|
|
2019-05-08 12:31:43 +00:00
|
|
|
_onInput = (event) => {
|
|
|
|
const caretOffset = getCaretOffset(this._editorRef);
|
|
|
|
const caret = this.model.update(this._editorRef.textContent, event.inputType, caretOffset);
|
|
|
|
// const parts = this.model.serializeParts();
|
|
|
|
const shouldRerender = event.inputType === "insertFromDrop" || event.inputType === "insertFromPaste";
|
|
|
|
if (shouldRerender) {
|
|
|
|
rerenderModel(this._editorRef, this.model);
|
|
|
|
} else {
|
|
|
|
renderModel(this._editorRef, this.model);
|
|
|
|
}
|
|
|
|
setCaretPosition(this._editorRef, caret);
|
|
|
|
|
|
|
|
const modelOutput = this._editorRef.parentElement.querySelector(".model");
|
|
|
|
modelOutput.textContent = JSON.stringify(this.model.serializeParts(), undefined, 2);
|
2019-05-06 15:41:15 +00:00
|
|
|
}
|
|
|
|
|
2019-05-08 12:31:43 +00:00
|
|
|
_onCancelClicked = () => {
|
2019-05-06 15:41:15 +00:00
|
|
|
dis.dispatch({action: "edit_event", event: null});
|
|
|
|
}
|
|
|
|
|
2019-05-08 12:31:43 +00:00
|
|
|
_collectEditorRef = (ref) => {
|
|
|
|
this._editorRef = ref;
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
const editor = this._editorRef;
|
|
|
|
rerenderModel(editor, this.model);
|
|
|
|
const modelOutput = this._editorRef.parentElement.querySelector(".model");
|
|
|
|
modelOutput.textContent = JSON.stringify(this.model.serializeParts(), undefined, 2);
|
|
|
|
}
|
|
|
|
|
2019-05-06 15:41:15 +00:00
|
|
|
render() {
|
2019-05-08 12:31:43 +00:00
|
|
|
// 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);
|
2019-05-06 15:41:15 +00:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
return <div className="mx_MessageEditor">
|
2019-05-08 12:31:43 +00:00
|
|
|
<div
|
|
|
|
className="editor"
|
|
|
|
contentEditable="true"
|
|
|
|
tabIndex="1"
|
|
|
|
// suppressContentEditableWarning={true}
|
|
|
|
onInput={this._onInput}
|
|
|
|
ref={this._collectEditorRef}
|
|
|
|
>
|
2019-05-06 15:41:15 +00:00
|
|
|
</div>
|
|
|
|
<div className="buttons">
|
|
|
|
<AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
|
|
|
|
</div>
|
2019-05-08 12:31:43 +00:00
|
|
|
<code className="model"></code>
|
2019-05-06 15:41:15 +00:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|