PR feedback, cleanup

res/css/views/elements/_MessageEditor.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Vector Creations Ltd
+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.
@@ -19,7 +19,7 @@ limitations under the License.
     background-color: #f3f8fd;
     padding: 11px 13px 7px 56px;
 
-    .editor {
+    .mx_MessageEditor_editor {
         border-radius: 4px;
         border: solid 1px #e9edf1;
         background-color: #ffffff;
@@ -45,7 +45,7 @@ limitations under the License.
         }
     }
 
-    .buttons {
+    .mx_MessageEditor_buttons {
         display: flex;
         flex-direction: row;
         justify-content: end;
@@ -57,14 +57,6 @@ limitations under the License.
         }
     }
 
-    .model {
-        background: lightgrey;
-        padding: 5px;
-        display: none;
-        white-space: pre;
-        font-size: 12px;
-    }
-
     .mx_MessageEditor_AutoCompleteWrapper {
         position: relative;
         height: 0;

src/components/views/elements/MessageEditor.js

@@ -24,16 +24,14 @@ import {getCaretOffsetAndText} from '../../../editor/dom';
 import {htmlSerialize, textSerialize, requiresHtml} from '../../../editor/serialize';
 import {parseEvent} from '../../../editor/deserialize';
 import Autocomplete from '../rooms/Autocomplete';
-// import AutocompleteModel from '../../../editor/autocomplete';
 import {PartCreator} from '../../../editor/parts';
 import {renderModel} from '../../../editor/render';
 import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
 
 export default class MessageEditor extends React.Component {
     static propTypes = {
-        // the latest event in this chain of replies
+        // the message event being edited
         event: PropTypes.instanceOf(MatrixEvent).isRequired,
-        // onHeightChanged: PropTypes.func.isRequired,
     };
 
     static contextTypes = {
@@ -70,13 +68,10 @@ export default class MessageEditor extends React.Component {
             }
         }
         this.setState({autoComplete: this.model.autoComplete});
-        // const modelOutput = this._editorRef.parentElement.querySelector(".model");
-        // modelOutput.textContent = JSON.stringify(this.model.serializeParts(), undefined, 2);
     }
 
     _onInput = (event) => {
         const sel = document.getSelection();
-        // console.log("finding newValue", this._editorRef.innerHTML, sel);
         const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
         this.model.update(text, event.inputType, caret);
     }
@@ -133,14 +128,6 @@ export default class MessageEditor extends React.Component {
         dis.dispatch({action: "edit_event", event: null});
     }
 
-    _collectEditorRef = (ref) => {
-        this._editorRef = ref;
-    }
-
-    _collectAutocompleteRef = (ref) => {
-        this._autocompleteRef = ref;
-    }
-
     _onAutoCompleteConfirm = (completion) => {
         this.model.autoComplete.onComponentConfirm(completion);
     }
@@ -160,7 +147,7 @@ export default class MessageEditor extends React.Component {
             const queryLen = query.length;
             autoComplete = <div className="mx_MessageEditor_AutoCompleteWrapper">
                 <Autocomplete
-                    ref={this._collectAutocompleteRef}
+                    ref={ref => this._autocompleteRef = ref}
                     query={query}
                     onConfirm={this._onAutoCompleteConfirm}
                     onSelectionChange={this._onAutoCompleteSelectionChange}
@@ -173,18 +160,17 @@ export default class MessageEditor extends React.Component {
         return <div className="mx_MessageEditor">
                 { autoComplete }
                 <div
-                    className="editor"
+                    className="mx_MessageEditor_editor"
                     contentEditable="true"
                     tabIndex="1"
                     onInput={this._onInput}
                     onKeyDown={this._onKeyDown}
-                    ref={this._collectEditorRef}
+                    ref={ref => this._editorRef = ref}
                 ></div>
-                <div className="buttons">
+                <div className="mx_MessageEditor_buttons">
                     <AccessibleButton kind="secondary" onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
                     <AccessibleButton kind="primary" onClick={this._onSaveClicked}>{_t("Save")}</AccessibleButton>
                 </div>
-                <code className="model"></code>
             </div>;
     }
 }

src/editor/model.js

@@ -66,8 +66,6 @@ export default class EditorModel {
     }
 
     _diff(newValue, inputType, caret) {
-        // handle deleteContentForward (Delete key)
-        // and deleteContentBackward (Backspace)
         const previousValue = this.parts.reduce((text, p) => text + p.text, "");
         // can't use caret position with drag and drop
         if (inputType === "deleteByDrag") {
@@ -80,8 +78,6 @@ export default class EditorModel {
     update(newValue, inputType, caret) {
         const diff = this._diff(newValue, inputType, caret);
         const position = this._positionForOffset(diff.at, caret.atNodeEnd);
-        // const valueWithCaret = newValue.slice(0, caret.offset) + "|" + newValue.slice(caret.offset);
-        // console.log("update at", {diff, valueWithCaret});
         let removedOffsetDecrease = 0;
         if (diff.removed) {
             removedOffsetDecrease = this._removeText(position, diff.removed.length);
@@ -93,7 +89,6 @@ export default class EditorModel {
         this._mergeAdjacentParts();
         const caretOffset = diff.at - removedOffsetDecrease + addedLen;
         const newPosition = this._positionForOffset(caretOffset, true);
-        // console.log("caretOffset", {at: diff.at, removedOffsetDecrease, addedLen}, newPosition);
         this._setActivePart(newPosition);
         this._updateCallback(newPosition);
     }
@@ -146,12 +141,6 @@ export default class EditorModel {
         this._updateCallback(pos);
     }
 
-    /*
-    updateCaret(caret) {
-        // update active part here as well, hiding/showing autocomplete if needed
-    }
-    */
-
     _mergeAdjacentParts(docPos) {
         let prevPart = this._parts[0];
         for (let i = 1; i < this._parts.length; ++i) {

src/editor/render.js

@@ -14,22 +14,6 @@ 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);
-    }
-    let lineContainer = document.createElement("div");
-    editor.appendChild(lineContainer);
-    for (const part of model.parts) {
-        if (part.type === "newline") {
-            lineContainer = document.createElement("div");
-            editor.appendChild(lineContainer);
-        } else {
-            lineContainer.appendChild(part.toDOMNode());
-        }
-    }
-}
-
 export function renderModel(editor, model) {
     const lines = model.parts.reduce((lines, part) => {
         if (part.type === "newline") {