mirror of https://github.com/vector-im/riot-web
update the DOM manually as opposed through react rendering
react messes up the DOM sometimes because of, I assume, not being aware of the changes to the real DOM by contenteditable.pull/21833/head
parent
85adc8953f
commit
a2f1f49972
|
@ -21,6 +21,7 @@ import dis from '../../../dispatcher';
|
||||||
import EditorModel from '../../../editor/model';
|
import EditorModel from '../../../editor/model';
|
||||||
import {getCaretOffset, setCaretPosition} from '../../../editor/caret';
|
import {getCaretOffset, setCaretPosition} from '../../../editor/caret';
|
||||||
import parseEvent from '../../../editor/parse-event';
|
import parseEvent from '../../../editor/parse-event';
|
||||||
|
import {renderModel, rerenderModel} 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 {
|
||||||
|
@ -38,46 +39,66 @@ export default class MessageEditor extends React.Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
this.model = new EditorModel(parseEvent(this.props.event));
|
this.model = new EditorModel(parseEvent(this.props.event));
|
||||||
this.state = {
|
this.state = {};
|
||||||
parts: this.model.serializeParts(),
|
this._editorRef = null;
|
||||||
};
|
|
||||||
this._onCancelClicked = this._onCancelClicked.bind(this);
|
|
||||||
this._onInput = this._onInput.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_onInput(event) {
|
_onInput = (event) => {
|
||||||
const editor = event.target;
|
const caretOffset = getCaretOffset(this._editorRef);
|
||||||
const caretOffset = getCaretOffset(editor);
|
const caret = this.model.update(this._editorRef.textContent, event.inputType, caretOffset);
|
||||||
const caret = this.model.update(editor.textContent, event.inputType, caretOffset);
|
// const parts = this.model.serializeParts();
|
||||||
const parts = this.model.serializeParts();
|
const shouldRerender = event.inputType === "insertFromDrop" || event.inputType === "insertFromPaste";
|
||||||
this.setState({parts}, () => {
|
if (shouldRerender) {
|
||||||
setCaretPosition(editor, caret);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
_onCancelClicked() {
|
_onCancelClicked = () => {
|
||||||
dis.dispatch({action: "edit_event", event: null});
|
dis.dispatch({action: "edit_event", event: null});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_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);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const parts = this.state.parts.map((p, i) => {
|
// const parts = this.state.parts.map((p, i) => {
|
||||||
const key = `${i}-${p.type}`;
|
// const key = `${i}-${p.type}`;
|
||||||
switch (p.type) {
|
// switch (p.type) {
|
||||||
case "plain": return p.text;
|
// case "plain": return p.text;
|
||||||
case "room-pill": return (<span key={key} className="room-pill">{p.text}</span>);
|
// 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>);
|
// case "user-pill": return (<span key={key} className="user-pill">{p.text}</span>);
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
const modelOutput = JSON.stringify(this.state.parts, undefined, 2);
|
// const modelOutput = JSON.stringify(this.state.parts, undefined, 2);
|
||||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||||
return <div className="mx_MessageEditor">
|
return <div className="mx_MessageEditor">
|
||||||
<div className="editor" contentEditable="true" tabIndex="1" suppressContentEditableWarning={true} onInput={this._onInput}>
|
<div
|
||||||
{parts}
|
className="editor"
|
||||||
|
contentEditable="true"
|
||||||
|
tabIndex="1"
|
||||||
|
// suppressContentEditableWarning={true}
|
||||||
|
onInput={this._onInput}
|
||||||
|
ref={this._collectEditorRef}
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div className="buttons">
|
<div className="buttons">
|
||||||
<AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
|
<AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
|
||||||
</div>
|
</div>
|
||||||
<code className="model">{modelOutput}</code>
|
<code className="model"></code>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,52 @@
|
||||||
|
/*
|
||||||
|
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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function rerenderModel(editor, model) {
|
||||||
|
while (editor.firstChild) {
|
||||||
|
editor.removeChild(editor.firstChild);
|
||||||
|
}
|
||||||
|
for (const part of model.parts) {
|
||||||
|
editor.appendChild(part.toDOMNode());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function renderModel(editor, model) {
|
||||||
|
// remove unwanted nodes, like <br>s
|
||||||
|
for (let i = 0; i < model.parts.length; ++i) {
|
||||||
|
const part = model.parts[i];
|
||||||
|
let node = editor.childNodes[i];
|
||||||
|
while (node && !part.canUpdateDOMNode(node)) {
|
||||||
|
editor.removeChild(node);
|
||||||
|
node = editor.childNodes[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < model.parts.length; ++i) {
|
||||||
|
const part = model.parts[i];
|
||||||
|
const node = editor.childNodes[i];
|
||||||
|
if (node && part) {
|
||||||
|
part.updateDOMNode(node);
|
||||||
|
} else if (part) {
|
||||||
|
editor.appendChild(part.toDOMNode());
|
||||||
|
} else if (node) {
|
||||||
|
editor.removeChild(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let surplusElementCount = Math.max(0, editor.childNodes.length - model.parts.length);
|
||||||
|
while (surplusElementCount) {
|
||||||
|
editor.removeChild(editor.lastChild);
|
||||||
|
--surplusElementCount;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue