From 7dc39baaf3f9bb50bb2919172abbae1ade158968 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 3 Sep 2019 16:04:47 +0200 Subject: [PATCH] implement bold support in format bar --- .../views/rooms/BasicMessageComposer.js | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index 291c179e46..9ba3e603b9 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -21,7 +21,7 @@ import PropTypes from 'prop-types'; import EditorModel from '../../../editor/model'; import HistoryManager from '../../../editor/history'; import {setCaretPosition} from '../../../editor/caret'; -import {getCaretOffsetAndText} from '../../../editor/dom'; +import {getCaretOffsetAndText, getSelectionOffsetAndText} from '../../../editor/dom'; import Autocomplete from '../rooms/Autocomplete'; import {autoCompleteCreator} from '../../../editor/parts'; import {renderModel} from '../../../editor/render'; @@ -424,7 +424,45 @@ export default class BasicMessageEditor extends React.Component { return caretPosition; } + _replaceSelection(callback) { + const selection = document.getSelection(); + if (selection.isCollapsed) { + return; + } + const focusOffset = getSelectionOffsetAndText( + this._editorRef, + selection.focusNode, + selection.focusOffset, + ).offset; + const anchorOffset = getSelectionOffsetAndText( + this._editorRef, + selection.anchorNode, + selection.anchorOffset, + ).offset; + const {model} = this.props; + const focusPosition = focusOffset.asPosition(model); + const anchorPosition = anchorOffset.asPosition(model); + const range = model.startRange(focusPosition, anchorPosition); + const firstPosition = focusPosition.compare(anchorPosition) < 0 ? focusPosition : anchorPosition; + + model.transform(() => { + const oldLen = range.length; + const newParts = callback(range); + const addedLen = range.replace(newParts); + const lastOffset = firstPosition.asOffset(model); + lastOffset.offset += oldLen + addedLen; + return lastOffset.asPosition(model); + }); + } + _formatBold = () => { + const {partCreator} = this.props.model; + this._replaceSelection(range => { + const parts = range.parts; + parts.splice(0, 0, partCreator.plain("**")); + parts.push(partCreator.plain("**")); + return parts; + }); } _formatItalic = () => {