Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update to new version of slate

Browse Source 
Lots of fixes here as a lot of the API has changed (eg. anchorKey /
offsetKey are now anchor.key and offset.key, and collapseFocusToThing
is moveFocusToThing).

Also changes the ref to a function (sorry for lumping this into the
same PR).

Hopefully will fix https://github.com/vector-im/riot-web/issues/7105
This commit is contained in:
David Baker 2018-10-09 10:55:55 +01:00
parent 88f969acdf
commit c1f51a76dd
2 changed files with 99 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -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",

164
src/components/views/rooms/MessageComposerInput.js
View File

@ -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,12 +1466,14 @@ export default class MessageComposerInput extends React.Component {
room={this.props.room}
shouldShowPillAvatar={shouldShowPillAvatar}
isSelected={isSelected}
{...attributes}
/>;
}
else {
const { text } = node;
return <a href={url} {...props.attributes}>
{ text }
{...attributes}
</a>;
}
}
@ -1458,7 +1485,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 +1515,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 +1532,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 +1547,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 +1572,7 @@ export default class MessageComposerInput extends React.Component {
};
focusComposer = () => {
this.refs.editor.focus();
this._editor.focus();
};
render() {
@ -1553,7 +1582,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 +1608,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 +1620,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>