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

Fix lint errors in MessageComposerInput.js

Browse Source 
Signed-off-by: Aaron Raimist <aaron@raim.ist>
This commit is contained in:
Aaron Raimist 2018-10-11 22:46:51 -05:00
parent 1287d9c49b
commit a66dbccef8
No known key found for this signature in database
GPG Key ID: 37419210002890EF
1 changed files with 41 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -224,7 +224,7 @@ export default class MessageComposerInput extends React.Component {
object: 'block', object: 'block',
type: type, type: type,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} };
} }
type = MARK_TAGS[tag]; type = MARK_TAGS[tag];
if (type) { if (type) {
@ -232,7 +232,7 @@ export default class MessageComposerInput extends React.Component {
object: 'mark', object: 'mark',
type: type, type: type,
nodes: next(el.childNodes), nodes: next(el.childNodes),
} };
} }
// special case links // special case links
if (tag === 'a') { if (tag === 'a') {
@ -250,15 +250,14 @@ export default class MessageComposerInput extends React.Component {
completion: el.innerText, completion: el.innerText,
completionId: m[1], completionId: m[1],
}, },
} };
} } else {
else {
return { return {
object: 'inline', object: 'inline',
type: 'link', type: 'link',
data: { href }, data: { href },
nodes: next(el.childNodes), nodes: next(el.childNodes),
} };
} }
} }
}, },
@ -268,14 +267,12 @@ export default class MessageComposerInput extends React.Component {
node: obj, node: obj,
children: children, children: children,
}); });
} } else if (obj.object === 'mark') {
else if (obj.object === 'mark') {
return this.renderMark({ return this.renderMark({
mark: obj, mark: obj,
children: children, children: children,
}); });
} } else if (obj.object === 'inline') {
else if (obj.object === 'inline') {
// special case links, pills and emoji otherwise we // special case links, pills and emoji otherwise we
// end up with React components getting rendered out(!) // end up with React components getting rendered out(!)
switch (obj.type) { switch (obj.type) {
@ -295,9 +292,9 @@ export default class MessageComposerInput extends React.Component {
children: children, children: children,
}); });
} }
} },
} },
] ],
}); });
const savedState = MessageComposerStore.getEditorState(this.props.room.roomId); const savedState = MessageComposerStore.getEditorState(this.props.room.roomId);
@ -361,7 +358,7 @@ export default class MessageComposerInput extends React.Component {
onAction = (payload) => { onAction = (payload) => {
const editor = this._editor; const editor = this._editor;
let editorState = this.state.editorState; const editorState = this.state.editorState;
switch (payload.action) { switch (payload.action) {
case 'reply_to_event': case 'reply_to_event':
@ -427,13 +424,13 @@ export default class MessageComposerInput extends React.Component {
this.onChange(change); this.onChange(change);
} else { } else {
let fragmentChange = fragment.change(); const fragmentChange = fragment.change();
fragmentChange.moveToRangeOfNode(fragment.document) fragmentChange.moveToRangeOfNode(fragment.document)
.wrapBlock(quote); .wrapBlock(quote);
// FIXME: handle pills and use commonmark rather than md-serialize // FIXME: handle pills and use commonmark rather than md-serialize
const md = this.md.serialize(fragmentChange.value); const md = this.md.serialize(fragmentChange.value);
let change = editorState.change() const change = editorState.change()
.insertText(md + '\n\n') .insertText(md + '\n\n')
.focus(); .focus();
this.onChange(change); this.onChange(change);
@ -535,8 +532,7 @@ export default class MessageComposerInput extends React.Component {
if (this.autocomplete.state.completionList.length > 0 && !this.autocomplete.state.hide && if (this.autocomplete.state.completionList.length > 0 && !this.autocomplete.state.hide &&
!rangeEquals(this.state.editorState.selection, editorState.selection) && !rangeEquals(this.state.editorState.selection, editorState.selection) &&
// XXX: the heuristic failed when inlines like pills weren't taken into account. This is inideal // XXX: the heuristic failed when inlines like pills weren't taken into account. This is inideal
this.state.editorState.document.toJSON() === editorState.document.toJSON()) this.state.editorState.document.toJSON() === editorState.document.toJSON()) {
{
this.autocomplete.hide(); this.autocomplete.hide();
} }
@ -606,8 +602,7 @@ export default class MessageComposerInput extends React.Component {
// child text. This seems to happen due to selection getting // child text. This seems to happen due to selection getting
// moved in the normalisation phase after calculating these changes // moved in the normalisation phase after calculating these changes
if (editorState.selection.anchor.key && if (editorState.selection.anchor.key &&
editorState.document.getParent(editorState.selection.anchor.key).type === 'emoji') editorState.document.getParent(editorState.selection.anchor.key).type === 'emoji') {
{
change = change.moveToStartOfNextText(); change = change.moveToStartOfNextText();
editorState = change.value; editorState = change.value;
} }
@ -620,15 +615,14 @@ export default class MessageComposerInput extends React.Component {
const parent = editorState.document.getParent(editorState.blocks.first().key); const parent = editorState.document.getParent(editorState.blocks.first().key);
if (parent.type === 'numbered-list') { if (parent.type === 'numbered-list') {
blockType = 'numbered-list'; blockType = 'numbered-list';
} } else if (parent.type === 'bulleted-list') {
else if (parent.type === 'bulleted-list') {
blockType = 'bulleted-list'; blockType = 'bulleted-list';
} }
} }
const inputState = { const inputState = {
marks: editorState.activeMarks, marks: editorState.activeMarks,
isRichTextEnabled: this.state.isRichTextEnabled, isRichTextEnabled: this.state.isRichTextEnabled,
blockType blockType,
}; };
this.props.onInputStateChanged(inputState); this.props.onInputStateChanged(inputState);
} }
@ -638,7 +632,7 @@ export default class MessageComposerInput extends React.Component {
this.setState({ this.setState({
editorState, editorState,
originalEditorState: originalEditorState || null originalEditorState: originalEditorState || null,
}); });
}; };
@ -678,7 +672,7 @@ export default class MessageComposerInput extends React.Component {
// which doesn't roundtrip symmetrically with commonmark, which we use for // which doesn't roundtrip symmetrically with commonmark, which we use for
// compiling MD out of the MD editor state above. // compiling MD out of the MD editor state above.
this.md.serialize(editorState), this.md.serialize(editorState),
{ defaultBlock: DEFAULT_NODE } { defaultBlock: DEFAULT_NODE },
); );
} }
@ -702,7 +696,7 @@ export default class MessageComposerInput extends React.Component {
}); });
SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled); SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled);
}; }
/** /**
* Check if the current selection has a mark with `type` in it. * Check if the current selection has a mark with `type` in it.
@ -712,8 +706,8 @@ export default class MessageComposerInput extends React.Component {
*/ */
hasMark = type => { hasMark = type => {
const { editorState } = this.state const { editorState } = this.state;
return editorState.activeMarks.some(mark => mark.type === type) return editorState.activeMarks.some(mark => mark.type === type);
}; };
/** /**
@ -724,20 +718,18 @@ export default class MessageComposerInput extends React.Component {
*/ */
hasBlock = type => { hasBlock = type => {
const { editorState } = this.state const { editorState } = this.state;
return editorState.blocks.some(node => node.type === type) return editorState.blocks.some(node => node.type === type);
}; };
onKeyDown = (ev: KeyboardEvent, change: Change, editor: Editor) => { onKeyDown = (ev: KeyboardEvent, change: Change, editor: Editor) => {
this.suppressAutoComplete = false; this.suppressAutoComplete = false;
// skip void nodes - see // skip void nodes - see
// https://github.com/ianstormtaylor/slate/issues/762#issuecomment-304855095 // https://github.com/ianstormtaylor/slate/issues/762#issuecomment-304855095
if (ev.keyCode === KeyCode.LEFT) { if (ev.keyCode === KeyCode.LEFT) {
this.direction = 'Previous'; this.direction = 'Previous';
} } else if (ev.keyCode === KeyCode.RIGHT) {
else if (ev.keyCode === KeyCode.RIGHT) {
this.direction = 'Next'; this.direction = 'Next';
} else { } else {
this.direction = ''; this.direction = '';
@ -815,8 +807,7 @@ export default class MessageComposerInput extends React.Component {
.unwrapBlock('bulleted-list') .unwrapBlock('bulleted-list')
.unwrapBlock('numbered-list'); .unwrapBlock('numbered-list');
return change; return change;
} } else if (editorState.selection.anchor.offset == 0 && editorState.isCollapsed) {
else if (editorState.selection.anchor.offset == 0 && editorState.isCollapsed) {
// turn blocks back into paragraphs // turn blocks back into paragraphs
if ((this.hasBlock('block-quote') || if ((this.hasBlock('block-quote') ||
this.hasBlock('heading1') || this.hasBlock('heading1') ||
@ -825,8 +816,7 @@ export default class MessageComposerInput extends React.Component {
this.hasBlock('heading4') || this.hasBlock('heading4') ||
this.hasBlock('heading5') || this.hasBlock('heading5') ||
this.hasBlock('heading6') || this.hasBlock('heading6') ||
this.hasBlock('code'))) this.hasBlock('code'))) {
{
return change.setBlocks(DEFAULT_NODE); return change.setBlocks(DEFAULT_NODE);
} }
@ -835,8 +825,7 @@ export default class MessageComposerInput extends React.Component {
if (editorState.selection.anchor.offset == 0 && if (editorState.selection.anchor.offset == 0 &&
this.hasBlock('paragraph') && this.hasBlock('paragraph') &&
parent.nodes.size == 1 && parent.nodes.size == 1 &&
parent.object !== 'document') parent.object !== 'document') {
{
return change.replaceNodeByKey(editorState.anchorBlock.key, editorState.anchorText) return change.replaceNodeByKey(editorState.anchorBlock.key, editorState.anchorText)
.moveToEndOfNode(parent) .moveToEndOfNode(parent)
.focus(); .focus();
@ -852,7 +841,7 @@ export default class MessageComposerInput extends React.Component {
return true; return true;
} }
let newState: ?Value = null; const newState: ?Value = null;
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown. // Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
if (this.state.isRichTextEnabled) { if (this.state.isRichTextEnabled) {
@ -878,7 +867,7 @@ export default class MessageComposerInput extends React.Component {
} else if (isList) { } else if (isList) {
change change
.unwrapBlock( .unwrapBlock(
type === 'bulleted-list' ? 'numbered-list' : 'bulleted-list' type === 'bulleted-list' ? 'numbered-list' : 'bulleted-list',
) )
.wrapBlock(type); .wrapBlock(type);
} else { } else {
@ -1081,8 +1070,7 @@ export default class MessageComposerInput extends React.Component {
const firstGrandChild = firstChild && firstChild.nodes.get(0); const firstGrandChild = firstChild && firstChild.nodes.get(0);
if (firstChild && firstGrandChild && if (firstChild && firstGrandChild &&
firstChild.object === 'block' && firstGrandChild.object === 'text' && firstChild.object === 'block' && firstGrandChild.object === 'text' &&
firstGrandChild.text[0] === '/') firstGrandChild.text[0] === '/') {
{
commandText = this.plainWithIdPills.serialize(editorState); commandText = this.plainWithIdPills.serialize(editorState);
cmd = processCommandInput(this.props.room.roomId, commandText); cmd = processCommandInput(this.props.room.roomId, commandText);
} }
@ -1223,7 +1211,7 @@ export default class MessageComposerInput extends React.Component {
this.setState({ this.setState({
editorState: this.createEditorState(), editorState: this.createEditorState(),
}, ()=>{ this._editor.focus() }); }, ()=>{ this._editor.focus(); });
return true; return true;
}; };
@ -1353,7 +1341,7 @@ export default class MessageComposerInput extends React.Component {
if (displayedCompletion == null) { if (displayedCompletion == null) {
if (this.state.originalEditorState) { if (this.state.originalEditorState) {
let editorState = this.state.originalEditorState; const editorState = this.state.originalEditorState;
this.setState({editorState}); this.setState({editorState});
} }
return false; return false;
@ -1364,7 +1352,7 @@ export default class MessageComposerInput extends React.Component {
completion = '', completion = '',
completionId = '', completionId = '',
href = null, href = null,
suffix = '' suffix = '',
} = displayedCompletion; } = displayedCompletion;
let inline; let inline;
@ -1397,8 +1385,7 @@ export default class MessageComposerInput extends React.Component {
.insertInlineAtRange(editorState.selection, inline) .insertInlineAtRange(editorState.selection, inline)
.insertText(suffix) .insertText(suffix)
.focus(); .focus();
} } else {
else {
change = editorState.change() change = editorState.change()
.insertTextAtRange(editorState.selection, completion) .insertTextAtRange(editorState.selection, completion)
.insertText(suffix) .insertText(suffix)
@ -1459,8 +1446,7 @@ export default class MessageComposerInput extends React.Component {
isSelected={isSelected} isSelected={isSelected}
{...attributes} {...attributes}
/>; />;
} } else if (Pill.isPillUrl(url)) {
else if (Pill.isPillUrl(url)) {
return <Pill return <Pill
url={url} url={url}
room={this.props.room} room={this.props.room}
@ -1468,8 +1454,7 @@ export default class MessageComposerInput extends React.Component {
isSelected={isSelected} isSelected={isSelected}
{...attributes} {...attributes}
/>; />;
} } else {
else {
const { text } = node; const { text } = node;
return <a href={url} {...props.attributes}> return <a href={url} {...props.attributes}>
{ text } { text }
@ -1482,11 +1467,11 @@ export default class MessageComposerInput extends React.Component {
const uri = RichText.unicodeToEmojiUri(emojiUnicode); const uri = RichText.unicodeToEmojiUri(emojiUnicode);
const shortname = toShort(emojiUnicode); const shortname = toShort(emojiUnicode);
const className = classNames('mx_emojione', { const className = classNames('mx_emojione', {
mx_emojione_selected: isSelected mx_emojione_selected: isSelected,
}); });
const style = {}; const style = {};
if (props.selected) style.border = '1px solid blue'; if (props.selected) style.border = '1px solid blue';
return <img className={ className } src={ uri } title={ shortname } alt={ emojiUnicode } style={style}/>; return <img className={ className } src={ uri } title={ shortname } alt={ emojiUnicode } style={style} />;
} }
} }
}; };
@ -1533,8 +1518,7 @@ export default class MessageComposerInput extends React.Component {
if (editorState.selection.anchor.key) { if (editorState.selection.anchor.key) {
return editorState.document.getDescendant(editorState.selection.anchor.key).text; return editorState.document.getDescendant(editorState.selection.anchor.key).text;
} } else {
else {
return ''; return '';
} }
} }
@ -1556,7 +1540,7 @@ export default class MessageComposerInput extends React.Component {
start: editorState.selection.anchor.offset, start: editorState.selection.anchor.offset,
end: (editorState.selection.anchor.key == editorState.selection.focus.key) ? end: (editorState.selection.anchor.key == editorState.selection.focus.key) ?
editorState.selection.focus.offset : editorState.selection.anchor.offset, editorState.selection.focus.offset : editorState.selection.anchor.offset,
} };
if (range.start > range.end) { if (range.start > range.end) {
const tmp = range.start; const tmp = range.start;
range.start = range.end; range.start = range.end;