mirror of https://github.com/vector-im/riot-web
Merge remote-tracking branch 'origin/develop' into develop
commit
29c9e17afa
|
@ -88,10 +88,10 @@
|
|||
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"sanitize-html": "^1.18.4",
|
||||
"slate": "0.34.7",
|
||||
"slate": "^0.41.2",
|
||||
"slate-html-serializer": "^0.6.1",
|
||||
"slate-md-serializer": "matrix-org/slate-md-serializer#f7c4ad3",
|
||||
"slate-react": "^0.12.4",
|
||||
"slate-react": "^0.18.10",
|
||||
"text-encoding-utf-8": "^1.0.1",
|
||||
"url": "^0.11.0",
|
||||
"velocity-vector": "vector-im/velocity#059e3b2",
|
||||
|
|
|
@ -195,6 +195,8 @@ module.exports = React.createClass({
|
|||
editingRoomSettings: RoomViewStore.isEditingSettings(),
|
||||
};
|
||||
|
||||
if (this.state.editingRoomSettings && !newState.editingRoomSettings) dis.dispatch({action: 'focus_composer'});
|
||||
|
||||
// Temporary logging to diagnose https://github.com/vector-im/riot-web/issues/4307
|
||||
console.log(
|
||||
'RVS update:',
|
||||
|
|
|
@ -106,6 +106,17 @@ const MARK_TAGS = {
|
|||
s: 'deleted', // deprecated
|
||||
};
|
||||
|
||||
const SLATE_SCHEMA = {
|
||||
inlines: {
|
||||
pill: {
|
||||
isVoid: true,
|
||||
},
|
||||
emoji: {
|
||||
isVoid: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function onSendMessageFailed(err, room) {
|
||||
// XXX: temporary logging to try to diagnose
|
||||
// https://github.com/vector-im/riot-web/issues/3148
|
||||
|
@ -116,10 +127,10 @@ function onSendMessageFailed(err, room) {
|
|||
}
|
||||
|
||||
function rangeEquals(a: Range, b: Range): boolean {
|
||||
return (a.anchorKey === b.anchorKey
|
||||
&& a.anchorOffset === b.anchorOffset
|
||||
&& a.focusKey === b.focusKey
|
||||
&& a.focusOffset === b.focusOffset
|
||||
return (a.anchor.key === b.anchor.key
|
||||
&& a.anchor.offset === b.anchorOffset
|
||||
&& a.focus.key === b.focusKey
|
||||
&& a.focus.offset === b.focusOffset
|
||||
&& a.isFocused === b.isFocused
|
||||
&& a.isBackward === b.isBackward);
|
||||
}
|
||||
|
@ -239,7 +250,6 @@ export default class MessageComposerInput extends React.Component {
|
|||
completion: el.innerText,
|
||||
completionId: m[1],
|
||||
},
|
||||
isVoid: true,
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
@ -345,8 +355,12 @@ export default class MessageComposerInput extends React.Component {
|
|||
dis.unregister(this.dispatcherRef);
|
||||
}
|
||||
|
||||
_collectEditor = (e) => {
|
||||
this._editor = e;
|
||||
}
|
||||
|
||||
onAction = (payload) => {
|
||||
const editor = this.refs.editor;
|
||||
const editor = this._editor;
|
||||
let editorState = this.state.editorState;
|
||||
|
||||
switch (payload.action) {
|
||||
|
@ -402,10 +416,14 @@ export default class MessageComposerInput extends React.Component {
|
|||
}
|
||||
|
||||
// XXX: this is to bring back the focus in a sane place and add a paragraph after it
|
||||
change = change.select({
|
||||
anchorKey: quote.key,
|
||||
focusKey: quote.key,
|
||||
}).collapseToEndOfBlock().insertBlock(Block.create(DEFAULT_NODE)).focus();
|
||||
change = change.select(Range.create({
|
||||
anchor: {
|
||||
key: quote.key,
|
||||
},
|
||||
focus: {
|
||||
key: quote.key,
|
||||
},
|
||||
})).collapseToEndOfBlock().insertBlock(Block.create(DEFAULT_NODE)).focus();
|
||||
|
||||
this.onChange(change);
|
||||
} else {
|
||||
|
@ -497,15 +515,15 @@ export default class MessageComposerInput extends React.Component {
|
|||
|
||||
if (this.direction !== '') {
|
||||
const focusedNode = editorState.focusInline || editorState.focusText;
|
||||
if (focusedNode.isVoid) {
|
||||
if (editorState.schema.isVoid(focusedNode)) {
|
||||
// XXX: does this work in RTL?
|
||||
const edge = this.direction === 'Previous' ? 'End' : 'Start';
|
||||
if (editorState.isCollapsed) {
|
||||
change = change[`collapseTo${ edge }Of${ this.direction }Text`]();
|
||||
if (editorState.selection.isCollapsed) {
|
||||
change = change[`moveTo${ edge }Of${ this.direction }Text`]();
|
||||
} else {
|
||||
const block = this.direction === 'Previous' ? editorState.previousText : editorState.nextText;
|
||||
if (block) {
|
||||
change = change[`moveFocusTo${ edge }Of`](block);
|
||||
change = change[`moveFocusTo${ edge }OfNode`](block);
|
||||
}
|
||||
}
|
||||
editorState = change.value;
|
||||
|
@ -522,7 +540,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
this.autocomplete.hide();
|
||||
}
|
||||
|
||||
if (!editorState.document.isEmpty) {
|
||||
if (Plain.serialize(editorState) !== '') {
|
||||
this.onTypingActivity();
|
||||
} else {
|
||||
this.onFinishedTyping();
|
||||
|
@ -543,10 +561,14 @@ export default class MessageComposerInput extends React.Component {
|
|||
const unicodeEmoji = shortnameToUnicode(EMOJI_UNICODE_TO_SHORTNAME[emojiUc]);
|
||||
|
||||
const range = Range.create({
|
||||
anchorKey: editorState.selection.startKey,
|
||||
anchorOffset: currentStartOffset - emojiMatch[1].length - 1,
|
||||
focusKey: editorState.selection.startKey,
|
||||
focusOffset: currentStartOffset - 1,
|
||||
anchor: {
|
||||
key: editorState.selection.startKey,
|
||||
offset: currentStartOffset - emojiMatch[1].length - 1,
|
||||
},
|
||||
focus: {
|
||||
key: editorState.selection.startKey,
|
||||
offset: currentStartOffset - 1,
|
||||
},
|
||||
});
|
||||
change = change.insertTextAtRange(range, unicodeEmoji);
|
||||
editorState = change.value;
|
||||
|
@ -560,15 +582,18 @@ export default class MessageComposerInput extends React.Component {
|
|||
let match;
|
||||
while ((match = EMOJI_REGEX.exec(node.text)) !== null) {
|
||||
const range = Range.create({
|
||||
anchorKey: node.key,
|
||||
anchorOffset: match.index,
|
||||
focusKey: node.key,
|
||||
focusOffset: match.index + match[0].length,
|
||||
anchor: {
|
||||
key: node.key,
|
||||
offset: match.index,
|
||||
},
|
||||
focus: {
|
||||
key: node.key,
|
||||
offset: match.index + match[0].length,
|
||||
},
|
||||
});
|
||||
const inline = Inline.create({
|
||||
type: 'emoji',
|
||||
data: { emojiUnicode: match[0] },
|
||||
isVoid: true,
|
||||
});
|
||||
change = change.insertInlineAtRange(range, inline);
|
||||
editorState = change.value;
|
||||
|
@ -580,10 +605,10 @@ export default class MessageComposerInput extends React.Component {
|
|||
// emoji picker can leave the selection stuck in the emoji's
|
||||
// child text. This seems to happen due to selection getting
|
||||
// moved in the normalisation phase after calculating these changes
|
||||
if (editorState.anchorKey &&
|
||||
editorState.document.getParent(editorState.anchorKey).type === 'emoji')
|
||||
if (editorState.selection.anchor.key &&
|
||||
editorState.document.getParent(editorState.selection.anchor.key).type === 'emoji')
|
||||
{
|
||||
change = change.collapseToStartOfNextText();
|
||||
change = change.moveToStartOfNextText();
|
||||
editorState = change.value;
|
||||
}
|
||||
|
||||
|
@ -673,7 +698,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
editorState: this.createEditorState(enabled, editorState),
|
||||
isRichTextEnabled: enabled,
|
||||
}, ()=>{
|
||||
this.refs.editor.focus();
|
||||
this._editor.focus();
|
||||
});
|
||||
|
||||
SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled);
|
||||
|
@ -760,7 +785,9 @@ export default class MessageComposerInput extends React.Component {
|
|||
// drop a point in history so the user can undo a word
|
||||
// XXX: this seems nasty but adding to history manually seems a no-go
|
||||
ev.preventDefault();
|
||||
return change.setOperationFlag("skip", false).setOperationFlag("merge", false).insertText(ev.key);
|
||||
return change.withoutMerging(() => {
|
||||
change.insertText(ev.key);
|
||||
});
|
||||
};
|
||||
|
||||
onBackspace = (ev: KeyboardEvent, change: Change): Change => {
|
||||
|
@ -771,23 +798,25 @@ export default class MessageComposerInput extends React.Component {
|
|||
const { editorState } = this.state;
|
||||
|
||||
// Allow Ctrl/Cmd-Backspace when focus starts at the start of the composer (e.g select-all)
|
||||
// for some reason if slate sees you Ctrl-backspace and your anchorOffset=0 it just resets your focus
|
||||
if (!editorState.isCollapsed && editorState.anchorOffset === 0) {
|
||||
// for some reason if slate sees you Ctrl-backspace and your anchor.offset=0 it just resets your focus
|
||||
// XXX: Doing this now seems to put slate into a broken state, and it didn't appear to be doing
|
||||
// what it claims to do on the old version of slate anyway...
|
||||
/*if (!editorState.isCollapsed && editorState.selection.anchor.offset === 0) {
|
||||
return change.delete();
|
||||
}
|
||||
}*/
|
||||
|
||||
if (this.state.isRichTextEnabled) {
|
||||
// let backspace exit lists
|
||||
const isList = this.hasBlock('list-item');
|
||||
|
||||
if (isList && editorState.anchorOffset == 0) {
|
||||
if (isList && editorState.selection.anchor.offset == 0) {
|
||||
change
|
||||
.setBlocks(DEFAULT_NODE)
|
||||
.unwrapBlock('bulleted-list')
|
||||
.unwrapBlock('numbered-list');
|
||||
return change;
|
||||
}
|
||||
else if (editorState.anchorOffset == 0 && editorState.isCollapsed) {
|
||||
else if (editorState.selection.anchor.offset == 0 && editorState.isCollapsed) {
|
||||
// turn blocks back into paragraphs
|
||||
if ((this.hasBlock('block-quote') ||
|
||||
this.hasBlock('heading1') ||
|
||||
|
@ -803,7 +832,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
|
||||
// remove paragraphs entirely if they're nested
|
||||
const parent = editorState.document.getParent(editorState.anchorBlock.key);
|
||||
if (editorState.anchorOffset == 0 &&
|
||||
if (editorState.selection.anchor.offset == 0 &&
|
||||
this.hasBlock('paragraph') &&
|
||||
parent.nodes.size == 1 &&
|
||||
parent.object !== 'document')
|
||||
|
@ -942,8 +971,8 @@ export default class MessageComposerInput extends React.Component {
|
|||
const collapseAndOffsetSelection = (selection, offset) => {
|
||||
const key = selection.endKey();
|
||||
return new Range({
|
||||
anchorKey: key, anchorOffset: offset,
|
||||
focusKey: key, focusOffset: offset,
|
||||
anchorKey: key, anchor.offset: offset,
|
||||
focus.key: key, focus.offset: offset,
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -1000,18 +1029,16 @@ export default class MessageComposerInput extends React.Component {
|
|||
.insertFragment(fragment.document);
|
||||
} else {
|
||||
// in MD mode we don't want the rich content pasted as the magic was annoying people so paste plain
|
||||
return change
|
||||
.setOperationFlag("skip", false)
|
||||
.setOperationFlag("merge", false)
|
||||
.insertText(transfer.text);
|
||||
return change.withoutMerging(() => {
|
||||
change.insertText(transfer.text);
|
||||
});
|
||||
}
|
||||
}
|
||||
case 'text':
|
||||
// don't skip/merge so that multiple consecutive pastes can be undone individually
|
||||
return change
|
||||
.setOperationFlag("skip", false)
|
||||
.setOperationFlag("merge", false)
|
||||
.insertText(transfer.text);
|
||||
return change.withoutMerging(() => {
|
||||
change.insertText(transfer.text);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1066,7 +1093,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
this.setState({
|
||||
editorState: this.createEditorState(),
|
||||
}, ()=>{
|
||||
this.refs.editor.focus();
|
||||
this._editor.focus();
|
||||
});
|
||||
}
|
||||
if (cmd.promise) {
|
||||
|
@ -1196,7 +1223,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
|
||||
this.setState({
|
||||
editorState: this.createEditorState(),
|
||||
}, ()=>{ this.refs.editor.focus() });
|
||||
}, ()=>{ this._editor.focus() });
|
||||
|
||||
return true;
|
||||
};
|
||||
|
@ -1216,9 +1243,9 @@ export default class MessageComposerInput extends React.Component {
|
|||
|
||||
// and we must be at the edge of the document (up=start, down=end)
|
||||
if (up) {
|
||||
if (!selection.isAtStartOf(document)) return;
|
||||
if (!selection.anchor.isAtStartOfNode(document)) return;
|
||||
} else {
|
||||
if (!selection.isAtEndOf(document)) return;
|
||||
if (!selection.anchor.isAtEndOfNode(document)) return;
|
||||
}
|
||||
|
||||
const selected = this.selectHistory(up);
|
||||
|
@ -1275,7 +1302,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
this.suppressAutoComplete = true;
|
||||
|
||||
this.setState({ editorState }, ()=>{
|
||||
this.refs.editor.focus();
|
||||
this._editor.focus();
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
@ -1345,15 +1372,11 @@ export default class MessageComposerInput extends React.Component {
|
|||
inline = Inline.create({
|
||||
type: 'pill',
|
||||
data: { completion, completionId, href },
|
||||
// we can't put text in here otherwise the editor tries to select it
|
||||
isVoid: true,
|
||||
});
|
||||
} else if (completion === '@room') {
|
||||
inline = Inline.create({
|
||||
type: 'pill',
|
||||
data: { completion, completionId },
|
||||
// we can't put text in here otherwise the editor tries to select it
|
||||
isVoid: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1361,8 +1384,9 @@ export default class MessageComposerInput extends React.Component {
|
|||
|
||||
if (range) {
|
||||
const change = editorState.change()
|
||||
.collapseToAnchor()
|
||||
.moveOffsetsTo(range.start, range.end)
|
||||
.moveToAnchor()
|
||||
.moveAnchorTo(range.start)
|
||||
.moveFocusTo(range.end)
|
||||
.focus();
|
||||
editorState = change.value;
|
||||
}
|
||||
|
@ -1433,6 +1457,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
room={this.props.room}
|
||||
shouldShowPillAvatar={shouldShowPillAvatar}
|
||||
isSelected={isSelected}
|
||||
{...attributes}
|
||||
/>;
|
||||
}
|
||||
else if (Pill.isPillUrl(url)) {
|
||||
|
@ -1441,6 +1466,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
room={this.props.room}
|
||||
shouldShowPillAvatar={shouldShowPillAvatar}
|
||||
isSelected={isSelected}
|
||||
{...attributes}
|
||||
/>;
|
||||
}
|
||||
else {
|
||||
|
@ -1458,7 +1484,9 @@ export default class MessageComposerInput extends React.Component {
|
|||
const className = classNames('mx_emojione', {
|
||||
mx_emojione_selected: isSelected
|
||||
});
|
||||
return <img className={ className } src={ uri } title={ shortname } alt={ emojiUnicode }/>;
|
||||
const style = {};
|
||||
if (props.selected) style.border = '1px solid blue';
|
||||
return <img className={ className } src={ uri } title={ shortname } alt={ emojiUnicode } style={style}/>;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1486,7 +1514,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
// of focusing it doesn't then cancel the format button being pressed
|
||||
// FIXME: can we just tell handleKeyCommand's change to invoke .focus()?
|
||||
if (document.activeElement && document.activeElement.className !== 'mx_MessageComposer_editor') {
|
||||
this.refs.editor.focus();
|
||||
this._editor.focus();
|
||||
setTimeout(()=>{
|
||||
this.handleKeyCommand(name);
|
||||
}, 500); // can't find any callback to hook this to. onFocus and onChange and willComponentUpdate fire too early.
|
||||
|
@ -1503,8 +1531,8 @@ export default class MessageComposerInput extends React.Component {
|
|||
// This avoids us having to serialize the whole thing to plaintext and convert
|
||||
// selection offsets in & out of the plaintext domain.
|
||||
|
||||
if (editorState.selection.anchorKey) {
|
||||
return editorState.document.getDescendant(editorState.selection.anchorKey).text;
|
||||
if (editorState.selection.anchor.key) {
|
||||
return editorState.document.getDescendant(editorState.selection.anchor.key).text;
|
||||
}
|
||||
else {
|
||||
return '';
|
||||
|
@ -1518,16 +1546,16 @@ export default class MessageComposerInput extends React.Component {
|
|||
const firstGrandChild = firstChild && firstChild.nodes.get(0);
|
||||
beginning = (firstChild && firstGrandChild &&
|
||||
firstChild.object === 'block' && firstGrandChild.object === 'text' &&
|
||||
editorState.selection.anchorKey === firstGrandChild.key);
|
||||
editorState.selection.anchor.key === firstGrandChild.key);
|
||||
|
||||
// return a character range suitable for handing to an autocomplete provider.
|
||||
// the range is relative to the anchor of the current editor selection.
|
||||
// if the selection spans multiple blocks, then we collapse it for the calculation.
|
||||
const range = {
|
||||
beginning, // whether the selection is in the first block of the editor or not
|
||||
start: editorState.selection.anchorOffset,
|
||||
end: (editorState.selection.anchorKey == editorState.selection.focusKey) ?
|
||||
editorState.selection.focusOffset : editorState.selection.anchorOffset,
|
||||
start: editorState.selection.anchor.offset,
|
||||
end: (editorState.selection.anchor.key == editorState.selection.focus.key) ?
|
||||
editorState.selection.focus.offset : editorState.selection.anchor.offset,
|
||||
}
|
||||
if (range.start > range.end) {
|
||||
const tmp = range.start;
|
||||
|
@ -1543,7 +1571,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
};
|
||||
|
||||
focusComposer = () => {
|
||||
this.refs.editor.focus();
|
||||
this._editor.focus();
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -1553,7 +1581,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
mx_MessageComposer_input_error: this.state.someCompletions === false,
|
||||
});
|
||||
|
||||
const isEmpty = this.state.editorState.document.isEmpty;
|
||||
const isEmpty = Plain.serialize(this.state.editorState) === '';
|
||||
|
||||
let {placeholder} = this.props;
|
||||
// XXX: workaround for placeholder being shown when there is a formatting block e.g blockquote but no text
|
||||
|
@ -1579,7 +1607,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
onMouseDown={this.onMarkdownToggleClicked}
|
||||
title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
|
||||
src={`img/button-md-${!this.state.isRichTextEnabled}.png`} />
|
||||
<Editor ref="editor"
|
||||
<Editor ref={this._collectEditor}
|
||||
dir="auto"
|
||||
className="mx_MessageComposer_editor"
|
||||
placeholder={placeholder}
|
||||
|
@ -1591,6 +1619,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
renderMark={this.renderMark}
|
||||
// disable spell check for the placeholder because browsers don't like "unencrypted"
|
||||
spellCheck={!isEmpty}
|
||||
schema={SLATE_SCHEMA}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue