diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 754f208373..8c5ab2394f 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -202,12 +202,15 @@ export default class MessageComposerInput extends React.Component { // special case links if (tag === 'a') { const href = el.getAttribute('href'); - let m = href.match(MATRIXTO_URL_PATTERN); + let m; + if (href) { + m = href.match(MATRIXTO_URL_PATTERN); + } if (m) { return { object: 'inline', type: 'pill', - data: { + data: { href, completion: el.innerText, completionId: m[1], @@ -226,7 +229,7 @@ export default class MessageComposerInput extends React.Component { } }, serialize: (obj, children) => { - if (obj.object === 'block' || obj.object === 'inline') { + if (obj.object === 'block') { return this.renderNode({ node: obj, children: children, @@ -238,6 +241,26 @@ export default class MessageComposerInput extends React.Component { children: children, }); } + else if (obj.object === 'inline') { + // special case links, pills and emoji otherwise we + // end up with React components getting rendered out(!) + switch (obj.type) { + case 'pill': + return { obj.data.get('completion') }; + case 'link': + return { children }; + case 'emoji': + // XXX: apparently you can't return plain strings from serializer rules + // until https://github.com/ianstormtaylor/slate/pull/1854 is merged. + // So instead we temporarily wrap emoji from RTE in an arbitrary tag + // (). would be nicer, but in practice it causes CSS issues. + return { obj.data.get('emojiUnicode') }; + } + return this.renderNode({ + node: obj, + children: children, + }); + } } } ] @@ -545,6 +568,7 @@ export default class MessageComposerInput extends React.Component { // for simplicity when roundtripping, we use slate-md-serializer rather than commonmark const markdown = this.plainWithMdPills.serialize(this.state.editorState); if (markdown !== '') { + // weirdly, the Md serializer can't deserialize '' to a valid Value... editorState = this.md.deserialize(markdown); } else { @@ -572,6 +596,8 @@ export default class MessageComposerInput extends React.Component { this.setState({ editorState: this.createEditorState(enabled, editorState), isRichtextEnabled: enabled, + }, ()=>{ + this.refs.editor.focus(); }); SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled); @@ -852,6 +878,8 @@ export default class MessageComposerInput extends React.Component { return this.props.onFilesPasted(transfer.files); } else if (transfer.type === "html") { + // FIXME: https://github.com/ianstormtaylor/slate/issues/1497 means + // that we will silently discard nested blocks (e.g. nested lists) :( const fragment = this.html.deserialize(transfer.html); if (this.state.isRichtextEnabled) { return change.insertFragment(fragment.document); @@ -1263,7 +1291,7 @@ export default class MessageComposerInput extends React.Component { return
    {children}
; case 'code-block': return
{children}
; - case 'link': + case 'link': return {children}; case 'pill': { const { data } = node;