Merge pull request #2082 from matrix-org/t3chguy/slate_cont2
Moar Slate Fixes
This commit is contained in:
commit
cf6ce0c1e2
8 changed files with 58 additions and 47 deletions
|
@ -203,7 +203,7 @@ module.exports = React.createClass({
|
|||
// update the current node with one that's now taken its place
|
||||
node = pillContainer;
|
||||
}
|
||||
} else if (node.nodeType == Node.TEXT_NODE) {
|
||||
} else if (node.nodeType === Node.TEXT_NODE) {
|
||||
const Pill = sdk.getComponent('elements.Pill');
|
||||
|
||||
let currentTextNode = node;
|
||||
|
@ -232,6 +232,12 @@ module.exports = React.createClass({
|
|||
if (atRoomRule && pushProcessor.ruleMatchesEvent(atRoomRule, this.props.mxEvent)) {
|
||||
// Now replace all those nodes with Pills
|
||||
for (const roomNotifTextNode of roomNotifTextNodes) {
|
||||
// Set the next node to be processed to the one after the node
|
||||
// we're adding now, since we've just inserted nodes into the structure
|
||||
// we're iterating over.
|
||||
// Note we've checked roomNotifTextNodes.length > 0 so we'll do this at least once
|
||||
node = roomNotifTextNode.nextSibling;
|
||||
|
||||
const pillContainer = document.createElement('span');
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||
const pill = <Pill
|
||||
|
@ -243,12 +249,6 @@ module.exports = React.createClass({
|
|||
|
||||
ReactDOM.render(pill, pillContainer);
|
||||
roomNotifTextNode.parentNode.replaceChild(pillContainer, roomNotifTextNode);
|
||||
|
||||
// Set the next node to be processed to the one after the node
|
||||
// we're adding now, since we've just inserted nodes into the structure
|
||||
// we're iterating over.
|
||||
// Note we've checked roomNotifTextNodes.length > 0 so we'll do this at least once
|
||||
node = roomNotifTextNode.nextSibling;
|
||||
}
|
||||
// Nothing else to do for a text node (and we don't need to advance
|
||||
// the loop pointer because we did it above)
|
||||
|
|
|
@ -216,12 +216,12 @@ export default class Autocomplete extends React.Component {
|
|||
return done.promise;
|
||||
}
|
||||
|
||||
onCompletionClicked(): boolean {
|
||||
if (this.countCompletions() === 0 || this.state.selectionOffset === COMPOSER_SELECTED) {
|
||||
onCompletionClicked(selectionOffset: number): boolean {
|
||||
if (this.countCompletions() === 0 || selectionOffset === COMPOSER_SELECTED) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.props.onConfirm(this.state.completionList[this.state.selectionOffset - 1]);
|
||||
this.props.onConfirm(this.state.completionList[selectionOffset - 1]);
|
||||
this.hide();
|
||||
|
||||
return true;
|
||||
|
@ -264,8 +264,7 @@ export default class Autocomplete extends React.Component {
|
|||
position++;
|
||||
|
||||
const onClick = () => {
|
||||
this.setSelection(componentPosition);
|
||||
this.onCompletionClicked();
|
||||
this.onCompletionClicked(componentPosition);
|
||||
};
|
||||
|
||||
return React.cloneElement(completion.component, {
|
||||
|
|
|
@ -387,17 +387,28 @@ export default class MessageComposerInput extends React.Component {
|
|||
const anchorText = editorState.anchorText;
|
||||
if ((!anchorText || anchorText.text === '') && editorState.anchorBlock.nodes.size === 1) {
|
||||
// replace the current block rather than split the block
|
||||
// XXX: this destroys our focus by deleting the thing we are anchored/focused on
|
||||
change = change.replaceNodeByKey(editorState.anchorBlock.key, quote);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// insert it into the middle of the block (splitting it)
|
||||
change = change.insertBlock(quote);
|
||||
}
|
||||
change = change.insertFragmentByKey(quote.key, 0, fragment.document)
|
||||
.focus();
|
||||
|
||||
// XXX: heuristic to strip out wrapping <p> which breaks quoting in RT mode
|
||||
if (fragment.document.nodes.size && fragment.document.nodes.get(0).type === DEFAULT_NODE) {
|
||||
change = change.insertFragmentByKey(quote.key, 0, fragment.document.nodes.get(0));
|
||||
} else {
|
||||
change = change.insertFragmentByKey(quote.key, 0, fragment.document);
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
this.onChange(change);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let fragmentChange = fragment.change();
|
||||
fragmentChange.moveToRangeOf(fragment.document)
|
||||
.wrapBlock(quote);
|
||||
|
@ -1301,6 +1312,14 @@ export default class MessageComposerInput extends React.Component {
|
|||
await this.setDisplayedCompletion(null); // restore originalEditorState
|
||||
};
|
||||
|
||||
onAutocompleteConfirm = (displayedCompletion: ?Completion) => {
|
||||
this.focusComposer();
|
||||
// XXX: this fails if the composer isn't focused so focus it and delay the completion until next tick
|
||||
setImmediate(() => {
|
||||
this.setDisplayedCompletion(displayedCompletion);
|
||||
});
|
||||
};
|
||||
|
||||
/* If passed null, restores the original editor content from state.originalEditorState.
|
||||
* If passed a non-null displayedCompletion, modifies state.originalEditorState to compute new state.editorState.
|
||||
*/
|
||||
|
@ -1563,7 +1582,7 @@ export default class MessageComposerInput extends React.Component {
|
|||
<Autocomplete
|
||||
ref={(e) => this.autocomplete = e}
|
||||
room={this.props.room}
|
||||
onConfirm={this.setDisplayedCompletion}
|
||||
onConfirm={this.onAutocompleteConfirm}
|
||||
onSelectionChange={this.setDisplayedCompletion}
|
||||
query={ this.suppressAutoComplete ? '' : this.getAutocompleteQuery(activeEditorState) }
|
||||
selection={this.getSelectionRange(activeEditorState)}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue