);
From f4ed820b6f0d8bb4d0aa6441c7633a334d47afcc Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 5 May 2018 23:38:14 +0100
Subject: [PATCH 005/846] fix stubbing
---
src/components/views/rooms/MessageComposerInput.js | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index af942a75e6..6290a5c15d 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -1103,9 +1103,7 @@ export default class MessageComposerInput extends React.Component {
/* returns inline style and block type of current SelectionState so MessageComposer can render formatting
buttons. */
getSelectionInfo(editorState: EditorState) {
- return {
- [], null
- };
+ return {};
/*
const styleName = {
BOLD: _td('bold'),
From 05eba3fa32703b075c9012f125b9a79cf135e038 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 6 May 2018 00:18:11 +0100
Subject: [PATCH 006/846] stub out more until it loads...
---
.../views/rooms/MessageComposerInput.js | 26 ++++++++++++++++---
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 6290a5c15d..e7cbb1abde 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -237,7 +237,13 @@ export default class MessageComposerInput extends React.Component {
return EditorState.moveFocusToEnd(editorState);
*/
- return value;
+ if (value) {
+ // create with this value
+ }
+ else {
+ value = Value.create();
+ }
+ return value;
}
componentDidMount() {
@@ -262,7 +268,7 @@ export default class MessageComposerInput extends React.Component {
onAction = (payload) => {
const editor = this.refs.editor;
- let contentState = this.state.editorState.getCurrentContent();
+ let editorState = this.state.editorState;
switch (payload.action) {
case 'reply_to_event':
@@ -1030,6 +1036,7 @@ export default class MessageComposerInput extends React.Component {
* If passed a non-null displayedCompletion, modifies state.originalEditorState to compute new state.editorState.
*/
setDisplayedCompletion = async (displayedCompletion: ?Completion): boolean => {
+/*
const activeEditorState = this.state.originalEditorState || this.state.editorState;
if (displayedCompletion == null) {
@@ -1084,6 +1091,7 @@ export default class MessageComposerInput extends React.Component {
// for some reason, doing this right away does not update the editor :(
// setTimeout(() => this.refs.editor.focus(), 50);
+*/
return true;
};
@@ -1102,7 +1110,7 @@ export default class MessageComposerInput extends React.Component {
/* returns inline style and block type of current SelectionState so MessageComposer can render formatting
buttons. */
- getSelectionInfo(editorState: EditorState) {
+ getSelectionInfo(editorState: Value) {
return {};
/*
const styleName = {
@@ -1136,7 +1144,7 @@ export default class MessageComposerInput extends React.Component {
}
getAutocompleteQuery(contentState: ContentState) {
- return [];
+ return '';
// Don't send markdown links to the autocompleter
// return this.removeMDLinks(contentState, ['@', '#']);
@@ -1184,11 +1192,20 @@ export default class MessageComposerInput extends React.Component {
render() {
const activeEditorState = this.state.originalEditorState || this.state.editorState;
+ let hidePlaceholder = false;
+ // FIXME: in case we need to implement manual placeholdering
+
const className = classNames('mx_MessageComposer_input', {
mx_MessageComposer_input_empty: hidePlaceholder,
mx_MessageComposer_input_error: this.state.someCompletions === false,
});
+ const content = null;
+ const selection = {
+ start: 0,
+ end: 0,
+ };
+
// const content = activeEditorState.getCurrentContent();
// const selection = RichText.selectionStateToTextOffsets(activeEditorState.getSelection(),
// activeEditorState.getCurrentContent().getBlocksAsArray());
@@ -1214,6 +1231,7 @@ export default class MessageComposerInput extends React.Component {
Date: Sun, 6 May 2018 01:18:26 +0100
Subject: [PATCH 007/846] stub out yet more
---
res/css/views/rooms/_MessageComposer.scss | 8 ++++++
.../views/rooms/MessageComposerInput.js | 26 ++++++++++++-------
2 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 2e8f07b7ef..531c4442c1 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -84,6 +84,14 @@ limitations under the License.
margin-right: 6px;
}
+.mx_MessageComposer_editor {
+ width: 100%;
+ flex: 1;
+ max-height: 120px;
+ min-height: 21px;
+ overflow: auto;
+}
+
@keyframes visualbell
{
from { background-color: #faa }
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index e7cbb1abde..e560ddb5c7 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
import { Editor } from 'slate-react';
-import { Value } from 'slate';
+import { Value, Document } from 'slate';
import Html from 'slate-html-serializer';
import { Markdown as Md } from 'slate-md-serializer';
@@ -238,12 +238,17 @@ export default class MessageComposerInput extends React.Component {
return EditorState.moveFocusToEnd(editorState);
*/
if (value) {
- // create with this value
+ // create from the existing value...
}
else {
- value = Value.create();
+ // ...or create a new one.
}
- return value;
+
+ return Value.create({
+ document: Document.create({
+ nodes: [],
+ }),
+ });
}
componentDidMount() {
@@ -394,6 +399,7 @@ export default class MessageComposerInput extends React.Component {
// Called by Draft to change editor contents
onEditorContentChanged = (editorState: EditorState) => {
+/*
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
const currentBlock = editorState.getSelection().getStartKey();
@@ -449,7 +455,7 @@ export default class MessageComposerInput extends React.Component {
editorState = EditorState.forceSelection(editorState, newContentState.getSelectionAfter());
}
}
-
+*/
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
this.setState({
editorState,
@@ -466,6 +472,7 @@ export default class MessageComposerInput extends React.Component {
* @param callback
*/
setState(state, callback) {
+/*
if (state.editorState != null) {
state.editorState = RichText.attachImmutableEntitiesToEmoji(
state.editorState);
@@ -501,12 +508,12 @@ export default class MessageComposerInput extends React.Component {
state.originalEditorState = null;
}
}
-
+*/
super.setState(state, () => {
if (callback != null) {
callback();
}
-
+/*
const textContent = this.state.editorState.getCurrentContent().getPlainText();
const selection = RichText.selectionStateToTextOffsets(
this.state.editorState.getSelection(),
@@ -522,6 +529,7 @@ export default class MessageComposerInput extends React.Component {
let editorRoot = this.refs.editor.refs.editor.parentNode.parentNode;
editorRoot.scrollTop = editorRoot.scrollHeight;
}
+*/
});
}
@@ -1230,11 +1238,11 @@ export default class MessageComposerInput extends React.Component {
src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
Date: Sun, 6 May 2018 15:27:27 +0100
Subject: [PATCH 008/846] make slate actually work as a textarea
---
.../views/rooms/MessageComposerInput.js | 15 +++++----------
1 file changed, 5 insertions(+), 10 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index e560ddb5c7..9a0863810e 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -237,18 +237,13 @@ export default class MessageComposerInput extends React.Component {
return EditorState.moveFocusToEnd(editorState);
*/
- if (value) {
- // create from the existing value...
+ if (value instanceof Value) {
+ return value;
}
else {
// ...or create a new one.
+ return Plain.deserialize('')
}
-
- return Value.create({
- document: Document.create({
- nodes: [],
- }),
- });
}
componentDidMount() {
@@ -398,7 +393,7 @@ export default class MessageComposerInput extends React.Component {
}
// Called by Draft to change editor contents
- onEditorContentChanged = (editorState: EditorState) => {
+ onEditorContentChanged = (change: Change) => {
/*
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
@@ -458,7 +453,7 @@ export default class MessageComposerInput extends React.Component {
*/
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
this.setState({
- editorState,
+ editorState: change.value,
originalEditorState: null,
});
};
From ff42ef4a58baf57580cd504b103b474a46dbb4cf Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 6 May 2018 22:08:36 +0100
Subject: [PATCH 009/846] make it work for MD mode (modulo history)
---
src/ComposerHistoryManager.js | 10 ++--
src/RichText.js | 48 +++++++++++++------
.../views/rooms/MessageComposerInput.js | 31 ++++++------
3 files changed, 52 insertions(+), 37 deletions(-)
diff --git a/src/ComposerHistoryManager.js b/src/ComposerHistoryManager.js
index 938be9eee4..e52a8a677f 100644
--- a/src/ComposerHistoryManager.js
+++ b/src/ComposerHistoryManager.js
@@ -34,17 +34,15 @@ class HistoryItem {
format: MessageFormat = 'rich';
constructor(value: ?Value, format: ?MessageFormat) {
- this.rawContentState = contentState ? convertToRaw(contentState) : null;
+ this.value = value;
this.format = format;
-
}
toValue(outputFormat: MessageFormat): Value {
if (outputFormat === 'markdown') {
if (this.format === 'rich') {
// convert a rich formatted history entry to its MD equivalent
- const markdown = new Markdown({});
- return new Value({ data: markdown.serialize(value) });
+ return Plain.deserialize(Md.serialize(value));
// return ContentState.createFromText(RichText.stateToMarkdown(contentState));
}
else if (this.format === 'markdown') {
@@ -53,9 +51,7 @@ class HistoryItem {
} else if (outputFormat === 'rich') {
if (this.format === 'markdown') {
// convert MD formatted string to its rich equivalent.
- const plain = new Plain({});
- const md = new Md({});
- return md.deserialize(plain.serialize(value));
+ return Md.deserialize(Plain.serialize(value));
// return RichText.htmlToContentState(new Markdown(contentState.getPlainText()).toHTML());
}
else if (this.format === 'rich') {
diff --git a/src/RichText.js b/src/RichText.js
index 12274ee9f3..7ffb4dd785 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -1,4 +1,24 @@
+/*
+Copyright 2015 - 2017 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import React from 'react';
+
+/*
import {
Editor,
EditorState,
@@ -12,11 +32,15 @@ import {
SelectionState,
Entity,
} from 'draft-js';
+import { stateToMarkdown as __stateToMarkdown } from 'draft-js-export-markdown';
+*/
+
+import Html from 'slate-html-serializer';
+
import * as sdk from './index';
import * as emojione from 'emojione';
-import {stateToHTML} from 'draft-js-export-html';
-import {SelectionRange} from "./autocomplete/Autocompleter";
-import {stateToMarkdown as __stateToMarkdown} from 'draft-js-export-markdown';
+
+import { SelectionRange } from "./autocomplete/Autocompleter";
const MARKDOWN_REGEX = {
LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
@@ -33,6 +57,7 @@ const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp, 'g');
const ZWS_CODE = 8203;
const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
+
export function stateToMarkdown(state) {
return __stateToMarkdown(state)
.replace(
@@ -40,19 +65,12 @@ export function stateToMarkdown(state) {
''); // this is *not* a zero width space, trust me :)
}
-export const contentStateToHTML = (contentState: ContentState) => {
- return stateToHTML(contentState, {
- inlineStyles: {
- UNDERLINE: {
- element: 'u',
- },
- },
- });
-};
+export const editorStateToHTML = (editorState: Value) => {
+ return Html.deserialize(editorState);
+}
-export function htmlToContentState(html: string): ContentState {
- const blockArray = convertFromHTML(html).contentBlocks;
- return ContentState.createFromBlockArray(blockArray);
+export function htmlToEditorState(html: string): Value {
+ return Html.serialize(html);
}
function unicodeToEmojiUri(str) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 9a0863810e..53f7a6d474 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
import { Editor } from 'slate-react';
-import { Value, Document } from 'slate';
+import { Value, Document, Event } from 'slate';
import Html from 'slate-html-serializer';
import { Markdown as Md } from 'slate-md-serializer';
@@ -539,15 +539,12 @@ export default class MessageComposerInput extends React.Component {
// const md = new Markdown(this.state.editorState.getCurrentContent().getPlainText());
// contentState = RichText.htmlToContentState(md.toHTML());
- const plain = new Plain({});
- const md = new Md({});
- value = md.deserialize(plain.serialize(this.state.editorState));
+ value = Md.deserialize(Plain.serialize(this.state.editorState));
} else {
// let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
// value = ContentState.createFromText(markdown);
- const markdown = new Markdown({});
- value = Value({ data: markdown.serialize(value) });
+ value = Plain.deserialize(Md.serialize(this.state.editorState));
}
Analytics.setRichtextMode(enabled);
@@ -559,6 +556,12 @@ export default class MessageComposerInput extends React.Component {
SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled);
}
+ onKeyDown = (ev: Event, change: Change, editor: Editor) => {
+ if (ev.keyCode === KeyCode.ENTER) {
+ return this.handleReturn(ev);
+ }
+ }
+
handleKeyCommand = (command: string): boolean => {
/*
if (command === 'toggle-mode') {
@@ -721,10 +724,7 @@ export default class MessageComposerInput extends React.Component {
}
*/
- const plain = new Plain({});
- value = md.deserialize();
-
- let contentText = plain.serialize(contentState);
+ let contentText = Plain.serialize(contentState);
let contentHTML;
/*
@@ -808,10 +808,10 @@ export default class MessageComposerInput extends React.Component {
shouldSendHTML = hasLink;
}
*/
- let shouldSendHTML = true;
+ let shouldSendHTML = true;
if (shouldSendHTML) {
contentHTML = HtmlUtils.processHtmlForSending(
- RichText.contentStateToHTML(contentState),
+ RichText.editorStateToHTML(contentState),
);
}
} else {
@@ -840,11 +840,12 @@ export default class MessageComposerInput extends React.Component {
return blockText;
}).join('\n');
*/
- const md = new Markdown(pt);
+ const md = new Markdown(contentText);
// if contains no HTML and we're not quoting (needing HTML)
if (md.isPlainText() && !mustSendHTML) {
contentText = md.toPlaintext();
} else {
+ contentText = md.toPlaintext();
contentHTML = md.toHTML();
}
}
@@ -898,7 +899,6 @@ export default class MessageComposerInput extends React.Component {
});
}
-
this.client.sendMessage(this.props.room.roomId, content).then((res) => {
dis.dispatch({
action: 'message_sent',
@@ -909,7 +909,7 @@ export default class MessageComposerInput extends React.Component {
this.setState({
editorState: this.createEditorState(),
- });
+ }, ()=>{ this.refs.editor.focus() });
return true;
};
@@ -1237,6 +1237,7 @@ export default class MessageComposerInput extends React.Component {
placeholder={this.props.placeholder}
value={this.state.editorState}
onChange={this.onEditorContentChanged}
+ onKeyDown={this.onKeyDown}
/*
blockStyleFn={MessageComposerInput.getBlockStyle}
keyBindingFn={MessageComposerInput.getKeyBinding}
From 8b2eb2c4003acc63af3689e9ff7e4f235b32ed39 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Tue, 8 May 2018 01:54:06 +0100
Subject: [PATCH 010/846] make history work again
---
res/css/views/rooms/_MessageComposer.scss | 7 +-
src/ComposerHistoryManager.js | 30 +++--
.../views/rooms/MessageComposerInput.js | 108 +++++++++---------
3 files changed, 78 insertions(+), 67 deletions(-)
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 531c4442c1..a11ebeff7b 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -78,7 +78,7 @@ limitations under the License.
display: flex;
flex-direction: column;
min-height: 60px;
- justify-content: center;
+ justify-content: start;
align-items: flex-start;
font-size: 14px;
margin-right: 6px;
@@ -86,9 +86,8 @@ limitations under the License.
.mx_MessageComposer_editor {
width: 100%;
- flex: 1;
max-height: 120px;
- min-height: 21px;
+ min-height: 19px;
overflow: auto;
}
@@ -106,6 +105,7 @@ limitations under the License.
display: none;
}
+/*
.mx_MessageComposer_input .DraftEditor-root {
width: 100%;
flex: 1;
@@ -114,6 +114,7 @@ limitations under the License.
min-height: 21px;
overflow: auto;
}
+*/
.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer {
/* Ensure mx_UserPill and mx_RoomPill (see _RichText) are not obscured from the top */
diff --git a/src/ComposerHistoryManager.js b/src/ComposerHistoryManager.js
index e52a8a677f..9a6970a376 100644
--- a/src/ComposerHistoryManager.js
+++ b/src/ComposerHistoryManager.js
@@ -38,28 +38,44 @@ class HistoryItem {
this.format = format;
}
+ static fromJSON(obj): HistoryItem {
+ return new HistoryItem(
+ Value.fromJSON(obj.value),
+ obj.format
+ );
+ }
+
+ toJSON(): Object {
+ return {
+ value: this.value.toJSON(),
+ format: this.format
+ };
+ }
+
+ // FIXME: rather than supporting storing history in either format, why don't we pick
+ // one canonical form?
toValue(outputFormat: MessageFormat): Value {
if (outputFormat === 'markdown') {
if (this.format === 'rich') {
// convert a rich formatted history entry to its MD equivalent
- return Plain.deserialize(Md.serialize(value));
+ return Plain.deserialize(Md.serialize(this.value));
// return ContentState.createFromText(RichText.stateToMarkdown(contentState));
}
else if (this.format === 'markdown') {
- return value;
+ return this.value;
}
} else if (outputFormat === 'rich') {
if (this.format === 'markdown') {
// convert MD formatted string to its rich equivalent.
- return Md.deserialize(Plain.serialize(value));
+ return Md.deserialize(Plain.serialize(this.value));
// return RichText.htmlToContentState(new Markdown(contentState.getPlainText()).toHTML());
}
else if (this.format === 'rich') {
- return value;
+ return this.value;
}
}
log.error("unknown format -> outputFormat conversion");
- return value;
+ return this.value;
}
}
@@ -76,7 +92,7 @@ export default class ComposerHistoryManager {
let item;
for (; item = sessionStorage.getItem(`${this.prefix}[${this.currentIndex}]`); this.currentIndex++) {
this.history.push(
- Object.assign(new HistoryItem(), JSON.parse(item)),
+ HistoryItem.fromJSON(JSON.parse(item))
);
}
this.lastIndex = this.currentIndex;
@@ -86,7 +102,7 @@ export default class ComposerHistoryManager {
const item = new HistoryItem(value, format);
this.history.push(item);
this.currentIndex = this.lastIndex + 1;
- sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item));
+ sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item.toJSON()));
}
getItem(offset: number, format: MessageFormat): ?Value {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 53f7a6d474..4b950c429d 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
+import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
@@ -101,6 +102,7 @@ export default class MessageComposerInput extends React.Component {
onInputStateChanged: PropTypes.func,
};
+/*
static getKeyBinding(ev: SyntheticKeyboardEvent): string {
// Restrict a subset of key bindings to ONLY having ctrl/meta* pressed and
// importantly NOT having alt, shift, meta/ctrl* pressed. draft-js does not
@@ -135,6 +137,7 @@ export default class MessageComposerInput extends React.Component {
return null;
}
+*/
client: MatrixClient;
autocomplete: Autocomplete;
@@ -392,8 +395,7 @@ export default class MessageComposerInput extends React.Component {
}
}
- // Called by Draft to change editor contents
- onEditorContentChanged = (change: Change) => {
+ onChange = (change: Change) => {
/*
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
@@ -557,17 +559,25 @@ export default class MessageComposerInput extends React.Component {
}
onKeyDown = (ev: Event, change: Change, editor: Editor) => {
- if (ev.keyCode === KeyCode.ENTER) {
- return this.handleReturn(ev);
+ switch (ev.keyCode) {
+ case KeyCode.ENTER:
+ return this.handleReturn(ev);
+ case KeyCode.UP:
+ return this.onVerticalArrow(ev, true);
+ case KeyCode.DOWN:
+ return this.onVerticalArrow(ev, false);
+ default:
+ // don't intercept it
+ return;
}
}
handleKeyCommand = (command: string): boolean => {
-/*
if (command === 'toggle-mode') {
this.enableRichtext(!this.state.isRichtextEnabled);
return true;
}
+/*
let newState: ?EditorState = null;
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
@@ -699,12 +709,10 @@ export default class MessageComposerInput extends React.Component {
};
*/
handleReturn = (ev) => {
-/*
if (ev.shiftKey) {
- this.onEditorContentChanged(RichUtils.insertSoftNewline(this.state.editorState));
- return true;
+ return;
}
-
+/*
const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
if (
['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item']
@@ -718,15 +726,12 @@ export default class MessageComposerInput extends React.Component {
}
*/
const contentState = this.state.editorState;
-/*
- if (!contentState.hasText()) {
- return true;
- }
-*/
let contentText = Plain.serialize(contentState);
let contentHTML;
+ if (contentText === '') return true;
+
/*
// Strip MD user (tab-completed) mentions to preserve plaintext mention behaviour.
// We have to do this now as opposed to after calculating the contentText for MD
@@ -914,41 +919,39 @@ export default class MessageComposerInput extends React.Component {
return true;
};
- onUpArrow = (e) => {
- this.onVerticalArrow(e, true);
- };
-
- onDownArrow = (e) => {
- this.onVerticalArrow(e, false);
- };
-
onVerticalArrow = (e, up) => {
if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
return;
}
-/*
// Select history only if we are not currently auto-completing
if (this.autocomplete.state.completionList.length === 0) {
- // Don't go back in history if we're in the middle of a multi-line message
- const selection = this.state.editorState.getSelection();
- const blockKey = selection.getStartKey();
- const firstBlock = this.state.editorState.getCurrentContent().getFirstBlock();
- const lastBlock = this.state.editorState.getCurrentContent().getLastBlock();
- let canMoveUp = false;
- let canMoveDown = false;
- if (blockKey === firstBlock.getKey()) {
- canMoveUp = selection.getStartOffset() === selection.getEndOffset() &&
- selection.getStartOffset() === 0;
+ // determine whether our cursor is at the top or bottom of the multiline
+ // input box by just looking at the position of the plain old DOM selection.
+ const selection = window.getSelection();
+ const range = selection.getRangeAt(0);
+ const cursorRect = range.getBoundingClientRect();
+
+ const editorNode = ReactDOM.findDOMNode(this.refs.editor);
+ const editorRect = editorNode.getBoundingClientRect();
+
+ let navigateHistory = false;
+ if (up) {
+ let scrollCorrection = editorNode.scrollTop;
+ if (cursorRect.top - editorRect.top + scrollCorrection == 0) {
+ navigateHistory = true;
+ }
+ }
+ else {
+ let scrollCorrection =
+ editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
+ if (cursorRect.bottom - editorRect.bottom + scrollCorrection == 0) {
+ navigateHistory = true;
+ }
}
- if (blockKey === lastBlock.getKey()) {
- canMoveDown = selection.getStartOffset() === selection.getEndOffset() &&
- selection.getStartOffset() === lastBlock.getText().length;
- }
-
- if ((up && !canMoveUp) || (!up && !canMoveDown)) return;
+ if (!navigateHistory) return;
const selected = this.selectHistory(up);
if (selected) {
@@ -959,10 +962,8 @@ export default class MessageComposerInput extends React.Component {
this.moveAutocompleteSelection(up);
e.preventDefault();
}
-*/
};
-/*
selectHistory = async (up) => {
const delta = up ? -1 : 1;
@@ -984,26 +985,19 @@ export default class MessageComposerInput extends React.Component {
return;
}
- const newContent = this.historyManager.getItem(delta, this.state.isRichtextEnabled ? 'rich' : 'markdown');
- if (!newContent) return false;
- let editorState = EditorState.push(
- this.state.editorState,
- newContent,
- 'insert-characters',
- );
+ let editorState = this.historyManager.getItem(delta, this.state.isRichtextEnabled ? 'rich' : 'markdown');
// Move selection to the end of the selected history
- let newSelection = SelectionState.createEmpty(newContent.getLastBlock().getKey());
- newSelection = newSelection.merge({
- focusOffset: newContent.getLastBlock().getLength(),
- anchorOffset: newContent.getLastBlock().getLength(),
- });
- editorState = EditorState.forceSelection(editorState, newSelection);
+ const change = editorState.change().collapseToEndOf(editorState.document);
+ // XXX: should we be calling this.onChange(change) now?
+ // we skip it for now given we know we're about to setState anyway
+ editorState = change.value;
- this.setState({editorState});
+ this.setState({ editorState }, ()=>{
+ this.refs.editor.focus();
+ });
return true;
};
-*/
onTab = async (e) => {
this.setState({
@@ -1236,7 +1230,7 @@ export default class MessageComposerInput extends React.Component {
className="mx_MessageComposer_editor"
placeholder={this.props.placeholder}
value={this.state.editorState}
- onChange={this.onEditorContentChanged}
+ onChange={this.onChange}
onKeyDown={this.onKeyDown}
/*
blockStyleFn={MessageComposerInput.getBlockStyle}
From 984961a3ed22ddd233266c9f014c0a71fc1d05bd Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Tue, 8 May 2018 09:49:53 +0100
Subject: [PATCH 011/846] blind fix to the overlapping sticker bug
---
src/components/views/messages/MStickerBody.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index 08ddb6de20..501db5e22b 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -40,6 +40,7 @@ export default class MStickerBody extends MImageBody {
}
_onImageLoad() {
+ this.fixupHeight();
this.setState({
placeholderClasses: 'mx_MStickerBody_placeholder_invisible',
});
From cbb8432873937e0fb4c03b26a5f7194b7cac907a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Wed, 9 May 2018 01:03:40 +0100
Subject: [PATCH 012/846] unbreak switching from draft to slate
---
src/ComposerHistoryManager.js | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/src/ComposerHistoryManager.js b/src/ComposerHistoryManager.js
index 9a6970a376..ce0eb8f0c3 100644
--- a/src/ComposerHistoryManager.js
+++ b/src/ComposerHistoryManager.js
@@ -74,7 +74,7 @@ class HistoryItem {
return this.value;
}
}
- log.error("unknown format -> outputFormat conversion");
+ console.error("unknown format -> outputFormat conversion");
return this.value;
}
}
@@ -91,9 +91,14 @@ export default class ComposerHistoryManager {
// TODO: Performance issues?
let item;
for (; item = sessionStorage.getItem(`${this.prefix}[${this.currentIndex}]`); this.currentIndex++) {
- this.history.push(
- HistoryItem.fromJSON(JSON.parse(item))
- );
+ try {
+ this.history.push(
+ HistoryItem.fromJSON(JSON.parse(item))
+ );
+ }
+ catch (e) {
+ console.warn("Throwing away unserialisable history", e);
+ }
}
this.lastIndex = this.currentIndex;
}
From 410a1683fe05862e1b777aa32ba9cfe7fb0f069f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 12 May 2018 01:10:38 +0100
Subject: [PATCH 013/846] make autocomplete selection work
---
.../views/rooms/MessageComposerInput.js | 203 ++++++++++--------
1 file changed, 112 insertions(+), 91 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 4b950c429d..f50acb8bef 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
import { Editor } from 'slate-react';
-import { Value, Document, Event } from 'slate';
+import { Value, Document, Event, Inline, Range, Node } from 'slate';
import Html from 'slate-html-serializer';
import { Markdown as Md } from 'slate-md-serializer';
@@ -197,49 +197,6 @@ export default class MessageComposerInput extends React.Component {
* - contentState was passed in
*/
createEditorState(richText: boolean, value: ?Value): Value {
-/*
- const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
- RichText.getScopedMDDecorators(this.props);
- const shouldShowPillAvatar = !SettingsStore.getValue("Pill.shouldHidePillAvatar");
- decorators.push({
- strategy: this.findPillEntities.bind(this),
- component: (entityProps) => {
- const Pill = sdk.getComponent('elements.Pill');
- const type = entityProps.contentState.getEntity(entityProps.entityKey).getType();
- const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData();
- if (type === ENTITY_TYPES.AT_ROOM_PILL) {
- return ;
- } else if (Pill.isPillUrl(url)) {
- return ;
- }
-
- return (
-
- { entityProps.children }
-
- );
- },
- });
- const compositeDecorator = new CompositeDecorator(decorators);
- let editorState = null;
- if (contentState) {
- editorState = EditorState.createWithContent(contentState, compositeDecorator);
- } else {
- editorState = EditorState.createEmpty(compositeDecorator);
- }
-
- return EditorState.moveFocusToEnd(editorState);
-*/
if (value instanceof Value) {
return value;
}
@@ -566,6 +523,10 @@ export default class MessageComposerInput extends React.Component {
return this.onVerticalArrow(ev, true);
case KeyCode.DOWN:
return this.onVerticalArrow(ev, false);
+ case KeyCode.TAB:
+ return this.onTab(ev);
+ case KeyCode.ESCAPE:
+ return this.onEscape(ev);
default:
// don't intercept it
return;
@@ -938,15 +899,19 @@ export default class MessageComposerInput extends React.Component {
let navigateHistory = false;
if (up) {
- let scrollCorrection = editorNode.scrollTop;
- if (cursorRect.top - editorRect.top + scrollCorrection == 0) {
+ const scrollCorrection = editorNode.scrollTop;
+ const distanceFromTop = cursorRect.top - editorRect.top + scrollCorrection;
+ //console.log(`Cursor distance from editor top is ${distanceFromTop}`);
+ if (distanceFromTop == 0) {
navigateHistory = true;
}
}
else {
- let scrollCorrection =
+ const scrollCorrection =
editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
- if (cursorRect.bottom - editorRect.bottom + scrollCorrection == 0) {
+ const distanceFromBottom = cursorRect.bottom - editorRect.bottom + scrollCorrection;
+ //console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
+ if (distanceFromBottom == 0) {
navigateHistory = true;
}
}
@@ -1033,38 +998,50 @@ export default class MessageComposerInput extends React.Component {
* If passed a non-null displayedCompletion, modifies state.originalEditorState to compute new state.editorState.
*/
setDisplayedCompletion = async (displayedCompletion: ?Completion): boolean => {
-/*
const activeEditorState = this.state.originalEditorState || this.state.editorState;
if (displayedCompletion == null) {
if (this.state.originalEditorState) {
let editorState = this.state.originalEditorState;
- // This is a workaround from https://github.com/facebook/draft-js/issues/458
- // Due to the way we swap editorStates, Draft does not rerender at times
- editorState = EditorState.forceSelection(editorState,
- editorState.getSelection());
this.setState({editorState});
}
return false;
}
const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion;
- let contentState = activeEditorState.getCurrentContent();
- let entityKey;
+ let inline;
if (href) {
- contentState = contentState.createEntity('LINK', 'IMMUTABLE', {
- url: href,
- isCompletion: true,
+ inline = Inline.create({
+ type: 'pill',
+ isVoid: true,
+ data: { url: href },
});
- entityKey = contentState.getLastCreatedEntityKey();
} else if (completion === '@room') {
- contentState = contentState.createEntity(ENTITY_TYPES.AT_ROOM_PILL, 'IMMUTABLE', {
- isCompletion: true,
+ inline = Inline.create({
+ type: 'pill',
+ isVoid: true,
+ data: { type: Pill.TYPE_AT_ROOM_MENTION },
});
- entityKey = contentState.getLastCreatedEntityKey();
}
+ let editorState = activeEditorState;
+
+ if (range) {
+ const change = editorState.change().moveOffsetsTo(range.start, range.end);
+ editorState = change.value;
+ }
+
+ const change = editorState.change().insertInlineAtRange(
+ editorState.selection, inline
+ );
+ editorState = change.value;
+
+ this.setState({ editorState, originalEditorState: activeEditorState }, ()=>{
+// this.refs.editor.focus();
+ });
+
+/*
let selection;
if (range) {
selection = RichText.textOffsetsToSelectionState(
@@ -1085,16 +1062,51 @@ export default class MessageComposerInput extends React.Component {
let editorState = EditorState.push(activeEditorState, contentState, 'insert-characters');
editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
this.setState({editorState, originalEditorState: activeEditorState});
-
- // for some reason, doing this right away does not update the editor :(
- // setTimeout(() => this.refs.editor.focus(), 50);
-*/
+*/
return true;
};
+ renderNode = props => {
+ const { attributes, children, node, isSelected } = props;
+
+ switch (node.type) {
+ case 'paragraph': {
+ return
{children}
+ }
+ case 'pill': {
+ const { data, text } = node;
+ const url = data.get('url');
+ const type = data.get('type');
+
+ const shouldShowPillAvatar = !SettingsStore.getValue("Pill.shouldHidePillAvatar");
+ const Pill = sdk.getComponent('elements.Pill');
+
+ if (type === Pill.TYPE_AT_ROOM_MENTION) {
+ return ;
+ }
+ else if (Pill.isPillUrl(url)) {
+ return ;
+ }
+ else {
+ return
+ { text }
+ ;
+ }
+ }
+ }
+ };
+
onFormatButtonClicked = (name: "bold" | "italic" | "strike" | "code" | "underline" | "quote" | "bullet" | "numbullet", e) => {
e.preventDefault(); // don't steal focus from the editor!
-/*
+
const command = {
code: 'code-block',
quote: 'blockquote',
@@ -1102,7 +1114,6 @@ export default class MessageComposerInput extends React.Component {
numbullet: 'ordered-list-item',
}[name] || name;
this.handleKeyCommand(command);
-*/
};
/* returns inline style and block type of current SelectionState so MessageComposer can render formatting
@@ -1140,14 +1151,41 @@ export default class MessageComposerInput extends React.Component {
*/
}
- getAutocompleteQuery(contentState: ContentState) {
- return '';
+ getAutocompleteQuery(editorState: Value) {
+ // FIXME: do we really want to regenerate this every time the control is rerendered?
+
+ // We can just return the current block where the selection begins, which
+ // should be enough to capture any autocompletion input, given autocompletion
+ // providers only search for the first match which intersects with the current selection.
+ // This avoids us having to serialize the whole thing to plaintext and convert
+ // selection offsets in & out of the plaintext domain.
+ return editorState.document.getDescendant(editorState.selection.anchorKey).text;
// Don't send markdown links to the autocompleter
// return this.removeMDLinks(contentState, ['@', '#']);
}
+ getSelectionRange(editorState: Value) {
+ // 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 = {
+ start: editorState.selection.anchorOffset,
+ end: (editorState.selection.anchorKey == editorState.selection.focusKey) ?
+ editorState.selection.focusOffset : editorState.selection.anchorOffset,
+ }
+ if (range.start > range.end) {
+ const tmp = range.start;
+ range.start = range.end;
+ range.end = tmp;
+ }
+ return range;
+ }
+
/*
+ // delinkifies any matrix.to markdown links (i.e. pills) of form
+ // [#foo:matrix.org](https://matrix.to/#/#foo:matrix.org).
+ // the prefixes is an array of sigils that will be matched on.
removeMDLinks(contentState: ContentState, prefixes: string[]) {
const plaintext = contentState.getPlainText();
if (!plaintext) return '';
@@ -1189,24 +1227,10 @@ export default class MessageComposerInput extends React.Component {
render() {
const activeEditorState = this.state.originalEditorState || this.state.editorState;
- let hidePlaceholder = false;
- // FIXME: in case we need to implement manual placeholdering
-
const className = classNames('mx_MessageComposer_input', {
- mx_MessageComposer_input_empty: hidePlaceholder,
mx_MessageComposer_input_error: this.state.someCompletions === false,
});
- const content = null;
- const selection = {
- start: 0,
- end: 0,
- };
-
- // const content = activeEditorState.getCurrentContent();
- // const selection = RichText.selectionStateToTextOffsets(activeEditorState.getSelection(),
- // activeEditorState.getCurrentContent().getBlocksAsArray());
-
return (
From d7c2c8ba7bfc8229176a588cdf530295e438792e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 12 May 2018 16:21:36 +0100
Subject: [PATCH 014/846] include the plaintext representation of a pill within
it
---
src/components/views/rooms/MessageComposerInput.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index f50acb8bef..e1c5d1a190 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
import { Editor } from 'slate-react';
-import { Value, Document, Event, Inline, Range, Node } from 'slate';
+import { Value, Document, Event, Inline, Text, Range, Node } from 'slate';
import Html from 'slate-html-serializer';
import { Markdown as Md } from 'slate-md-serializer';
@@ -781,6 +781,7 @@ export default class MessageComposerInput extends React.Component {
);
}
} else {
+
// Use the original contentState because `contentText` has had mentions
// stripped and these need to end up in contentHTML.
@@ -1014,14 +1015,14 @@ export default class MessageComposerInput extends React.Component {
if (href) {
inline = Inline.create({
type: 'pill',
- isVoid: true,
data: { url: href },
+ nodes: [Text.create(completion)],
});
} else if (completion === '@room') {
inline = Inline.create({
type: 'pill',
- isVoid: true,
data: { type: Pill.TYPE_AT_ROOM_MENTION },
+ nodes: [Text.create(completion)],
});
}
@@ -1262,7 +1263,6 @@ export default class MessageComposerInput extends React.Component {
blockStyleFn={MessageComposerInput.getBlockStyle}
keyBindingFn={MessageComposerInput.getKeyBinding}
handleKeyCommand={this.handleKeyCommand}
- handleReturn={this.handleReturn}
handlePastedText={this.onTextPasted}
handlePastedFiles={this.props.onFilesPasted}
stripPastedStyles={!this.state.isRichtextEnabled}
From 9c0c806af4b272458cdd8874347982d86cc70ea0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 12 May 2018 20:04:58 +0100
Subject: [PATCH 015/846] correctly send pills in messages
---
src/Markdown.js | 13 ++-
src/autocomplete/NotifProvider.js | 1 +
src/autocomplete/PlainWithPillsSerializer.js | 89 ++++++++++++++
src/autocomplete/RoomProvider.js | 1 +
src/autocomplete/UserProvider.js | 1 +
src/components/views/rooms/Autocomplete.js | 2 -
.../views/rooms/MessageComposerInput.js | 109 +++++++++---------
src/stores/MessageComposerStore.js | 6 +-
8 files changed, 159 insertions(+), 63 deletions(-)
create mode 100644 src/autocomplete/PlainWithPillsSerializer.js
diff --git a/src/Markdown.js b/src/Markdown.js
index aa1c7e45b1..e67f4df4fd 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -133,7 +133,10 @@ export default class Markdown {
* Render the markdown message to plain text. That is, essentially
* just remove any backslashes escaping what would otherwise be
* markdown syntax
- * (to fix https://github.com/vector-im/riot-web/issues/2870)
+ * (to fix https://github.com/vector-im/riot-web/issues/2870).
+ *
+ * N.B. this does **NOT** render arbitrary MD to plain text - only MD
+ * which has no formatting. Otherwise it emits HTML(!).
*/
toPlaintext() {
const renderer = new commonmark.HtmlRenderer({safe: false});
@@ -161,6 +164,14 @@ export default class Markdown {
if (is_multi_line(node) && node.next) this.lit('\n\n');
};
+ // convert MD links into console-friendly ' < http://foo >' style links
+ // ...except given this function never gets called with links, it's useless.
+ // renderer.link = function(node, entering) {
+ // if (!entering) {
+ // this.lit(` < ${node.destination} >`);
+ // }
+ // };
+
return renderer.render(this.parsed);
}
}
diff --git a/src/autocomplete/NotifProvider.js b/src/autocomplete/NotifProvider.js
index b7ac645525..5d2f05ecb9 100644
--- a/src/autocomplete/NotifProvider.js
+++ b/src/autocomplete/NotifProvider.js
@@ -40,6 +40,7 @@ export default class NotifProvider extends AutocompleteProvider {
if (command && command[0] && '@room'.startsWith(command[0]) && command[0].length > 1) {
return [{
completion: '@room',
+ completionId: '@room',
suffix: ' ',
component: (
} title="@room" description={_t("Notify the whole room")} />
diff --git a/src/autocomplete/PlainWithPillsSerializer.js b/src/autocomplete/PlainWithPillsSerializer.js
new file mode 100644
index 0000000000..77391d5bbb
--- /dev/null
+++ b/src/autocomplete/PlainWithPillsSerializer.js
@@ -0,0 +1,89 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// Based originally on slate-plain-serializer
+
+import { Block } from 'slate';
+
+/**
+ * Plain text serializer, which converts a Slate `value` to a plain text string,
+ * serializing pills into various different formats as required.
+ *
+ * @type {PlainWithPillsSerializer}
+ */
+
+class PlainWithPillsSerializer {
+
+ /*
+ * @param {String} options.pillFormat - either 'md', 'plain', 'id'
+ */
+ constructor(options = {}) {
+ let {
+ pillFormat = 'plain',
+ } = options;
+ this.pillFormat = pillFormat;
+ }
+
+ /**
+ * Serialize a Slate `value` to a plain text string,
+ * serializing pills as either MD links, plain text representations or
+ * ID representations as required.
+ *
+ * @param {Value} value
+ * @return {String}
+ */
+ serialize = value => {
+ return this._serializeNode(value.document)
+ }
+
+ /**
+ * Serialize a `node` to plain text.
+ *
+ * @param {Node} node
+ * @return {String}
+ */
+ _serializeNode = node => {
+ if (
+ node.object == 'document' ||
+ (node.object == 'block' && Block.isBlockList(node.nodes))
+ ) {
+ return node.nodes.map(this._serializeNode).join('\n');
+ } else if (node.type == 'pill') {
+ switch (this.pillFormat) {
+ case 'plain':
+ return node.text;
+ case 'md':
+ return `[${ node.text }](${ node.data.get('url') })`;
+ case 'id':
+ return node.data.completionId || node.text;
+ }
+ }
+ else if (node.nodes) {
+ return node.nodes.map(this._serializeNode).join('');
+ }
+ else {
+ return node.text;
+ }
+ }
+}
+
+/**
+ * Export.
+ *
+ * @type {PlainWithPillsSerializer}
+ */
+
+export default PlainWithPillsSerializer
\ No newline at end of file
diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index 31599703c2..b9346e75cc 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@@ -78,6 +78,7 @@ export default class RoomProvider extends AutocompleteProvider {
const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
return {
completion: displayAlias,
+ completionId: displayAlias,
suffix: ' ',
href: makeRoomPermalink(displayAlias),
component: (
diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js
index ce8f1020a1..a6dd13051b 100644
--- a/src/autocomplete/UserProvider.js
+++ b/src/autocomplete/UserProvider.js
@@ -113,6 +113,7 @@ export default class UserProvider extends AutocompleteProvider {
// Length of completion should equal length of text in decorator. draft-js
// relies on the length of the entity === length of the text in the decoration.
completion: user.rawDisplayName.replace(' (IRC)', ''),
+ completionId: user.userId,
suffix: range.start === 0 ? ': ' : ' ',
href: makeUserPermalink(user.userId),
component: (
diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js
index 4fb2a29381..5b56727705 100644
--- a/src/components/views/rooms/Autocomplete.js
+++ b/src/components/views/rooms/Autocomplete.js
@@ -263,7 +263,6 @@ export default class Autocomplete extends React.Component {
const componentPosition = position;
position++;
- const onMouseMove = () => this.setSelection(componentPosition);
const onClick = () => {
this.setSelection(componentPosition);
this.onCompletionClicked();
@@ -273,7 +272,6 @@ export default class Autocomplete extends React.Component {
key: i,
ref: `completion${position - 1}`,
className,
- onMouseMove,
onClick,
});
});
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index e1c5d1a190..1bdbb86549 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -25,6 +25,7 @@ import { Value, Document, Event, Inline, Text, Range, Node } from 'slate';
import Html from 'slate-html-serializer';
import { Markdown as Md } from 'slate-md-serializer';
import Plain from 'slate-plain-serializer';
+import PlainWithPillsSerializer from "../../../autocomplete/PlainWithPillsSerializer";
// import {Editor, EditorState, RichUtils, CompositeDecorator, Modifier,
// getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState,
@@ -157,7 +158,7 @@ export default class MessageComposerInput extends React.Component {
// the currently displayed editor state (note: this is always what is modified on input)
editorState: this.createEditorState(
isRichtextEnabled,
- MessageComposerStore.getContentState(this.props.room.roomId),
+ MessageComposerStore.getEditorState(this.props.room.roomId),
),
// the original editor state, before we started tabbing through completions
@@ -172,6 +173,10 @@ export default class MessageComposerInput extends React.Component {
};
this.client = MatrixClientPeg.get();
+
+ this.plainWithMdPills = new PlainWithPillsSerializer({ pillFormat: 'md' });
+ this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
+ this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
}
/*
@@ -686,30 +691,27 @@ export default class MessageComposerInput extends React.Component {
return false;
}
*/
- const contentState = this.state.editorState;
+ const editorState = this.state.editorState;
- let contentText = Plain.serialize(contentState);
+ let contentText;
let contentHTML;
- if (contentText === '') return true;
+ // only look for commands if the first block contains simple unformatted text
+ // i.e. no pills or rich-text formatting.
+ let cmd, commandText;
+ const firstChild = editorState.document.nodes.get(0);
+ const firstGrandChild = firstChild && firstChild.nodes.get(0);
+ if (firstChild && firstGrandChild &&
+ firstChild.object === 'block' && firstGrandChild.object === 'text' &&
+ firstGrandChild.text[0] === '/' && firstGrandChild.text[1] !== '/')
+ {
+ commandText = this.plainWithIdPills.serialize(editorState);
+ cmd = SlashCommands.processInput(this.props.room.roomId, commandText);
+ }
-/*
- // Strip MD user (tab-completed) mentions to preserve plaintext mention behaviour.
- // We have to do this now as opposed to after calculating the contentText for MD
- // mode because entity positions may not be maintained when using
- // md.toPlaintext().
- // Unfortunately this means we lose mentions in history when in MD mode. This
- // would be fixed if history was stored as contentState.
- contentText = this.removeMDLinks(contentState, ['@']);
-
- // Some commands (/join) require pills to be replaced with their text content
- const commandText = this.removeMDLinks(contentState, ['#']);
-*/
- const commandText = contentText;
- const cmd = SlashCommands.processInput(this.props.room.roomId, commandText);
if (cmd) {
if (!cmd.error) {
- this.historyManager.save(contentState, this.state.isRichtextEnabled ? 'rich' : 'markdown');
+ this.historyManager.save(editorState, this.state.isRichtextEnabled ? 'rich' : 'markdown');
this.setState({
editorState: this.createEditorState(),
});
@@ -774,46 +776,31 @@ export default class MessageComposerInput extends React.Component {
shouldSendHTML = hasLink;
}
*/
+ contentText = this.plainWithPlainPills.serialize(editorState);
+ if (contentText === '') return true;
+
let shouldSendHTML = true;
if (shouldSendHTML) {
contentHTML = HtmlUtils.processHtmlForSending(
- RichText.editorStateToHTML(contentState),
+ RichText.editorStateToHTML(editorState),
);
}
} else {
+ const sourceWithPills = this.plainWithMdPills.serialize(editorState);
+ if (sourceWithPills === '') return true;
- // Use the original contentState because `contentText` has had mentions
- // stripped and these need to end up in contentHTML.
+ const mdWithPills = new Markdown(sourceWithPills);
-/*
- // Replace all Entities of type `LINK` with markdown link equivalents.
- // TODO: move this into `Markdown` and do the same conversion in the other
- // two places (toggling from MD->RT mode and loading MD history into RT mode)
- // but this can only be done when history includes Entities.
- const pt = contentState.getBlocksAsArray().map((block) => {
- let blockText = block.getText();
- let offset = 0;
- this.findPillEntities(contentState, block, (start, end) => {
- const entity = contentState.getEntity(block.getEntityAt(start));
- if (entity.getType() !== 'LINK') {
- return;
- }
- const text = blockText.slice(offset + start, offset + end);
- const url = entity.getData().url;
- const mdLink = `[${text}](${url})`;
- blockText = blockText.slice(0, offset + start) + mdLink + blockText.slice(offset + end);
- offset += mdLink.length - text.length;
- });
- return blockText;
- }).join('\n');
-*/
- const md = new Markdown(contentText);
// if contains no HTML and we're not quoting (needing HTML)
- if (md.isPlainText() && !mustSendHTML) {
- contentText = md.toPlaintext();
+ if (mdWithPills.isPlainText() && !mustSendHTML) {
+ // N.B. toPlainText is only usable here because we know that the MD
+ // didn't contain any formatting in the first place...
+ contentText = mdWithPills.toPlaintext();
} else {
- contentText = md.toPlaintext();
- contentHTML = md.toHTML();
+ // to avoid ugliness clients which can't parse HTML we don't send pills
+ // in the plaintext body.
+ contentText = this.plainWithPlainPills.serialize(editorState);
+ contentHTML = mdWithPills.toHTML();
}
}
@@ -821,11 +808,11 @@ export default class MessageComposerInput extends React.Component {
let sendTextFn = ContentHelpers.makeTextMessage;
this.historyManager.save(
- contentState,
+ editorState,
this.state.isRichtextEnabled ? 'rich' : 'markdown',
);
- if (contentText.startsWith('/me')) {
+ if (commandText && commandText.startsWith('/me')) {
if (replyingToEv) {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Emote Reply Fail', '', ErrorDialog, {
@@ -842,14 +829,16 @@ export default class MessageComposerInput extends React.Component {
sendTextFn = ContentHelpers.makeEmoteMessage;
}
-
- let content = contentHTML ? sendHtmlFn(contentText, contentHTML) : sendTextFn(contentText);
+ let content = contentHTML ?
+ sendHtmlFn(contentText, contentHTML) :
+ sendTextFn(contentText);
if (replyingToEv) {
const replyContent = ReplyThread.makeReplyMixIn(replyingToEv);
content = Object.assign(replyContent, content);
- // Part of Replies fallback support - prepend the text we're sending with the text we're replying to
+ // Part of Replies fallback support - prepend the text we're sending
+ // with the text we're replying to
const nestedReply = ReplyThread.getNestedReplyText(replyingToEv);
if (nestedReply) {
if (content.formatted_body) {
@@ -1009,20 +998,26 @@ export default class MessageComposerInput extends React.Component {
return false;
}
- const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion;
+ const {
+ range = null,
+ completion = '',
+ completionId = '',
+ href = null,
+ suffix = ''
+ } = displayedCompletion;
let inline;
if (href) {
inline = Inline.create({
type: 'pill',
data: { url: href },
- nodes: [Text.create(completion)],
+ nodes: [Text.create(completionId || completion)],
});
} else if (completion === '@room') {
inline = Inline.create({
type: 'pill',
data: { type: Pill.TYPE_AT_ROOM_MENTION },
- nodes: [Text.create(completion)],
+ nodes: [Text.create(completionId || completion)],
});
}
diff --git a/src/stores/MessageComposerStore.js b/src/stores/MessageComposerStore.js
index 3b1ab1fa72..0e6c856e1b 100644
--- a/src/stores/MessageComposerStore.js
+++ b/src/stores/MessageComposerStore.js
@@ -44,7 +44,7 @@ class MessageComposerStore extends Store {
__onDispatch(payload) {
switch (payload.action) {
case 'editor_state':
- this._contentState(payload);
+ this._editorState(payload);
break;
case 'on_logged_out':
this.reset();
@@ -52,7 +52,7 @@ class MessageComposerStore extends Store {
}
}
- _contentState(payload) {
+ _editorState(payload) {
const editorStateMap = this._state.editorStateMap;
editorStateMap[payload.room_id] = payload.editor_state;
localStorage.setItem('editor_state', JSON.stringify(editorStateMap));
@@ -61,7 +61,7 @@ class MessageComposerStore extends Store {
});
}
- getContentState(roomId) {
+ getEditorState(roomId) {
return this._state.editorStateMap[roomId];
}
From c91dcffe82605c7ca1cb3693029089a6438cab06 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 00:40:54 +0100
Subject: [PATCH 016/846] fix cursor behaviour around pills
---
src/autocomplete/PlainWithPillsSerializer.js | 4 +-
.../views/rooms/MessageComposerInput.js | 48 ++++++++++++++++---
2 files changed, 43 insertions(+), 9 deletions(-)
diff --git a/src/autocomplete/PlainWithPillsSerializer.js b/src/autocomplete/PlainWithPillsSerializer.js
index 77391d5bbb..6827f1fe73 100644
--- a/src/autocomplete/PlainWithPillsSerializer.js
+++ b/src/autocomplete/PlainWithPillsSerializer.js
@@ -64,11 +64,11 @@ class PlainWithPillsSerializer {
} else if (node.type == 'pill') {
switch (this.pillFormat) {
case 'plain':
- return node.text;
+ return node.data.get('completion');
case 'md':
return `[${ node.text }](${ node.data.get('url') })`;
case 'id':
- return node.data.completionId || node.text;
+ return node.data.get('completionId') || node.data.get('completion');
}
}
else if (node.nodes) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 1bdbb86549..dfc0a2ee21 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -177,6 +177,8 @@ export default class MessageComposerInput extends React.Component {
this.plainWithMdPills = new PlainWithPillsSerializer({ pillFormat: 'md' });
this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
+
+ this.direction = '';
}
/*
@@ -358,6 +360,17 @@ export default class MessageComposerInput extends React.Component {
}
onChange = (change: Change) => {
+
+ let editorState = change.value;
+
+ if (this.direction !== '') {
+ const focusedNode = editorState.focusInline || editorState.focusText;
+ if (focusedNode.isVoid) {
+ change = change[`collapseToEndOf${ this.direction }Text`]();
+ editorState = change.value;
+ }
+ }
+
/*
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
@@ -417,7 +430,7 @@ export default class MessageComposerInput extends React.Component {
*/
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
this.setState({
- editorState: change.value,
+ editorState,
originalEditorState: null,
});
};
@@ -521,6 +534,18 @@ export default class MessageComposerInput extends React.Component {
}
onKeyDown = (ev: Event, change: Change, editor: Editor) => {
+
+ // skip void nodes - see
+ // https://github.com/ianstormtaylor/slate/issues/762#issuecomment-304855095
+ if (ev.keyCode === KeyCode.LEFT) {
+ this.direction = 'Previous';
+ }
+ else if (ev.keyCode === KeyCode.RIGHT) {
+ this.direction = 'Next';
+ } else {
+ this.direction = '';
+ }
+
switch (ev.keyCode) {
case KeyCode.ENTER:
return this.handleReturn(ev);
@@ -1010,14 +1035,23 @@ export default class MessageComposerInput extends React.Component {
if (href) {
inline = Inline.create({
type: 'pill',
- data: { url: href },
- nodes: [Text.create(completionId || completion)],
+ data: { completion, completionId, url: href },
+ // we can't put text in here otherwise the editor tries to select it
+ isVoid: true,
+ nodes: [],
});
} else if (completion === '@room') {
inline = Inline.create({
type: 'pill',
- data: { type: Pill.TYPE_AT_ROOM_MENTION },
- nodes: [Text.create(completionId || completion)],
+ data: { completion, completionId },
+ // we can't put text in here otherwise the editor tries to select it
+ isVoid: true,
+ nodes: [],
+ });
+ } else {
+ inline = Inline.create({
+ type: 'autocompletion',
+ nodes: [Text.create(completion)]
});
}
@@ -1072,12 +1106,12 @@ export default class MessageComposerInput extends React.Component {
case 'pill': {
const { data, text } = node;
const url = data.get('url');
- const type = data.get('type');
+ const completion = data.get('completion');
const shouldShowPillAvatar = !SettingsStore.getValue("Pill.shouldHidePillAvatar");
const Pill = sdk.getComponent('elements.Pill');
- if (type === Pill.TYPE_AT_ROOM_MENTION) {
+ if (completion === '@room') {
return
Date: Sun, 13 May 2018 00:48:52 +0100
Subject: [PATCH 017/846] fix NPEs when deleting mentions
---
src/components/views/rooms/MessageComposerInput.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index dfc0a2ee21..919b38e741 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -1038,7 +1038,6 @@ export default class MessageComposerInput extends React.Component {
data: { completion, completionId, url: href },
// we can't put text in here otherwise the editor tries to select it
isVoid: true,
- nodes: [],
});
} else if (completion === '@room') {
inline = Inline.create({
@@ -1046,7 +1045,6 @@ export default class MessageComposerInput extends React.Component {
data: { completion, completionId },
// we can't put text in here otherwise the editor tries to select it
isVoid: true,
- nodes: [],
});
} else {
inline = Inline.create({
From 877a6195ae9c73f29908286347639e9112ef5b0f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 00:54:01 +0100
Subject: [PATCH 018/846] unbreak history scrolling for pills & emoji
---
src/components/views/rooms/MessageComposerInput.js | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 919b38e741..a8a9188971 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -912,12 +912,17 @@ export default class MessageComposerInput extends React.Component {
const editorNode = ReactDOM.findDOMNode(this.refs.editor);
const editorRect = editorNode.getBoundingClientRect();
+ // heuristic to handle tall emoji, pills, etc pushing the cursor away from the top
+ // or bottom of the page.
+ // XXX: is this going to break on large inline images or top-to-bottom scripts?
+ const EDGE_THRESHOLD = 8;
+
let navigateHistory = false;
if (up) {
const scrollCorrection = editorNode.scrollTop;
const distanceFromTop = cursorRect.top - editorRect.top + scrollCorrection;
- //console.log(`Cursor distance from editor top is ${distanceFromTop}`);
- if (distanceFromTop == 0) {
+ console.log(`Cursor distance from editor top is ${distanceFromTop}`);
+ if (distanceFromTop < EDGE_THRESHOLD) {
navigateHistory = true;
}
}
@@ -925,8 +930,8 @@ export default class MessageComposerInput extends React.Component {
const scrollCorrection =
editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
const distanceFromBottom = cursorRect.bottom - editorRect.bottom + scrollCorrection;
- //console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
- if (distanceFromBottom == 0) {
+ console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
+ if (distanceFromBottom < EDGE_THRESHOLD) {
navigateHistory = true;
}
}
From c967ecc4e59cc475feaed9f36a6f447fa327b139 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 03:04:40 +0100
Subject: [PATCH 019/846] autocomplete polishing
* suppress autocomplete when navigating through history
* only search for slashcommands if in the first block of the editor
* handle suffix returns from providers correctly
* fix SelectionRange typing in the providers
* fix bugs when pressing ctrl-a, typing and then tab to complete a replacement by collapsing selection to anchor when inserting a completion in the editor
* fix https://github.com/vector-im/riot-web/issues/4762
---
src/autocomplete/AutocompleteProvider.js | 12 +++++++++---
src/autocomplete/Autocompleter.js | 9 +++++----
src/autocomplete/CommandProvider.js | 4 +++-
src/autocomplete/DuckDuckGoProvider.js | 3 ++-
src/autocomplete/NotifProvider.js | 3 ++-
src/autocomplete/RoomProvider.js | 9 ++-------
src/autocomplete/UserProvider.js | 19 ++++++++-----------
7 files changed, 31 insertions(+), 28 deletions(-)
diff --git a/src/autocomplete/AutocompleteProvider.js b/src/autocomplete/AutocompleteProvider.js
index c93ae4fb2a..2d3bad14c5 100644
--- a/src/autocomplete/AutocompleteProvider.js
+++ b/src/autocomplete/AutocompleteProvider.js
@@ -20,13 +20,19 @@ import React from 'react';
import type {Completion, SelectionRange} from './Autocompleter';
export default class AutocompleteProvider {
- constructor(commandRegex?: RegExp) {
+ constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
if (commandRegex) {
if (!commandRegex.global) {
throw new Error('commandRegex must have global flag set');
}
this.commandRegex = commandRegex;
}
+ if (forcedCommandRegex) {
+ if (!forcedCommandRegex.global) {
+ throw new Error('forcedCommandRegex must have global flag set');
+ }
+ this.forcedCommandRegex = forcedCommandRegex;
+ }
}
destroy() {
@@ -36,11 +42,11 @@ export default class AutocompleteProvider {
/**
* Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
*/
- getCurrentCommand(query: string, selection: {start: number, end: number}, force: boolean = false): ?string {
+ getCurrentCommand(query: string, selection: SelectionRange, force: boolean = false): ?string {
let commandRegex = this.commandRegex;
if (force && this.shouldForceComplete()) {
- commandRegex = /\S+/g;
+ commandRegex = this.forcedCommandRegex || /\S+/g;
}
if (commandRegex == null) {
diff --git a/src/autocomplete/Autocompleter.js b/src/autocomplete/Autocompleter.js
index 3d30363d9f..db3ba5a7e1 100644
--- a/src/autocomplete/Autocompleter.js
+++ b/src/autocomplete/Autocompleter.js
@@ -27,6 +27,7 @@ import NotifProvider from './NotifProvider';
import Promise from 'bluebird';
export type SelectionRange = {
+ beginning: boolean,
start: number,
end: number
};
@@ -77,12 +78,12 @@ export default class Autocompleter {
// Array of inspections of promises that might timeout. Instead of allowing a
// single timeout to reject the Promise.all, reflect each one and once they've all
// settled, filter for the fulfilled ones
- this.providers.map((provider) => {
- return provider
+ this.providers.map(provider =>
+ provider
.getCompletions(query, selection, force)
.timeout(PROVIDER_COMPLETION_TIMEOUT)
- .reflect();
- }),
+ .reflect()
+ ),
);
return completionsList.filter(
diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js
index e33fa7861f..0545095cf0 100644
--- a/src/autocomplete/CommandProvider.js
+++ b/src/autocomplete/CommandProvider.js
@@ -21,6 +21,7 @@ import { _t, _td } from '../languageHandler';
import AutocompleteProvider from './AutocompleteProvider';
import FuzzyMatcher from './FuzzyMatcher';
import {TextualCompletion} from './Components';
+import type {SelectionRange} from './Autocompleter';
// TODO merge this with the factory mechanics of SlashCommands?
// Warning: Since the description string will be translated in _t(result.description), all these strings below must be in i18n/strings/en_EN.json file
@@ -123,8 +124,9 @@ export default class CommandProvider extends AutocompleteProvider {
});
}
- async getCompletions(query: string, selection: {start: number, end: number}) {
+ async getCompletions(query: string, selection: SelectionRange) {
let completions = [];
+ if (!selection.beginning) return completions;
const {command, range} = this.getCurrentCommand(query, selection);
if (command) {
completions = this.matcher.match(command[0]).map((result) => {
diff --git a/src/autocomplete/DuckDuckGoProvider.js b/src/autocomplete/DuckDuckGoProvider.js
index 68d4915f56..236ab49b62 100644
--- a/src/autocomplete/DuckDuckGoProvider.js
+++ b/src/autocomplete/DuckDuckGoProvider.js
@@ -22,6 +22,7 @@ import AutocompleteProvider from './AutocompleteProvider';
import 'whatwg-fetch';
import {TextualCompletion} from './Components';
+import type {SelectionRange} from './Autocompleter';
const DDG_REGEX = /\/ddg\s+(.+)$/g;
const REFERRER = 'vector';
@@ -36,7 +37,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
+ `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
}
- async getCompletions(query: string, selection: {start: number, end: number}) {
+ async getCompletions(query: string, selection: SelectionRange) {
const {command, range} = this.getCurrentCommand(query, selection);
if (!query || !command) {
return [];
diff --git a/src/autocomplete/NotifProvider.js b/src/autocomplete/NotifProvider.js
index 5d2f05ecb9..a426528567 100644
--- a/src/autocomplete/NotifProvider.js
+++ b/src/autocomplete/NotifProvider.js
@@ -20,6 +20,7 @@ import { _t } from '../languageHandler';
import MatrixClientPeg from '../MatrixClientPeg';
import {PillCompletion} from './Components';
import sdk from '../index';
+import type {SelectionRange} from './Autocompleter';
const AT_ROOM_REGEX = /@\S*/g;
@@ -29,7 +30,7 @@ export default class NotifProvider extends AutocompleteProvider {
this.room = room;
}
- async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+ async getCompletions(query: string, selection: SelectionRange, force = false) {
const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
const client = MatrixClientPeg.get();
diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index b9346e75cc..139ac87041 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@@ -26,6 +26,7 @@ import {getDisplayAliasForRoom} from '../Rooms';
import sdk from '../index';
import _sortBy from 'lodash/sortBy';
import {makeRoomPermalink} from "../matrix-to";
+import type {SelectionRange} from './Autocompleter';
const ROOM_REGEX = /(?=#)(\S*)/g;
@@ -46,15 +47,9 @@ export default class RoomProvider extends AutocompleteProvider {
});
}
- async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+ async getCompletions(query: string, selection: SelectionRange, force = false) {
const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
- // Disable autocompletions when composing commands because of various issues
- // (see https://github.com/vector-im/riot-web/issues/4762)
- if (/^(\/join|\/leave)/.test(query)) {
- return [];
- }
-
const client = MatrixClientPeg.get();
let completions = [];
const {command, range} = this.getCurrentCommand(query, selection, force);
diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js
index a6dd13051b..c25dad8877 100644
--- a/src/autocomplete/UserProvider.js
+++ b/src/autocomplete/UserProvider.js
@@ -28,18 +28,21 @@ import _sortBy from 'lodash/sortBy';
import MatrixClientPeg from '../MatrixClientPeg';
import type {Room, RoomMember} from 'matrix-js-sdk';
+import type {SelectionRange} from './Autocompleter';
import {makeUserPermalink} from "../matrix-to";
const USER_REGEX = /@\S*/g;
+// used when you hit 'tab' - we allow some separator chars at the beginning
+// to allow you to tab-complete /mat into /(matthew)
+const FORCED_USER_REGEX = /[^/,:; \t\n]\S*/g;
+
export default class UserProvider extends AutocompleteProvider {
users: Array = null;
room: Room = null;
constructor(room) {
- super(USER_REGEX, {
- keys: ['name'],
- });
+ super(USER_REGEX, FORCED_USER_REGEX);
this.room = room;
this.matcher = new FuzzyMatcher([], {
keys: ['name', 'userId'],
@@ -87,15 +90,9 @@ export default class UserProvider extends AutocompleteProvider {
this.users = null;
}
- async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+ async getCompletions(query: string, selection: SelectionRange, force = false) {
const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
- // Disable autocompletions when composing commands because of various issues
- // (see https://github.com/vector-im/riot-web/issues/4762)
- if (/^(\/ban|\/unban|\/op|\/deop|\/invite|\/kick|\/verify)/.test(query)) {
- return [];
- }
-
// lazy-load user list into matcher
if (this.users === null) this._makeUsers();
@@ -114,7 +111,7 @@ export default class UserProvider extends AutocompleteProvider {
// relies on the length of the entity === length of the text in the decoration.
completion: user.rawDisplayName.replace(' (IRC)', ''),
completionId: user.userId,
- suffix: range.start === 0 ? ': ' : ' ',
+ suffix: (selection.beginning && range.start === 0) ? ': ' : ' ',
href: makeUserPermalink(user.userId),
component: (
Date: Sun, 13 May 2018 03:16:55 +0100
Subject: [PATCH 020/846] autocomplete polishing
* suppress autocomplete when navigating through history
* only search for slashcommands if in the first block of the editor
* handle suffix returns from providers correctly
* fix bugs when pressing ctrl-a, typing and then tab to complete a replacement by collapsing selection to anchor when inserting a completion in the editor
---
src/components/views/rooms/Autocomplete.js | 2 +-
.../views/rooms/MessageComposerInput.js | 29 ++++++++++++++-----
2 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js
index 5b56727705..4bc91b5c2b 100644
--- a/src/components/views/rooms/Autocomplete.js
+++ b/src/components/views/rooms/Autocomplete.js
@@ -114,7 +114,7 @@ export default class Autocomplete extends React.Component {
processQuery(query, selection) {
return this.autocompleter.getCompletions(
- query, selection, this.state.forceComplete,
+ query, selection, this.state.forceComplete
).then((completions) => {
// Only ever process the completions for the most recent query being processed
if (query !== this.queryRequested) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index a8a9188971..83760d932d 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -178,6 +178,7 @@ export default class MessageComposerInput extends React.Component {
this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
+ this.suppressAutoComplete = false;
this.direction = '';
}
@@ -535,6 +536,8 @@ export default class MessageComposerInput extends React.Component {
onKeyDown = (ev: Event, change: Change, editor: Editor) => {
+ this.suppressAutoComplete = false;
+
// skip void nodes - see
// https://github.com/ianstormtaylor/slate/issues/762#issuecomment-304855095
if (ev.keyCode === KeyCode.LEFT) {
@@ -978,6 +981,8 @@ export default class MessageComposerInput extends React.Component {
// we skip it for now given we know we're about to setState anyway
editorState = change.value;
+ this.suppressAutoComplete = true;
+
this.setState({ editorState }, ()=>{
this.refs.editor.focus();
});
@@ -1061,13 +1066,15 @@ export default class MessageComposerInput extends React.Component {
let editorState = activeEditorState;
if (range) {
- const change = editorState.change().moveOffsetsTo(range.start, range.end);
+ const change = editorState.change()
+ .collapseToAnchor()
+ .moveOffsetsTo(range.start, range.end);
editorState = change.value;
}
- const change = editorState.change().insertInlineAtRange(
- editorState.selection, inline
- );
+ const change = editorState.change()
+ .insertInlineAtRange(editorState.selection, inline)
+ .insertText(suffix);
editorState = change.value;
this.setState({ editorState, originalEditorState: activeEditorState }, ()=>{
@@ -1185,13 +1192,12 @@ export default class MessageComposerInput extends React.Component {
}
getAutocompleteQuery(editorState: Value) {
- // FIXME: do we really want to regenerate this every time the control is rerendered?
-
// We can just return the current block where the selection begins, which
// should be enough to capture any autocompletion input, given autocompletion
// providers only search for the first match which intersects with the current selection.
// This avoids us having to serialize the whole thing to plaintext and convert
// selection offsets in & out of the plaintext domain.
+
return editorState.document.getDescendant(editorState.selection.anchorKey).text;
// Don't send markdown links to the autocompleter
@@ -1199,10 +1205,19 @@ export default class MessageComposerInput extends React.Component {
}
getSelectionRange(editorState: Value) {
+ let beginning = false;
+ const query = this.getAutocompleteQuery(editorState);
+ const firstChild = editorState.document.nodes.get(0);
+ const firstGrandChild = firstChild && firstChild.nodes.get(0);
+ beginning = (firstChild && firstGrandChild &&
+ firstChild.object === 'block' && firstGrandChild.object === 'text' &&
+ editorState.selection.anchorKey === 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,
@@ -1273,7 +1288,7 @@ export default class MessageComposerInput extends React.Component {
room={this.props.room}
onConfirm={this.setDisplayedCompletion}
onSelectionChange={this.setDisplayedCompletion}
- query={this.getAutocompleteQuery(activeEditorState)}
+ query={ this.suppressAutoComplete ? '' : this.getAutocompleteQuery(activeEditorState) }
selection={this.getSelectionRange(activeEditorState)}
/>
From e06763cd59da8b07255f46ab7e1abc4604c637cc Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 03:18:41 +0100
Subject: [PATCH 021/846] show all slashcommands on /
---
src/autocomplete/CommandProvider.js | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js
index 0545095cf0..4f2aed3dc6 100644
--- a/src/autocomplete/CommandProvider.js
+++ b/src/autocomplete/CommandProvider.js
@@ -129,7 +129,14 @@ export default class CommandProvider extends AutocompleteProvider {
if (!selection.beginning) return completions;
const {command, range} = this.getCurrentCommand(query, selection);
if (command) {
- completions = this.matcher.match(command[0]).map((result) => {
+ let results;
+ if (command[0] == '/') {
+ results = COMMANDS;
+ }
+ else {
+ results = this.matcher.match(command[0]);
+ }
+ completions = results.map((result) => {
return {
completion: result.command + ' ',
component: (
Date: Sun, 13 May 2018 03:26:22 +0100
Subject: [PATCH 022/846] don't lose focus after a / command
---
src/components/views/rooms/MessageComposerInput.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 83760d932d..a1b569b5f4 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -745,9 +745,10 @@ export default class MessageComposerInput extends React.Component {
});
}
if (cmd.promise) {
- cmd.promise.then(function() {
+ cmd.promise.then(()=>{
console.log("Command success.");
- }, function(err) {
+ this.refs.editor.focus();
+ }, (err)=>{
console.error("Command failure: %s", err);
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Server error', '', ErrorDialog, {
From 79f7c5d6ab0e7b0bad860039403fef195381cdbe Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 03:29:56 +0100
Subject: [PATCH 023/846] remove // support, as it never worked
if you want to escape a /, do it with \/ or just precede with a space
---
src/SlashCommands.js | 2 +-
src/components/views/rooms/MessageComposerInput.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index d45e45e84c..7f32c1e25a 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -434,7 +434,7 @@ module.exports = {
// trim any trailing whitespace, as it can confuse the parser for
// IRC-style commands
input = input.replace(/\s+$/, "");
- if (input[0] === "/" && input[1] !== "/") {
+ if (input[0] === "/") {
const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
let cmd;
let args;
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index a1b569b5f4..2a59ccbe7d 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -731,7 +731,7 @@ export default class MessageComposerInput extends React.Component {
const firstGrandChild = firstChild && firstChild.nodes.get(0);
if (firstChild && firstGrandChild &&
firstChild.object === 'block' && firstGrandChild.object === 'text' &&
- firstGrandChild.text[0] === '/' && firstGrandChild.text[1] !== '/')
+ firstGrandChild.text[0] === '/')
{
commandText = this.plainWithIdPills.serialize(editorState);
cmd = SlashCommands.processInput(this.props.room.roomId, commandText);
From dd0726f06802666f531db8a7c5784797b7148010 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 21:17:43 +0100
Subject: [PATCH 024/846] fix navigating history downwards on tall messages;
remove obsolete code
---
src/RichText.js | 36 -------------------
.../views/rooms/MessageComposerInput.js | 32 +----------------
2 files changed, 1 insertion(+), 67 deletions(-)
diff --git a/src/RichText.js b/src/RichText.js
index 7ffb4dd785..d867636dc9 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -223,42 +223,6 @@ export function selectionStateToTextOffsets(selectionState: SelectionState,
};
}
-export function textOffsetsToSelectionState({start, end}: SelectionRange,
- contentBlocks: Array): SelectionState {
- let selectionState = SelectionState.createEmpty();
- // Subtract block lengths from `start` and `end` until they are less than the current
- // block length (accounting for the NL at the end of each block). Set them to -1 to
- // indicate that the corresponding selection state has been determined.
- for (const block of contentBlocks) {
- const blockLength = block.getLength();
- // -1 indicating that the position start position has been found
- if (start !== -1) {
- if (start < blockLength + 1) {
- selectionState = selectionState.merge({
- anchorKey: block.getKey(),
- anchorOffset: start,
- });
- start = -1; // selection state for the start calculated
- } else {
- start -= blockLength + 1; // +1 to account for newline between blocks
- }
- }
- // -1 indicating that the position end position has been found
- if (end !== -1) {
- if (end < blockLength + 1) {
- selectionState = selectionState.merge({
- focusKey: block.getKey(),
- focusOffset: end,
- });
- end = -1; // selection state for the end calculated
- } else {
- end -= blockLength + 1; // +1 to account for newline between blocks
- }
- }
- }
- return selectionState;
-}
-
// modified version of https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-emoji-plugin/src/modifiers/attachImmutableEntitiesToEmojis.js
export function attachImmutableEntitiesToEmoji(editorState: EditorState): EditorState {
const contentState = editorState.getCurrentContent();
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 2a59ccbe7d..3e8d3cd868 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -494,14 +494,6 @@ export default class MessageComposerInput extends React.Component {
if (this.props.onContentChanged) {
this.props.onContentChanged(textContent, selection);
}
-
- // Scroll to the bottom of the editor if the cursor is on the last line of the
- // composer. For some reason the editor won't scroll automatically if we paste
- // blocks of text in or insert newlines.
- if (textContent.slice(selection.start).indexOf("\n") === -1) {
- let editorRoot = this.refs.editor.refs.editor.parentNode.parentNode;
- editorRoot.scrollTop = editorRoot.scrollHeight;
- }
*/
});
}
@@ -933,7 +925,7 @@ export default class MessageComposerInput extends React.Component {
else {
const scrollCorrection =
editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
- const distanceFromBottom = cursorRect.bottom - editorRect.bottom + scrollCorrection;
+ const distanceFromBottom = editorRect.bottom - cursorRect.bottom + scrollCorrection;
console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
if (distanceFromBottom < EDGE_THRESHOLD) {
navigateHistory = true;
@@ -1082,28 +1074,6 @@ export default class MessageComposerInput extends React.Component {
// this.refs.editor.focus();
});
-/*
- let selection;
- if (range) {
- selection = RichText.textOffsetsToSelectionState(
- range, contentState.getBlocksAsArray(),
- );
- } else {
- selection = activeEditorState.getSelection();
- }
-
- contentState = Modifier.replaceText(contentState, selection, completion, null, entityKey);
-
- // Move the selection to the end of the block
- const afterSelection = contentState.getSelectionAfter();
- if (suffix) {
- contentState = Modifier.replaceText(contentState, afterSelection, suffix);
- }
-
- let editorState = EditorState.push(activeEditorState, contentState, 'insert-characters');
- editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
- this.setState({editorState, originalEditorState: activeEditorState});
-*/
return true;
};
From ddfe0691c43c309e5f4265e6663667c15da10557 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 22:41:39 +0100
Subject: [PATCH 025/846] fix insert_mention
---
.../views/rooms/MessageComposerInput.js | 33 ++++++++++---------
1 file changed, 17 insertions(+), 16 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 3e8d3cd868..8b72dc1a0b 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -243,23 +243,24 @@ export default class MessageComposerInput extends React.Component {
case 'focus_composer':
editor.focus();
break;
-/*
- case 'insert_mention': {
- // Pretend that we've autocompleted this user because keeping two code
- // paths for inserting a user pill is not fun
- const selection = this.state.editorState.getSelection();
- const member = this.props.room.getMember(payload.user_id);
- const completion = member ?
- member.rawDisplayName.replace(' (IRC)', '') : payload.user_id;
- this.setDisplayedCompletion({
- completion,
- selection,
- href: makeUserPermalink(payload.user_id),
- suffix: selection.getStartOffset() === 0 ? ': ' : ' ',
- });
- }
+ case 'insert_mention':
+ {
+ // Pretend that we've autocompleted this user because keeping two code
+ // paths for inserting a user pill is not fun
+ const selection = this.getSelectionRange(this.state.editorState);
+ const member = this.props.room.getMember(payload.user_id);
+ const completion = member ?
+ member.rawDisplayName.replace(' (IRC)', '') : payload.user_id;
+ this.setDisplayedCompletion({
+ completion,
+ completionId: payload.user_id,
+ selection,
+ href: makeUserPermalink(payload.user_id),
+ suffix: (selection.beginning && selection.start === 0) ? ': ' : ' ',
+ });
+ }
break;
-
+/*
case 'quote': { // old quoting, whilst rich quoting is in labs
/// XXX: Not doing rich-text quoting from formatted-body because draft-js
/// has regressed such that when links are quoted, errors are thrown. See
From a247ea2f77d0ad10faf63c3c798abb59c8b237d1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 22:43:20 +0100
Subject: [PATCH 026/846] delete duplicate propTypes(!!!)
---
.../views/rooms/MessageComposerInput.js | 18 ++----------------
1 file changed, 2 insertions(+), 16 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 8b72dc1a0b..756c9eb1a9 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -100,6 +100,8 @@ export default class MessageComposerInput extends React.Component {
// called with current plaintext content (as a string) whenever it changes
onContentChanged: PropTypes.func,
+ onFilesPasted: PropTypes.func,
+
onInputStateChanged: PropTypes.func,
};
@@ -1292,19 +1294,3 @@ export default class MessageComposerInput extends React.Component {
);
}
}
-
-MessageComposerInput.propTypes = {
- // a callback which is called when the height of the composer is
- // changed due to a change in content.
- onResize: PropTypes.func,
-
- // js-sdk Room object
- room: PropTypes.object.isRequired,
-
- // called with current plaintext content (as a string) whenever it changes
- onContentChanged: PropTypes.func,
-
- onFilesPasted: PropTypes.func,
-
- onInputStateChanged: PropTypes.func,
-};
From 7405b49b4416ab8803c64283f26c983097e8fd5d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 23:34:00 +0100
Subject: [PATCH 027/846] unify setState() and onChange() also make emoji
autocomplete work again also remove the onInputContentChanged prop also
slateify the onInputStateChanged prop
---
src/components/views/rooms/MessageComposer.js | 18 +-
.../views/rooms/MessageComposerInput.js | 163 +++++-------------
2 files changed, 42 insertions(+), 139 deletions(-)
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 28a90b375a..9aaa33f0fa 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -35,7 +35,6 @@ export default class MessageComposer extends React.Component {
this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
this.uploadFiles = this.uploadFiles.bind(this);
this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
- this.onInputContentChanged = this.onInputContentChanged.bind(this);
this._onAutocompleteConfirm = this._onAutocompleteConfirm.bind(this);
this.onToggleFormattingClicked = this.onToggleFormattingClicked.bind(this);
this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
@@ -44,13 +43,10 @@ export default class MessageComposer extends React.Component {
this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
this.state = {
- autocompleteQuery: '',
- selection: null,
inputState: {
- style: [],
+ marks: [],
blockType: null,
isRichtextEnabled: SettingsStore.getValue('MessageComposerInput.isRichTextEnabled'),
- wordCount: 0,
},
showFormatting: SettingsStore.getValue('MessageComposer.showFormatting'),
isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
@@ -209,13 +205,6 @@ export default class MessageComposer extends React.Component {
// this._startCallApp(true);
}
- onInputContentChanged(content: string, selection: {start: number, end: number}) {
- this.setState({
- autocompleteQuery: content,
- selection,
- });
- }
-
onInputStateChanged(inputState) {
this.setState({inputState});
}
@@ -348,7 +337,6 @@ export default class MessageComposer extends React.Component {
room={this.props.room}
placeholder={placeholderText}
onFilesPasted={this.uploadFiles}
- onContentChanged={this.onInputContentChanged}
onInputStateChanged={this.onInputStateChanged} />,
formattingButton,
stickerpickerButton,
@@ -365,10 +353,10 @@ export default class MessageComposer extends React.Component {
);
}
- const {style, blockType} = this.state.inputState;
+ const {marks, blockType} = this.state.inputState;
const formatButtons = ["bold", "italic", "strike", "underline", "code", "quote", "bullet", "numbullet"].map(
(name) => {
- const active = style.includes(name) || blockType === name;
+ const active = marks.includes(name) || blockType === name;
const suffix = active ? '-o-n' : '';
const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
const className = 'mx_MessageComposer_format_button mx_filterFlipColor';
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 756c9eb1a9..025e42be1a 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -184,23 +184,6 @@ export default class MessageComposerInput extends React.Component {
this.direction = '';
}
-/*
- findPillEntities(contentState: ContentState, contentBlock: ContentBlock, callback) {
- contentBlock.findEntityRanges(
- (character) => {
- const entityKey = character.getEntity();
- return (
- entityKey !== null &&
- (
- contentState.getEntity(entityKey).getType() === 'LINK' ||
- contentState.getEntity(entityKey).getType() === ENTITY_TYPES.AT_ROOM_PILL
- )
- );
- }, callback,
- );
- }
-*/
-
/*
* "Does the right thing" to create an Editor value, based on:
* - whether we've got rich text mode enabled
@@ -226,14 +209,12 @@ export default class MessageComposerInput extends React.Component {
}
componentWillUpdate(nextProps, nextState) {
-/*
// this is dirty, but moving all this state to MessageComposer is dirtier
if (this.props.onInputStateChanged && nextState !== this.state) {
const state = this.getSelectionInfo(nextState.editorState);
state.isRichtextEnabled = nextState.isRichtextEnabled;
this.props.onInputStateChanged(state);
}
-*/
}
onAction = (payload) => {
@@ -375,6 +356,19 @@ export default class MessageComposerInput extends React.Component {
}
}
+ if (editorState.document.getFirstText().text !== '') {
+ this.onTypingActivity();
+ } else {
+ this.onFinishedTyping();
+ }
+
+ /*
+ // XXX: what was this ever doing?
+ if (!state.hasOwnProperty('originalEditorState')) {
+ state.originalEditorState = null;
+ }
+ */
+
/*
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
@@ -405,6 +399,10 @@ export default class MessageComposerInput extends React.Component {
// Reset selection
editorState = EditorState.forceSelection(editorState, currentSelection);
}
+*/
+
+ const text = editorState.startText.text;
+ const currentStartOffset = editorState.startOffset;
// Automatic replacement of plaintext emoji to Unicode emoji
if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
@@ -415,23 +413,26 @@ export default class MessageComposerInput extends React.Component {
const emojiUc = asciiList[emojiMatch[1]];
// hex unicode -> shortname -> actual unicode
const unicodeEmoji = shortnameToUnicode(EMOJI_UNICODE_TO_SHORTNAME[emojiUc]);
- const newContentState = Modifier.replaceText(
- editorState.getCurrentContent(),
- currentSelection.merge({
- anchorOffset: currentStartOffset - emojiMatch[1].length - 1,
- focusOffset: currentStartOffset,
- }),
- unicodeEmoji,
- );
- editorState = EditorState.push(
- editorState,
- newContentState,
- 'insert-characters',
- );
- editorState = EditorState.forceSelection(editorState, newContentState.getSelectionAfter());
+
+ const range = Range.create({
+ anchorKey: editorState.selection.startKey,
+ anchorOffset: currentStartOffset - emojiMatch[1].length - 1,
+ focusKey: editorState.selection.startKey,
+ focusOffset: currentStartOffset,
+ });
+ change = change.insertTextAtRange(range, unicodeEmoji);
+ editorState = change.value;
}
}
-*/
+
+ // Record the editor state for this room so that it can be retrieved after
+ // switching to another room and back
+ dis.dispatch({
+ action: 'editor_state',
+ room_id: this.props.room.roomId,
+ editor_state: editorState,
+ });
+
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
this.setState({
editorState,
@@ -439,68 +440,6 @@ export default class MessageComposerInput extends React.Component {
});
};
- /**
- * We're overriding setState here because it's the most convenient way to monitor changes to the editorState.
- * Doing it using a separate function that calls setState is a possibility (and was the old approach), but that
- * approach requires a callback and an extra setState whenever trying to set multiple state properties.
- *
- * @param state
- * @param callback
- */
- setState(state, callback) {
-/*
- if (state.editorState != null) {
- state.editorState = RichText.attachImmutableEntitiesToEmoji(
- state.editorState);
-
- // Hide the autocomplete if the cursor location changes but the plaintext
- // content stays the same. We don't hide if the pt has changed because the
- // autocomplete will probably have different completions to show.
- if (
- !state.editorState.getSelection().equals(
- this.state.editorState.getSelection(),
- )
- && state.editorState.getCurrentContent().getPlainText() ===
- this.state.editorState.getCurrentContent().getPlainText()
- ) {
- this.autocomplete.hide();
- }
-
- if (state.editorState.getCurrentContent().hasText()) {
- this.onTypingActivity();
- } else {
- this.onFinishedTyping();
- }
-
- // Record the editor state for this room so that it can be retrieved after
- // switching to another room and back
- dis.dispatch({
- action: 'editor_state',
- room_id: this.props.room.roomId,
- editor_state: state.editorState.getCurrentContent(),
- });
-
- if (!state.hasOwnProperty('originalEditorState')) {
- state.originalEditorState = null;
- }
- }
-*/
- super.setState(state, () => {
- if (callback != null) {
- callback();
- }
-/*
- const textContent = this.state.editorState.getCurrentContent().getPlainText();
- const selection = RichText.selectionStateToTextOffsets(
- this.state.editorState.getSelection(),
- this.state.editorState.getCurrentContent().getBlocksAsArray());
- if (this.props.onContentChanged) {
- this.props.onContentChanged(textContent, selection);
- }
-*/
- });
- }
-
enableRichtext(enabled: boolean) {
if (enabled === this.state.isRichtextEnabled) return;
@@ -1133,36 +1072,12 @@ export default class MessageComposerInput extends React.Component {
/* returns inline style and block type of current SelectionState so MessageComposer can render formatting
buttons. */
getSelectionInfo(editorState: Value) {
- return {};
-/*
- const styleName = {
- BOLD: _td('bold'),
- ITALIC: _td('italic'),
- STRIKETHROUGH: _td('strike'),
- UNDERLINE: _td('underline'),
- };
-
- const originalStyle = editorState.getCurrentInlineStyle().toArray();
- const style = originalStyle
- .map((style) => styleName[style] || null)
- .filter((styleName) => !!styleName);
-
- const blockName = {
- 'code-block': _td('code'),
- 'blockquote': _td('quote'),
- 'unordered-list-item': _td('bullet'),
- 'ordered-list-item': _td('numbullet'),
- };
- const originalBlockType = editorState.getCurrentContent()
- .getBlockForKey(editorState.getSelection().getStartKey())
- .getType();
- const blockType = blockName[originalBlockType] || null;
-
return {
- style,
- blockType,
+ marks: editorState.activeMarks,
+ // XXX: shouldn't we return all the types of blocks in the current selection,
+ // not just the anchor?
+ blockType: editorState.anchorBlock.type,
};
-*/
}
getAutocompleteQuery(editorState: Value) {
From 7ecb4e3b188890946712cca2580c7904ddadcb4a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 13 May 2018 23:35:39 +0100
Subject: [PATCH 028/846] remove dead removeMDLinks code
---
.../views/rooms/MessageComposerInput.js | 40 -------------------
1 file changed, 40 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 025e42be1a..4a9dfa4b4c 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -1088,9 +1088,6 @@ export default class MessageComposerInput extends React.Component {
// selection offsets in & out of the plaintext domain.
return editorState.document.getDescendant(editorState.selection.anchorKey).text;
-
- // Don't send markdown links to the autocompleter
- // return this.removeMDLinks(contentState, ['@', '#']);
}
getSelectionRange(editorState: Value) {
@@ -1119,43 +1116,6 @@ export default class MessageComposerInput extends React.Component {
return range;
}
-/*
- // delinkifies any matrix.to markdown links (i.e. pills) of form
- // [#foo:matrix.org](https://matrix.to/#/#foo:matrix.org).
- // the prefixes is an array of sigils that will be matched on.
- removeMDLinks(contentState: ContentState, prefixes: string[]) {
- const plaintext = contentState.getPlainText();
- if (!plaintext) return '';
- return plaintext.replace(REGEX_MATRIXTO_MARKDOWN_GLOBAL,
- (markdownLink, text, resource, prefix, offset) => {
- if (!prefixes.includes(prefix)) return markdownLink;
- // Calculate the offset relative to the current block that the offset is in
- let sum = 0;
- const blocks = contentState.getBlocksAsArray();
- let block;
- for (let i = 0; i < blocks.length; i++) {
- block = blocks[i];
- sum += block.getLength();
- if (sum > offset) {
- sum -= block.getLength();
- break;
- }
- }
- offset -= sum;
-
- const entityKey = block.getEntityAt(offset);
- const entity = entityKey ? contentState.getEntity(entityKey) : null;
- if (entity && entity.getData().isCompletion) {
- // This is a completed mention, so do not insert MD link, just text
- return text;
- } else {
- // This is either a MD link that was typed into the composer or another
- // type of pill (e.g. room pill)
- return markdownLink;
- }
- });
- }
-*/
onMarkdownToggleClicked = (e) => {
e.preventDefault(); // don't steal focus from the editor!
this.handleKeyCommand('toggle-mode');
From b10f9a9cb780a209b6e64c9b2343571eff7a93bb Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Mon, 14 May 2018 02:54:55 +0100
Subject: [PATCH 029/846] remove spurious vendor prefixing
---
res/css/structures/_RoomView.scss | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index b8e1190375..02418f70db 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -176,10 +176,7 @@ hr.mx_RoomView_myReadMarker {
z-index: 1000;
overflow: hidden;
- -webkit-transition: all .2s ease-out;
- -moz-transition: all .2s ease-out;
- -ms-transition: all .2s ease-out;
- -o-transition: all .2s ease-out;
+ transition: all .2s ease-out;
}
.mx_RoomView_statusArea_expanded {
From c1000a7cd5aaecded59d0ffa0456012af4e15e8d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Mon, 14 May 2018 03:02:12 +0100
Subject: [PATCH 030/846] emojioneify the composer and also fix up the
selectedness CSS for pills and emoji
---
res/css/_common.scss | 4 +
res/css/views/elements/_RichText.scss | 4 +
src/RichText.js | 81 +----------------
src/autocomplete/PlainWithPillsSerializer.js | 3 +
src/components/views/elements/Pill.js | 3 +
.../views/rooms/MessageComposerInput.js | 91 +++++++++++++++----
6 files changed, 88 insertions(+), 98 deletions(-)
diff --git a/res/css/_common.scss b/res/css/_common.scss
index c4cda6821e..38f576a532 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -291,6 +291,10 @@ textarea {
vertical-align: middle;
}
+.mx_emojione_selected {
+ background-color: $accent-color;
+}
+
::-moz-selection {
background-color: $accent-color;
color: $selection-fg-color;
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index 474a123455..5c390af30a 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -25,6 +25,10 @@
padding-right: 5px;
}
+.mx_UserPill_selected {
+ background-color: $accent-color ! important;
+}
+
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
.mx_EventTile_content .mx_AtRoomPill,
.mx_MessageComposer_input .mx_AtRoomPill {
diff --git a/src/RichText.js b/src/RichText.js
index d867636dc9..50ed33d803 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -51,10 +51,6 @@ const MARKDOWN_REGEX = {
STRIKETHROUGH: /~{2}[^~]*~{2}/g,
};
-const USERNAME_REGEX = /@\S+:\S+/g;
-const ROOM_REGEX = /#\S+:\S+/g;
-const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp, 'g');
-
const ZWS_CODE = 8203;
const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
@@ -73,7 +69,7 @@ export function htmlToEditorState(html: string): Value {
return Html.serialize(html);
}
-function unicodeToEmojiUri(str) {
+export function unicodeToEmojiUri(str) {
let replaceWith, unicode, alt;
if ((!emojione.unicodeAlt) || (emojione.sprites)) {
// if we are using the shortname as the alt tag then we need a reversed array to map unicode code point to shortnames
@@ -113,27 +109,6 @@ function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: numb
}
}
-// Workaround for https://github.com/facebook/draft-js/issues/414
-const emojiDecorator = {
- strategy: (contentState, contentBlock, callback) => {
- findWithRegex(EMOJI_REGEX, contentBlock, callback);
- },
- component: (props) => {
- const uri = unicodeToEmojiUri(props.children[0].props.text);
- const shortname = emojione.toShort(props.children[0].props.text);
- const style = {
- display: 'inline-block',
- width: '1em',
- maxHeight: '1em',
- background: `url(${uri})`,
- backgroundSize: 'contain',
- backgroundPosition: 'center center',
- overflow: 'hidden',
- };
- return ({ props.children });
- },
-};
-
/**
* Returns a composite decorator which has access to provided scope.
*/
@@ -223,60 +198,6 @@ export function selectionStateToTextOffsets(selectionState: SelectionState,
};
}
-// modified version of https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-emoji-plugin/src/modifiers/attachImmutableEntitiesToEmojis.js
-export function attachImmutableEntitiesToEmoji(editorState: EditorState): EditorState {
- const contentState = editorState.getCurrentContent();
- const blocks = contentState.getBlockMap();
- let newContentState = contentState;
-
- blocks.forEach((block) => {
- const plainText = block.getText();
-
- const addEntityToEmoji = (start, end) => {
- const existingEntityKey = block.getEntityAt(start);
- if (existingEntityKey) {
- // avoid manipulation in case the emoji already has an entity
- const entity = newContentState.getEntity(existingEntityKey);
- if (entity && entity.get('type') === 'emoji') {
- return;
- }
- }
-
- const selection = SelectionState.createEmpty(block.getKey())
- .set('anchorOffset', start)
- .set('focusOffset', end);
- const emojiText = plainText.substring(start, end);
- newContentState = newContentState.createEntity(
- 'emoji', 'IMMUTABLE', { emojiUnicode: emojiText },
- );
- const entityKey = newContentState.getLastCreatedEntityKey();
- newContentState = Modifier.replaceText(
- newContentState,
- selection,
- emojiText,
- null,
- entityKey,
- );
- };
-
- findWithRegex(EMOJI_REGEX, block, addEntityToEmoji);
- });
-
- if (!newContentState.equals(contentState)) {
- const oldSelection = editorState.getSelection();
- editorState = EditorState.push(
- editorState,
- newContentState,
- 'convert-to-immutable-emojis',
- );
- // this is somewhat of a hack, we're undoing selection changes caused above
- // it would be better not to make those changes in the first place
- editorState = EditorState.forceSelection(editorState, oldSelection);
- }
-
- return editorState;
-}
-
export function hasMultiLineSelection(editorState: EditorState): boolean {
const selectionState = editorState.getSelection();
const anchorKey = selectionState.getAnchorKey();
diff --git a/src/autocomplete/PlainWithPillsSerializer.js b/src/autocomplete/PlainWithPillsSerializer.js
index 6827f1fe73..0e850f2a33 100644
--- a/src/autocomplete/PlainWithPillsSerializer.js
+++ b/src/autocomplete/PlainWithPillsSerializer.js
@@ -61,6 +61,9 @@ class PlainWithPillsSerializer {
(node.object == 'block' && Block.isBlockList(node.nodes))
) {
return node.nodes.map(this._serializeNode).join('\n');
+ }
+ else if (node.type == 'emoji') {
+ return node.data.get('emojiUnicode');
} else if (node.type == 'pill') {
switch (this.pillFormat) {
case 'plain':
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 7e5ad379de..673e4fdd03 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -59,6 +59,8 @@ const Pill = React.createClass({
room: PropTypes.instanceOf(Room),
// Whether to include an avatar in the pill
shouldShowPillAvatar: PropTypes.bool,
+ // Whether to render this pill as if it were highlit by a selection
+ isSelected: PropTypes.bool,
},
@@ -233,6 +235,7 @@ const Pill = React.createClass({
const classes = classNames(pillClass, {
"mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+ "mx_UserPill_selected": this.props.isSelected,
});
if (this.state.pillType) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 4a9dfa4b4c..e682d28ff6 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -58,7 +58,7 @@ import {MATRIXTO_URL_PATTERN, MATRIXTO_MD_LINK_PATTERN} from '../../../linkify-m
const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
const REGEX_MATRIXTO_MARKDOWN_GLOBAL = new RegExp(MATRIXTO_MD_LINK_PATTERN, 'g');
-import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
+import {asciiRegexp, unicodeRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort, toShort} from 'emojione';
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import {makeUserPermalink} from "../../../matrix-to";
import ReplyPreview from "./ReplyPreview";
@@ -69,6 +69,7 @@ import {ContentHelpers} from 'matrix-js-sdk';
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$');
+const EMOJI_REGEX = new RegExp(unicodeRegexp, 'g');
const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
@@ -76,6 +77,7 @@ const ENTITY_TYPES = {
AT_ROOM_PILL: 'ATROOMPILL',
};
+
function onSendMessageFailed(err, room) {
// XXX: temporary logging to try to diagnose
// https://github.com/vector-im/riot-web/issues/3148
@@ -351,12 +353,20 @@ export default class MessageComposerInput extends React.Component {
if (this.direction !== '') {
const focusedNode = editorState.focusInline || editorState.focusText;
if (focusedNode.isVoid) {
- change = change[`collapseToEndOf${ this.direction }Text`]();
+ if (editorState.isCollapsed) {
+ change = change[`collapseToEndOf${ this.direction }Text`]();
+ }
+ else {
+ const block = this.direction === 'Previous' ? editorState.previousText : editorState.nextText;
+ if (block) {
+ change = change.moveFocusToEndOf(block)
+ }
+ }
editorState = change.value;
}
}
- if (editorState.document.getFirstText().text !== '') {
+ if (!editorState.document.isEmpty) {
this.onTypingActivity();
} else {
this.onFinishedTyping();
@@ -369,9 +379,33 @@ export default class MessageComposerInput extends React.Component {
}
*/
-/*
- editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
+ // emojioneify any emoji
+ // deliberately lose any inlines and pills via Plain.serialize as we know
+ // they won't contain emoji
+ // XXX: is getTextsAsArray a private API?
+ editorState.document.getTextsAsArray().forEach(node => {
+ if (node.text !== '' && HtmlUtils.containsEmoji(node.text)) {
+ 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,
+ });
+ const inline = Inline.create({
+ type: 'emoji',
+ data: { emojiUnicode: match[0] },
+ isVoid: true,
+ });
+ change = change.insertInlineAtRange(range, inline);
+ editorState = change.value;
+ }
+ }
+ });
+
+/*
const currentBlock = editorState.getSelection().getStartKey();
const currentSelection = editorState.getSelection();
const currentStartOffset = editorState.getSelection().getStartOffset();
@@ -400,7 +434,6 @@ export default class MessageComposerInput extends React.Component {
editorState = EditorState.forceSelection(editorState, currentSelection);
}
*/
-
const text = editorState.startText.text;
const currentStartOffset = editorState.startOffset;
@@ -912,8 +945,12 @@ export default class MessageComposerInput extends React.Component {
// Move selection to the end of the selected history
const change = editorState.change().collapseToEndOf(editorState.document);
+
// XXX: should we be calling this.onChange(change) now?
- // we skip it for now given we know we're about to setState anyway
+ // Answer: yes, if we want it to do any of the fixups on stuff like emoji.
+ // however, this should already have been done and persisted in the history,
+ // so shouldn't be necessary.
+
editorState = change.value;
this.suppressAutoComplete = true;
@@ -991,11 +1028,6 @@ export default class MessageComposerInput extends React.Component {
// we can't put text in here otherwise the editor tries to select it
isVoid: true,
});
- } else {
- inline = Inline.create({
- type: 'autocompletion',
- nodes: [Text.create(completion)]
- });
}
let editorState = activeEditorState;
@@ -1007,13 +1039,23 @@ export default class MessageComposerInput extends React.Component {
editorState = change.value;
}
- const change = editorState.change()
- .insertInlineAtRange(editorState.selection, inline)
- .insertText(suffix);
+ let change;
+ if (inline) {
+ change = editorState.change()
+ .insertInlineAtRange(editorState.selection, inline)
+ .insertText(suffix);
+ }
+ else {
+ change = editorState.change()
+ .insertTextAtRange(editorState.selection, completion)
+ .insertText(suffix);
+ }
editorState = change.value;
- this.setState({ editorState, originalEditorState: activeEditorState }, ()=>{
-// this.refs.editor.focus();
+ this.onChange(change);
+
+ this.setState({
+ originalEditorState: activeEditorState
});
return true;
@@ -1027,7 +1069,7 @@ export default class MessageComposerInput extends React.Component {
return
{children}
}
case 'pill': {
- const { data, text } = node;
+ const { data } = node;
const url = data.get('url');
const completion = data.get('completion');
@@ -1039,6 +1081,7 @@ export default class MessageComposerInput extends React.Component {
type={Pill.TYPE_AT_ROOM_MENTION}
room={this.props.room}
shouldShowPillAvatar={shouldShowPillAvatar}
+ isSelected={isSelected}
/>;
}
else if (Pill.isPillUrl(url)) {
@@ -1046,14 +1089,26 @@ export default class MessageComposerInput extends React.Component {
url={url}
room={this.props.room}
shouldShowPillAvatar={shouldShowPillAvatar}
+ isSelected={isSelected}
/>;
}
else {
+ const { text } = node;
return
{ text }
;
}
}
+ case 'emoji': {
+ const { data } = node;
+ const emojiUnicode = data.get('emojiUnicode');
+ const uri = RichText.unicodeToEmojiUri(emojiUnicode);
+ const shortname = toShort(emojiUnicode);
+ const className = classNames('mx_emojione', {
+ mx_emojione_selected: isSelected
+ });
+ return ;
+ }
}
};
From 12a56e8b8e13e9d49c191605a6fb5591566e17d6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Tue, 15 May 2018 00:59:55 +0100
Subject: [PATCH 031/846] remove spurious comment
---
src/components/views/rooms/MessageComposerInput.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index e682d28ff6..204ad524fe 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -381,8 +381,6 @@ export default class MessageComposerInput extends React.Component {
// emojioneify any emoji
- // deliberately lose any inlines and pills via Plain.serialize as we know
- // they won't contain emoji
// XXX: is getTextsAsArray a private API?
editorState.document.getTextsAsArray().forEach(node => {
if (node.text !== '' && HtmlUtils.containsEmoji(node.text)) {
From 4eb6942211e613a11c999d1c44f38691d47fd49a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Tue, 15 May 2018 01:16:06 +0100
Subject: [PATCH 032/846] let onChange set originalEditorState
---
src/components/views/rooms/MessageComposerInput.js | 10 +++-------
1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 204ad524fe..39d49ecf83 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -346,7 +346,7 @@ export default class MessageComposerInput extends React.Component {
}
}
- onChange = (change: Change) => {
+ onChange = (change: Change, originalEditorState: value) => {
let editorState = change.value;
@@ -467,7 +467,7 @@ export default class MessageComposerInput extends React.Component {
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
this.setState({
editorState,
- originalEditorState: null,
+ originalEditorState: originalEditorState || null
});
};
@@ -1050,11 +1050,7 @@ export default class MessageComposerInput extends React.Component {
}
editorState = change.value;
- this.onChange(change);
-
- this.setState({
- originalEditorState: activeEditorState
- });
+ this.onChange(change, activeEditorState);
return true;
};
From ae208da805f693cf016655834f267ecf9846c22c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Thu, 17 May 2018 00:01:23 +0100
Subject: [PATCH 033/846] nudge towards supporting formatting buttons in MD
---
.../views/rooms/MessageComposerInput.js | 22 +++++++++----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 39d49ecf83..1a2450696c 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -536,11 +536,12 @@ export default class MessageComposerInput extends React.Component {
this.enableRichtext(!this.state.isRichtextEnabled);
return true;
}
-/*
- let newState: ?EditorState = null;
+
+ let newState: ?Value = null;
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
if (this.state.isRichtextEnabled) {
+/*
// These are block types, not handled by RichUtils by default.
const blockCommands = ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item'];
const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
@@ -563,7 +564,9 @@ export default class MessageComposerInput extends React.Component {
newState = RichUtils.toggleBlockType(this.state.editorState, currentBlockType);
}
}
+*/
} else {
+/*
const contentState = this.state.editorState.getCurrentContent();
const multipleLinesSelected = RichText.hasMultiLineSelection(this.state.editorState);
@@ -599,16 +602,17 @@ export default class MessageComposerInput extends React.Component {
'blockquote': -2,
}[command];
- // Returns a function that collapses a selectionState to its end and moves it by offset
- const collapseAndOffsetSelection = (selectionState, offset) => {
- const key = selectionState.getEndKey();
- return new SelectionState({
+ // Returns a function that collapses a selection to its end and moves it by offset
+ const collapseAndOffsetSelection = (selection, offset) => {
+ const key = selection.endKey();
+ return new Range({
anchorKey: key, anchorOffset: offset,
focusKey: key, focusOffset: offset,
});
};
if (modifyFn) {
+
const previousSelection = this.state.editorState.getSelection();
const newContentState = RichText.modifyText(contentState, previousSelection, modifyFn);
newState = EditorState.push(
@@ -633,15 +637,11 @@ export default class MessageComposerInput extends React.Component {
}
}
- if (newState == null) {
- newState = RichUtils.handleKeyCommand(this.state.editorState, command);
- }
-
if (newState != null) {
this.setState({editorState: newState});
return true;
}
-*/
+*/
return false;
};
/*
From e51554c626429c3ce42a100824d56762670446c6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Thu, 17 May 2018 02:13:17 +0100
Subject: [PATCH 034/846] actually hook up RTE
---
src/ComposerHistoryManager.js | 2 +-
.../views/rooms/MessageComposerInput.js | 295 +++++++++++-------
2 files changed, 189 insertions(+), 108 deletions(-)
diff --git a/src/ComposerHistoryManager.js b/src/ComposerHistoryManager.js
index ce0eb8f0c3..28749ace15 100644
--- a/src/ComposerHistoryManager.js
+++ b/src/ComposerHistoryManager.js
@@ -17,7 +17,7 @@ limitations under the License.
import { Value } from 'slate';
import Html from 'slate-html-serializer';
-import { Markdown as Md } from 'slate-md-serializer';
+import Md from 'slate-md-serializer';
import Plain from 'slate-plain-serializer';
import * as RichText from './RichText';
import Markdown from './Markdown';
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 1a2450696c..70a9b9bd83 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -23,7 +23,7 @@ import { Editor } from 'slate-react';
import { Value, Document, Event, Inline, Text, Range, Node } from 'slate';
import Html from 'slate-html-serializer';
-import { Markdown as Md } from 'slate-md-serializer';
+import Md from 'slate-md-serializer';
import Plain from 'slate-plain-serializer';
import PlainWithPillsSerializer from "../../../autocomplete/PlainWithPillsSerializer";
@@ -107,43 +107,6 @@ export default class MessageComposerInput extends React.Component {
onInputStateChanged: PropTypes.func,
};
-/*
- static getKeyBinding(ev: SyntheticKeyboardEvent): string {
- // Restrict a subset of key bindings to ONLY having ctrl/meta* pressed and
- // importantly NOT having alt, shift, meta/ctrl* pressed. draft-js does not
- // handle this in `getDefaultKeyBinding` so we do it ourselves here.
- //
- // * if macOS, read second option
- const ctrlCmdCommand = {
- // C-m => Toggles between rich text and markdown modes
- [KeyCode.KEY_M]: 'toggle-mode',
- [KeyCode.KEY_B]: 'bold',
- [KeyCode.KEY_I]: 'italic',
- [KeyCode.KEY_U]: 'underline',
- [KeyCode.KEY_J]: 'code',
- [KeyCode.KEY_O]: 'split-block',
- }[ev.keyCode];
-
- if (ctrlCmdCommand) {
- if (!isOnlyCtrlOrCmdKeyEvent(ev)) {
- return null;
- }
- return ctrlCmdCommand;
- }
-
- // Handle keys such as return, left and right arrows etc.
- return getDefaultKeyBinding(ev);
- }
-
- static getBlockStyle(block: ContentBlock): ?string {
- if (block.getType() === 'strikethrough') {
- return 'mx_Markdown_STRIKETHROUGH';
- }
-
- return null;
- }
-*/
-
client: MatrixClient;
autocomplete: Autocomplete;
historyManager: ComposerHistoryManager;
@@ -181,6 +144,8 @@ export default class MessageComposerInput extends React.Component {
this.plainWithMdPills = new PlainWithPillsSerializer({ pillFormat: 'md' });
this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
+ this.md = new Md();
+ this.html = new Html();
this.suppressAutoComplete = false;
this.direction = '';
@@ -191,9 +156,9 @@ export default class MessageComposerInput extends React.Component {
* - whether we've got rich text mode enabled
* - contentState was passed in
*/
- createEditorState(richText: boolean, value: ?Value): Value {
- if (value instanceof Value) {
- return value;
+ createEditorState(richText: boolean, editorState: ?Value): Value {
+ if (editorState instanceof Value) {
+ return editorState;
}
else {
// ...or create a new one.
@@ -275,7 +240,7 @@ export default class MessageComposerInput extends React.Component {
}
}
break;
-*/
+*/
}
};
@@ -403,7 +368,7 @@ export default class MessageComposerInput extends React.Component {
}
});
-/*
+/*
const currentBlock = editorState.getSelection().getStartKey();
const currentSelection = editorState.getSelection();
const currentStartOffset = editorState.getSelection().getStartOffset();
@@ -477,27 +442,54 @@ export default class MessageComposerInput extends React.Component {
// FIXME: this conversion should be handled in the store, surely
// i.e. "convert my current composer value into Rich or MD, as ComposerHistoryManager already does"
- let value = null;
+ let editorState = null;
if (enabled) {
- // const md = new Markdown(this.state.editorState.getCurrentContent().getPlainText());
- // contentState = RichText.htmlToContentState(md.toHTML());
+ // const sourceWithPills = this.plainWithMdPills.serialize(this.state.editorState);
+ // const markdown = new Markdown(sourceWithPills);
+ // editorState = this.html.deserialize(markdown.toHTML());
- value = Md.deserialize(Plain.serialize(this.state.editorState));
+ // we don't really want a custom MD parser hanging around, but the
+ // alternative would be:
+ editorState = this.md.deserialize(this.plainWithMdPills.serialize(this.state.editorState));
} else {
// let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
// value = ContentState.createFromText(markdown);
- value = Plain.deserialize(Md.serialize(this.state.editorState));
+ editorState = Plain.deserialize(this.md.serialize(this.state.editorState));
}
Analytics.setRichtextMode(enabled);
this.setState({
- editorState: this.createEditorState(enabled, value),
+ editorState: this.createEditorState(enabled, editorState),
isRichtextEnabled: enabled,
});
SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled);
- }
+ };
+
+ /**
+ * Check if the current selection has a mark with `type` in it.
+ *
+ * @param {String} type
+ * @return {Boolean}
+ */
+
+ hasMark = type => {
+ const { editorState } = this.state
+ return editorState.activeMarks.some(mark => mark.type == type)
+ };
+
+ /**
+ * Check if the any of the currently selected blocks are of `type`.
+ *
+ * @param {String} type
+ * @return {Boolean}
+ */
+
+ hasBlock = type => {
+ const { editorState } = this.state
+ return editorState.blocks.some(node => node.type == type)
+ };
onKeyDown = (ev: Event, change: Change, editor: Editor) => {
@@ -514,6 +506,22 @@ export default class MessageComposerInput extends React.Component {
this.direction = '';
}
+ if (isOnlyCtrlOrCmdKeyEvent(ev)) {
+ const ctrlCmdCommand = {
+ // C-m => Toggles between rich text and markdown modes
+ [KeyCode.KEY_M]: 'toggle-mode',
+ [KeyCode.KEY_B]: 'bold',
+ [KeyCode.KEY_I]: 'italic',
+ [KeyCode.KEY_U]: 'underline',
+ [KeyCode.KEY_J]: 'code',
+ }[ev.keyCode];
+
+ if (ctrlCmdCommand) {
+ return this.handleKeyCommand(ctrlCmdCommand);
+ }
+ return false;
+ }
+
switch (ev.keyCode) {
case KeyCode.ENTER:
return this.handleReturn(ev);
@@ -529,7 +537,7 @@ export default class MessageComposerInput extends React.Component {
// don't intercept it
return;
}
- }
+ };
handleKeyCommand = (command: string): boolean => {
if (command === 'toggle-mode') {
@@ -541,32 +549,79 @@ export default class MessageComposerInput extends React.Component {
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
if (this.state.isRichtextEnabled) {
-/*
- // These are block types, not handled by RichUtils by default.
- const blockCommands = ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item'];
- const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
+ const type = command;
+ const { editorState } = this.state;
+ const change = editorState.change();
+ const { document } = editorState;
+ switch (type) {
+ // list-blocks:
+ case 'bulleted-list':
+ case 'numbered-list': {
+ // Handle the extra wrapping required for list buttons.
+ const isList = this.hasBlock('list-item');
+ const isType = editorState.blocks.some(block => {
+ return !!document.getClosest(block.key, parent => parent.type == type);
+ });
- const shouldToggleBlockFormat = (
- command === 'backspace' ||
- command === 'split-block'
- ) && currentBlockType !== 'unstyled';
-
- if (blockCommands.includes(command)) {
- newState = RichUtils.toggleBlockType(this.state.editorState, command);
- } else if (command === 'strike') {
- // this is the only inline style not handled by Draft by default
- newState = RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH');
- } else if (shouldToggleBlockFormat) {
- const currentStartOffset = this.state.editorState.getSelection().getStartOffset();
- const currentEndOffset = this.state.editorState.getSelection().getEndOffset();
- if (currentStartOffset === 0 && currentEndOffset === 0) {
- // Toggle current block type (setting it to 'unstyled')
- newState = RichUtils.toggleBlockType(this.state.editorState, currentBlockType);
+ if (isList && isType) {
+ change
+ .setBlocks(DEFAULT_NODE)
+ .unwrapBlock('bulleted-list')
+ .unwrapBlock('numbered-list');
+ } else if (isList) {
+ change
+ .unwrapBlock(
+ type == 'bulleted-list' ? 'numbered-list' : 'bulleted-list'
+ )
+ .wrapBlock(type);
+ } else {
+ change.setBlocks('list-item').wrapBlock(type);
+ }
}
+ break;
+
+ // simple blocks
+ case 'paragraph':
+ case 'block-quote':
+ case 'heading-one':
+ case 'heading-two':
+ case 'heading-three':
+ case 'list-item':
+ case 'code-block': {
+ const isActive = this.hasBlock(type);
+ const isList = this.hasBlock('list-item');
+
+ if (isList) {
+ change
+ .setBlocks(isActive ? DEFAULT_NODE : type)
+ .unwrapBlock('bulleted-list')
+ .unwrapBlock('numbered-list');
+ } else {
+ change.setBlocks(isActive ? DEFAULT_NODE : type);
+ }
+ }
+ break;
+
+ // marks:
+ case 'bold':
+ case 'italic':
+ case 'code':
+ case 'underline':
+ case 'strikethrough': {
+ change.toggleMark(type);
+ }
+ break;
+
+ default:
+ console.warn(`ignoring unrecognised RTE command ${type}`);
+ return false;
}
-*/
+
+ this.onChange(change);
+
+ return true;
} else {
-/*
+/*
const contentState = this.state.editorState.getCurrentContent();
const multipleLinesSelected = RichText.hasMultiLineSelection(this.state.editorState);
@@ -641,7 +696,8 @@ export default class MessageComposerInput extends React.Component {
this.setState({editorState: newState});
return true;
}
-*/
+*/
+ }
return false;
};
/*
@@ -671,19 +727,14 @@ export default class MessageComposerInput extends React.Component {
if (ev.shiftKey) {
return;
}
-/*
- const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
- if (
- ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item']
- .includes(currentBlockType)
- ) {
- // By returning false, we allow the default draft-js key binding to occur,
- // which in this case invokes "split-block". This creates a new block of the
- // same type, allowing the user to delete it with backspace.
- // See handleKeyCommand (when command === 'backspace')
- return false;
+
+ if (this.state.editorState.blocks.some(
+ block => block in ['code-block', 'block-quote', 'bulleted-list', 'numbered-list']
+ )) {
+ // allow the user to terminate blocks by hitting return rather than sending a msg
+ return;
}
-*/
+
const editorState = this.state.editorState;
let contentText;
@@ -989,6 +1040,17 @@ export default class MessageComposerInput extends React.Component {
await this.setDisplayedCompletion(null); // restore originalEditorState
};
+ /* returns inline style and block type of current SelectionState so MessageComposer can render formatting
+ buttons. */
+ getSelectionInfo(editorState: Value) {
+ return {
+ marks: editorState.activeMarks,
+ // XXX: shouldn't we return all the types of blocks in the current selection,
+ // not just the anchor?
+ blockType: editorState.anchorBlock.type,
+ };
+ }
+
/* 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.
*/
@@ -1059,9 +1121,24 @@ export default class MessageComposerInput extends React.Component {
const { attributes, children, node, isSelected } = props;
switch (node.type) {
- case 'paragraph': {
- return
{children}
- }
+ case 'paragraph':
+ return
{children}
;
+ case 'block-quote':
+ return
{children}
;
+ case 'bulleted-list':
+ return
{children}
;
+ case 'heading-one':
+ return
{children}
;
+ case 'heading-two':
+ return
{children}
;
+ case 'heading-three':
+ return
{children}
;
+ case 'list-item':
+ return
{children}
;
+ case 'numbered-list':
+ return {children};
+ case 'code-block':
+ return
{children}
;
case 'pill': {
const { data } = node;
const url = data.get('url');
@@ -1106,29 +1183,35 @@ export default class MessageComposerInput extends React.Component {
}
};
+ renderMark = props => {
+ const { children, mark, attributes } = props;
+ switch (mark.type) {
+ case 'bold':
+ return {children};
+ case 'italic':
+ return {children};
+ case 'code':
+ return {children};
+ case 'underline':
+ return {children};
+ case 'strikethrough':
+ return {children};
+ }
+ };
+
onFormatButtonClicked = (name: "bold" | "italic" | "strike" | "code" | "underline" | "quote" | "bullet" | "numbullet", e) => {
e.preventDefault(); // don't steal focus from the editor!
const command = {
code: 'code-block',
- quote: 'blockquote',
- bullet: 'unordered-list-item',
- numbullet: 'ordered-list-item',
+ quote: 'block-quote',
+ bullet: 'bulleted-list',
+ numbullet: 'numbered-list',
+ strike: 'strike-through',
}[name] || name;
this.handleKeyCommand(command);
};
- /* returns inline style and block type of current SelectionState so MessageComposer can render formatting
- buttons. */
- getSelectionInfo(editorState: Value) {
- return {
- marks: editorState.activeMarks,
- // XXX: shouldn't we return all the types of blocks in the current selection,
- // not just the anchor?
- blockType: editorState.anchorBlock.type,
- };
- }
-
getAutocompleteQuery(editorState: Value) {
// We can just return the current block where the selection begins, which
// should be enough to capture any autocompletion input, given autocompletion
@@ -1154,7 +1237,7 @@ export default class MessageComposerInput extends React.Component {
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) ?
+ end: (editorState.selection.anchorKey == editorState.selection.focusKey) ?
editorState.selection.focusOffset : editorState.selection.anchorOffset,
}
if (range.start > range.end) {
@@ -1203,11 +1286,9 @@ export default class MessageComposerInput extends React.Component {
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
+ renderMark={this.renderMark}
spellCheck={true}
/*
- blockStyleFn={MessageComposerInput.getBlockStyle}
- keyBindingFn={MessageComposerInput.getKeyBinding}
- handleKeyCommand={this.handleKeyCommand}
handlePastedText={this.onTextPasted}
handlePastedFiles={this.props.onFilesPasted}
stripPastedStyles={!this.state.isRichtextEnabled}
From 089ac337f4125c34823709afabd4b9788728e740 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Fri, 18 May 2018 15:22:24 +0100
Subject: [PATCH 035/846] remove unused html serializer
---
src/components/views/rooms/MessageComposerInput.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 70a9b9bd83..acd7c0fab3 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -145,7 +145,7 @@ export default class MessageComposerInput extends React.Component {
this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
this.md = new Md();
- this.html = new Html();
+ //this.html = new Html(); // not used atm
this.suppressAutoComplete = false;
this.direction = '';
From 167742d9008a7588c1c3bf044563db1fcc8e9816 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 20:28:38 +0100
Subject: [PATCH 036/846] make RTE sending work
---
res/css/views/rooms/_MessageComposer.scss | 9 ++
src/RichText.js | 8 -
.../views/rooms/MessageComposerInput.js | 137 ++++++++++--------
3 files changed, 85 insertions(+), 69 deletions(-)
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 14f52832f6..72d31cfddd 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -91,6 +91,15 @@ limitations under the License.
overflow: auto;
}
+// FIXME: rather unpleasant hack to get rid of margins.
+// really we should be mixing in markdown-body from gfm.css instead
+.mx_MessageComposer_editor > :first-child {
+ margin-top: 0 ! important;
+}
+.mx_MessageComposer_editor > :last-child {
+ margin-bottom: 0 ! important;
+}
+
@keyframes visualbell
{
from { background-color: #faa }
diff --git a/src/RichText.js b/src/RichText.js
index 50ed33d803..e3162a4e2c 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -61,14 +61,6 @@ export function stateToMarkdown(state) {
''); // this is *not* a zero width space, trust me :)
}
-export const editorStateToHTML = (editorState: Value) => {
- return Html.deserialize(editorState);
-}
-
-export function htmlToEditorState(html: string): Value {
- return Html.serialize(html);
-}
-
export function unicodeToEmojiUri(str) {
let replaceWith, unicode, alt;
if ((!emojione.unicodeAlt) || (emojione.sprites)) {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index acd7c0fab3..ae4d5b6264 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -145,7 +145,26 @@ export default class MessageComposerInput extends React.Component {
this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
this.md = new Md();
- //this.html = new Html(); // not used atm
+ this.html = new Html({
+ rules: [
+ {
+ serialize: (obj, children) => {
+ if (obj.object === 'block' || obj.object === 'inline') {
+ return this.renderNode({
+ node: obj,
+ children: children,
+ });
+ }
+ else if (obj.object === 'mark') {
+ return this.renderMark({
+ mark: obj,
+ children: children,
+ });
+ }
+ }
+ }
+ ]
+ });
this.suppressAutoComplete = false;
this.direction = '';
@@ -397,27 +416,29 @@ export default class MessageComposerInput extends React.Component {
editorState = EditorState.forceSelection(editorState, currentSelection);
}
*/
- const text = editorState.startText.text;
- const currentStartOffset = editorState.startOffset;
+ if (editorState.startText !== null) {
+ const text = editorState.startText.text;
+ const currentStartOffset = editorState.startOffset;
- // Automatic replacement of plaintext emoji to Unicode emoji
- if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
- // The first matched group includes just the matched plaintext emoji
- const emojiMatch = REGEX_EMOJI_WHITESPACE.exec(text.slice(0, currentStartOffset));
- if (emojiMatch) {
- // plaintext -> hex unicode
- const emojiUc = asciiList[emojiMatch[1]];
- // hex unicode -> shortname -> actual unicode
- const unicodeEmoji = shortnameToUnicode(EMOJI_UNICODE_TO_SHORTNAME[emojiUc]);
+ // Automatic replacement of plaintext emoji to Unicode emoji
+ if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
+ // The first matched group includes just the matched plaintext emoji
+ const emojiMatch = REGEX_EMOJI_WHITESPACE.exec(text.slice(0, currentStartOffset));
+ if (emojiMatch) {
+ // plaintext -> hex unicode
+ const emojiUc = asciiList[emojiMatch[1]];
+ // hex unicode -> shortname -> actual unicode
+ 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,
- });
- change = change.insertTextAtRange(range, unicodeEmoji);
- editorState = change.value;
+ const range = Range.create({
+ anchorKey: editorState.selection.startKey,
+ anchorOffset: currentStartOffset - emojiMatch[1].length - 1,
+ focusKey: editorState.selection.startKey,
+ focusOffset: currentStartOffset,
+ });
+ change = change.insertTextAtRange(range, unicodeEmoji);
+ editorState = change.value;
+ }
}
}
@@ -444,13 +465,15 @@ export default class MessageComposerInput extends React.Component {
let editorState = null;
if (enabled) {
+ // for simplicity when roundtripping, we use slate-md-serializer rather than commonmark
+ editorState = this.md.deserialize(this.plainWithMdPills.serialize(this.state.editorState));
+
+ // the alternative would be something like:
+ //
// const sourceWithPills = this.plainWithMdPills.serialize(this.state.editorState);
// const markdown = new Markdown(sourceWithPills);
// editorState = this.html.deserialize(markdown.toHTML());
- // we don't really want a custom MD parser hanging around, but the
- // alternative would be:
- editorState = this.md.deserialize(this.plainWithMdPills.serialize(this.state.editorState));
} else {
// let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
// value = ContentState.createFromText(markdown);
@@ -547,6 +570,8 @@ export default class MessageComposerInput extends React.Component {
let newState: ?Value = null;
+ const DEFAULT_NODE = 'paragraph';
+
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
if (this.state.isRichtextEnabled) {
const type = command;
@@ -725,11 +750,14 @@ export default class MessageComposerInput extends React.Component {
*/
handleReturn = (ev) => {
if (ev.shiftKey) {
+ // FIXME: we should insert a equivalent rather than letting Slate
+ // split the current block, otherwise
will be split into two paragraphs
+ // and it'll look like a double line-break.
return;
}
if (this.state.editorState.blocks.some(
- block => block in ['code-block', 'block-quote', 'bulleted-list', 'numbered-list']
+ block => ['code-block', 'block-quote', 'list-item'].includes(block.type)
)) {
// allow the user to terminate blocks by hitting return rather than sending a msg
return;
@@ -788,47 +816,25 @@ export default class MessageComposerInput extends React.Component {
const mustSendHTML = Boolean(replyingToEv);
if (this.state.isRichtextEnabled) {
-/*
// We should only send HTML if any block is styled or contains inline style
let shouldSendHTML = false;
if (mustSendHTML) shouldSendHTML = true;
- const blocks = contentState.getBlocksAsArray();
- if (blocks.some((block) => block.getType() !== 'unstyled')) {
- shouldSendHTML = true;
- } else {
- const characterLists = blocks.map((block) => block.getCharacterList());
- // For each block of characters, determine if any inline styles are applied
- // and if yes, send HTML
- characterLists.forEach((characters) => {
- const numberOfStylesForCharacters = characters.map(
- (character) => character.getStyle().toArray().length,
- ).toArray();
- // If any character has more than 0 inline styles applied, send HTML
- if (numberOfStylesForCharacters.some((styles) => styles > 0)) {
- shouldSendHTML = true;
- }
- });
- }
if (!shouldSendHTML) {
- const hasLink = blocks.some((block) => {
- return block.getCharacterList().filter((c) => {
- const entityKey = c.getEntity();
- return entityKey && contentState.getEntity(entityKey).getType() === 'LINK';
- }).size > 0;
+ shouldSendHTML = !!editorState.document.findDescendant(node => {
+ // N.B. node.getMarks() might be private?
+ return ((node.object === 'block' && node.type !== 'line') ||
+ (node.object === 'inline') ||
+ (node.object === 'text' && node.getMarks().size > 0));
});
- shouldSendHTML = hasLink;
}
-*/
+
contentText = this.plainWithPlainPills.serialize(editorState);
if (contentText === '') return true;
- let shouldSendHTML = true;
if (shouldSendHTML) {
- contentHTML = HtmlUtils.processHtmlForSending(
- RichText.editorStateToHTML(editorState),
- );
+ contentHTML = this.html.serialize(editorState); // HtmlUtils.processHtmlForSending();
}
} else {
const sourceWithPills = this.plainWithMdPills.serialize(editorState);
@@ -1047,7 +1053,7 @@ export default class MessageComposerInput extends React.Component {
marks: editorState.activeMarks,
// XXX: shouldn't we return all the types of blocks in the current selection,
// not just the anchor?
- blockType: editorState.anchorBlock.type,
+ blockType: editorState.anchorBlock ? editorState.anchorBlock.type : null,
};
}
@@ -1121,6 +1127,10 @@ export default class MessageComposerInput extends React.Component {
const { attributes, children, node, isSelected } = props;
switch (node.type) {
+ case 'line':
+ // ideally we'd return { children } , but as this isn't
+ // a valid react component, we don't have much choice.
+ return
{children}
;
case 'paragraph':
return
{children}
;
case 'block-quote':
@@ -1138,7 +1148,7 @@ export default class MessageComposerInput extends React.Component {
case 'numbered-list':
return {children};
case 'code-block':
- return
{children}
;
+ return
{children}
;
case 'pill': {
const { data } = node;
const url = data.get('url');
@@ -1187,15 +1197,15 @@ export default class MessageComposerInput extends React.Component {
const { children, mark, attributes } = props;
switch (mark.type) {
case 'bold':
- return {children};
+ return {children};
case 'italic':
- return {children};
+ return {children};
case 'code':
- return {children};
+ return {children};
case 'underline':
- return {children};
+ return {children};
case 'strikethrough':
- return {children};
+ return {children};
}
};
@@ -1219,7 +1229,12 @@ 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.
- return editorState.document.getDescendant(editorState.selection.anchorKey).text;
+ if (editorState.selection.anchorKey) {
+ return editorState.document.getDescendant(editorState.selection.anchorKey).text;
+ }
+ else {
+ return '';
+ }
}
getSelectionRange(editorState: Value) {
From a4d9338cf0d63fa6f637a96bbb52694f97bd791a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 20:38:07 +0100
Subject: [PATCH 037/846] let backspace delete list nodes in RTE
---
.../views/rooms/MessageComposerInput.js | 29 ++++++++++++++++---
1 file changed, 25 insertions(+), 4 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index ae4d5b6264..ab104f825a 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -77,6 +77,10 @@ const ENTITY_TYPES = {
AT_ROOM_PILL: 'ATROOMPILL',
};
+// the Slate node type to default to for unstyled text when in RTE mode.
+// (we use 'line' for oneliners however)
+const DEFAULT_NODE = 'paragraph';
+
function onSendMessageFailed(err, room) {
// XXX: temporary logging to try to diagnose
@@ -152,13 +156,13 @@ export default class MessageComposerInput extends React.Component {
if (obj.object === 'block' || obj.object === 'inline') {
return this.renderNode({
node: obj,
- children: children,
+ children: children,
});
}
else if (obj.object === 'mark') {
return this.renderMark({
mark: obj,
- children: children,
+ children: children,
});
}
}
@@ -548,6 +552,8 @@ export default class MessageComposerInput extends React.Component {
switch (ev.keyCode) {
case KeyCode.ENTER:
return this.handleReturn(ev);
+ case KeyCode.BACKSPACE:
+ return this.onBackspace(ev);
case KeyCode.UP:
return this.onVerticalArrow(ev, true);
case KeyCode.DOWN:
@@ -562,6 +568,23 @@ export default class MessageComposerInput extends React.Component {
}
};
+ onBackspace = (ev: Event): boolean => {
+ if (this.state.isRichtextEnabled) {
+ // let backspace exit lists
+ const isList = this.hasBlock('list-item');
+ if (isList) {
+ const change = this.state.editorState.change();
+ change
+ .setBlocks(DEFAULT_NODE)
+ .unwrapBlock('bulleted-list')
+ .unwrapBlock('numbered-list');
+ this.onChange(change);
+ return true;
+ }
+ }
+ return;
+ };
+
handleKeyCommand = (command: string): boolean => {
if (command === 'toggle-mode') {
this.enableRichtext(!this.state.isRichtextEnabled);
@@ -570,8 +593,6 @@ export default class MessageComposerInput extends React.Component {
let newState: ?Value = null;
- const DEFAULT_NODE = 'paragraph';
-
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
if (this.state.isRichtextEnabled) {
const type = command;
From 58670cc3e54114c00f5bccf43d21440e5c3ceec8 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 21:14:39 +0100
Subject: [PATCH 038/846] exit list more sanely on backspace
---
src/components/views/rooms/MessageComposerInput.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index ab104f825a..6eadbae5ec 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -572,8 +572,9 @@ export default class MessageComposerInput extends React.Component {
if (this.state.isRichtextEnabled) {
// let backspace exit lists
const isList = this.hasBlock('list-item');
- if (isList) {
- const change = this.state.editorState.change();
+ const { editorState } = this.state;
+ if (isList && editorState.anchorOffset == 0) {
+ const change = editorState.change();
change
.setBlocks(DEFAULT_NODE)
.unwrapBlock('bulleted-list')
From d426c3474f2b5703b5c1f69b5ae1313a791c8a6d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 21:36:22 +0100
Subject: [PATCH 039/846] fix strikethough & code, improve shift-return &
backspace
---
.../views/rooms/MessageComposerInput.js | 29 ++++++++++++-------
1 file changed, 19 insertions(+), 10 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 6eadbae5ec..d7884e3c83 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -551,9 +551,9 @@ export default class MessageComposerInput extends React.Component {
switch (ev.keyCode) {
case KeyCode.ENTER:
- return this.handleReturn(ev);
+ return this.handleReturn(ev, change);
case KeyCode.BACKSPACE:
- return this.onBackspace(ev);
+ return this.onBackspace(ev, change);
case KeyCode.UP:
return this.onVerticalArrow(ev, true);
case KeyCode.DOWN:
@@ -568,19 +568,27 @@ export default class MessageComposerInput extends React.Component {
}
};
- onBackspace = (ev: Event): boolean => {
+ onBackspace = (ev: Event, change: Change): Change => {
if (this.state.isRichtextEnabled) {
// let backspace exit lists
const isList = this.hasBlock('list-item');
const { editorState } = this.state;
+
if (isList && editorState.anchorOffset == 0) {
- const change = editorState.change();
change
.setBlocks(DEFAULT_NODE)
.unwrapBlock('bulleted-list')
.unwrapBlock('numbered-list');
- this.onChange(change);
- return true;
+ return change;
+ }
+ else if (editorState.anchorOffset == 0 &&
+ (this.hasBlock('block-quote') ||
+ this.hasBlock('heading-one') ||
+ this.hasBlock('heading-two') ||
+ this.hasBlock('heading-three') ||
+ this.hasBlock('code-block')))
+ {
+ return change.setBlocks(DEFAULT_NODE);
}
}
return;
@@ -770,12 +778,13 @@ export default class MessageComposerInput extends React.Component {
return true;
};
*/
- handleReturn = (ev) => {
+ handleReturn = (ev, change) => {
if (ev.shiftKey) {
+
// FIXME: we should insert a equivalent rather than letting Slate
// split the current block, otherwise
will be split into two paragraphs
// and it'll look like a double line-break.
- return;
+ return change.insertText('\n');
}
if (this.state.editorState.blocks.some(
@@ -1235,11 +1244,11 @@ export default class MessageComposerInput extends React.Component {
e.preventDefault(); // don't steal focus from the editor!
const command = {
- code: 'code-block',
+ // code: 'code-block', // let's have the button do inline code for now
quote: 'block-quote',
bullet: 'bulleted-list',
numbullet: 'numbered-list',
- strike: 'strike-through',
+ strike: 'strikethrough',
}[name] || name;
this.handleKeyCommand(command);
};
From 1536ab433acf2ad5bed2eff14e9e9e8534fc2433 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 22:05:31 +0100
Subject: [PATCH 040/846] make file pasting work again
---
.../views/rooms/MessageComposerInput.js | 19 ++++++++++++++-----
1 file changed, 14 insertions(+), 5 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index d7884e3c83..c783a7dd7f 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
import { Editor } from 'slate-react';
+import { getEventTransfer } from 'slate-react';
import { Value, Document, Event, Inline, Text, Range, Node } from 'slate';
import Html from 'slate-html-serializer';
@@ -755,6 +756,18 @@ export default class MessageComposerInput extends React.Component {
}
return false;
};
+
+ onPaste = (event: Event, change: Change, editor: Editor): Change => {
+ const transfer = getEventTransfer(event);
+
+ if (transfer.type === "files") {
+ return this.props.onFilesPasted(transfer.files);
+ }
+ if (transfer.type === "html") {
+
+ }
+ };
+
/*
onTextPasted = (text: string, html?: string) => {
const currentSelection = this.state.editorState.getSelection();
@@ -1331,14 +1344,10 @@ export default class MessageComposerInput extends React.Component {
value={this.state.editorState}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
+ onPaste={this.onPaste}
renderNode={this.renderNode}
renderMark={this.renderMark}
spellCheck={true}
- /*
- handlePastedText={this.onTextPasted}
- handlePastedFiles={this.props.onFilesPasted}
- stripPastedStyles={!this.state.isRichtextEnabled}
- */
/>
From 1f05aea884de58efda88c9c3327e8a4e4a06d594 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 23:33:07 +0100
Subject: [PATCH 041/846] make HTML pasting work
---
.../views/rooms/MessageComposerInput.js | 78 +++++++++++++------
1 file changed, 53 insertions(+), 25 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index c783a7dd7f..6c178ce078 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -82,6 +82,32 @@ const ENTITY_TYPES = {
// (we use 'line' for oneliners however)
const DEFAULT_NODE = 'paragraph';
+// map HTML elements through to our Slate schema node types
+// used for the HTML deserializer.
+// (We don't use the same names so that they are closer to the MD serializer's schema)
+const BLOCK_TAGS = {
+ p: 'paragraph',
+ blockquote: 'block-quote',
+ ul: 'bulleted-list',
+ h1: 'heading-one',
+ h2: 'heading-two',
+ h3: 'heading-three',
+ li: 'list-item',
+ ol: 'numbered-list',
+ pre: 'code-block',
+};
+
+const MARK_TAGS = {
+ strong: 'bold',
+ b: 'bold', // deprecated
+ em: 'italic',
+ i: 'italic', // deprecated
+ code: 'code',
+ u: 'underline',
+ del: 'strikethrough',
+ strike: 'strikethrough', // deprecated
+ s: 'strikethrough', // deprecated
+};
function onSendMessageFailed(err, room) {
// XXX: temporary logging to try to diagnose
@@ -153,6 +179,25 @@ export default class MessageComposerInput extends React.Component {
this.html = new Html({
rules: [
{
+ deserialize: (el, next) => {
+ const tag = el.tagName.toLowerCase();
+ let type = BLOCK_TAGS[tag];
+ if (type) {
+ return {
+ object: 'block',
+ type: type,
+ nodes: next(el.childNodes),
+ }
+ }
+ type = MARK_TAGS[tag];
+ if (type) {
+ return {
+ object: 'mark',
+ type: type,
+ nodes: next(el.childNodes),
+ }
+ }
+ },
serialize: (obj, children) => {
if (obj.object === 'block' || obj.object === 'inline') {
return this.renderNode({
@@ -763,34 +808,17 @@ export default class MessageComposerInput extends React.Component {
if (transfer.type === "files") {
return this.props.onFilesPasted(transfer.files);
}
- if (transfer.type === "html") {
-
+ else if (transfer.type === "html") {
+ const fragment = this.html.deserialize(transfer.html);
+ if (this.state.isRichtextEnabled) {
+ return change.insertFragment(fragment.document);
+ }
+ else {
+ return change.insertText(this.md.serialize(fragment));
+ }
}
};
-/*
- onTextPasted = (text: string, html?: string) => {
- const currentSelection = this.state.editorState.getSelection();
- const currentContent = this.state.editorState.getCurrentContent();
-
- let contentState = null;
- if (html && this.state.isRichtextEnabled) {
- contentState = Modifier.replaceWithFragment(
- currentContent,
- currentSelection,
- RichText.htmlToContentState(html).getBlockMap(),
- );
- } else {
- contentState = Modifier.replaceText(currentContent, currentSelection, text);
- }
-
- let newEditorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
-
- newEditorState = EditorState.forceSelection(newEditorState, contentState.getSelectionAfter());
- this.onEditorContentChanged(newEditorState);
- return true;
- };
-*/
handleReturn = (ev, change) => {
if (ev.shiftKey) {
From 572a31334fa87b6c1fc8e1b39962f0a6f823b06e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 23:34:30 +0100
Subject: [PATCH 042/846] add h4, h5 and h6
---
.../views/rooms/MessageComposerInput.js | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 6c178ce078..30461ca816 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -92,6 +92,9 @@ const BLOCK_TAGS = {
h1: 'heading-one',
h2: 'heading-two',
h3: 'heading-three',
+ h4: 'heading-four,
+ h5: 'heading-five',
+ h6: 'heading-six',
li: 'list-item',
ol: 'numbered-list',
pre: 'code-block',
@@ -632,6 +635,9 @@ export default class MessageComposerInput extends React.Component {
this.hasBlock('heading-one') ||
this.hasBlock('heading-two') ||
this.hasBlock('heading-three') ||
+ this.hasBlock('heading-four') ||
+ this.hasBlock('heading-five') ||
+ this.hasBlock('heading-six') ||
this.hasBlock('code-block')))
{
return change.setBlocks(DEFAULT_NODE);
@@ -687,6 +693,9 @@ export default class MessageComposerInput extends React.Component {
case 'heading-one':
case 'heading-two':
case 'heading-three':
+ case 'heading-four':
+ case 'heading-five':
+ case 'heading-six':
case 'list-item':
case 'code-block': {
const isActive = this.hasBlock(type);
@@ -1215,6 +1224,12 @@ export default class MessageComposerInput extends React.Component {
return
{children}
;
case 'heading-three':
return
{children}
;
+ case 'heading-four':
+ return
{children}
;
+ case 'heading-five':
+ return
{children}
;
+ case 'heading-six':
+ return
{children}
;
case 'list-item':
return
{children}
;
case 'numbered-list':
From 65f0b0571902f723fefee82b90a62c47fc73a54c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 23:40:22 +0100
Subject: [PATCH 043/846] fix typo
---
src/components/views/rooms/MessageComposerInput.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 30461ca816..a426d69918 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -92,7 +92,7 @@ const BLOCK_TAGS = {
h1: 'heading-one',
h2: 'heading-two',
h3: 'heading-three',
- h4: 'heading-four,
+ h4: 'heading-four',
h5: 'heading-five',
h6: 'heading-six',
li: 'list-item',
From 117519566e2721fa50e422db26b4baeab603b3bd Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sat, 19 May 2018 23:40:48 +0100
Subject: [PATCH 044/846] remove HRs from H1/H2s
---
res/css/views/rooms/_EventTile.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index ce2bf9c8a4..67c8b8b2d8 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -443,6 +443,7 @@ limitations under the License.
.mx_EventTile_content .markdown-body h2
{
font-size: 1.5em;
+ border-bottom: none ! important; // override GFM
}
.mx_EventTile_content .markdown-body a {
From f2116943c89c3b8ec4b58a270a5b22de7739ff98 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 00:17:11 +0100
Subject: [PATCH 045/846] switch schema to match the MD serializer
---
.../views/rooms/MessageComposerInput.js | 80 +++++++++----------
1 file changed, 39 insertions(+), 41 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index a426d69918..5126fb2813 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -84,17 +84,17 @@ const DEFAULT_NODE = 'paragraph';
// map HTML elements through to our Slate schema node types
// used for the HTML deserializer.
-// (We don't use the same names so that they are closer to the MD serializer's schema)
+// (The names here are chosen to match the MD serializer's schema for convenience)
const BLOCK_TAGS = {
p: 'paragraph',
blockquote: 'block-quote',
ul: 'bulleted-list',
- h1: 'heading-one',
- h2: 'heading-two',
- h3: 'heading-three',
- h4: 'heading-four',
- h5: 'heading-five',
- h6: 'heading-six',
+ h1: 'heading1',
+ h2: 'heading2',
+ h3: 'heading3',
+ h4: 'heading4',
+ h5: 'heading5',
+ h6: 'heading6',
li: 'list-item',
ol: 'numbered-list',
pre: 'code-block',
@@ -106,10 +106,10 @@ const MARK_TAGS = {
em: 'italic',
i: 'italic', // deprecated
code: 'code',
- u: 'underline',
- del: 'strikethrough',
- strike: 'strikethrough', // deprecated
- s: 'strikethrough', // deprecated
+ u: 'underlined',
+ del: 'deleted',
+ strike: 'deleted', // deprecated
+ s: 'deleted', // deprecated
};
function onSendMessageFailed(err, room) {
@@ -513,8 +513,8 @@ export default class MessageComposerInput extends React.Component {
enableRichtext(enabled: boolean) {
if (enabled === this.state.isRichtextEnabled) return;
- // FIXME: this conversion should be handled in the store, surely
- // i.e. "convert my current composer value into Rich or MD, as ComposerHistoryManager already does"
+ // FIXME: this duplicates similar conversions which happen in the history & store.
+ // they should be factored out.
let editorState = null;
if (enabled) {
@@ -540,6 +540,7 @@ export default class MessageComposerInput extends React.Component {
editorState: this.createEditorState(enabled, editorState),
isRichtextEnabled: enabled,
});
+
SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled);
};
@@ -588,7 +589,7 @@ export default class MessageComposerInput extends React.Component {
[KeyCode.KEY_M]: 'toggle-mode',
[KeyCode.KEY_B]: 'bold',
[KeyCode.KEY_I]: 'italic',
- [KeyCode.KEY_U]: 'underline',
+ [KeyCode.KEY_U]: 'underlined',
[KeyCode.KEY_J]: 'code',
}[ev.keyCode];
@@ -632,12 +633,12 @@ export default class MessageComposerInput extends React.Component {
}
else if (editorState.anchorOffset == 0 &&
(this.hasBlock('block-quote') ||
- this.hasBlock('heading-one') ||
- this.hasBlock('heading-two') ||
- this.hasBlock('heading-three') ||
- this.hasBlock('heading-four') ||
- this.hasBlock('heading-five') ||
- this.hasBlock('heading-six') ||
+ this.hasBlock('heading1') ||
+ this.hasBlock('heading2') ||
+ this.hasBlock('heading3') ||
+ this.hasBlock('heading4') ||
+ this.hasBlock('heading5') ||
+ this.hasBlock('heading6') ||
this.hasBlock('code-block')))
{
return change.setBlocks(DEFAULT_NODE);
@@ -690,12 +691,12 @@ export default class MessageComposerInput extends React.Component {
// simple blocks
case 'paragraph':
case 'block-quote':
- case 'heading-one':
- case 'heading-two':
- case 'heading-three':
- case 'heading-four':
- case 'heading-five':
- case 'heading-six':
+ case 'heading1':
+ case 'heading2':
+ case 'heading3':
+ case 'heading4':
+ case 'heading5':
+ case 'heading6':
case 'list-item':
case 'code-block': {
const isActive = this.hasBlock(type);
@@ -716,8 +717,8 @@ export default class MessageComposerInput extends React.Component {
case 'bold':
case 'italic':
case 'code':
- case 'underline':
- case 'strikethrough': {
+ case 'underlined':
+ case 'deleted': {
change.toggleMark(type);
}
break;
@@ -830,10 +831,6 @@ export default class MessageComposerInput extends React.Component {
handleReturn = (ev, change) => {
if (ev.shiftKey) {
-
- // FIXME: we should insert a equivalent rather than letting Slate
- // split the current block, otherwise
will be split into two paragraphs
- // and it'll look like a double line-break.
return change.insertText('\n');
}
@@ -1218,17 +1215,17 @@ export default class MessageComposerInput extends React.Component {
return
{children}
;
case 'bulleted-list':
return
{children}
;
- case 'heading-one':
+ case 'heading1':
return
{children}
;
- case 'heading-two':
+ case 'heading2':
return
{children}
;
- case 'heading-three':
+ case 'heading3':
return
{children}
;
- case 'heading-four':
+ case 'heading4':
return
{children}
;
- case 'heading-five':
+ case 'heading5':
return
{children}
;
- case 'heading-six':
+ case 'heading6':
return
{children}
;
case 'list-item':
return
{children}
;
@@ -1289,9 +1286,9 @@ export default class MessageComposerInput extends React.Component {
return {children};
case 'code':
return {children};
- case 'underline':
+ case 'underlined':
return {children};
- case 'strikethrough':
+ case 'deleted':
return {children};
}
};
@@ -1304,7 +1301,8 @@ export default class MessageComposerInput extends React.Component {
quote: 'block-quote',
bullet: 'bulleted-list',
numbullet: 'numbered-list',
- strike: 'strikethrough',
+ underline: 'underlined',
+ strike: 'deleted',
}[name] || name;
this.handleKeyCommand(command);
};
From c3a6a41e5ded05be0bb370644cbd5e0079a821bf Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 00:49:29 +0100
Subject: [PATCH 046/846] support links in RTE
---
src/autocomplete/PlainWithPillsSerializer.js | 2 +-
.../views/rooms/MessageComposerInput.js | 31 +++++++++++++++++--
2 files changed, 30 insertions(+), 3 deletions(-)
diff --git a/src/autocomplete/PlainWithPillsSerializer.js b/src/autocomplete/PlainWithPillsSerializer.js
index 0e850f2a33..8fa73be6a3 100644
--- a/src/autocomplete/PlainWithPillsSerializer.js
+++ b/src/autocomplete/PlainWithPillsSerializer.js
@@ -69,7 +69,7 @@ class PlainWithPillsSerializer {
case 'plain':
return node.data.get('completion');
case 'md':
- return `[${ node.text }](${ node.data.get('url') })`;
+ return `[${ node.text }](${ node.data.get('href') })`;
case 'id':
return node.data.get('completionId') || node.data.get('completion');
}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 5126fb2813..5853525832 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -200,6 +200,31 @@ export default class MessageComposerInput extends React.Component {
nodes: next(el.childNodes),
}
}
+ // special case links
+ if (tag === 'a') {
+ const href = el.getAttribute('href');
+ let m = href.match(MATRIXTO_URL_PATTERN);
+ if (m) {
+ return {
+ object: 'inline',
+ type: 'pill',
+ data: {
+ href,
+ completion: el.innerText,
+ completionId: m[1],
+ },
+ isVoid: true,
+ }
+ }
+ else {
+ return {
+ object: 'inline',
+ type: 'link',
+ data: { href },
+ nodes: next(el.childNodes),
+ }
+ }
+ }
},
serialize: (obj, children) => {
if (obj.object === 'block' || obj.object === 'inline') {
@@ -1161,7 +1186,7 @@ export default class MessageComposerInput extends React.Component {
if (href) {
inline = Inline.create({
type: 'pill',
- data: { completion, completionId, url: href },
+ data: { completion, completionId, href },
// we can't put text in here otherwise the editor tries to select it
isVoid: true,
});
@@ -1233,9 +1258,11 @@ export default class MessageComposerInput extends React.Component {
return {children};
case 'code-block':
return
{children}
;
+ case 'link':
+ return {children};
case 'pill': {
const { data } = node;
- const url = data.get('url');
+ const url = data.get('href');
const completion = data.get('completion');
const shouldShowPillAvatar = !SettingsStore.getValue("Pill.shouldHidePillAvatar");
From d76a2aba9baa055614effe28501ed83800e07804 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 01:07:25 +0100
Subject: [PATCH 047/846] use as our root node everywhere and fix blank
roundtrip bug
---
.../views/rooms/MessageComposerInput.js | 23 +++++++++++--------
1 file changed, 14 insertions(+), 9 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 5853525832..754f208373 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -78,8 +78,7 @@ const ENTITY_TYPES = {
AT_ROOM_PILL: 'ATROOMPILL',
};
-// the Slate node type to default to for unstyled text when in RTE mode.
-// (we use 'line' for oneliners however)
+// the Slate node type to default to for unstyled text
const DEFAULT_NODE = 'paragraph';
// map HTML elements through to our Slate schema node types
@@ -259,7 +258,7 @@ export default class MessageComposerInput extends React.Component {
}
else {
// ...or create a new one.
- return Plain.deserialize('')
+ return Plain.deserialize('', { defaultBlock: DEFAULT_NODE });
}
}
@@ -544,7 +543,13 @@ export default class MessageComposerInput extends React.Component {
let editorState = null;
if (enabled) {
// for simplicity when roundtripping, we use slate-md-serializer rather than commonmark
- editorState = this.md.deserialize(this.plainWithMdPills.serialize(this.state.editorState));
+ const markdown = this.plainWithMdPills.serialize(this.state.editorState);
+ if (markdown !== '') {
+ editorState = this.md.deserialize(markdown);
+ }
+ else {
+ editorState = Plain.deserialize('', { defaultBlock: DEFAULT_NODE });
+ }
// the alternative would be something like:
//
@@ -556,7 +561,10 @@ export default class MessageComposerInput extends React.Component {
// let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
// value = ContentState.createFromText(markdown);
- editorState = Plain.deserialize(this.md.serialize(this.state.editorState));
+ editorState = Plain.deserialize(
+ this.md.serialize(this.state.editorState),
+ { defaultBlock: DEFAULT_NODE }
+ );
}
Analytics.setRichtextMode(enabled);
@@ -937,6 +945,7 @@ export default class MessageComposerInput extends React.Component {
if (contentText === '') return true;
if (shouldSendHTML) {
+ // FIXME: should we strip out the surrounding ?
contentHTML = this.html.serialize(editorState); // HtmlUtils.processHtmlForSending();
}
} else {
@@ -1230,10 +1239,6 @@ export default class MessageComposerInput extends React.Component {
const { attributes, children, node, isSelected } = props;
switch (node.type) {
- case 'line':
- // ideally we'd return { children } , but as this isn't
- // a valid react component, we don't have much choice.
- return
{children}
;
case 'paragraph':
return
{children}
;
case 'block-quote':
From a0d88a829da8ee71b3a7910e1c534f808727f36a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 02:53:32 +0100
Subject: [PATCH 048/846] support sending inlines from the RTE.
includes a horrific hack for sending emoji until
https://github.com/ianstormtaylor/slate/pull/1854 is merged
or otherwise solved
---
.../views/rooms/MessageComposerInput.js | 36 ++++++++++++++++---
1 file changed, 32 insertions(+), 4 deletions(-)
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;
From e9cabf0e8564a30f7e0432fac063144e4a28a8be Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 03:17:51 +0100
Subject: [PATCH 049/846] add pill and emoji serialisation to Md
---
.../views/rooms/MessageComposerInput.js | 26 ++++++++++++++++---
1 file changed, 23 insertions(+), 3 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 8c5ab2394f..d1bf4e4544 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -177,8 +177,23 @@ export default class MessageComposerInput extends React.Component {
this.plainWithMdPills = new PlainWithPillsSerializer({ pillFormat: 'md' });
this.plainWithIdPills = new PlainWithPillsSerializer({ pillFormat: 'id' });
this.plainWithPlainPills = new PlainWithPillsSerializer({ pillFormat: 'plain' });
- this.md = new Md();
- this.html = new Html({
+
+ this.md = new Md({
+ rules: [
+ {
+ serialize: (obj, children) => {
+ switch (obj.type) {
+ case 'pill':
+ return `[${ obj.data.get('completion') }](${ obj.data.get('href') })`;
+ case 'emoji':
+ return obj.data.get('emojiUnicode');
+ }
+ }
+ }
+ ]
+ });
+
+ this.html = new Html({
rules: [
{
deserialize: (el, next) => {
@@ -567,8 +582,13 @@ export default class MessageComposerInput extends React.Component {
if (enabled) {
// for simplicity when roundtripping, we use slate-md-serializer rather than commonmark
const markdown = this.plainWithMdPills.serialize(this.state.editorState);
+
+ // weirdly, the Md serializer can't deserialize '' to a valid Value...
if (markdown !== '') {
- // weirdly, the Md serializer can't deserialize '' to a valid Value...
+ // FIXME: the MD deserializer doesn't know how to deserialize pills
+ // and gives no hooks for doing so, so we should manually fix up
+ // the editorState first in order to preserve them.
+
editorState = this.md.deserialize(markdown);
}
else {
From ad7782bc22628f633f147f3df3066a0d106269a0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 14:07:33 +0100
Subject: [PATCH 050/846] remove the remaining Draft specific stuff from
RichText
---
src/RichText.js | 150 ------------------------------------------------
1 file changed, 150 deletions(-)
diff --git a/src/RichText.js b/src/RichText.js
index e3162a4e2c..65b5dad107 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -18,48 +18,11 @@ limitations under the License.
import React from 'react';
-/*
-import {
- Editor,
- EditorState,
- Modifier,
- ContentState,
- ContentBlock,
- convertFromHTML,
- DefaultDraftBlockRenderMap,
- DefaultDraftInlineStyle,
- CompositeDecorator,
- SelectionState,
- Entity,
-} from 'draft-js';
-import { stateToMarkdown as __stateToMarkdown } from 'draft-js-export-markdown';
-*/
-
-import Html from 'slate-html-serializer';
-
import * as sdk from './index';
import * as emojione from 'emojione';
import { SelectionRange } from "./autocomplete/Autocompleter";
-const MARKDOWN_REGEX = {
- LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
- ITALIC: /([\*_])([\w\s]+?)\1/g,
- BOLD: /([\*_])\1([\w\s]+?)\1\1/g,
- HR: /(\n|^)((-|\*|_) *){3,}(\n|$)/g,
- CODE: /`[^`]*`/g,
- STRIKETHROUGH: /~{2}[^~]*~{2}/g,
-};
-
-const ZWS_CODE = 8203;
-const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
-
-export function stateToMarkdown(state) {
- return __stateToMarkdown(state)
- .replace(
- ZWS, // draft-js-export-markdown adds these
- ''); // this is *not* a zero width space, trust me :)
-}
export function unicodeToEmojiUri(str) {
let replaceWith, unicode, alt;
@@ -87,116 +50,3 @@ export function unicodeToEmojiUri(str) {
return str;
}
-
-/**
- * Utility function that looks for regex matches within a ContentBlock and invokes {callback} with (start, end)
- * From https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
- */
-function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: number, end: number) => any) {
- const text = contentBlock.getText();
- let matchArr, start;
- while ((matchArr = regex.exec(text)) !== null) {
- start = matchArr.index;
- callback(start, start + matchArr[0].length);
- }
-}
-
-/**
- * Returns a composite decorator which has access to provided scope.
- */
-export function getScopedRTDecorators(scope: any): CompositeDecorator {
- return [emojiDecorator];
-}
-
-export function getScopedMDDecorators(scope: any): CompositeDecorator {
- const markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map(
- (style) => ({
- strategy: (contentState, contentBlock, callback) => {
- return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
- },
- component: (props) => (
-
- { props.children }
-
- ),
- }));
-
- markdownDecorators.push({
- strategy: (contentState, contentBlock, callback) => {
- return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback);
- },
- component: (props) => (
-
- { props.children }
-
- ),
- });
- // markdownDecorators.push(emojiDecorator);
- // TODO Consider renabling "syntax highlighting" when we can do it properly
- return [emojiDecorator];
-}
-
-/**
- * Passes rangeToReplace to modifyFn and replaces it in contentState with the result.
- */
-export function modifyText(contentState: ContentState, rangeToReplace: SelectionState,
- modifyFn: (text: string) => string, inlineStyle, entityKey): ContentState {
- let getText = (key) => contentState.getBlockForKey(key).getText(),
- startKey = rangeToReplace.getStartKey(),
- startOffset = rangeToReplace.getStartOffset(),
- endKey = rangeToReplace.getEndKey(),
- endOffset = rangeToReplace.getEndOffset(),
- text = "";
-
-
- for (let currentKey = startKey;
- currentKey && currentKey !== endKey;
- currentKey = contentState.getKeyAfter(currentKey)) {
- const blockText = getText(currentKey);
- text += blockText.substring(startOffset, blockText.length);
-
- // from now on, we'll take whole blocks
- startOffset = 0;
- }
-
- // add remaining part of last block
- text += getText(endKey).substring(startOffset, endOffset);
-
- return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), inlineStyle, entityKey);
-}
-
-/**
- * Computes the plaintext offsets of the given SelectionState.
- * Note that this inherently means we make assumptions about what that means (no separator between ContentBlocks, etc)
- * Used by autocomplete to show completions when the current selection lies within, or at the edges of a command.
- */
-export function selectionStateToTextOffsets(selectionState: SelectionState,
- contentBlocks: Array): {start: number, end: number} {
- let offset = 0, start = 0, end = 0;
- for (const block of contentBlocks) {
- if (selectionState.getStartKey() === block.getKey()) {
- start = offset + selectionState.getStartOffset();
- }
- if (selectionState.getEndKey() === block.getKey()) {
- end = offset + selectionState.getEndOffset();
- break;
- }
- offset += block.getLength();
- }
-
- return {
- start,
- end,
- };
-}
-
-export function hasMultiLineSelection(editorState: EditorState): boolean {
- const selectionState = editorState.getSelection();
- const anchorKey = selectionState.getAnchorKey();
- const currentContent = editorState.getCurrentContent();
- const currentContentBlock = currentContent.getBlockForKey(anchorKey);
- const start = selectionState.getStartOffset();
- const end = selectionState.getEndOffset();
- const selectedText = currentContentBlock.getText().slice(start, end);
- return selectedText.includes('\n');
-}
From c5676eef89aa9784a78040ddd6ed16e117aa7d80 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 14:32:06 +0100
Subject: [PATCH 051/846] comment out more old draft stuff
---
src/HtmlUtils.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 7ca404be31..4c1564297d 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -112,7 +112,7 @@ export function charactersToImageNode(alt, useSvg, ...unicode) {
/>;
}
-
+/*
export function processHtmlForSending(html: string): string {
const contentDiv = document.createElement('div');
contentDiv.innerHTML = html;
@@ -146,6 +146,7 @@ export function processHtmlForSending(html: string): string {
return contentHTML;
}
+*/
/*
* Given an untrusted HTML string, return a React node with an sanitized version
From 9aba046f21d67b19b5e3b5c4a13814e919f56446 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 14:32:20 +0100
Subject: [PATCH 052/846] fix MD pill serialization
---
src/autocomplete/PlainWithPillsSerializer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/autocomplete/PlainWithPillsSerializer.js b/src/autocomplete/PlainWithPillsSerializer.js
index 8fa73be6a3..7428241b05 100644
--- a/src/autocomplete/PlainWithPillsSerializer.js
+++ b/src/autocomplete/PlainWithPillsSerializer.js
@@ -69,7 +69,7 @@ class PlainWithPillsSerializer {
case 'plain':
return node.data.get('completion');
case 'md':
- return `[${ node.text }](${ node.data.get('href') })`;
+ return `[${ node.data.get('completion') }](${ node.data.get('href') })`;
case 'id':
return node.data.get('completionId') || node.data.get('completion');
}
From aac6866779f935a23e876a0ffc5efc5e881c7168 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 14:33:14 +0100
Subject: [PATCH 053/846] switch back to using commonmark for serialising MD
when roundtripping
and escape MD correctly when serialising via slate-md-serializer
---
.../views/rooms/MessageComposerInput.js | 60 +++++++++++--------
1 file changed, 36 insertions(+), 24 deletions(-)
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index d1bf4e4544..0d603d3135 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -182,11 +182,21 @@ export default class MessageComposerInput extends React.Component {
rules: [
{
serialize: (obj, children) => {
- switch (obj.type) {
- case 'pill':
- return `[${ obj.data.get('completion') }](${ obj.data.get('href') })`;
- case 'emoji':
- return obj.data.get('emojiUnicode');
+ if (obj.object === 'string') {
+ // escape any MD in it. i have no idea why the serializer doesn't
+ // do this already.
+ // TODO: this can probably be more robust - it doesn't consider
+ // indenting or lists for instance.
+ return children.replace(/([*_~`+])/g, '\\$1')
+ .replace(/^([>#\|])/g, '\\$1');
+ }
+ else if (obj.object === 'inline') {
+ switch (obj.type) {
+ case 'pill':
+ return `[${ obj.data.get('completion') }](${ obj.data.get('href') })`;
+ case 'emoji':
+ return obj.data.get('emojiUnicode');
+ }
}
}
}
@@ -580,27 +590,29 @@ export default class MessageComposerInput extends React.Component {
let editorState = null;
if (enabled) {
- // for simplicity when roundtripping, we use slate-md-serializer rather than commonmark
- const markdown = this.plainWithMdPills.serialize(this.state.editorState);
-
- // weirdly, the Md serializer can't deserialize '' to a valid Value...
- if (markdown !== '') {
- // FIXME: the MD deserializer doesn't know how to deserialize pills
- // and gives no hooks for doing so, so we should manually fix up
- // the editorState first in order to preserve them.
-
- editorState = this.md.deserialize(markdown);
- }
- else {
- editorState = Plain.deserialize('', { defaultBlock: DEFAULT_NODE });
- }
-
- // the alternative would be something like:
+ // for consistency when roundtripping, we could use slate-md-serializer rather than
+ // commonmark, but then we would lose pills as the MD deserialiser doesn't know about
+ // them and doesn't have any extensibility hooks.
//
- // const sourceWithPills = this.plainWithMdPills.serialize(this.state.editorState);
- // const markdown = new Markdown(sourceWithPills);
- // editorState = this.html.deserialize(markdown.toHTML());
+ // The code looks like this:
+ //
+ // const markdown = this.plainWithMdPills.serialize(this.state.editorState);
+ //
+ // // weirdly, the Md serializer can't deserialize '' to a valid Value...
+ // if (markdown !== '') {
+ // editorState = this.md.deserialize(markdown);
+ // }
+ // else {
+ // editorState = Plain.deserialize('', { defaultBlock: DEFAULT_NODE });
+ // }
+ // so, instead, we use commonmark proper (which is arguably more logical to the user
+ // anyway, as they'll expect the RTE view to match what they'll see in the timeline,
+ // but the HTML->MD conversion is anyone's guess).
+
+ const sourceWithPills = this.plainWithMdPills.serialize(this.state.editorState);
+ const markdown = new Markdown(sourceWithPills);
+ editorState = this.html.deserialize(markdown.toHTML());
} else {
// let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
// value = ContentState.createFromText(markdown);
From d799b7e424d54a52bc91d83ab17e06dead767964 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 16:30:39 +0100
Subject: [PATCH 054/846] refactor roundtripping into a single place
and fix isRichTextEnabled to be correctly camelCased everywhere...
---
src/ComposerHistoryManager.js | 34 +----
src/components/views/rooms/MessageComposer.js | 8 +-
.../views/rooms/MessageComposerInput.js | 129 ++++++++++--------
.../views/rooms/MessageComposerInput-test.js | 2 +-
4 files changed, 84 insertions(+), 89 deletions(-)
diff --git a/src/ComposerHistoryManager.js b/src/ComposerHistoryManager.js
index 28749ace15..f997e1d1cd 100644
--- a/src/ComposerHistoryManager.js
+++ b/src/ComposerHistoryManager.js
@@ -28,8 +28,8 @@ type MessageFormat = 'rich' | 'markdown';
class HistoryItem {
- // Keeping message for backwards-compatibility
- message: string;
+ // We store history items in their native format to ensure history is accurate
+ // and then convert them if our RTE has subsequently changed format.
value: Value;
format: MessageFormat = 'rich';
@@ -51,32 +51,6 @@ class HistoryItem {
format: this.format
};
}
-
- // FIXME: rather than supporting storing history in either format, why don't we pick
- // one canonical form?
- toValue(outputFormat: MessageFormat): Value {
- if (outputFormat === 'markdown') {
- if (this.format === 'rich') {
- // convert a rich formatted history entry to its MD equivalent
- return Plain.deserialize(Md.serialize(this.value));
- // return ContentState.createFromText(RichText.stateToMarkdown(contentState));
- }
- else if (this.format === 'markdown') {
- return this.value;
- }
- } else if (outputFormat === 'rich') {
- if (this.format === 'markdown') {
- // convert MD formatted string to its rich equivalent.
- return Md.deserialize(Plain.serialize(this.value));
- // return RichText.htmlToContentState(new Markdown(contentState.getPlainText()).toHTML());
- }
- else if (this.format === 'rich') {
- return this.value;
- }
- }
- console.error("unknown format -> outputFormat conversion");
- return this.value;
- }
}
export default class ComposerHistoryManager {
@@ -110,9 +84,9 @@ export default class ComposerHistoryManager {
sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item.toJSON()));
}
- getItem(offset: number, format: MessageFormat): ?Value {
+ getItem(offset: number): ?HistoryItem {
this.currentIndex = _clamp(this.currentIndex + offset, 0, this.lastIndex - 1);
const item = this.history[this.currentIndex];
- return item ? item.toValue(format) : null;
+ return item;
}
}
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 9aaa33f0fa..157dc9e704 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -46,7 +46,7 @@ export default class MessageComposer extends React.Component {
inputState: {
marks: [],
blockType: null,
- isRichtextEnabled: SettingsStore.getValue('MessageComposerInput.isRichTextEnabled'),
+ isRichTextEnabled: SettingsStore.getValue('MessageComposerInput.isRichTextEnabled'),
},
showFormatting: SettingsStore.getValue('MessageComposer.showFormatting'),
isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
@@ -227,7 +227,7 @@ export default class MessageComposer extends React.Component {
onToggleMarkdownClicked(e) {
e.preventDefault(); // don't steal focus from the editor!
- this.messageComposerInput.enableRichtext(!this.state.inputState.isRichtextEnabled);
+ this.messageComposerInput.enableRichtext(!this.state.inputState.isRichTextEnabled);
}
render() {
@@ -380,10 +380,10 @@ export default class MessageComposer extends React.Component {
{ formatButtons }
-
+ src={`img/button-md-${!this.state.inputState.isRichTextEnabled}.png`} />
${body}`);
- if (!this.state.isRichtextEnabled) {
+ if (!this.state.isRichTextEnabled) {
content = ContentState.createFromText(RichText.stateToMarkdown(content));
}
@@ -374,7 +374,7 @@ export default class MessageComposerInput extends React.Component {
startSelection,
blockMap);
startSelection = SelectionState.createEmpty(contentState.getFirstBlock().getKey());
- if (this.state.isRichtextEnabled) {
+ if (this.state.isRichTextEnabled) {
contentState = Modifier.setBlockType(contentState, startSelection, 'blockquote');
}
let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
@@ -582,52 +582,61 @@ export default class MessageComposerInput extends React.Component {
});
};
- enableRichtext(enabled: boolean) {
- if (enabled === this.state.isRichtextEnabled) return;
+ mdToRichEditorState(editorState: Value): Value {
+ // for consistency when roundtripping, we could use slate-md-serializer rather than
+ // commonmark, but then we would lose pills as the MD deserialiser doesn't know about
+ // them and doesn't have any extensibility hooks.
+ //
+ // The code looks like this:
+ //
+ // const markdown = this.plainWithMdPills.serialize(editorState);
+ //
+ // // weirdly, the Md serializer can't deserialize '' to a valid Value...
+ // if (markdown !== '') {
+ // editorState = this.md.deserialize(markdown);
+ // }
+ // else {
+ // editorState = Plain.deserialize('', { defaultBlock: DEFAULT_NODE });
+ // }
- // FIXME: this duplicates similar conversions which happen in the history & store.
- // they should be factored out.
+ // so, instead, we use commonmark proper (which is arguably more logical to the user
+ // anyway, as they'll expect the RTE view to match what they'll see in the timeline,
+ // but the HTML->MD conversion is anyone's guess).
+
+ const textWithMdPills = this.plainWithMdPills.serialize(editorState);
+ const markdown = new Markdown(textWithMdPills);
+ // HTML deserialize has custom rules to turn matrix.to links into pill objects.
+ return this.html.deserialize(markdown.toHTML());
+ }
+
+ richToMdEditorState(editorState: Value): Value {
+ // FIXME: this conversion loses pills (turning them into pure MD links).
+ // We need to add a pill-aware deserialize method
+ // to PlainWithPillsSerializer which recognises pills in raw MD and turns them into pills.
+ return Plain.deserialize(
+ // FIXME: we compile the MD out of the RTE state using slate-md-serializer
+ // which doesn't roundtrip symmetrically with commonmark, which we use for
+ // compiling MD out of the MD editor state above.
+ this.md.serialize(editorState),
+ { defaultBlock: DEFAULT_NODE }
+ );
+ }
+
+ enableRichtext(enabled: boolean) {
+ if (enabled === this.state.isRichTextEnabled) return;
let editorState = null;
if (enabled) {
- // for consistency when roundtripping, we could use slate-md-serializer rather than
- // commonmark, but then we would lose pills as the MD deserialiser doesn't know about
- // them and doesn't have any extensibility hooks.
- //
- // The code looks like this:
- //
- // const markdown = this.plainWithMdPills.serialize(this.state.editorState);
- //
- // // weirdly, the Md serializer can't deserialize '' to a valid Value...
- // if (markdown !== '') {
- // editorState = this.md.deserialize(markdown);
- // }
- // else {
- // editorState = Plain.deserialize('', { defaultBlock: DEFAULT_NODE });
- // }
-
- // so, instead, we use commonmark proper (which is arguably more logical to the user
- // anyway, as they'll expect the RTE view to match what they'll see in the timeline,
- // but the HTML->MD conversion is anyone's guess).
-
- const sourceWithPills = this.plainWithMdPills.serialize(this.state.editorState);
- const markdown = new Markdown(sourceWithPills);
- editorState = this.html.deserialize(markdown.toHTML());
+ editorState = this.mdToRichEditorState(this.state.editorState);
} else {
- // let markdown = RichText.stateToMarkdown(this.state.editorState.getCurrentContent());
- // value = ContentState.createFromText(markdown);
-
- editorState = Plain.deserialize(
- this.md.serialize(this.state.editorState),
- { defaultBlock: DEFAULT_NODE }
- );
+ editorState = this.richToMdEditorState(this.state.editorState);
}
Analytics.setRichtextMode(enabled);
this.setState({
editorState: this.createEditorState(enabled, editorState),
- isRichtextEnabled: enabled,
+ isRichTextEnabled: enabled,
}, ()=>{
this.refs.editor.focus();
});
@@ -710,7 +719,7 @@ export default class MessageComposerInput extends React.Component {
};
onBackspace = (ev: Event, change: Change): Change => {
- if (this.state.isRichtextEnabled) {
+ if (this.state.isRichTextEnabled) {
// let backspace exit lists
const isList = this.hasBlock('list-item');
const { editorState } = this.state;
@@ -740,14 +749,14 @@ export default class MessageComposerInput extends React.Component {
handleKeyCommand = (command: string): boolean => {
if (command === 'toggle-mode') {
- this.enableRichtext(!this.state.isRichtextEnabled);
+ this.enableRichtext(!this.state.isRichTextEnabled);
return true;
}
let newState: ?Value = null;
// 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) {
const type = command;
const { editorState } = this.state;
const change = editorState.change();
@@ -913,7 +922,7 @@ export default class MessageComposerInput extends React.Component {
// 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) {
+ if (this.state.isRichTextEnabled) {
return change.insertFragment(fragment.document);
}
else {
@@ -954,7 +963,7 @@ export default class MessageComposerInput extends React.Component {
if (cmd) {
if (!cmd.error) {
- this.historyManager.save(editorState, this.state.isRichtextEnabled ? 'rich' : 'markdown');
+ this.historyManager.save(editorState, this.state.isRichTextEnabled ? 'rich' : 'markdown');
this.setState({
editorState: this.createEditorState(),
});
@@ -986,7 +995,7 @@ export default class MessageComposerInput extends React.Component {
const replyingToEv = RoomViewStore.getQuotingEvent();
const mustSendHTML = Boolean(replyingToEv);
- if (this.state.isRichtextEnabled) {
+ if (this.state.isRichTextEnabled) {
// We should only send HTML if any block is styled or contains inline style
let shouldSendHTML = false;
@@ -1032,7 +1041,7 @@ export default class MessageComposerInput extends React.Component {
this.historyManager.save(
editorState,
- this.state.isRichtextEnabled ? 'rich' : 'markdown',
+ this.state.isRichTextEnabled ? 'rich' : 'markdown',
);
if (commandText && commandText.startsWith('/me')) {
@@ -1119,7 +1128,7 @@ export default class MessageComposerInput extends React.Component {
if (up) {
const scrollCorrection = editorNode.scrollTop;
const distanceFromTop = cursorRect.top - editorRect.top + scrollCorrection;
- console.log(`Cursor distance from editor top is ${distanceFromTop}`);
+ //console.log(`Cursor distance from editor top is ${distanceFromTop}`);
if (distanceFromTop < EDGE_THRESHOLD) {
navigateHistory = true;
}
@@ -1128,7 +1137,7 @@ export default class MessageComposerInput extends React.Component {
const scrollCorrection =
editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
const distanceFromBottom = editorRect.bottom - cursorRect.bottom + scrollCorrection;
- console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
+ //console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
if (distanceFromBottom < EDGE_THRESHOLD) {
navigateHistory = true;
}
@@ -1168,7 +1177,19 @@ export default class MessageComposerInput extends React.Component {
return;
}
- let editorState = this.historyManager.getItem(delta, this.state.isRichtextEnabled ? 'rich' : 'markdown');
+ let editorState;
+ const historyItem = this.historyManager.getItem(delta);
+ if (historyItem) {
+ if (historyItem.format === 'rich' && !this.state.isRichTextEnabled) {
+ editorState = this.richToMdEditorState(historyItem.value);
+ }
+ else if (historyItem.format === 'markdown' && this.state.isRichTextEnabled) {
+ editorState = this.mdToRichEditorState(historyItem.value);
+ }
+ else {
+ editorState = historyItem.value;
+ }
+ }
// Move selection to the end of the selected history
const change = editorState.change().collapseToEndOf(editorState.document);
@@ -1468,8 +1489,8 @@ export default class MessageComposerInput extends React.Component {
+ title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
+ src={`img/button-md-${!this.state.isRichTextEnabled}.png`} />
{
'mx_MessageComposer_input_markdownIndicator');
ReactTestUtils.Simulate.click(indicator);
- expect(mci.state.isRichtextEnabled).toEqual(false, 'should have changed mode');
+ expect(mci.state.isRichTextEnabled).toEqual(false, 'should have changed mode');
done();
});
});
From f981d7b7293c0eb2ad869091cabbb836b0c86a23 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson
Date: Sun, 20 May 2018 22:39:40 +0100
Subject: [PATCH 055/846] unify buttons on the node type names, and make them
work
---
...o-n.svg => button-text-block-quote-on.svg} | 0
...-quote.svg => button-text-block-quote.svg} | 0
...t-bold-o-n.svg => button-text-bold-on.svg} | 0
...n.svg => button-text-bulleted-list-on.svg} | 0
...llet.svg => button-text-bulleted-list.svg} | 0
...t-code-o-n.svg => button-text-code-on.svg} | 0
...ike-o-n.svg => button-text-deleted-on.svg} | 0
...ext-strike.svg => button-text-deleted.svg} | 0
...alic-o-n.svg => button-text-italic-on.svg} | 0
...n.svg => button-text-numbered-list-on.svg} | 0
...llet.svg => button-text-numbered-list.svg} | 0
...-o-n.svg => button-text-underlined-on.svg} | 0
...derline.svg => button-text-underlined.svg} | 0
src/components/views/rooms/MessageComposer.js | 58 ++++++++-------
.../views/rooms/MessageComposerInput.js | 70 ++++++++++---------
15 files changed, 68 insertions(+), 60 deletions(-)
rename res/img/{button-text-quote-o-n.svg => button-text-block-quote-on.svg} (100%)
rename res/img/{button-text-quote.svg => button-text-block-quote.svg} (100%)
rename res/img/{button-text-bold-o-n.svg => button-text-bold-on.svg} (100%)
rename res/img/{button-text-bullet-o-n.svg => button-text-bulleted-list-on.svg} (100%)
rename res/img/{button-text-bullet.svg => button-text-bulleted-list.svg} (100%)
rename res/img/{button-text-code-o-n.svg => button-text-code-on.svg} (100%)
rename res/img/{button-text-strike-o-n.svg => button-text-deleted-on.svg} (100%)
rename res/img/{button-text-strike.svg => button-text-deleted.svg} (100%)
rename res/img/{button-text-italic-o-n.svg => button-text-italic-on.svg} (100%)
rename res/img/{button-text-numbullet-o-n.svg => button-text-numbered-list-on.svg} (100%)
rename res/img/{button-text-numbullet.svg => button-text-numbered-list.svg} (100%)
rename res/img/{button-text-underline-o-n.svg => button-text-underlined-on.svg} (100%)
rename res/img/{button-text-underline.svg => button-text-underlined.svg} (100%)
diff --git a/res/img/button-text-quote-o-n.svg b/res/img/button-text-block-quote-on.svg
similarity index 100%
rename from res/img/button-text-quote-o-n.svg
rename to res/img/button-text-block-quote-on.svg
diff --git a/res/img/button-text-quote.svg b/res/img/button-text-block-quote.svg
similarity index 100%
rename from res/img/button-text-quote.svg
rename to res/img/button-text-block-quote.svg
diff --git a/res/img/button-text-bold-o-n.svg b/res/img/button-text-bold-on.svg
similarity index 100%
rename from res/img/button-text-bold-o-n.svg
rename to res/img/button-text-bold-on.svg
diff --git a/res/img/button-text-bullet-o-n.svg b/res/img/button-text-bulleted-list-on.svg
similarity index 100%
rename from res/img/button-text-bullet-o-n.svg
rename to res/img/button-text-bulleted-list-on.svg
diff --git a/res/img/button-text-bullet.svg b/res/img/button-text-bulleted-list.svg
similarity index 100%
rename from res/img/button-text-bullet.svg
rename to res/img/button-text-bulleted-list.svg
diff --git a/res/img/button-text-code-o-n.svg b/res/img/button-text-code-on.svg
similarity index 100%
rename from res/img/button-text-code-o-n.svg
rename to res/img/button-text-code-on.svg
diff --git a/res/img/button-text-strike-o-n.svg b/res/img/button-text-deleted-on.svg
similarity index 100%
rename from res/img/button-text-strike-o-n.svg
rename to res/img/button-text-deleted-on.svg
diff --git a/res/img/button-text-strike.svg b/res/img/button-text-deleted.svg
similarity index 100%
rename from res/img/button-text-strike.svg
rename to res/img/button-text-deleted.svg
diff --git a/res/img/button-text-italic-o-n.svg b/res/img/button-text-italic-on.svg
similarity index 100%
rename from res/img/button-text-italic-o-n.svg
rename to res/img/button-text-italic-on.svg
diff --git a/res/img/button-text-numbullet-o-n.svg b/res/img/button-text-numbered-list-on.svg
similarity index 100%
rename from res/img/button-text-numbullet-o-n.svg
rename to res/img/button-text-numbered-list-on.svg
diff --git a/res/img/button-text-numbullet.svg b/res/img/button-text-numbered-list.svg
similarity index 100%
rename from res/img/button-text-numbullet.svg
rename to res/img/button-text-numbered-list.svg
diff --git a/res/img/button-text-underline-o-n.svg b/res/img/button-text-underlined-on.svg
similarity index 100%
rename from res/img/button-text-underline-o-n.svg
rename to res/img/button-text-underlined-on.svg
diff --git a/res/img/button-text-underline.svg b/res/img/button-text-underlined.svg
similarity index 100%
rename from res/img/button-text-underline.svg
rename to res/img/button-text-underlined.svg
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 157dc9e704..4d00927767 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -215,7 +215,7 @@ export default class MessageComposer extends React.Component {
}
}
- onFormatButtonClicked(name: "bold" | "italic" | "strike" | "code" | "underline" | "quote" | "bullet" | "numbullet", event) {
+ onFormatButtonClicked(name, event) {
event.preventDefault();
this.messageComposerInput.onFormatButtonClicked(name, event);
}
@@ -303,14 +303,14 @@ export default class MessageComposer extends React.Component {
+ { _t("You will not be able to undo this change as you are demoting yourself, " +
+ "if you are the last privileged user in the room it will be impossible " +
+ "to regain privileges.") }
+
+ { _t("Are you sure?") }
+
,
+ button: _t("Continue"),
+ onFinished: resolve,
+ });
+ });
+ },
+
+ onMuteToggle: async function() {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const roomId = this.props.member.roomId;
const target = this.props.member.userId;
const room = this.props.matrixClient.getRoom(roomId);
if (!room) return;
+ // if muting self, warn as it may be irreversible
+ if (target === this.props.matrixClient.getUserId()) {
+ try {
+ if (!await this._warnSelfDemote()) return;
+ } catch (e) {
+ console.error("Failed to warn about self demotion: ", e);
+ return;
+ }
+ }
+
const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
if (!powerLevelEvent) return;
@@ -436,7 +465,7 @@ module.exports = withMatrixClient(React.createClass({
}).done();
},
- onPowerChange: function(powerLevel) {
+ onPowerChange: async function(powerLevel) {
const roomId = this.props.member.roomId;
const target = this.props.member.userId;
const room = this.props.matrixClient.getRoom(roomId);
@@ -455,20 +484,12 @@ module.exports = withMatrixClient(React.createClass({
// If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
if (myUserId === target) {
- Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
- title: _t("Warning!"),
- description:
-
- { _t("You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.") }
- { _t("Are you sure?") }
-
,
- button: _t("Continue"),
- onFinished: (confirmed) => {
- if (confirmed) {
- this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
- }
- },
- });
+ try {
+ if (!await this._warnSelfDemote()) return;
+ this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+ } catch (e) {
+ console.error("Failed to warn about self demotion: ", e);
+ }
return;
}
From df1584148334646e0e278617b6041f7520989b82 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 15 Jun 2018 19:28:23 +0100
Subject: [PATCH 084/846] split too long line
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/views/rooms/MemberInfo.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 4a163b6a00..6680e7d02c 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -499,7 +499,8 @@ module.exports = withMatrixClient(React.createClass({
title: _t("Warning!"),
description:
- { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself.") }
+ { _t("You will not be able to undo this change as you are promoting the user " +
+ "to have the same power level as yourself.") }
{ _t("Are you sure?") }
,
button: _t("Continue"),
From 7cd8a5a2b230ac78c12cc40bddab10dcf9fce59f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 20 Jun 2018 18:01:37 +0100
Subject: [PATCH 085/846] allow chaining right click contextmenus
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/ContextualMenu.js | 26 +++++++++++++++++++--
1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index 91ec312f43..e5b3bd0b71 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -64,7 +64,9 @@ export default class ContextualMenu extends React.Component {
// The component to render as the context menu
elementClass: PropTypes.element.isRequired,
// on resize callback
- windowResize: PropTypes.func
+ windowResize: PropTypes.func,
+ // method to close menu
+ closeMenu: PropTypes.func,
};
constructor() {
@@ -73,6 +75,7 @@ export default class ContextualMenu extends React.Component {
contextMenuRect: null,
};
+ this.onContextMenu = this.onContextMenu.bind(this);
this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
}
@@ -85,6 +88,25 @@ export default class ContextualMenu extends React.Component {
});
}
+ onContextMenu(e) {
+ if (this.props.closeMenu) {
+ this.props.closeMenu();
+ }
+ e.preventDefault();
+ const x = e.clientX;
+ const y = e.clientY;
+
+ setImmediate(() => {
+ const clickEvent = document.createEvent('MouseEvents');
+ clickEvent.initMouseEvent(
+ 'contextmenu', true, true, window, 0,
+ 0, 0, x, y, false, false,
+ false, false, 0, null,
+ );
+ document.elementFromPoint(x, y).dispatchEvent(clickEvent);
+ });
+ }
+
render() {
const position = {};
let chevronFace = null;
@@ -195,7 +217,7 @@ export default class ContextualMenu extends React.Component {
{ chevron }
;
}
From 4508da56661a4e8bd80122ee1539bfddaf228449 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 20 Jun 2018 18:03:15 +0100
Subject: [PATCH 086/846] only override contextmenu if closeMenu is provided
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/ContextualMenu.js | 27 +++++++++++----------
1 file changed, 14 insertions(+), 13 deletions(-)
diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index e5b3bd0b71..8b88cae479 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -91,20 +91,21 @@ export default class ContextualMenu extends React.Component {
onContextMenu(e) {
if (this.props.closeMenu) {
this.props.closeMenu();
- }
- e.preventDefault();
- const x = e.clientX;
- const y = e.clientY;
- setImmediate(() => {
- const clickEvent = document.createEvent('MouseEvents');
- clickEvent.initMouseEvent(
- 'contextmenu', true, true, window, 0,
- 0, 0, x, y, false, false,
- false, false, 0, null,
- );
- document.elementFromPoint(x, y).dispatchEvent(clickEvent);
- });
+ e.preventDefault();
+ const x = e.clientX;
+ const y = e.clientY;
+
+ setImmediate(() => {
+ const clickEvent = document.createEvent('MouseEvents');
+ clickEvent.initMouseEvent(
+ 'contextmenu', true, true, window, 0,
+ 0, 0, x, y, false, false,
+ false, false, 0, null,
+ );
+ document.elementFromPoint(x, y).dispatchEvent(clickEvent);
+ });
+ }
}
render() {
From 28ef65c4aaec6e8678251feb9e85f2cf45852c3e Mon Sep 17 00:00:00 2001
From: Marek Lach
Date: Wed, 20 Jun 2018 13:21:24 +0000
Subject: [PATCH 087/846] Translated using Weblate (Slovak)
Currently translated at 100.0% (1197 of 1197 strings)
Translation: Riot Web/matrix-react-sdk
Translate-URL: https://translate.riot.im/projects/riot-web/matrix-react-sdk/sk/
---
src/i18n/strings/sk.json | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/sk.json b/src/i18n/strings/sk.json
index b1f3f4260d..bc4e749d42 100644
--- a/src/i18n/strings/sk.json
+++ b/src/i18n/strings/sk.json
@@ -1180,5 +1180,20 @@
"Terms and Conditions": "Zmluvné podmienky",
"To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "Ak chcete aj naďalej používať domovský server %(homeserverDomain)s, mali by ste si prečítať a odsúhlasiť naše zmluvné podmienky.",
"Review terms and conditions": "Prečítať zmluvné podmienky",
- "To notify everyone in the room, you must be a": "Aby ste mohli upozorňovať všetkých členov v miestnosti, musíte byť"
+ "To notify everyone in the room, you must be a": "Aby ste mohli upozorňovať všetkých členov v miestnosti, musíte byť",
+ "Encrypting": "Enkriptovanie",
+ "Encrypted, not sent": "Zakódované, ale neposlané",
+ "Share Link to User": "Pošli link užívateľovi",
+ "Share room": "Zdieľaj miestnosť",
+ "Share Room": "Zdieľaj miestnosť",
+ "Link to most recent message": "Link na najnovšiu správu",
+ "Share User": "Zdieľaj užívateľa",
+ "Share Community": "Zdieľaj komunitu",
+ "Link to selected message": "Link na vybranú správu",
+ "COPY": "Kopíruj",
+ "Share Message": "Zdieľaj správu",
+ "No Audio Outputs detected": "Neboli rozpoznané žiadne zvukové výstupy",
+ "Audio Output": "Zvukový výstup",
+ "Try the app first": "Najskôr aplikáciu vyskúšaj",
+ "Share Room Message": "Správa o zdieľaní miestnosti"
}
From b18c95cdb57ca11068c755dc4493489d02383a62 Mon Sep 17 00:00:00 2001
From: David Baker
Date: Thu, 21 Jun 2018 10:03:35 +0100
Subject: [PATCH 088/846] js-sdk rc.1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 33aa428d4b..c7cdfffb31 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
"linkifyjs": "^2.1.3",
"lodash": "^4.13.1",
"lolex": "2.3.2",
- "matrix-js-sdk": "0.10.4",
+ "matrix-js-sdk": "0.10.5-rc.1",
"optimist": "^0.6.1",
"pako": "^1.0.5",
"prop-types": "^15.5.8",
From f3d54a49b65bc220a76357d84b281afbda976ccb Mon Sep 17 00:00:00 2001
From: David Baker
Date: Thu, 21 Jun 2018 10:06:52 +0100
Subject: [PATCH 089/846] Prepare changelog for v0.12.8-rc.1
---
CHANGELOG.md | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 96 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b97251604..2120e18a31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,99 @@
+Changes in [0.12.8-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.8-rc.1) (2018-06-21)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.7...v0.12.8-rc.1)
+
+ * Update from Weblate.
+ [\#1997](https://github.com/matrix-org/matrix-react-sdk/pull/1997)
+ * refactor, consolidate and improve SlashCommands
+ [\#1988](https://github.com/matrix-org/matrix-react-sdk/pull/1988)
+ * Take replies out of labs!
+ [\#1996](https://github.com/matrix-org/matrix-react-sdk/pull/1996)
+ * re-merge reset PR
+ [\#1987](https://github.com/matrix-org/matrix-react-sdk/pull/1987)
+ * once command has a space, strict match instead of fuzzy match
+ [\#1985](https://github.com/matrix-org/matrix-react-sdk/pull/1985)
+ * Fix matrix.to URL RegExp
+ [\#1986](https://github.com/matrix-org/matrix-react-sdk/pull/1986)
+ * Fix blank sticker picker
+ [\#1984](https://github.com/matrix-org/matrix-react-sdk/pull/1984)
+ * fix e2ee file/media stuff
+ [\#1972](https://github.com/matrix-org/matrix-react-sdk/pull/1972)
+ * right click for room tile context menu
+ [\#1978](https://github.com/matrix-org/matrix-react-sdk/pull/1978)
+ * only show m.room.message in FilePanel
+ [\#1983](https://github.com/matrix-org/matrix-react-sdk/pull/1983)
+ * improve command provider
+ [\#1981](https://github.com/matrix-org/matrix-react-sdk/pull/1981)
+ * affix copyButton so that it doesn't get scrolled horizontally
+ [\#1980](https://github.com/matrix-org/matrix-react-sdk/pull/1980)
+ * split continuation if there is a gap in conversation
+ [\#1979](https://github.com/matrix-org/matrix-react-sdk/pull/1979)
+ * fix a bunch of instances of react console spam
+ [\#1973](https://github.com/matrix-org/matrix-react-sdk/pull/1973)
+ * Track decryption success/failure rate with piwik
+ [\#1949](https://github.com/matrix-org/matrix-react-sdk/pull/1949)
+ * route matrix.to/#/+... links internally (not just group ids)
+ [\#1975](https://github.com/matrix-org/matrix-react-sdk/pull/1975)
+ * implement `hitting enter after Ctrl-K should switch to the first result`
+ [\#1976](https://github.com/matrix-org/matrix-react-sdk/pull/1976)
+ * Remove tag panel feature flag
+ [\#1970](https://github.com/matrix-org/matrix-react-sdk/pull/1970)
+ * QuestionDialog pass hasCancelButton to DialogButtons
+ [\#1968](https://github.com/matrix-org/matrix-react-sdk/pull/1968)
+ * check type before msgtype in the case of `m.sticker` with msgtype
+ [\#1965](https://github.com/matrix-org/matrix-react-sdk/pull/1965)
+ * apply roomlist searchFilter to aliases if it begins with a `#`
+ [\#1957](https://github.com/matrix-org/matrix-react-sdk/pull/1957)
+ * Share Dialog
+ [\#1948](https://github.com/matrix-org/matrix-react-sdk/pull/1948)
+ * make RoomTooltip generic and add ContextMenu&Tooltip to GroupInviteTile
+ [\#1950](https://github.com/matrix-org/matrix-react-sdk/pull/1950)
+ * Fix widgets re-appearing after being deleted
+ [\#1958](https://github.com/matrix-org/matrix-react-sdk/pull/1958)
+ * Fix crash on unspecified thumbnail info, and handle gracefully
+ [\#1967](https://github.com/matrix-org/matrix-react-sdk/pull/1967)
+ * fix styling of clearButton when its not there
+ [\#1964](https://github.com/matrix-org/matrix-react-sdk/pull/1964)
+ * Implement slightly magical CSS soln. to thumbnail sizing
+ [\#1912](https://github.com/matrix-org/matrix-react-sdk/pull/1912)
+ * Select audio output for WebRTC
+ [\#1932](https://github.com/matrix-org/matrix-react-sdk/pull/1932)
+ * move css rule to be more generic; remove overriden rule
+ [\#1962](https://github.com/matrix-org/matrix-react-sdk/pull/1962)
+ * improve tag panel accessibility and remove a no-op dispatch
+ [\#1960](https://github.com/matrix-org/matrix-react-sdk/pull/1960)
+ * Revert "Fix exception when opening dev tools"
+ [\#1963](https://github.com/matrix-org/matrix-react-sdk/pull/1963)
+ * fix message appears unencrypted while encrypting and not_sent
+ [\#1959](https://github.com/matrix-org/matrix-react-sdk/pull/1959)
+ * Fix exception when opening dev tools
+ [\#1961](https://github.com/matrix-org/matrix-react-sdk/pull/1961)
+ * show redacted stickers like other redacted messages
+ [\#1956](https://github.com/matrix-org/matrix-react-sdk/pull/1956)
+ * add mx_filterFlipColor to mx_MemberInfo_cancel img
+ [\#1951](https://github.com/matrix-org/matrix-react-sdk/pull/1951)
+ * don't set the displayname on registration as Synapse now does it
+ [\#1953](https://github.com/matrix-org/matrix-react-sdk/pull/1953)
+ * allow CreateRoom to scale properly horizontally
+ [\#1955](https://github.com/matrix-org/matrix-react-sdk/pull/1955)
+ * Keep context menus that extend downwards vertically on screen
+ [\#1952](https://github.com/matrix-org/matrix-react-sdk/pull/1952)
+ * re-run checkIfAlone if a member change occurred in the active room
+ [\#1947](https://github.com/matrix-org/matrix-react-sdk/pull/1947)
+ * Persist pinned message open-ness between room switches
+ [\#1935](https://github.com/matrix-org/matrix-react-sdk/pull/1935)
+ * Pinned message cosmetic improvements
+ [\#1933](https://github.com/matrix-org/matrix-react-sdk/pull/1933)
+ * Update sinon to 5.0.7
+ [\#1916](https://github.com/matrix-org/matrix-react-sdk/pull/1916)
+ * re-run checkIfAlone if a member change occurred in the active room
+ [\#1946](https://github.com/matrix-org/matrix-react-sdk/pull/1946)
+ * Replace "Login as guest" with "Try the app first" on login page
+ [\#1937](https://github.com/matrix-org/matrix-react-sdk/pull/1937)
+ * kill stream when using gUM for permission to device labels to turn off
+ camera
+ [\#1931](https://github.com/matrix-org/matrix-react-sdk/pull/1931)
+
Changes in [0.12.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.7) (2018-06-12)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.7-rc.1...v0.12.7)
From 2b8bc8a80045af99dc3fb22cba825711427b7af1 Mon Sep 17 00:00:00 2001
From: David Baker
Date: Thu, 21 Jun 2018 10:06:53 +0100
Subject: [PATCH 090/846] v0.12.8-rc.1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index c7cdfffb31..7da47f27c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "0.12.7",
+ "version": "0.12.8-rc.1",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
From d4e3301dd99cb40ef7b64cdb9b5be7d209f94109 Mon Sep 17 00:00:00 2001
From: Marek Lach
Date: Wed, 20 Jun 2018 17:21:38 +0000
Subject: [PATCH 091/846] Translated using Weblate (Czech)
Currently translated at 90.2% (1080 of 1197 strings)
Translation: Riot Web/matrix-react-sdk
Translate-URL: https://translate.riot.im/projects/riot-web/matrix-react-sdk/cs/
---
src/i18n/strings/cs.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index b7298f80ab..52eabf0edc 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -1076,5 +1076,7 @@
"Collapse panel": "Sbalit panel",
"With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!": "Vzhled a chování aplikace může být ve vašem aktuální prohlížeči nesprávné a některé nebo všechny funkce mohou být chybné. Chcete-li i přes to pokračovat, nebudeme vám bránit, ale se všemi problémy, na které narazíte, si musíte poradit sami!",
"Checking for an update...": "Kontrola aktualizací...",
- "There are advanced notifications which are not shown here": "Jsou k dispozici pokročilá upozornění, která zde nejsou zobrazena"
+ "There are advanced notifications which are not shown here": "Jsou k dispozici pokročilá upozornění, která zde nejsou zobrazena",
+ "The platform you're on": "Platforma na které jsi",
+ "The version of Riot.im": "Verze Riot.im"
}
From cb6c41ae6652a850ed9235b8cec366cfdde61fc8 Mon Sep 17 00:00:00 2001
From: Slavi Pantaleev
Date: Thu, 21 Jun 2018 09:49:59 +0000
Subject: [PATCH 092/846] Translated using Weblate (Bulgarian)
Currently translated at 100.0% (1197 of 1197 strings)
Translation: Riot Web/matrix-react-sdk
Translate-URL: https://translate.riot.im/projects/riot-web/matrix-react-sdk/bg/
---
src/i18n/strings/bg.json | 16 +++++++++++++++-
1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/bg.json b/src/i18n/strings/bg.json
index 5ec9a93bc5..90bfc3c94a 100644
--- a/src/i18n/strings/bg.json
+++ b/src/i18n/strings/bg.json
@@ -1181,5 +1181,19 @@
"To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "За да продължите да ползвате %(homeserverDomain)s е необходимо да прегледате и да се съгласите с правилата и условията за ползване.",
"Review terms and conditions": "Прегледай правилата и условията",
"Failed to indicate account erasure": "Неуспешно указване на желанието за изтриване на акаунта",
- "Try the app first": "Първо пробвайте приложението"
+ "Try the app first": "Първо пробвайте приложението",
+ "Encrypting": "Шифроване",
+ "Encrypted, not sent": "Шифровано, неизпратено",
+ "Share Link to User": "Сподели връзка с потребител",
+ "Share room": "Сподели стая",
+ "Share Room": "Споделяне на стая",
+ "Link to most recent message": "Създай връзка към най-новото съобщение",
+ "Share User": "Споделяне на потребител",
+ "Share Community": "Споделяне на общност",
+ "Share Room Message": "Споделяне на съобщение от стая",
+ "Link to selected message": "Създай връзка към избраното съобщение",
+ "COPY": "КОПИРАЙ",
+ "Share Message": "Сподели съобщението",
+ "No Audio Outputs detected": "Не са открити аудио изходи",
+ "Audio Output": "Аудио изходи"
}
From ca2937cd65e72a062ea3a803fe881092b7f8ef2b Mon Sep 17 00:00:00 2001
From: random
Date: Thu, 21 Jun 2018 15:38:16 +0000
Subject: [PATCH 093/846] Translated using Weblate (Italian)
Currently translated at 100.0% (1197 of 1197 strings)
Translation: Riot Web/matrix-react-sdk
Translate-URL: https://translate.riot.im/projects/riot-web/matrix-react-sdk/it/
---
src/i18n/strings/it.json | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index d3f93acec5..ced3ba4db6 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -1181,5 +1181,20 @@
"Replying": "Rispondere",
"Popout widget": "Oggetto a comparsa",
"Failed to indicate account erasure": "Impossibile indicare la cancellazione dell'account",
- "Bulk Options": "Opzioni applicate in massa"
+ "Bulk Options": "Opzioni applicate in massa",
+ "Encrypting": "Cifratura...",
+ "Encrypted, not sent": "Cifrato, non inviato",
+ "Share Link to User": "Condividi link con utente",
+ "Share room": "Condividi stanza",
+ "Share Room": "Condividi stanza",
+ "Link to most recent message": "Link al messaggio più recente",
+ "Share User": "Condividi utente",
+ "Share Community": "Condividi comunità",
+ "Share Room Message": "Condividi messaggio stanza",
+ "Link to selected message": "Link al messaggio selezionato",
+ "COPY": "COPIA",
+ "Share Message": "Condividi messaggio",
+ "No Audio Outputs detected": "Nessuna uscita audio rilevata",
+ "Audio Output": "Uscita audio",
+ "Try the app first": "Prova prima l'app"
}
From f236b319cccb1804cbdd267d6afbb8a9fdf0f122 Mon Sep 17 00:00:00 2001
From: Jeff Huang
Date: Fri, 15 Jun 2018 13:36:36 +0000
Subject: [PATCH 094/846] Translated using Weblate (Chinese (Traditional))
Currently translated at 100.0% (1198 of 1198 strings)
Translation: Riot Web/matrix-react-sdk
Translate-URL: https://translate.riot.im/projects/riot-web/matrix-react-sdk/zh_Hant/
---
src/i18n/strings/zh_Hant.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index ebf329b45b..1b8b32af4d 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -1195,5 +1195,6 @@
"Share Room Message": "分享聊天室訊息",
"Link to selected message": "連結到選定的訊息",
"COPY": "複製",
- "Share Message": "分享訊息"
+ "Share Message": "分享訊息",
+ "Jitsi Conference Calling": "Jitsi 會議通話"
}
From f94ecf9ff5ca38ce82b65403f6c759347d45d41f Mon Sep 17 00:00:00 2001
From: David Baker
Date: Fri, 22 Jun 2018 18:08:57 +0100
Subject: [PATCH 095/846] Prepare changelog for v0.12.8-rc.2
---
CHANGELOG.md | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2120e18a31..6c497dc363 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+Changes in [0.12.8-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.8-rc.2) (2018-06-22)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.8-rc.1...v0.12.8-rc.2)
+
+ * slash got consumed in the consolidation
+ [\#1998](https://github.com/matrix-org/matrix-react-sdk/pull/1998)
+
Changes in [0.12.8-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.8-rc.1) (2018-06-21)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.7...v0.12.8-rc.1)
From 64fc7d38409386468f34f415159208b4ef5d03f0 Mon Sep 17 00:00:00 2001
From: David Baker
Date: Fri, 22 Jun 2018 18:08:57 +0100
Subject: [PATCH 096/846] v0.12.8-rc.2
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 7da47f27c3..091158c035 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "0.12.8-rc.1",
+ "version": "0.12.8-rc.2",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
From 891070d001cd6570f6156b33d8d294704fb0995f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Jun 2018 01:16:01 +0100
Subject: [PATCH 097/846] update UrlPreview settings to be more privacy-aware
in e2ee rooms
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomView.js | 24 +++++-
.../views/room_settings/UrlPreviewSettings.js | 74 ++++++++++++-------
2 files changed, 68 insertions(+), 30 deletions(-)
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 97e575ff4e..c465eff44b 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -618,10 +618,26 @@ module.exports = React.createClass({
}
},
- _updatePreviewUrlVisibility: function(room) {
- this.setState({
- showUrlPreview: SettingsStore.getValue("urlPreviewsEnabled", room.roomId),
- });
+ _updatePreviewUrlVisibility: function({roomId}) {
+ const levels = [
+ SettingLevel.ROOM_DEVICE,
+ SettingLevel.ROOM_ACCOUNT,
+ ];
+ let showUrlPreview;
+ if (MatrixClientPeg.get().isRoomEncrypted(roomId)) {
+ for (const level of levels) {
+ const value = SettingsStore.getValueAt(level, "urlPreviewsEnabled", roomId, true, true);
+ if (value === Boolean(value)) { // if is Boolean
+ showUrlPreview = value;
+ break;
+ }
+ }
+
+ showUrlPreview = showUrlPreview || false;
+ } else {
+ showUrlPreview = SettingsStore.getValue("urlPreviewsEnabled", roomId);
+ }
+ this.setState({showUrlPreview});
},
onRoom: function(room) {
diff --git a/src/components/views/room_settings/UrlPreviewSettings.js b/src/components/views/room_settings/UrlPreviewSettings.js
index ed58d610aa..749167c0a5 100644
--- a/src/components/views/room_settings/UrlPreviewSettings.js
+++ b/src/components/views/room_settings/UrlPreviewSettings.js
@@ -1,6 +1,7 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2017 Travis Ralston
+Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,6 +16,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import {MatrixClient} from "matrix-js-sdk";
const React = require('react');
import PropTypes from 'prop-types';
const sdk = require("../../../index");
@@ -29,6 +31,10 @@ module.exports = React.createClass({
room: PropTypes.object,
},
+ contextTypes: {
+ matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+ },
+
saveSettings: function() {
const promises = [];
if (this.refs.urlPreviewsRoom) promises.push(this.refs.urlPreviewsRoom.save());
@@ -39,36 +45,52 @@ module.exports = React.createClass({
render: function() {
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
const roomId = this.props.room.roomId;
+ const isEncrypted = this.context.matrixClient.isRoomEncrypted(roomId);
let previewsForAccount = null;
- if (SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled")) {
- previewsForAccount = (
- _t("You have enabled URL previews by default.", {}, { 'a': (sub)=>{ sub } })
- );
- } else {
- previewsForAccount = (
- _t("You have disabled URL previews by default.", {}, { 'a': (sub)=>{ sub } })
- );
- }
-
let previewsForRoom = null;
- if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
- previewsForRoom = (
-
- );
- } else {
- let str = _td("URL previews are enabled by default for participants in this room.");
- if (!SettingsStore.getValueAt(SettingLevel.ROOM, "urlPreviewsEnabled", roomId, /*explicit=*/true)) {
- str = _td("URL previews are disabled by default for participants in this room.");
+
+
+ if (!isEncrypted) {
+ // Only show account setting state and room state setting state in non-e2ee rooms where they apply
+ const accountEnabled = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled");
+ if (accountEnabled) {
+ previewsForAccount = (
+ _t("You have enabled URL previews by default.", {}, {
+ 'a': (sub)=>{ sub },
+ })
+ );
+ } else if (accountEnabled) {
+ previewsForAccount = (
+ _t("You have disabled URL previews by default.", {}, {
+ 'a': (sub)=>{ sub },
+ })
+ );
}
- previewsForRoom = ();
+
+ if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
+ previewsForRoom = (
+
+ );
+ } else {
+ let str = _td("URL previews are enabled by default for participants in this room.");
+ if (!SettingsStore.getValueAt(SettingLevel.ROOM, "urlPreviewsEnabled", roomId, /*explicit=*/true)) {
+ str = _td("URL previews are disabled by default for participants in this room.");
+ }
+ previewsForRoom = ();
+ }
+ } else {
+ previewsForAccount = (
+ _t("URL Previews default to off in End-to-End Encrypted rooms to protect your privacy. " +
+ "They are requested through your homeserver which could infer links which are otherwise encrypted")
+ );
}
const previewsForRoomAccount = (
From a45dc837b4f7649c42cb5a8db42c3492a9496981 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Jun 2018 01:16:37 +0100
Subject: [PATCH 098/846] add copyright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomView.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index c465eff44b..cf7d3f61e8 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1,6 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
From ed1f801254a85f2782b080740f516a9d675c49ac Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Jun 2018 01:18:21 +0100
Subject: [PATCH 099/846] add comment
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomView.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index cf7d3f61e8..e2de91c035 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -625,6 +625,7 @@ module.exports = React.createClass({
SettingLevel.ROOM_ACCOUNT,
];
let showUrlPreview;
+ // in e2ee rooms only care about room-device and room-account, so that user has to explicitly enable previews
if (MatrixClientPeg.get().isRoomEncrypted(roomId)) {
for (const level of levels) {
const value = SettingsStore.getValueAt(level, "urlPreviewsEnabled", roomId, true, true);
From ed4b82f8fc4ed8a2017f4d03998faf4eb570822d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Jun 2018 01:40:16 +0100
Subject: [PATCH 100/846] update wording and style it like text (text cursor)
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
.../views/room_settings/UrlPreviewSettings.js | 14 ++++++++++----
1 file changed, 10 insertions(+), 4 deletions(-)
diff --git a/src/components/views/room_settings/UrlPreviewSettings.js b/src/components/views/room_settings/UrlPreviewSettings.js
index 749167c0a5..6d3c6317d9 100644
--- a/src/components/views/room_settings/UrlPreviewSettings.js
+++ b/src/components/views/room_settings/UrlPreviewSettings.js
@@ -88,8 +88,9 @@ module.exports = React.createClass({
}
} else {
previewsForAccount = (
- _t("URL Previews default to off in End-to-End Encrypted rooms to protect your privacy. " +
- "They are requested through your homeserver which could infer links which are otherwise encrypted")
+ _t("In encrypted rooms, like this one, URL previews are disabled by default to ensure that your " +
+ "homeserver (where the previews are generated) cannot gather information about links you see in " +
+ "this room.")
);
}
@@ -105,8 +106,13 @@ module.exports = React.createClass({
return (
{ _t("URL Previews") }
-
-
+
+ { _t('When someone puts a URL in their message, a URL preview can be shown to give more ' +
+ 'information about that link such as the title, description, and an image from the website.') }
+
+
+ { previewsForAccount }
+
{ previewsForRoom }
From acbc84a69c3374319d33fa6551597d36d8049aa9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 22 Jun 2018 18:44:54 +0100
Subject: [PATCH 101/846] switch to another settings key for e2e url previews
to protect on change
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomView.js | 25 ++++---------------
.../views/room_settings/UrlPreviewSettings.js | 9 +++----
src/settings/Settings.js | 7 ++++++
3 files changed, 16 insertions(+), 25 deletions(-)
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index e2de91c035..af994d298f 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -620,26 +620,11 @@ module.exports = React.createClass({
},
_updatePreviewUrlVisibility: function({roomId}) {
- const levels = [
- SettingLevel.ROOM_DEVICE,
- SettingLevel.ROOM_ACCOUNT,
- ];
- let showUrlPreview;
- // in e2ee rooms only care about room-device and room-account, so that user has to explicitly enable previews
- if (MatrixClientPeg.get().isRoomEncrypted(roomId)) {
- for (const level of levels) {
- const value = SettingsStore.getValueAt(level, "urlPreviewsEnabled", roomId, true, true);
- if (value === Boolean(value)) { // if is Boolean
- showUrlPreview = value;
- break;
- }
- }
-
- showUrlPreview = showUrlPreview || false;
- } else {
- showUrlPreview = SettingsStore.getValue("urlPreviewsEnabled", roomId);
- }
- this.setState({showUrlPreview});
+ // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
+ const key = MatrixClientPeg.get().isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
+ this.setState({
+ showUrlPreview: SettingsStore.getValue(key, roomId),
+ });
},
onRoom: function(room) {
diff --git a/src/components/views/room_settings/UrlPreviewSettings.js b/src/components/views/room_settings/UrlPreviewSettings.js
index 6d3c6317d9..fe2a2bacf4 100644
--- a/src/components/views/room_settings/UrlPreviewSettings.js
+++ b/src/components/views/room_settings/UrlPreviewSettings.js
@@ -50,7 +50,6 @@ module.exports = React.createClass({
let previewsForAccount = null;
let previewsForRoom = null;
-
if (!isEncrypted) {
// Only show account setting state and room state setting state in non-e2ee rooms where they apply
const accountEnabled = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled");
@@ -73,7 +72,7 @@ module.exports = React.createClass({
+ src={`img/button-md-${!this.state.inputState.isRichTextEnabled}.png`} />
+ title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
+ src={`img/button-md-${!this.state.isRichTextEnabled}.png`} />
- );
+ ) : null;
let placeholderText;
if (this.state.isQuoting) {
@@ -353,31 +353,27 @@ export default class MessageComposer extends React.Component {
);
}
- const {marks, blockType} = this.state.inputState;
- const formatButtons = ["bold", "italic", "strike", "underline", "code", "quote", "bullet", "numbullet"].map(
- (name) => {
- const active = marks.includes(name) || blockType === name;
- const suffix = active ? '-o-n' : '';
- const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
- const className = 'mx_MessageComposer_format_button mx_filterFlipColor';
- return 
;
- },
- );
+ let formatBar;
+ if (this.state.showFormatting) {
+ const {marks, blockType} = this.state.inputState;
+ const formatButtons = ["bold", "italic", "deleted", "underlined", "code", "block-quote", "bulleted-list", "numbered-list"].map(
+ (name) => {
+ const active = marks.some(mark => mark.type === name) || blockType === name;
+ const suffix = active ? '-on' : '';
+ const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
+ const className = 'mx_MessageComposer_format_button mx_filterFlipColor';
+ return 