move inline formatting code out of react component

src/components/views/rooms/BasicMessageComposer.js

@@ -21,7 +21,10 @@ import PropTypes from 'prop-types';
 import EditorModel from '../../../editor/model';
 import HistoryManager from '../../../editor/history';
 import {setCaretPosition} from '../../../editor/caret';
-import {getCaretOffsetAndText, getSelectionOffsetAndText} from '../../../editor/dom';
+import {
+    formatInline,
+} from '../../../editor/operations';
+import {getCaretOffsetAndText, getRangeForSelection, getSelectionOffsetAndText} from '../../../editor/dom';
 import Autocomplete from '../rooms/Autocomplete';
 import {autoCompleteCreator} from '../../../editor/parts';
 import {renderModel} from '../../../editor/render';
@@ -455,26 +458,24 @@ export default class BasicMessageEditor extends React.Component {
         });
     }
 
-    _wrapSelection(prefix, suffix = prefix) {
+    _wrapSelectionAsInline(prefix, suffix = prefix) {
-        const {partCreator} = this.props.model;
+        const range = getRangeForSelection(
-        this._replaceSelection(range => {
+            this._editorRef,
-            const parts = range.parts;
+            this.props.model,
-            parts.splice(0, 0, partCreator.plain(prefix));
+            document.getSelection());
-            parts.push(partCreator.plain(suffix));
+        formatInline(range, prefix, suffix);
-            return parts;
-        });
     }
 
     _formatBold = () => {
-        this._wrapSelection("**");
+        this._wrapSelectionAsInline("**");
     }
 
     _formatItalic = () => {
-        this._wrapSelection("*");
+        this._wrapSelectionAsInline("*");
     }
 
     _formatStrikethrough = () => {
-        this._wrapSelection("<del>", "</del>");
+        this._wrapSelectionAsInline("<del>", "</del>");
     }
 
     _formatQuote = () => {

src/editor/dom.js

@@ -142,3 +142,19 @@ function getTextNodeValue(node) {
         return nodeText;
     }
 }
+
+export function getRangeForSelection(editor, model, selection) {
+    const focusOffset = getSelectionOffsetAndText(
+        editor,
+        selection.focusNode,
+        selection.focusOffset,
+    ).offset;
+    const anchorOffset = getSelectionOffsetAndText(
+        editor,
+        selection.anchorNode,
+        selection.anchorOffset,
+    ).offset;
+    const focusPosition = focusOffset.asPosition(model);
+    const anchorPosition = anchorOffset.asPosition(model);
+    return model.startRange(focusPosition, anchorPosition);
+}

src/editor/operations.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+/**
+ * Some common queries and transformations on the editor model
+ */
+
+export function replaceRangeAndExpandSelection(model, range, newParts) {
+    model.transform(() => {
+        const oldLen = range.length;
+        const addedLen = range.replace(newParts);
+        const firstOffset = range.start.asOffset(model);
+        const lastOffset = firstOffset.add(oldLen + addedLen);
+        return model.startRange(firstOffset.asPosition(model), lastOffset.asPosition(model));
+    });
+}
+
+export function formatInline(range, prefix, suffix = prefix) {
+    const {model, parts} = range;
+    const {partCreator} = model;
+    parts.unshift(partCreator.plain(prefix));
+    parts.push(partCreator.plain(suffix));
+    replaceRangeAndExpandSelection(model, range, parts);
+}