2019-08-05 16:27:40 +03:00
|
|
|
/*
|
|
|
|
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.
|
|
|
|
*/
|
2019-08-28 16:53:16 +03:00
|
|
|
|
|
|
|
import classNames from 'classnames';
|
2020-07-15 11:45:45 +03:00
|
|
|
import React, {createRef, ClipboardEvent} from 'react';
|
|
|
|
import {Room} from 'matrix-js-sdk/src/models/room';
|
2021-04-13 17:09:37 +03:00
|
|
|
import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
|
2020-07-15 11:45:45 +03:00
|
|
|
import EMOTICON_REGEX from 'emojibase-regex/emoticon';
|
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
import EditorModel from '../../../editor/model';
|
|
|
|
import HistoryManager from '../../../editor/history';
|
2020-07-15 11:45:45 +03:00
|
|
|
import {Caret, setSelection} from '../../../editor/caret';
|
2019-09-04 13:37:27 +03:00
|
|
|
import {
|
2019-09-04 13:40:03 +03:00
|
|
|
formatRangeAsQuote,
|
2019-09-04 13:40:21 +03:00
|
|
|
formatRangeAsCode,
|
2019-09-06 17:25:06 +03:00
|
|
|
toggleInlineFormat,
|
2019-09-05 17:22:42 +03:00
|
|
|
replaceRangeAndMoveCaret,
|
2019-09-04 13:37:27 +03:00
|
|
|
} from '../../../editor/operations';
|
2019-09-04 13:40:03 +03:00
|
|
|
import {getCaretOffsetAndText, getRangeForSelection} from '../../../editor/dom';
|
2019-09-30 16:04:39 +03:00
|
|
|
import Autocomplete, {generateCompletionDomId} from '../rooms/Autocomplete';
|
2020-07-15 11:45:45 +03:00
|
|
|
import {getAutoCompleteCreator} from '../../../editor/parts';
|
2021-04-13 17:09:37 +03:00
|
|
|
import {parseEvent, parsePlainTextMessage} from '../../../editor/deserialize';
|
2019-08-05 16:27:40 +03:00
|
|
|
import {renderModel} from '../../../editor/render';
|
2019-08-21 17:40:16 +03:00
|
|
|
import TypingStore from "../../../stores/TypingStore";
|
2019-08-26 17:10:26 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2019-10-09 21:59:11 +03:00
|
|
|
import {Key} from "../../../Keyboard";
|
2019-12-18 18:40:19 +03:00
|
|
|
import {EMOTICON_TO_EMOJI} from "../../../emoji";
|
2020-04-10 15:59:01 +03:00
|
|
|
import {CommandCategories, CommandMap, parseCommandString} from "../../../SlashCommands";
|
2020-07-15 11:45:45 +03:00
|
|
|
import Range from "../../../editor/range";
|
|
|
|
import MessageComposerFormatBar from "./MessageComposerFormatBar";
|
|
|
|
import DocumentOffset from "../../../editor/offset";
|
|
|
|
import {IDiff} from "../../../editor/diff";
|
|
|
|
import AutocompleteWrapperModel from "../../../editor/autocomplete";
|
|
|
|
import DocumentPosition from "../../../editor/position";
|
|
|
|
import {ICompletion} from "../../../autocomplete/Autocompleter";
|
2021-03-01 11:43:00 +03:00
|
|
|
import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
|
2021-03-09 06:12:00 +03:00
|
|
|
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
2019-08-26 17:10:26 +03:00
|
|
|
|
2020-11-28 03:41:45 +03:00
|
|
|
// matches emoticons which follow the start of a line or whitespace
|
|
|
|
const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
|
2019-08-05 16:27:40 +03:00
|
|
|
|
|
|
|
const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
|
|
|
|
|
2019-09-05 16:09:37 +03:00
|
|
|
function ctrlShortcutLabel(key) {
|
|
|
|
return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
function cloneSelection(selection: Selection): Partial<Selection> {
|
2019-08-07 18:44:49 +03:00
|
|
|
return {
|
|
|
|
anchorNode: selection.anchorNode,
|
|
|
|
anchorOffset: selection.anchorOffset,
|
|
|
|
focusNode: selection.focusNode,
|
|
|
|
focusOffset: selection.focusOffset,
|
|
|
|
isCollapsed: selection.isCollapsed,
|
|
|
|
rangeCount: selection.rangeCount,
|
|
|
|
type: selection.type,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
function selectionEquals(a: Partial<Selection>, b: Selection): boolean {
|
2019-08-07 18:44:49 +03:00
|
|
|
return a.anchorNode === b.anchorNode &&
|
|
|
|
a.anchorOffset === b.anchorOffset &&
|
|
|
|
a.focusNode === b.focusNode &&
|
|
|
|
a.focusOffset === b.focusOffset &&
|
|
|
|
a.isCollapsed === b.isCollapsed &&
|
|
|
|
a.rangeCount === b.rangeCount &&
|
|
|
|
a.type === b.type;
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
enum Formatting {
|
|
|
|
Bold = "bold",
|
|
|
|
Italics = "italics",
|
|
|
|
Strikethrough = "strikethrough",
|
|
|
|
Code = "code",
|
|
|
|
Quote = "quote",
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
model: EditorModel;
|
|
|
|
room: Room;
|
|
|
|
placeholder?: string;
|
|
|
|
label?: string;
|
|
|
|
initialCaret?: DocumentOffset;
|
2021-03-16 07:16:58 +03:00
|
|
|
disabled?: boolean;
|
2020-07-15 11:45:45 +03:00
|
|
|
|
2020-10-06 16:47:53 +03:00
|
|
|
onChange?();
|
2020-08-19 12:32:24 +03:00
|
|
|
onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
|
2020-07-15 11:45:45 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
|
|
|
showPillAvatar: boolean;
|
|
|
|
query?: string;
|
|
|
|
showVisualBell?: boolean;
|
|
|
|
autoComplete?: AutocompleteWrapperModel;
|
|
|
|
completionIndex?: number;
|
|
|
|
}
|
|
|
|
|
2021-03-09 19:36:17 +03:00
|
|
|
@replaceableComponent("views.rooms.BasicMessageEditor")
|
2020-07-15 11:45:45 +03:00
|
|
|
export default class BasicMessageEditor extends React.Component<IProps, IState> {
|
|
|
|
private editorRef = createRef<HTMLDivElement>();
|
|
|
|
private autocompleteRef = createRef<Autocomplete>();
|
|
|
|
private formatBarRef = createRef<typeof MessageComposerFormatBar>();
|
|
|
|
|
|
|
|
private modifiedFlag = false;
|
|
|
|
private isIMEComposing = false;
|
|
|
|
private hasTextSelected = false;
|
|
|
|
|
|
|
|
private _isCaretAtEnd: boolean;
|
|
|
|
private lastCaret: DocumentOffset;
|
|
|
|
private lastSelection: ReturnType<typeof cloneSelection>;
|
|
|
|
|
|
|
|
private readonly emoticonSettingHandle: string;
|
|
|
|
private readonly shouldShowPillAvatarSettingHandle: string;
|
|
|
|
private readonly historyManager = new HistoryManager();
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-08-05 16:27:40 +03:00
|
|
|
this.state = {
|
2020-04-10 11:30:19 +03:00
|
|
|
showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
|
2019-08-05 16:27:40 +03:00
|
|
|
};
|
2020-07-15 11:45:45 +03:00
|
|
|
|
|
|
|
this.emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
|
|
|
|
this.configureEmoticonAutoReplace);
|
|
|
|
this.configureEmoticonAutoReplace();
|
|
|
|
this.shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
|
|
|
|
this.configureShouldShowPillAvatar);
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
|
|
|
|
2020-07-20 18:34:52 +03:00
|
|
|
public componentDidUpdate(prevProps: IProps) {
|
2021-04-15 05:12:10 +03:00
|
|
|
// We need to re-check the placeholder when the enabled state changes because it causes the
|
|
|
|
// placeholder element to remount, which gets rid of the `::before` class. Re-evaluating the
|
|
|
|
// placeholder means we get a proper `::before` with the placeholder.
|
|
|
|
const enabledChange = this.props.disabled !== prevProps.disabled;
|
|
|
|
const placeholderChanged = this.props.placeholder !== prevProps.placeholder;
|
|
|
|
if (this.props.placeholder && (placeholderChanged || enabledChange)) {
|
2020-01-30 03:23:19 +03:00
|
|
|
const {isEmpty} = this.props.model;
|
|
|
|
if (isEmpty) {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.showPlaceholder();
|
2020-01-30 03:23:19 +03:00
|
|
|
} else {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.hidePlaceholder();
|
2020-01-30 03:23:19 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private replaceEmoticon = (caretPosition: DocumentPosition) => {
|
2019-08-26 17:10:26 +03:00
|
|
|
const {model} = this.props;
|
2019-08-27 17:17:41 +03:00
|
|
|
const range = model.startRange(caretPosition);
|
|
|
|
// expand range max 8 characters backwards from caretPosition,
|
2019-08-27 10:50:36 +03:00
|
|
|
// as a space to look for an emoticon
|
2019-08-26 17:10:26 +03:00
|
|
|
let n = 8;
|
|
|
|
range.expandBackwardsWhile((index, offset) => {
|
|
|
|
const part = model.parts[index];
|
|
|
|
n -= 1;
|
|
|
|
return n >= 0 && (part.type === "plain" || part.type === "pill-candidate");
|
|
|
|
});
|
|
|
|
const emoticonMatch = REGEX_EMOTICON_WHITESPACE.exec(range.text);
|
|
|
|
if (emoticonMatch) {
|
2020-01-21 13:12:23 +03:00
|
|
|
const query = emoticonMatch[1].replace("-", "");
|
|
|
|
// try both exact match and lower-case, this means that xd won't match xD but :P will match :p
|
|
|
|
const data = EMOTICON_TO_EMOJI.get(query) || EMOTICON_TO_EMOJI.get(query.toLowerCase());
|
2019-12-18 18:40:19 +03:00
|
|
|
|
2019-08-26 17:10:26 +03:00
|
|
|
if (data) {
|
2019-08-27 17:17:41 +03:00
|
|
|
const {partCreator} = model;
|
2019-08-27 10:50:36 +03:00
|
|
|
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,
|
|
|
|
// so move the start forward to the start of the emoticon.
|
|
|
|
// Take + 1 because index is reported without the possible preceding space.
|
|
|
|
range.moveStart(emoticonMatch.index + (hasPrecedingSpace ? 1 : 0));
|
|
|
|
// this returns the amount of added/removed characters during the replace
|
|
|
|
// so the caret position can be adjusted.
|
2019-08-27 17:17:41 +03:00
|
|
|
return range.replace([partCreator.plain(data.unicode + " ")]);
|
2019-08-26 17:10:26 +03:00
|
|
|
}
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-26 17:10:26 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff) => {
|
|
|
|
renderModel(this.editorRef.current, this.props.model);
|
2019-09-04 17:04:06 +03:00
|
|
|
if (selection) { // set the caret/selection
|
2019-08-05 16:27:40 +03:00
|
|
|
try {
|
2020-07-15 11:45:45 +03:00
|
|
|
setSelection(this.editorRef.current, this.props.model, selection);
|
2019-08-05 16:27:40 +03:00
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
|
|
|
}
|
2019-09-06 12:58:27 +03:00
|
|
|
// if caret selection is a range, take the end position
|
2020-07-15 11:45:45 +03:00
|
|
|
const position = selection instanceof Range ? selection.end : selection;
|
|
|
|
this.setLastCaretFromPosition(position);
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
2020-03-24 21:00:43 +03:00
|
|
|
const {isEmpty} = this.props.model;
|
2019-08-06 18:52:47 +03:00
|
|
|
if (this.props.placeholder) {
|
|
|
|
if (isEmpty) {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.showPlaceholder();
|
2019-08-06 18:52:47 +03:00
|
|
|
} else {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.hidePlaceholder();
|
2019-08-06 18:52:47 +03:00
|
|
|
}
|
|
|
|
}
|
2020-03-24 21:09:50 +03:00
|
|
|
if (isEmpty) {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.formatBarRef.current.hide();
|
2020-03-24 21:00:43 +03:00
|
|
|
}
|
2019-08-05 16:27:40 +03:00
|
|
|
this.setState({autoComplete: this.props.model.autoComplete});
|
2019-09-04 17:04:06 +03:00
|
|
|
this.historyManager.tryPush(this.props.model, selection, inputType, diff);
|
2020-04-10 15:59:01 +03:00
|
|
|
|
|
|
|
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);
|
2020-09-15 17:49:25 +03:00
|
|
|
const command = CommandMap.get(cmd);
|
|
|
|
if (!command || !command.isEnabled() || command.category !== CommandCategories.messages) {
|
2020-04-10 15:59:01 +03:00
|
|
|
isTyping = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, isTyping);
|
2019-08-21 18:42:09 +03:00
|
|
|
|
|
|
|
if (this.props.onChange) {
|
|
|
|
this.props.onChange();
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private showPlaceholder() {
|
2020-07-22 03:44:01 +03:00
|
|
|
// escape single quotes
|
|
|
|
const placeholder = this.props.placeholder.replace(/'/g, '\\\'');
|
|
|
|
this.editorRef.current.style.setProperty("--placeholder", `'${placeholder}'`);
|
2020-07-15 11:45:45 +03:00
|
|
|
this.editorRef.current.classList.add("mx_BasicMessageComposer_inputEmpty");
|
2019-08-29 14:56:21 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private hidePlaceholder() {
|
|
|
|
this.editorRef.current.classList.remove("mx_BasicMessageComposer_inputEmpty");
|
|
|
|
this.editorRef.current.style.removeProperty("--placeholder");
|
2019-08-29 14:56:21 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onCompositionStart = () => {
|
|
|
|
this.isIMEComposing = true;
|
2019-08-29 14:56:21 +03:00
|
|
|
// even if the model is empty, the composition text shouldn't be mixed with the placeholder
|
2020-07-15 11:45:45 +03:00
|
|
|
this.hidePlaceholder();
|
|
|
|
};
|
2019-08-29 14:56:21 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onCompositionEnd = () => {
|
|
|
|
this.isIMEComposing = false;
|
2019-09-25 11:33:52 +03:00
|
|
|
// some browsers (Chrome) don't fire an input event after ending a composition,
|
2019-09-24 16:32:08 +03:00
|
|
|
// so trigger a model update after the composition is done by calling the input handler.
|
2019-09-25 11:33:52 +03:00
|
|
|
|
|
|
|
// however, modifying the DOM (caused by the editor model update) from the compositionend handler seems
|
2020-08-03 18:02:26 +03:00
|
|
|
// to confuse the IME in Chrome, likely causing https://github.com/vector-im/element-web/issues/10913 ,
|
2019-09-25 11:33:52 +03:00
|
|
|
// so we do it async
|
|
|
|
|
|
|
|
// however, doing this async seems to break things in Safari for some reason, so browser sniff.
|
|
|
|
|
|
|
|
const ua = navigator.userAgent.toLowerCase();
|
|
|
|
const isSafari = ua.includes('safari/') && !ua.includes('chrome/');
|
|
|
|
|
|
|
|
if (isSafari) {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.onInput({inputType: "insertCompositionText"});
|
2019-09-25 11:33:52 +03:00
|
|
|
} else {
|
2020-04-02 21:36:25 +03:00
|
|
|
Promise.resolve().then(() => {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.onInput({inputType: "insertCompositionText"});
|
2020-04-02 21:36:25 +03:00
|
|
|
});
|
2019-09-25 11:33:52 +03:00
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-09-24 16:32:08 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
isComposing(event: React.KeyboardEvent) {
|
2019-09-25 11:33:52 +03:00
|
|
|
// checking the event.isComposing flag just in case any browser out there
|
|
|
|
// emits events related to the composition after compositionend
|
|
|
|
// has been fired
|
2020-07-15 11:45:45 +03:00
|
|
|
return !!(this.isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
|
2019-08-29 14:56:21 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onCutCopy = (event: ClipboardEvent, type: string) => {
|
2020-01-12 19:19:24 +03:00
|
|
|
const selection = document.getSelection();
|
|
|
|
const text = selection.toString();
|
|
|
|
if (text) {
|
|
|
|
const {model} = this.props;
|
2020-07-15 11:45:45 +03:00
|
|
|
const range = getRangeForSelection(this.editorRef.current, model, selection);
|
2020-01-12 19:19:24 +03:00
|
|
|
const selectedParts = range.parts.map(p => p.serialize());
|
2020-08-03 18:02:26 +03:00
|
|
|
event.clipboardData.setData("application/x-element-composer", JSON.stringify(selectedParts));
|
2020-01-24 01:53:32 +03:00
|
|
|
event.clipboardData.setData("text/plain", text); // so plain copy/paste works
|
2020-01-12 19:19:24 +03:00
|
|
|
if (type === "cut") {
|
2020-01-16 07:04:18 +03:00
|
|
|
// Remove the text, updating the model as appropriate
|
2020-07-15 11:45:45 +03:00
|
|
|
this.modifiedFlag = true;
|
2020-01-20 16:03:09 +03:00
|
|
|
replaceRangeAndMoveCaret(range, []);
|
2020-01-12 19:19:24 +03:00
|
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2020-01-12 19:19:24 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onCopy = (event: ClipboardEvent) => {
|
|
|
|
this.onCutCopy(event, "copy");
|
|
|
|
};
|
2020-01-12 19:19:24 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onCut = (event: ClipboardEvent) => {
|
|
|
|
this.onCutCopy(event, "cut");
|
|
|
|
};
|
2020-01-12 19:19:24 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onPaste = (event: ClipboardEvent<HTMLDivElement>) => {
|
2020-06-01 17:00:55 +03:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2019-09-05 17:22:42 +03:00
|
|
|
const {model} = this.props;
|
|
|
|
const {partCreator} = model;
|
2020-08-03 18:02:26 +03:00
|
|
|
const partsText = event.clipboardData.getData("application/x-element-composer");
|
2020-01-12 19:19:24 +03:00
|
|
|
let parts;
|
|
|
|
if (partsText) {
|
|
|
|
const serializedTextParts = JSON.parse(partsText);
|
2020-01-13 17:29:42 +03:00
|
|
|
const deserializedParts = serializedTextParts.map(p => partCreator.deserializePart(p));
|
2020-01-12 19:19:24 +03:00
|
|
|
parts = deserializedParts;
|
|
|
|
} else {
|
|
|
|
const text = event.clipboardData.getData("text/plain");
|
|
|
|
parts = parsePlainTextMessage(text, partCreator);
|
2019-09-05 17:22:42 +03:00
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
this.modifiedFlag = true;
|
|
|
|
const range = getRangeForSelection(this.editorRef.current, model, document.getSelection());
|
2020-01-12 19:19:24 +03:00
|
|
|
replaceRangeAndMoveCaret(range, parts);
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-09-05 17:22:42 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onInput = (event: Partial<InputEvent>) => {
|
2019-08-29 14:56:21 +03:00
|
|
|
// ignore any input while doing IME compositions
|
2020-07-15 11:45:45 +03:00
|
|
|
if (this.isIMEComposing) {
|
2019-08-29 14:56:21 +03:00
|
|
|
return;
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
this.modifiedFlag = true;
|
2019-08-05 16:27:40 +03:00
|
|
|
const sel = document.getSelection();
|
2020-07-15 11:45:45 +03:00
|
|
|
const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
|
2019-08-05 16:27:40 +03:00
|
|
|
this.props.model.update(text, event.inputType, caret);
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private insertText(textToInsert: string, inputType = "insertText") {
|
2019-08-05 16:27:40 +03:00
|
|
|
const sel = document.getSelection();
|
2020-07-15 11:45:45 +03:00
|
|
|
const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
|
2019-08-05 16:27:40 +03:00
|
|
|
const newText = text.substr(0, caret.offset) + textToInsert + text.substr(caret.offset);
|
|
|
|
caret.offset += textToInsert.length;
|
2020-07-15 11:45:45 +03:00
|
|
|
this.modifiedFlag = true;
|
2019-08-05 16:27:40 +03:00
|
|
|
this.props.model.update(newText, inputType, caret);
|
|
|
|
}
|
|
|
|
|
2019-08-07 18:44:49 +03:00
|
|
|
// this is used later to see if we need to recalculate the caret
|
|
|
|
// on selectionchange. If it is just a consequence of typing
|
|
|
|
// 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
|
2020-07-15 11:45:45 +03:00
|
|
|
private setLastCaretFromPosition(position: DocumentPosition) {
|
2019-09-06 12:09:01 +03:00
|
|
|
const {model} = this.props;
|
|
|
|
this._isCaretAtEnd = position.isAtEnd(model);
|
2020-07-15 11:45:45 +03:00
|
|
|
this.lastCaret = position.asOffset(model);
|
|
|
|
this.lastSelection = cloneSelection(document.getSelection());
|
2019-08-07 18:44:49 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private refreshLastCaretIfNeeded() {
|
2019-08-27 17:17:41 +03:00
|
|
|
// XXX: needed when going up and down in editing messages ... not sure why yet
|
2019-08-07 18:44:49 +03:00
|
|
|
// because the editors should stop doing this when when blurred ...
|
|
|
|
// maybe it's on focus and the _editorRef isn't available yet or something.
|
2020-07-15 11:45:45 +03:00
|
|
|
if (!this.editorRef.current) {
|
2019-08-07 18:44:49 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
const selection = document.getSelection();
|
2020-07-15 11:45:45 +03:00
|
|
|
if (!this.lastSelection || !selectionEquals(this.lastSelection, selection)) {
|
|
|
|
this.lastSelection = cloneSelection(selection);
|
|
|
|
const {caret, text} = getCaretOffsetAndText(this.editorRef.current, selection);
|
|
|
|
this.lastCaret = caret;
|
2019-09-06 12:09:01 +03:00
|
|
|
this._isCaretAtEnd = caret.offset === text.length;
|
2019-08-07 18:44:49 +03:00
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
return this.lastCaret;
|
2019-08-07 18:44:49 +03:00
|
|
|
}
|
|
|
|
|
2019-08-20 18:15:52 +03:00
|
|
|
clearUndoHistory() {
|
|
|
|
this.historyManager.clear();
|
|
|
|
}
|
|
|
|
|
2019-08-07 18:44:49 +03:00
|
|
|
getCaret() {
|
2020-07-15 11:45:45 +03:00
|
|
|
return this.lastCaret;
|
2019-08-07 18:44:49 +03:00
|
|
|
}
|
|
|
|
|
2019-08-20 18:18:46 +03:00
|
|
|
isSelectionCollapsed() {
|
2020-07-15 11:45:45 +03:00
|
|
|
return !this.lastSelection || this.lastSelection.isCollapsed;
|
2019-08-20 18:18:46 +03:00
|
|
|
}
|
|
|
|
|
2019-08-07 18:44:49 +03:00
|
|
|
isCaretAtStart() {
|
|
|
|
return this.getCaret().offset === 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
isCaretAtEnd() {
|
2019-09-06 12:09:01 +03:00
|
|
|
return this._isCaretAtEnd;
|
2019-08-07 18:44:49 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onBlur = () => {
|
|
|
|
document.removeEventListener("selectionchange", this.onSelectionChange);
|
|
|
|
};
|
2019-08-07 18:44:49 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onFocus = () => {
|
|
|
|
document.addEventListener("selectionchange", this.onSelectionChange);
|
2019-08-07 18:44:49 +03:00
|
|
|
// force to recalculate
|
2020-07-15 11:45:45 +03:00
|
|
|
this.lastSelection = null;
|
|
|
|
this.refreshLastCaretIfNeeded();
|
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onSelectionChange = () => {
|
2020-06-04 02:05:40 +03:00
|
|
|
const {isEmpty} = this.props.model;
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
this.refreshLastCaretIfNeeded();
|
2019-09-03 17:02:37 +03:00
|
|
|
const selection = document.getSelection();
|
2020-07-15 11:45:45 +03:00
|
|
|
if (this.hasTextSelected && selection.isCollapsed) {
|
|
|
|
this.hasTextSelected = false;
|
|
|
|
if (this.formatBarRef.current) {
|
|
|
|
this.formatBarRef.current.hide();
|
2019-09-03 17:02:37 +03:00
|
|
|
}
|
2020-06-04 02:05:40 +03:00
|
|
|
} else if (!selection.isCollapsed && !isEmpty) {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.hasTextSelected = true;
|
|
|
|
if (this.formatBarRef.current) {
|
2019-09-03 17:02:37 +03:00
|
|
|
const selectionRect = selection.getRangeAt(0).getBoundingClientRect();
|
2020-07-15 11:45:45 +03:00
|
|
|
this.formatBarRef.current.showAt(selectionRect);
|
2019-09-03 17:02:37 +03:00
|
|
|
}
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onKeyDown = (event: React.KeyboardEvent) => {
|
2019-08-05 16:27:40 +03:00
|
|
|
const model = this.props.model;
|
|
|
|
let handled = false;
|
2021-03-01 11:43:00 +03:00
|
|
|
const action = getKeyBindingsManager().getMessageComposerAction(event);
|
2021-02-17 12:00:48 +03:00
|
|
|
switch (action) {
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.FormatBold:
|
2021-02-17 12:00:48 +03:00
|
|
|
this.onFormatAction(Formatting.Bold);
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.FormatItalics:
|
2021-02-17 12:00:48 +03:00
|
|
|
this.onFormatAction(Formatting.Italics);
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.FormatQuote:
|
2021-02-17 12:00:48 +03:00
|
|
|
this.onFormatAction(Formatting.Quote);
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.EditRedo:
|
2021-02-17 12:00:48 +03:00
|
|
|
if (this.historyManager.canRedo()) {
|
|
|
|
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");
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
2019-08-27 17:16:43 +03:00
|
|
|
handled = true;
|
2021-02-17 12:00:48 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.EditUndo:
|
2021-02-17 12:00:48 +03:00
|
|
|
if (this.historyManager.canUndo()) {
|
|
|
|
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");
|
|
|
|
}
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.NewLine:
|
2021-02-17 12:00:48 +03:00
|
|
|
this.insertText("\n");
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.MoveCursorToStart:
|
2021-02-17 12:00:48 +03:00
|
|
|
setSelection(this.editorRef.current, model, {
|
|
|
|
index: 0,
|
|
|
|
offset: 0,
|
|
|
|
});
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case MessageComposerAction.MoveCursorToEnd:
|
2021-02-17 12:00:48 +03:00
|
|
|
setSelection(this.editorRef.current, model, {
|
|
|
|
index: model.parts.length - 1,
|
|
|
|
offset: model.parts[model.parts.length - 1].text.length,
|
|
|
|
});
|
|
|
|
handled = true;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
if (handled) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-03-01 11:43:00 +03:00
|
|
|
const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
|
2021-02-17 12:00:48 +03:00
|
|
|
if (model.autoComplete && model.autoComplete.hasCompletions()) {
|
|
|
|
const autoComplete = model.autoComplete;
|
|
|
|
switch (autocompleteAction) {
|
2021-03-28 09:59:33 +03:00
|
|
|
case AutocompleteAction.CompleteOrPrevSelection:
|
2021-03-01 11:43:00 +03:00
|
|
|
case AutocompleteAction.PrevSelection:
|
2021-03-28 09:59:33 +03:00
|
|
|
autoComplete.selectPreviousSelection();
|
2021-02-17 12:00:48 +03:00
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-28 09:59:33 +03:00
|
|
|
case AutocompleteAction.CompleteOrNextSelection:
|
2021-03-01 11:43:00 +03:00
|
|
|
case AutocompleteAction.NextSelection:
|
2021-03-28 09:59:33 +03:00
|
|
|
autoComplete.selectNextSelection();
|
2021-02-17 12:00:48 +03:00
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case AutocompleteAction.Cancel:
|
2021-02-17 12:00:48 +03:00
|
|
|
autoComplete.onEscape(event);
|
|
|
|
handled = true;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
return; // don't preventDefault on anything else
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
2021-03-28 09:59:33 +03:00
|
|
|
} else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
|
|
|
|
|| autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
|
|
|
|
// there is no current autocomplete window, try to open it
|
|
|
|
this.tabCompleteName();
|
2021-02-17 12:00:48 +03:00
|
|
|
handled = true;
|
|
|
|
} else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
|
|
|
|
this.formatBarRef.current.hide();
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
2021-02-17 12:00:48 +03:00
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
if (handled) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2021-03-28 09:59:33 +03:00
|
|
|
private async tabCompleteName() {
|
2019-08-28 16:53:16 +03:00
|
|
|
try {
|
2021-01-20 16:40:46 +03:00
|
|
|
await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
|
2019-08-28 16:53:16 +03:00
|
|
|
const {model} = this.props;
|
|
|
|
const caret = this.getCaret();
|
|
|
|
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
|
|
|
|
const range = model.startRange(position);
|
|
|
|
range.expandBackwardsWhile((index, offset, part) => {
|
2020-11-18 01:36:58 +03:00
|
|
|
return part.text[offset] !== " " && part.text[offset] !== "+" && (
|
2019-09-02 12:27:22 +03:00
|
|
|
part.type === "plain" ||
|
|
|
|
part.type === "pill-candidate" ||
|
|
|
|
part.type === "command"
|
|
|
|
);
|
2019-08-28 16:53:16 +03:00
|
|
|
});
|
|
|
|
const {partCreator} = model;
|
|
|
|
// await for auto-complete to be open
|
|
|
|
await model.transform(() => {
|
|
|
|
const addedLen = range.replace([partCreator.pillCandidate(range.text)]);
|
|
|
|
return model.positionForOffset(caret.offset + addedLen, true);
|
|
|
|
});
|
2020-02-25 23:13:41 +03:00
|
|
|
|
|
|
|
// Don't try to do things with the autocomplete if there is none shown
|
|
|
|
if (model.autoComplete) {
|
2021-03-28 09:59:33 +03:00
|
|
|
await model.autoComplete.startSelection();
|
2020-02-25 23:13:41 +03:00
|
|
|
if (!model.autoComplete.hasSelection()) {
|
|
|
|
this.setState({showVisualBell: true});
|
|
|
|
model.autoComplete.close();
|
|
|
|
}
|
2019-08-28 16:53:16 +03:00
|
|
|
}
|
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
|
|
|
}
|
2019-08-27 17:16:43 +03:00
|
|
|
}
|
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
isModified() {
|
2020-07-15 11:45:45 +03:00
|
|
|
return this.modifiedFlag;
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onAutoCompleteConfirm = (completion: ICompletion) => {
|
2020-08-19 12:32:24 +03:00
|
|
|
this.modifiedFlag = true;
|
2019-08-05 16:27:40 +03:00
|
|
|
this.props.model.autoComplete.onComponentConfirm(completion);
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onAutoCompleteSelectionChange = (completion: ICompletion, completionIndex: number) => {
|
2020-08-19 12:32:24 +03:00
|
|
|
this.modifiedFlag = true;
|
2019-08-05 16:27:40 +03:00
|
|
|
this.props.model.autoComplete.onComponentSelectionChange(completion);
|
2019-09-30 16:04:39 +03:00
|
|
|
this.setState({completionIndex});
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-08-05 16:27:40 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private configureEmoticonAutoReplace = () => {
|
2019-10-08 15:11:11 +03:00
|
|
|
const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
|
2020-07-15 11:45:45 +03:00
|
|
|
this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null);
|
2020-04-10 11:30:19 +03:00
|
|
|
};
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private configureShouldShowPillAvatar = () => {
|
2020-04-10 11:30:19 +03:00
|
|
|
const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
|
|
|
|
this.setState({ showPillAvatar });
|
|
|
|
};
|
2019-10-08 15:11:11 +03:00
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
componentWillUnmount() {
|
2020-07-15 11:45:45 +03:00
|
|
|
document.removeEventListener("selectionchange", this.onSelectionChange);
|
|
|
|
this.editorRef.current.removeEventListener("input", this.onInput, true);
|
|
|
|
this.editorRef.current.removeEventListener("compositionstart", this.onCompositionStart, true);
|
|
|
|
this.editorRef.current.removeEventListener("compositionend", this.onCompositionEnd, true);
|
|
|
|
SettingsStore.unwatchSetting(this.emoticonSettingHandle);
|
|
|
|
SettingsStore.unwatchSetting(this.shouldShowPillAvatarSettingHandle);
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
const model = this.props.model;
|
2020-07-15 11:45:45 +03:00
|
|
|
model.setUpdateCallback(this.updateEditorState);
|
2019-08-05 16:27:40 +03:00
|
|
|
const partCreator = model.partCreator;
|
|
|
|
// TODO: does this allow us to get rid of EditorStateTransfer?
|
|
|
|
// not really, but we could not serialize the parts, and just change the autoCompleter
|
2020-07-15 11:45:45 +03:00
|
|
|
partCreator.setAutoCompleteCreator(getAutoCompleteCreator(
|
|
|
|
() => this.autocompleteRef.current,
|
2019-08-28 18:53:03 +03:00
|
|
|
query => new Promise(resolve => this.setState({query}, resolve)),
|
2019-08-05 16:27:40 +03:00
|
|
|
));
|
|
|
|
// initial render of model
|
2020-07-15 11:45:45 +03:00
|
|
|
this.updateEditorState(this.getInitialCaretPosition());
|
2019-08-05 16:27:40 +03:00
|
|
|
// attach input listener by hand so React doesn't proxy the events,
|
|
|
|
// as the proxied event doesn't support inputType, which we need.
|
2020-07-15 11:45:45 +03:00
|
|
|
this.editorRef.current.addEventListener("input", this.onInput, true);
|
|
|
|
this.editorRef.current.addEventListener("compositionstart", this.onCompositionStart, true);
|
|
|
|
this.editorRef.current.addEventListener("compositionend", this.onCompositionEnd, true);
|
|
|
|
this.editorRef.current.focus();
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private getInitialCaretPosition() {
|
2019-08-05 16:27:40 +03:00
|
|
|
let caretPosition;
|
|
|
|
if (this.props.initialCaret) {
|
|
|
|
// if restoring state from a previous editor,
|
|
|
|
// restore caret position from the state
|
|
|
|
const caret = this.props.initialCaret;
|
|
|
|
caretPosition = this.props.model.positionForOffset(caret.offset, caret.atNodeEnd);
|
|
|
|
} else {
|
|
|
|
// otherwise, set it at the end
|
|
|
|
caretPosition = this.props.model.getPositionAtEnd();
|
|
|
|
}
|
|
|
|
return caretPosition;
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
private onFormatAction = (action: Formatting) => {
|
2020-09-29 16:15:20 +03:00
|
|
|
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();
|
|
|
|
|
2019-09-05 16:17:33 +03:00
|
|
|
if (range.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
2020-09-29 16:15:20 +03:00
|
|
|
|
2019-09-05 16:34:42 +03:00
|
|
|
this.historyManager.ensureLastChangesPushed(this.props.model);
|
2020-07-15 11:45:45 +03:00
|
|
|
this.modifiedFlag = true;
|
2019-09-05 13:10:45 +03:00
|
|
|
switch (action) {
|
2020-07-15 11:45:45 +03:00
|
|
|
case Formatting.Bold:
|
2019-09-06 17:25:06 +03:00
|
|
|
toggleInlineFormat(range, "**");
|
2019-09-05 13:10:45 +03:00
|
|
|
break;
|
2020-07-15 11:45:45 +03:00
|
|
|
case Formatting.Italics:
|
2019-09-06 18:50:23 +03:00
|
|
|
toggleInlineFormat(range, "_");
|
2019-09-05 13:10:45 +03:00
|
|
|
break;
|
2020-07-15 11:45:45 +03:00
|
|
|
case Formatting.Strikethrough:
|
2019-09-06 17:25:06 +03:00
|
|
|
toggleInlineFormat(range, "<del>", "</del>");
|
2019-09-05 13:10:45 +03:00
|
|
|
break;
|
2020-07-15 11:45:45 +03:00
|
|
|
case Formatting.Code:
|
2019-09-05 13:10:45 +03:00
|
|
|
formatRangeAsCode(range);
|
|
|
|
break;
|
2020-07-15 11:45:45 +03:00
|
|
|
case Formatting.Quote:
|
2019-09-05 13:10:45 +03:00
|
|
|
formatRangeAsQuote(range);
|
|
|
|
break;
|
|
|
|
}
|
2020-07-15 11:45:45 +03:00
|
|
|
};
|
2019-09-03 17:02:37 +03:00
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
render() {
|
|
|
|
let autoComplete;
|
|
|
|
if (this.state.autoComplete) {
|
|
|
|
const query = this.state.query;
|
|
|
|
const queryLen = query.length;
|
2019-08-06 17:31:21 +03:00
|
|
|
autoComplete = (<div className="mx_BasicMessageComposer_AutoCompleteWrapper">
|
2019-08-05 16:27:40 +03:00
|
|
|
<Autocomplete
|
2020-07-15 11:45:45 +03:00
|
|
|
ref={this.autocompleteRef}
|
2019-08-05 16:27:40 +03:00
|
|
|
query={query}
|
2020-07-15 11:45:45 +03:00
|
|
|
onConfirm={this.onAutoCompleteConfirm}
|
|
|
|
onSelectionChange={this.onAutoCompleteSelectionChange}
|
2019-08-05 16:27:40 +03:00
|
|
|
selection={{beginning: true, end: queryLen, start: queryLen}}
|
|
|
|
room={this.props.room}
|
|
|
|
/>
|
2019-08-06 17:31:21 +03:00
|
|
|
</div>);
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
2020-04-10 11:30:19 +03:00
|
|
|
const wrapperClasses = classNames("mx_BasicMessageComposer", {
|
2019-08-28 16:53:16 +03:00
|
|
|
"mx_BasicMessageComposer_input_error": this.state.showVisualBell,
|
|
|
|
});
|
2020-04-10 11:30:19 +03:00
|
|
|
const classes = classNames("mx_BasicMessageComposer_input", {
|
|
|
|
"mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
|
2021-03-16 07:16:58 +03:00
|
|
|
"mx_BasicMessageComposer_input_disabled": this.props.disabled,
|
2020-04-10 11:30:19 +03:00
|
|
|
});
|
2019-09-05 13:10:45 +03:00
|
|
|
|
2019-09-05 16:09:37 +03:00
|
|
|
const shortcuts = {
|
|
|
|
bold: ctrlShortcutLabel("B"),
|
|
|
|
italics: ctrlShortcutLabel("I"),
|
|
|
|
quote: ctrlShortcutLabel(">"),
|
|
|
|
};
|
2019-09-05 13:10:45 +03:00
|
|
|
|
2019-09-30 16:04:39 +03:00
|
|
|
const {completionIndex} = this.state;
|
|
|
|
|
2020-04-10 11:30:19 +03:00
|
|
|
return (<div className={wrapperClasses}>
|
2019-08-06 17:31:21 +03:00
|
|
|
{ autoComplete }
|
2020-07-15 11:45:45 +03:00
|
|
|
<MessageComposerFormatBar ref={this.formatBarRef} onAction={this.onFormatAction} shortcuts={shortcuts} />
|
2019-08-06 17:31:21 +03:00
|
|
|
<div
|
2020-04-10 11:30:19 +03:00
|
|
|
className={classes}
|
2019-08-06 17:31:21 +03:00
|
|
|
contentEditable="true"
|
2020-07-15 11:45:45 +03:00
|
|
|
tabIndex={0}
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
onFocus={this.onFocus}
|
|
|
|
onCopy={this.onCopy}
|
|
|
|
onCut={this.onCut}
|
|
|
|
onPaste={this.onPaste}
|
|
|
|
onKeyDown={this.onKeyDown}
|
|
|
|
ref={this.editorRef}
|
2019-08-06 18:03:16 +03:00
|
|
|
aria-label={this.props.label}
|
2019-09-30 16:04:39 +03:00
|
|
|
role="textbox"
|
|
|
|
aria-multiline="true"
|
|
|
|
aria-autocomplete="both"
|
|
|
|
aria-haspopup="listbox"
|
|
|
|
aria-expanded={Boolean(this.state.autoComplete)}
|
|
|
|
aria-activedescendant={completionIndex >= 0 ? generateCompletionDomId(completionIndex) : undefined}
|
2019-11-04 20:37:36 +03:00
|
|
|
dir="auto"
|
2021-03-16 07:16:58 +03:00
|
|
|
aria-disabled={this.props.disabled}
|
2019-09-30 16:04:39 +03:00
|
|
|
/>
|
2019-08-06 17:31:21 +03:00
|
|
|
</div>);
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|
2019-08-07 16:14:16 +03:00
|
|
|
|
|
|
|
focus() {
|
2020-07-15 11:45:45 +03:00
|
|
|
this.editorRef.current.focus();
|
2019-08-07 16:14:16 +03:00
|
|
|
}
|
2021-04-13 16:52:26 +03:00
|
|
|
|
|
|
|
public insertMention(userId: string) {
|
|
|
|
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);
|
|
|
|
// index is -1 if there are no parts but we only care for if this would be the part in position 0
|
|
|
|
const insertIndex = position.index > 0 ? position.index : 0;
|
|
|
|
const parts = partCreator.createMentionParts(insertIndex, 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();
|
|
|
|
}
|
2021-04-13 17:09:37 +03:00
|
|
|
|
|
|
|
public insertQuotedMessage(event: MatrixEvent) {
|
|
|
|
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) {
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
}
|
2019-08-05 16:27:40 +03:00
|
|
|
}
|