Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/a11y/composer-list-autocomplete
Conflicts: src/components/views/rooms/BasicMessageComposer.tsx src/editor/autocomplete.ts
This commit is contained in:
Michael Telatynski
commit
ebfe38dc4a
910 changed files with 29171 additions and 17758 deletions
|
|
@ -16,45 +16,46 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React, {createRef, ClipboardEvent} from 'react';
|
||||
import {Room} from 'matrix-js-sdk/src/models/room';
|
||||
import React, { createRef, ClipboardEvent } from 'react';
|
||||
import { Room } from 'matrix-js-sdk/src/models/room';
|
||||
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
||||
import EMOTICON_REGEX from 'emojibase-regex/emoticon';
|
||||
|
||||
import EditorModel from '../../../editor/model';
|
||||
import HistoryManager from '../../../editor/history';
|
||||
import {Caret, setSelection} from '../../../editor/caret';
|
||||
import { Caret, setSelection } from '../../../editor/caret';
|
||||
import {
|
||||
formatRangeAsQuote,
|
||||
formatRangeAsCode,
|
||||
toggleInlineFormat,
|
||||
replaceRangeAndMoveCaret,
|
||||
} from '../../../editor/operations';
|
||||
import {getCaretOffsetAndText, getRangeForSelection} from '../../../editor/dom';
|
||||
import Autocomplete, {generateCompletionDomId} from '../rooms/Autocomplete';
|
||||
import {getAutoCompleteCreator} from '../../../editor/parts';
|
||||
import {parsePlainTextMessage} from '../../../editor/deserialize';
|
||||
import {renderModel} from '../../../editor/render';
|
||||
import { getCaretOffsetAndText, getRangeForSelection } from '../../../editor/dom';
|
||||
import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
|
||||
import { getAutoCompleteCreator } from '../../../editor/parts';
|
||||
import { parseEvent, parsePlainTextMessage } from '../../../editor/deserialize';
|
||||
import { renderModel } from '../../../editor/render';
|
||||
import TypingStore from "../../../stores/TypingStore";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import {Key} from "../../../Keyboard";
|
||||
import {EMOTICON_TO_EMOJI} from "../../../emoji";
|
||||
import {CommandCategories, CommandMap, parseCommandString} from "../../../SlashCommands";
|
||||
import { Key } from "../../../Keyboard";
|
||||
import { EMOTICON_TO_EMOJI } from "../../../emoji";
|
||||
import { CommandCategories, CommandMap, parseCommandString } from "../../../SlashCommands";
|
||||
import Range from "../../../editor/range";
|
||||
import MessageComposerFormatBar from "./MessageComposerFormatBar";
|
||||
import MessageComposerFormatBar, { Formatting } from "./MessageComposerFormatBar";
|
||||
import DocumentOffset from "../../../editor/offset";
|
||||
import {IDiff} from "../../../editor/diff";
|
||||
import { IDiff } from "../../../editor/diff";
|
||||
import AutocompleteWrapperModel from "../../../editor/autocomplete";
|
||||
import DocumentPosition from "../../../editor/position";
|
||||
import {ICompletion} from "../../../autocomplete/Autocompleter";
|
||||
import { ICompletion } from "../../../autocomplete/Autocompleter";
|
||||
import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
|
||||
// matches emoticons which follow the start of a line or whitespace
|
||||
const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
|
||||
|
||||
const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
|
||||
|
||||
function ctrlShortcutLabel(key) {
|
||||
function ctrlShortcutLabel(key: string): string {
|
||||
return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
|
||||
}
|
||||
|
||||
|
|
@ -80,14 +81,6 @@ function selectionEquals(a: Partial<Selection>, b: Selection): boolean {
|
|||
a.type === b.type;
|
||||
}
|
||||
|
||||
enum Formatting {
|
||||
Bold = "bold",
|
||||
Italics = "italics",
|
||||
Strikethrough = "strikethrough",
|
||||
Code = "code",
|
||||
Quote = "quote",
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
model: EditorModel;
|
||||
room: Room;
|
||||
|
|
@ -110,9 +103,9 @@ interface IState {
|
|||
|
||||
@replaceableComponent("views.rooms.BasicMessageEditor")
|
||||
export default class BasicMessageEditor extends React.Component<IProps, IState> {
|
||||
private editorRef = createRef<HTMLDivElement>();
|
||||
public readonly editorRef = createRef<HTMLDivElement>();
|
||||
private autocompleteRef = createRef<Autocomplete>();
|
||||
private formatBarRef = createRef<typeof MessageComposerFormatBar>();
|
||||
private formatBarRef = createRef<MessageComposerFormatBar>();
|
||||
|
||||
private modifiedFlag = false;
|
||||
private isIMEComposing = false;
|
||||
|
|
@ -147,7 +140,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
const enabledChange = this.props.disabled !== prevProps.disabled;
|
||||
const placeholderChanged = this.props.placeholder !== prevProps.placeholder;
|
||||
if (this.props.placeholder && (placeholderChanged || enabledChange)) {
|
||||
const {isEmpty} = this.props.model;
|
||||
const { isEmpty } = this.props.model;
|
||||
if (isEmpty) {
|
||||
this.showPlaceholder();
|
||||
} else {
|
||||
|
|
@ -156,8 +149,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
}
|
||||
|
||||
private replaceEmoticon = (caretPosition: DocumentPosition) => {
|
||||
const {model} = this.props;
|
||||
private replaceEmoticon = (caretPosition: DocumentPosition): number => {
|
||||
const { model } = this.props;
|
||||
const range = model.startRange(caretPosition);
|
||||
// expand range max 8 characters backwards from caretPosition,
|
||||
// as a space to look for an emoticon
|
||||
|
|
@ -174,7 +167,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
const data = EMOTICON_TO_EMOJI.get(query) || EMOTICON_TO_EMOJI.get(query.toLowerCase());
|
||||
|
||||
if (data) {
|
||||
const {partCreator} = model;
|
||||
const { partCreator } = model;
|
||||
const hasPrecedingSpace = emoticonMatch[0][0] === " ";
|
||||
// we need the range to only comprise of the emoticon
|
||||
// because we'll replace the whole range with an emoji,
|
||||
|
|
@ -188,7 +181,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
};
|
||||
|
||||
private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff) => {
|
||||
private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff): void => {
|
||||
renderModel(this.editorRef.current, this.props.model);
|
||||
if (selection) { // set the caret/selection
|
||||
try {
|
||||
|
|
@ -200,7 +193,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
const position = selection instanceof Range ? selection.end : selection;
|
||||
this.setLastCaretFromPosition(position);
|
||||
}
|
||||
const {isEmpty} = this.props.model;
|
||||
const { isEmpty } = this.props.model;
|
||||
if (this.props.placeholder) {
|
||||
if (isEmpty) {
|
||||
this.showPlaceholder();
|
||||
|
|
@ -221,7 +214,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
let isTyping = !this.props.model.isEmpty;
|
||||
// If the user is entering a command, only consider them typing if it is one which sends a message into the room
|
||||
if (isTyping && this.props.model.parts[0].type === "command") {
|
||||
const {cmd} = parseCommandString(this.props.model.parts[0].text);
|
||||
const { cmd } = parseCommandString(this.props.model.parts[0].text);
|
||||
const command = CommandMap.get(cmd);
|
||||
if (!command || !command.isEnabled() || command.category !== CommandCategories.messages) {
|
||||
isTyping = false;
|
||||
|
|
@ -234,25 +227,25 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
};
|
||||
|
||||
private showPlaceholder() {
|
||||
private showPlaceholder(): void {
|
||||
// escape single quotes
|
||||
const placeholder = this.props.placeholder.replace(/'/g, '\\\'');
|
||||
this.editorRef.current.style.setProperty("--placeholder", `'${placeholder}'`);
|
||||
this.editorRef.current.classList.add("mx_BasicMessageComposer_inputEmpty");
|
||||
}
|
||||
|
||||
private hidePlaceholder() {
|
||||
private hidePlaceholder(): void {
|
||||
this.editorRef.current.classList.remove("mx_BasicMessageComposer_inputEmpty");
|
||||
this.editorRef.current.style.removeProperty("--placeholder");
|
||||
}
|
||||
|
||||
private onCompositionStart = () => {
|
||||
private onCompositionStart = (): void => {
|
||||
this.isIMEComposing = true;
|
||||
// even if the model is empty, the composition text shouldn't be mixed with the placeholder
|
||||
this.hidePlaceholder();
|
||||
};
|
||||
|
||||
private onCompositionEnd = () => {
|
||||
private onCompositionEnd = (): void => {
|
||||
this.isIMEComposing = false;
|
||||
// some browsers (Chrome) don't fire an input event after ending a composition,
|
||||
// so trigger a model update after the composition is done by calling the input handler.
|
||||
|
|
@ -267,26 +260,26 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
const isSafari = ua.includes('safari/') && !ua.includes('chrome/');
|
||||
|
||||
if (isSafari) {
|
||||
this.onInput({inputType: "insertCompositionText"});
|
||||
this.onInput({ inputType: "insertCompositionText" });
|
||||
} else {
|
||||
Promise.resolve().then(() => {
|
||||
this.onInput({inputType: "insertCompositionText"});
|
||||
this.onInput({ inputType: "insertCompositionText" });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
isComposing(event: React.KeyboardEvent) {
|
||||
public isComposing(event: React.KeyboardEvent): boolean {
|
||||
// checking the event.isComposing flag just in case any browser out there
|
||||
// emits events related to the composition after compositionend
|
||||
// has been fired
|
||||
return !!(this.isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
|
||||
}
|
||||
|
||||
private onCutCopy = (event: ClipboardEvent, type: string) => {
|
||||
private onCutCopy = (event: ClipboardEvent, type: string): void => {
|
||||
const selection = document.getSelection();
|
||||
const text = selection.toString();
|
||||
if (text) {
|
||||
const {model} = this.props;
|
||||
const { model } = this.props;
|
||||
const range = getRangeForSelection(this.editorRef.current, model, selection);
|
||||
const selectedParts = range.parts.map(p => p.serialize());
|
||||
event.clipboardData.setData("application/x-element-composer", JSON.stringify(selectedParts));
|
||||
|
|
@ -300,23 +293,23 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
};
|
||||
|
||||
private onCopy = (event: ClipboardEvent) => {
|
||||
private onCopy = (event: ClipboardEvent): void => {
|
||||
this.onCutCopy(event, "copy");
|
||||
};
|
||||
|
||||
private onCut = (event: ClipboardEvent) => {
|
||||
private onCut = (event: ClipboardEvent): void => {
|
||||
this.onCutCopy(event, "cut");
|
||||
};
|
||||
|
||||
private onPaste = (event: ClipboardEvent<HTMLDivElement>) => {
|
||||
private onPaste = (event: ClipboardEvent<HTMLDivElement>): boolean => {
|
||||
event.preventDefault(); // we always handle the paste ourselves
|
||||
if (this.props.onPaste && this.props.onPaste(event, this.props.model)) {
|
||||
// to prevent double handling, allow props.onPaste to skip internal onPaste
|
||||
return true;
|
||||
}
|
||||
|
||||
const {model} = this.props;
|
||||
const {partCreator} = model;
|
||||
const { model } = this.props;
|
||||
const { partCreator } = model;
|
||||
const partsText = event.clipboardData.getData("application/x-element-composer");
|
||||
let parts;
|
||||
if (partsText) {
|
||||
|
|
@ -332,20 +325,20 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
replaceRangeAndMoveCaret(range, parts);
|
||||
};
|
||||
|
||||
private onInput = (event: Partial<InputEvent>) => {
|
||||
private onInput = (event: Partial<InputEvent>): void => {
|
||||
// ignore any input while doing IME compositions
|
||||
if (this.isIMEComposing) {
|
||||
return;
|
||||
}
|
||||
this.modifiedFlag = true;
|
||||
const sel = document.getSelection();
|
||||
const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
|
||||
const { caret, text } = getCaretOffsetAndText(this.editorRef.current, sel);
|
||||
this.props.model.update(text, event.inputType, caret);
|
||||
};
|
||||
|
||||
private insertText(textToInsert: string, inputType = "insertText") {
|
||||
private insertText(textToInsert: string, inputType = "insertText"): void {
|
||||
const sel = document.getSelection();
|
||||
const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
|
||||
const { caret, text } = getCaretOffsetAndText(this.editorRef.current, sel);
|
||||
const newText = text.substr(0, caret.offset) + textToInsert + text.substr(caret.offset);
|
||||
caret.offset += textToInsert.length;
|
||||
this.modifiedFlag = true;
|
||||
|
|
@ -357,14 +350,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
// we don't need to. But if the user is navigating the caret without input
|
||||
// we need to recalculate it, to be able to know where to insert content after
|
||||
// losing focus
|
||||
private setLastCaretFromPosition(position: DocumentPosition) {
|
||||
const {model} = this.props;
|
||||
private setLastCaretFromPosition(position: DocumentPosition): void {
|
||||
const { model } = this.props;
|
||||
this._isCaretAtEnd = position.isAtEnd(model);
|
||||
this.lastCaret = position.asOffset(model);
|
||||
this.lastSelection = cloneSelection(document.getSelection());
|
||||
}
|
||||
|
||||
private refreshLastCaretIfNeeded() {
|
||||
private refreshLastCaretIfNeeded(): DocumentOffset {
|
||||
// XXX: needed when going up and down in editing messages ... not sure why yet
|
||||
// because the editors should stop doing this when when blurred ...
|
||||
// maybe it's on focus and the _editorRef isn't available yet or something.
|
||||
|
|
@ -374,46 +367,46 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
const selection = document.getSelection();
|
||||
if (!this.lastSelection || !selectionEquals(this.lastSelection, selection)) {
|
||||
this.lastSelection = cloneSelection(selection);
|
||||
const {caret, text} = getCaretOffsetAndText(this.editorRef.current, selection);
|
||||
const { caret, text } = getCaretOffsetAndText(this.editorRef.current, selection);
|
||||
this.lastCaret = caret;
|
||||
this._isCaretAtEnd = caret.offset === text.length;
|
||||
}
|
||||
return this.lastCaret;
|
||||
}
|
||||
|
||||
clearUndoHistory() {
|
||||
public clearUndoHistory(): void {
|
||||
this.historyManager.clear();
|
||||
}
|
||||
|
||||
getCaret() {
|
||||
public getCaret(): DocumentOffset {
|
||||
return this.lastCaret;
|
||||
}
|
||||
|
||||
isSelectionCollapsed() {
|
||||
public isSelectionCollapsed(): boolean {
|
||||
return !this.lastSelection || this.lastSelection.isCollapsed;
|
||||
}
|
||||
|
||||
isCaretAtStart() {
|
||||
public isCaretAtStart(): boolean {
|
||||
return this.getCaret().offset === 0;
|
||||
}
|
||||
|
||||
isCaretAtEnd() {
|
||||
public isCaretAtEnd(): boolean {
|
||||
return this._isCaretAtEnd;
|
||||
}
|
||||
|
||||
private onBlur = () => {
|
||||
private onBlur = (): void => {
|
||||
document.removeEventListener("selectionchange", this.onSelectionChange);
|
||||
};
|
||||
|
||||
private onFocus = () => {
|
||||
private onFocus = (): void => {
|
||||
document.addEventListener("selectionchange", this.onSelectionChange);
|
||||
// force to recalculate
|
||||
this.lastSelection = null;
|
||||
this.refreshLastCaretIfNeeded();
|
||||
};
|
||||
|
||||
private onSelectionChange = () => {
|
||||
const {isEmpty} = this.props.model;
|
||||
private onSelectionChange = (): void => {
|
||||
const { isEmpty } = this.props.model;
|
||||
|
||||
this.refreshLastCaretIfNeeded();
|
||||
const selection = document.getSelection();
|
||||
|
|
@ -431,7 +424,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
};
|
||||
|
||||
private onKeyDown = (event: React.KeyboardEvent) => {
|
||||
private onKeyDown = (event: React.KeyboardEvent): void => {
|
||||
const model = this.props.model;
|
||||
let handled = false;
|
||||
|
||||
|
|
@ -489,7 +482,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
break;
|
||||
case MessageComposerAction.EditRedo:
|
||||
if (this.historyManager.canRedo()) {
|
||||
const {parts, caret} = this.historyManager.redo();
|
||||
const { parts, caret } = this.historyManager.redo();
|
||||
// pass matching inputType so historyManager doesn't push echo
|
||||
// when invoked from rerender callback.
|
||||
model.reset(parts, caret, "historyRedo");
|
||||
|
|
@ -498,7 +491,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
break;
|
||||
case MessageComposerAction.EditUndo:
|
||||
if (this.historyManager.canUndo()) {
|
||||
const {parts, caret} = this.historyManager.undo(this.props.model);
|
||||
const { parts, caret } = this.historyManager.undo(this.props.model);
|
||||
// pass matching inputType so historyManager doesn't push echo
|
||||
// when invoked from rerender callback.
|
||||
model.reset(parts, caret, "historyUndo");
|
||||
|
|
@ -530,10 +523,10 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
};
|
||||
|
||||
private async tabCompleteName() {
|
||||
private async tabCompleteName(): Promise<void> {
|
||||
try {
|
||||
await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
|
||||
const {model} = this.props;
|
||||
await new Promise<void>(resolve => this.setState({ showVisualBell: false }, resolve));
|
||||
const { model } = this.props;
|
||||
const caret = this.getCaret();
|
||||
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
|
||||
const range = model.startRange(position);
|
||||
|
|
@ -544,7 +537,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
part.type === "command"
|
||||
);
|
||||
});
|
||||
const {partCreator} = model;
|
||||
const { partCreator } = model;
|
||||
// await for auto-complete to be open
|
||||
await model.transform(() => {
|
||||
const addedLen = range.replace([partCreator.pillCandidate(range.text)]);
|
||||
|
|
@ -555,7 +548,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
if (model.autoComplete) {
|
||||
await model.autoComplete.startSelection();
|
||||
if (!model.autoComplete.hasSelection()) {
|
||||
this.setState({showVisualBell: true});
|
||||
this.setState({ showVisualBell: true });
|
||||
model.autoComplete.close();
|
||||
}
|
||||
} else {
|
||||
|
|
@ -566,26 +559,26 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
}
|
||||
}
|
||||
|
||||
isModified() {
|
||||
public isModified(): boolean {
|
||||
return this.modifiedFlag;
|
||||
}
|
||||
|
||||
private onAutoCompleteConfirm = (completion: ICompletion) => {
|
||||
private onAutoCompleteConfirm = (completion: ICompletion): void => {
|
||||
this.modifiedFlag = true;
|
||||
this.props.model.autoComplete.onComponentConfirm(completion);
|
||||
};
|
||||
|
||||
private onAutoCompleteSelectionChange = (completionIndex: number) => {
|
||||
private onAutoCompleteSelectionChange = (completionIndex: number): void => {
|
||||
this.modifiedFlag = true;
|
||||
this.setState({ completionIndex });
|
||||
};
|
||||
|
||||
private configureEmoticonAutoReplace = () => {
|
||||
private configureEmoticonAutoReplace = (): void => {
|
||||
const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
|
||||
this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null);
|
||||
};
|
||||
|
||||
private configureShouldShowPillAvatar = () => {
|
||||
private configureShouldShowPillAvatar = (): void => {
|
||||
const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
|
||||
this.setState({ showPillAvatar });
|
||||
};
|
||||
|
|
@ -607,7 +600,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
// not really, but we could not serialize the parts, and just change the autoCompleter
|
||||
partCreator.setAutoCompleteCreator(getAutoCompleteCreator(
|
||||
() => this.autocompleteRef.current,
|
||||
query => new Promise(resolve => this.setState({query}, resolve)),
|
||||
query => new Promise(resolve => this.setState({ query }, resolve)),
|
||||
));
|
||||
// initial render of model
|
||||
this.updateEditorState(this.getInitialCaretPosition());
|
||||
|
|
@ -619,8 +612,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
this.editorRef.current.focus();
|
||||
}
|
||||
|
||||
private getInitialCaretPosition() {
|
||||
let caretPosition;
|
||||
private getInitialCaretPosition(): DocumentPosition {
|
||||
let caretPosition: DocumentPosition;
|
||||
if (this.props.initialCaret) {
|
||||
// if restoring state from a previous editor,
|
||||
// restore caret position from the state
|
||||
|
|
@ -633,7 +626,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
return caretPosition;
|
||||
}
|
||||
|
||||
private onFormatAction = (action: Formatting) => {
|
||||
private onFormatAction = (action: Formatting): void => {
|
||||
const range = getRangeForSelection(this.editorRef.current, this.props.model, document.getSelection());
|
||||
// trim the range as we want it to exclude leading/trailing spaces
|
||||
range.trim();
|
||||
|
|
@ -674,7 +667,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
query={query}
|
||||
onConfirm={this.onAutoCompleteConfirm}
|
||||
onSelectionChange={this.onAutoCompleteSelectionChange}
|
||||
selection={{beginning: true, end: queryLen, start: queryLen}}
|
||||
selection={{ beginning: true, end: queryLen, start: queryLen }}
|
||||
room={this.props.room}
|
||||
/>
|
||||
</div>);
|
||||
|
|
@ -688,12 +681,12 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
});
|
||||
|
||||
const shortcuts = {
|
||||
bold: ctrlShortcutLabel("B"),
|
||||
italics: ctrlShortcutLabel("I"),
|
||||
quote: ctrlShortcutLabel(">"),
|
||||
[Formatting.Bold]: ctrlShortcutLabel("B"),
|
||||
[Formatting.Italics]: ctrlShortcutLabel("I"),
|
||||
[Formatting.Quote]: ctrlShortcutLabel(">"),
|
||||
};
|
||||
|
||||
const {completionIndex} = this.state;
|
||||
const { completionIndex } = this.state;
|
||||
const hasAutocomplete = Boolean(this.state.autoComplete);
|
||||
let activeDescendant;
|
||||
if (hasAutocomplete && completionIndex >= 0) {
|
||||
|
|
@ -728,7 +721,54 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
|
|||
</div>);
|
||||
}
|
||||
|
||||
focus() {
|
||||
public focus(): void {
|
||||
this.editorRef.current.focus();
|
||||
}
|
||||
|
||||
public insertMention(userId: string): void {
|
||||
this.modifiedFlag = true;
|
||||
const { model } = this.props;
|
||||
const { partCreator } = model;
|
||||
const member = this.props.room.getMember(userId);
|
||||
const displayName = member ?
|
||||
member.rawDisplayName : userId;
|
||||
const caret = this.getCaret();
|
||||
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
|
||||
// Insert suffix only if the caret is at the start of the composer
|
||||
const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
|
||||
model.transform(() => {
|
||||
const addedLen = model.insert(parts, position);
|
||||
return model.positionForOffset(caret.offset + addedLen, true);
|
||||
});
|
||||
// refocus on composer, as we just clicked "Mention"
|
||||
this.focus();
|
||||
}
|
||||
|
||||
public insertQuotedMessage(event: MatrixEvent): void {
|
||||
this.modifiedFlag = true;
|
||||
const { model } = this.props;
|
||||
const { partCreator } = model;
|
||||
const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
|
||||
// add two newlines
|
||||
quoteParts.push(partCreator.newline());
|
||||
quoteParts.push(partCreator.newline());
|
||||
model.transform(() => {
|
||||
const addedLen = model.insert(quoteParts, model.positionForOffset(0));
|
||||
return model.positionForOffset(addedLen, true);
|
||||
});
|
||||
// refocus on composer, as we just clicked "Quote"
|
||||
this.focus();
|
||||
}
|
||||
|
||||
public insertPlaintext(text: string): void {
|
||||
this.modifiedFlag = true;
|
||||
const { model } = this.props;
|
||||
const { partCreator } = model;
|
||||
const caret = this.getCaret();
|
||||
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
|
||||
model.transform(() => {
|
||||
const addedLen = model.insert([partCreator.plain(text)], position);
|
||||
return model.positionForOffset(caret.offset + addedLen, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue