Merge branch 'develop' into travis/soft-logout-design

pull/21833/head
Travis Ralston 2019-07-09 11:35:49 -06:00
commit 4b1d78e04d
23 changed files with 511 additions and 95 deletions

View File

@ -17,7 +17,6 @@ src/components/views/dialogs/SetPasswordDialog.js
src/components/views/dialogs/UnknownDeviceDialog.js
src/components/views/elements/AddressSelector.js
src/components/views/elements/DirectorySearchBox.js
src/components/views/elements/ImageView.js
src/components/views/elements/MemberEventListSummary.js
src/components/views/elements/TintableSvg.js
src/components/views/elements/UserSelector.js

View File

@ -1,3 +1,120 @@
Changes in [1.3.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.0) (2019-07-08)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.3.0-rc.1...v1.3.0)
No changes since rc.1
Changes in [1.3.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.0-rc.1) (2019-07-03)
=============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2...v1.3.0-rc.1)
* MELS handle m.room.third_party_invite
[\#3173](https://github.com/matrix-org/matrix-react-sdk/pull/3173)
* Fix logic around MemberList invites section, specifically regarding 3pid
[\#3172](https://github.com/matrix-org/matrix-react-sdk/pull/3172)
* Update from Weblate
[\#3176](https://github.com/matrix-org/matrix-react-sdk/pull/3176)
* Track the user's own typing state external to the composer
[\#3150](https://github.com/matrix-org/matrix-react-sdk/pull/3150)
* Handle associated event send failures
[\#3170](https://github.com/matrix-org/matrix-react-sdk/pull/3170)
* Improve interactive tooltip hover behaviour
[\#3169](https://github.com/matrix-org/matrix-react-sdk/pull/3169)
* Fix login type selector border
[\#3171](https://github.com/matrix-org/matrix-react-sdk/pull/3171)
* Use the event sender instead of event ID for viaServers off a tombstone
[\#3159](https://github.com/matrix-org/matrix-react-sdk/pull/3159)
* Append keyshare request dialogs instead of replacing the current dialog
[\#3160](https://github.com/matrix-org/matrix-react-sdk/pull/3160)
* Add AccessibleTooltipButton and use it for RoomSubList buttons
[\#3165](https://github.com/matrix-org/matrix-react-sdk/pull/3165)
* MemberInfo wrap Device Name/ID
[\#3166](https://github.com/matrix-org/matrix-react-sdk/pull/3166)
* Correctly populate the dispatch for joining a room via servers
[\#3161](https://github.com/matrix-org/matrix-react-sdk/pull/3161)
* Clean up legacy breadcrumbs persistence fallback
[\#3162](https://github.com/matrix-org/matrix-react-sdk/pull/3162)
* Update from Weblate
[\#3168](https://github.com/matrix-org/matrix-react-sdk/pull/3168)
* Add ability to render null-rejoins in Timeline and MELS
[\#3135](https://github.com/matrix-org/matrix-react-sdk/pull/3135)
* Add /myavatar command
[\#3155](https://github.com/matrix-org/matrix-react-sdk/pull/3155)
* Update config.json docs location
[\#3158](https://github.com/matrix-org/matrix-react-sdk/pull/3158)
* If on trackpad, don't mess with horizontal scrolling.
[\#3148](https://github.com/matrix-org/matrix-react-sdk/pull/3148)
* Limit reactions row on initial display
[\#3152](https://github.com/matrix-org/matrix-react-sdk/pull/3152)
* Unpin highlight.js
[\#3156](https://github.com/matrix-org/matrix-react-sdk/pull/3156)
* Flexboxify generic error page
[\#3154](https://github.com/matrix-org/matrix-react-sdk/pull/3154)
* Fix weird scrollbar when devtools is in a narrow browser
[\#3153](https://github.com/matrix-org/matrix-react-sdk/pull/3153)
* Show a loading state for slow peeks
[\#3142](https://github.com/matrix-org/matrix-react-sdk/pull/3142)
* Don't show error dialog when user has no webcam
[\#3146](https://github.com/matrix-org/matrix-react-sdk/pull/3146)
* Make edit history work in encrypted rooms.
[\#3151](https://github.com/matrix-org/matrix-react-sdk/pull/3151)
* Change interactive tooltip to only flip when required
[\#3147](https://github.com/matrix-org/matrix-react-sdk/pull/3147)
* Edit history dialog
[\#3144](https://github.com/matrix-org/matrix-react-sdk/pull/3144)
* Fix the scrollbar in the community bar
[\#3143](https://github.com/matrix-org/matrix-react-sdk/pull/3143)
* Add focus border to edit composer
[\#3145](https://github.com/matrix-org/matrix-react-sdk/pull/3145)
* Supply oobData to RoomPreviewBar
[\#3141](https://github.com/matrix-org/matrix-react-sdk/pull/3141)
* Don't boost trackpad users in breadcrumbs
[\#3140](https://github.com/matrix-org/matrix-react-sdk/pull/3140)
* Fix room upgrade warning being chopped off and a spelling mistake
[\#3139](https://github.com/matrix-org/matrix-react-sdk/pull/3139)
* Add quick reaction buttons in tooltip
[\#3138](https://github.com/matrix-org/matrix-react-sdk/pull/3138)
* When joining from room directory, use auto_join
[\#3136](https://github.com/matrix-org/matrix-react-sdk/pull/3136)
* Improve API and interactivity of new tooltip
[\#3137](https://github.com/matrix-org/matrix-react-sdk/pull/3137)
* Use feature flag for displaying edits as well
[\#3132](https://github.com/matrix-org/matrix-react-sdk/pull/3132)
* Add interactive tooltip style
[\#3131](https://github.com/matrix-org/matrix-react-sdk/pull/3131)
* Remove redundant extra chevrons from ContextualMenu
[\#3129](https://github.com/matrix-org/matrix-react-sdk/pull/3129)
* Editor caret improvements
[\#3126](https://github.com/matrix-org/matrix-react-sdk/pull/3126)
* Disable left/right arrow navigating completions for now
[\#3130](https://github.com/matrix-org/matrix-react-sdk/pull/3130)
* Take list nesting into account for indenting
[\#3128](https://github.com/matrix-org/matrix-react-sdk/pull/3128)
* Add file size to UploadConfirmDialog
[\#3127](https://github.com/matrix-org/matrix-react-sdk/pull/3127)
* Consider cancelled verifications when mounting IncomingSasDialog
[\#3123](https://github.com/matrix-org/matrix-react-sdk/pull/3123)
* Make the verification cancelled dialog say OK instead of Cancel
[\#3124](https://github.com/matrix-org/matrix-react-sdk/pull/3124)
* Update from Weblate
[\#3125](https://github.com/matrix-org/matrix-react-sdk/pull/3125)
* Remove unused ContextualMenu features
[\#3122](https://github.com/matrix-org/matrix-react-sdk/pull/3122)
* Fix casing of TooltipButton
[\#3119](https://github.com/matrix-org/matrix-react-sdk/pull/3119)
* De-duplicate notif badge code
[\#3120](https://github.com/matrix-org/matrix-react-sdk/pull/3120)
* Fix favicon/title badge count
[\#3121](https://github.com/matrix-org/matrix-react-sdk/pull/3121)
* Switch ugly password boxes to Field or styled input
[\#3071](https://github.com/matrix-org/matrix-react-sdk/pull/3071)
* Restore warning for if you're already logged in
[\#3118](https://github.com/matrix-org/matrix-react-sdk/pull/3118)
* Provide default name if device label is missing
[\#3113](https://github.com/matrix-org/matrix-react-sdk/pull/3113)
* Support @room pills while editing
[\#3108](https://github.com/matrix-org/matrix-react-sdk/pull/3108)
Changes in [1.2.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.2) (2019-06-19)
===================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2-rc.2...v1.2.2)

View File

@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
"version": "1.2.2",
"version": "1.3.0",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@ -81,7 +81,7 @@
"linkifyjs": "^2.1.6",
"lodash": "^4.13.1",
"lolex": "2.3.2",
"matrix-js-sdk": "2.0.1",
"matrix-js-sdk": "2.1.0",
"optimist": "^0.6.1",
"pako": "^1.0.5",
"png-chunks-extract": "^1.0.0",

View File

@ -42,5 +42,10 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_content {
margin-right: 0px;
}
.mx_MessageActionBar .mx_AccessibleButton {
font-size: 10px;
padding: 0 8px;
}
}

View File

@ -30,9 +30,9 @@ limitations under the License.
z-index: 1;
> * {
white-space: nowrap;
display: inline-block;
position: relative;
width: 27px;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
@ -55,6 +55,11 @@ limitations under the License.
}
}
.mx_MessageActionBar_maskButton {
width: 27px;
}
.mx_MessageActionBar_maskButton::after {
content: '';
position: absolute;

View File

@ -199,7 +199,7 @@ class MatrixClientPeg {
* Throws an error if unable to deduce the homeserver name
* (eg. if the user is not logged in)
*/
getHomeServerName() {
getHomeserverName() {
const matches = /^@.+:(.+)$/.exec(this.matrixClient.credentials.userId);
if (matches === null || matches.length < 1) {
throw new Error("Failed to derive homeserver name from user ID!");

View File

@ -145,7 +145,7 @@ module.exports = React.createClass({
// too. If it's changed, appending to the list will corrupt it.
const my_next_batch = this.nextBatch;
const opts = {limit: 20};
if (my_server != MatrixClientPeg.getHomeServerName()) {
if (my_server != MatrixClientPeg.getHomeserverName()) {
opts.server = my_server;
}
if (this.state.instanceId) {

View File

@ -52,7 +52,7 @@ export default class SoftLogout extends React.Component {
const hsUrl = MatrixClientPeg.get().getHomeserverUrl();
const domainName = hsUrl === defaultServerConfig.hsUrl
? defaultServerConfig.hsName
: MatrixClientPeg.get().getHomeServerName();
: MatrixClientPeg.getHomeserverName();
const userId = MatrixClientPeg.get().getUserId();
const user = MatrixClientPeg.get().getUser(userId);
@ -66,13 +66,20 @@ export default class SoftLogout extends React.Component {
userId,
displayName,
loginView: LOGIN_VIEW.LOADING,
keyBackupNeeded: true, // assume we do while we figure it out (see componentWillMount)
busy: false,
password: "",
errorText: "",
};
}
componentDidMount(): void {
this._initLogin();
MatrixClientPeg.get().flagAllGroupSessionsForBackup().then(remaining => {
this.setState({keyBackupNeeded: remaining > 0});
});
}
onClearAll = () => {
@ -160,9 +167,16 @@ export default class SoftLogout extends React.Component {
error = <span className='mx_Login_error'>{this.state.errorText}</span>;
}
let introText = _t("Enter your password to sign in and regain access to your account.");
if (this.state.keyBackupNeeded) {
introText = _t(
"Regain access your account and recover encryption keys stored on this device. " +
"Without them, you wont be able to read all of your secure messages on any device.");
}
return (
<form onSubmit={this.onPasswordLogin}>
<p>{_t("Enter your password to sign in and regain access to your account.")}</p>
<p>{introText}</p>
{error}
<Field
id="softlogout_password"

View File

@ -0,0 +1,90 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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 sdk from '../../../index';
import { _t } from '../../../languageHandler';
/*
* A dialog for confirming a redaction.
* Also shows a spinner (and possible error) while the redaction is ongoing,
* and only closes the dialog when the redaction is done or failed.
*
* This is done to prevent the edit history dialog racing with the redaction:
* if this dialog closes and the MessageEditHistoryDialog is shown again,
* it will fetch the relations again, which will race with the ongoing /redact request.
* which will cause the edit to appear unredacted.
*
* To avoid this, we keep the dialog open as long as /redact is in progress.
*/
export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
isRedacting: false,
redactionErrorCode: null,
};
}
onParentFinished = async (proceed) => {
if (proceed) {
this.setState({isRedacting: true});
try {
await this.props.redact();
this.props.onFinished(true);
} catch (error) {
const code = error.errcode || error.statusCode;
if (typeof code !== "undefined") {
this.setState({redactionErrorCode: code});
} else {
this.props.onFinished(true);
}
}
} else {
this.props.onFinished(false);
}
};
render() {
if (this.state.isRedacting) {
if (this.state.redactionErrorCode) {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const code = this.state.redactionErrorCode;
return (
<ErrorDialog
onFinished={this.props.onFinished}
title={_t('Error')}
description={_t('You cannot delete this message. (%(code)s)', {code})}
/>
);
} else {
const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
const Spinner = sdk.getComponent('elements.Spinner');
return (
<BaseDialog
onFinished={this.props.onFinished}
hasCancel={false}
title={_t("Removing…")}>
<Spinner />
</BaseDialog>
);
}
} else {
const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
return <ConfirmRedactDialog onFinished={this.onParentFinished} />;
}
}
}

View File

@ -46,12 +46,13 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
const opts = {from: this.state.nextBatch};
const roomId = this.props.mxEvent.getRoomId();
const eventId = this.props.mxEvent.getId();
const client = MatrixClientPeg.get();
let result;
let resolve;
let reject;
const promise = new Promise((_resolve, _reject) => {resolve = _resolve; reject = _reject;});
try {
result = await MatrixClientPeg.get().relations(
result = await client.relations(
roomId, eventId, "m.replace", "m.room.message", opts);
} catch (error) {
// log if the server returned an error
@ -61,8 +62,11 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
this.setState({error}, () => reject(error));
return promise;
}
const newEvents = result.events;
this._locallyRedactEventsIfNeeded(newEvents);
this.setState({
events: this.state.events.concat(result.events),
events: this.state.events.concat(newEvents),
nextBatch: result.nextBatch,
isLoading: false,
}, () => {
@ -72,6 +76,21 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
return promise;
}
_locallyRedactEventsIfNeeded(newEvents) {
const roomId = this.props.mxEvent.getRoomId();
const client = MatrixClientPeg.get();
const room = client.getRoom(roomId);
const pendingEvents = room.getPendingEvents();
for (const e of newEvents) {
const pendingRedaction = pendingEvents.find(pe => {
return pe.getType() === "m.room.redaction" && pe.getAssociatedId() === e.getId();
});
if (pendingRedaction) {
e.markLocallyRedacted(pendingRedaction);
}
}
}
componentDidMount() {
this.loadMoreEdits();
}

View File

@ -37,7 +37,7 @@ export default class NetworkDropdown extends React.Component {
this.inputTextBox = null;
const server = MatrixClientPeg.getHomeServerName();
const server = MatrixClientPeg.getHomeserverName();
this.state = {
expanded: false,
selectedServer: server,
@ -138,8 +138,8 @@ export default class NetworkDropdown extends React.Component {
servers = servers.concat(roomDirectory.servers);
}
if (!servers.includes(MatrixClientPeg.getHomeServerName())) {
servers.unshift(MatrixClientPeg.getHomeServerName());
if (!servers.includes(MatrixClientPeg.getHomeserverName())) {
servers.unshift(MatrixClientPeg.getHomeserverName());
}
// For our own HS, we can use the instance_ids given in the third party protocols
@ -148,7 +148,7 @@ export default class NetworkDropdown extends React.Component {
// we can only show the default room list.
for (const server of servers) {
options.push(this._makeMenuOption(server, null, true));
if (server === MatrixClientPeg.getHomeServerName()) {
if (server === MatrixClientPeg.getHomeserverName()) {
options.push(this._makeMenuOption(server, null, false));
if (this.props.protocols) {
for (const proto of Object.keys(this.props.protocols)) {

View File

@ -88,6 +88,7 @@ export class EditableItem extends React.Component {
export default class EditableItemList extends React.Component {
static propTypes = {
id: PropTypes.string.isRequired,
items: PropTypes.arrayOf(PropTypes.string).isRequired,
itemsLabel: PropTypes.string,
noItemsLabel: PropTypes.string,
@ -121,10 +122,8 @@ export default class EditableItemList extends React.Component {
return (
<form onSubmit={this._onItemAdded} autoComplete={false}
noValidate={true} className="mx_EditableItemList_newItem">
<Field id="newEmailAddress" label={this.props.placeholder}
type="text" autoComplete="off" value={this.props.newItem}
onChange={this._onNewItemChanged}
/>
<Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
<AccessibleButton onClick={this._onItemAdded} kind="primary">
{_t("Add")}
</AccessibleButton>
@ -135,11 +134,11 @@ export default class EditableItemList extends React.Component {
render() {
const editableItems = this.props.items.map((item, index) => {
if (!this.props.canRemove) {
return <li>{item}</li>;
return <li key={item}>{item}</li>;
}
return <EditableItem
key={index}
key={item}
index={index}
value={item}
onRemove={this._onItemRemoved}

View File

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -60,7 +61,7 @@ export default class ImageView extends React.Component {
}
onKeyDown = (ev) => {
if (ev.keyCode == 27) { // escape
if (ev.keyCode === 27) { // escape
ev.stopPropagation();
ev.preventDefault();
this.props.onFinished();
@ -72,7 +73,6 @@ export default class ImageView extends React.Component {
Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
onFinished: (proceed) => {
if (!proceed) return;
const self = this;
MatrixClientPeg.get().redactEvent(
this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
).catch(function(e) {
@ -153,32 +153,38 @@ export default class ImageView extends React.Component {
size = filesize(this.props.fileSize);
}
let size_res;
let sizeRes;
if (size && res) {
size_res = size + ", " + res;
sizeRes = size + ", " + res;
} else {
size_res = size || res;
sizeRes = size || res;
}
let mayRedact = false;
const showEventMeta = !!this.props.mxEvent;
let eventMeta;
if (showEventMeta) {
// Figure out the sender, defaulting to mxid
let sender = this.props.mxEvent.getSender();
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
const cli = MatrixClientPeg.get();
const room = cli.getRoom(this.props.mxEvent.getRoomId());
if (room) {
mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
const member = room.getMember(sender);
if (member) sender = member.name;
}
eventMeta = (<div className="mx_ImageView_metadata">
{ _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
{ _t('Uploaded on %(date)s by %(user)s', {
date: formatDate(new Date(this.props.mxEvent.getTs())),
user: sender,
}) }
</div>);
}
let eventRedact;
if (showEventMeta) {
if (mayRedact) {
eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
{ _t('Remove') }
</div>);
@ -213,7 +219,7 @@ export default class ImageView extends React.Component {
<a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
<div className="mx_ImageView_download">
{ _t('Download this file') }<br />
<span className="mx_ImageView_size">{ size_res }</span>
<span className="mx_ImageView_size">{ sizeRes }</span>
</div>
</a>
{ eventRedact }

View File

@ -33,6 +33,80 @@ import {MatrixClient} from 'matrix-js-sdk';
import classNames from 'classnames';
import {EventStatus} from 'matrix-js-sdk';
function _isReply(mxEvent) {
const relatesTo = mxEvent.getContent()["m.relates_to"];
const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
return isReply;
}
function getHtmlReplyFallback(mxEvent) {
const html = mxEvent.getContent().formatted_body;
if (!html) {
return "";
}
const rootNode = new DOMParser().parseFromString(html, "text/html").body;
const mxReply = rootNode.querySelector("mx-reply");
return (mxReply && mxReply.outerHTML) || "";
}
function getTextReplyFallback(mxEvent) {
const body = mxEvent.getContent().body;
const lines = body.split("\n").map(l => l.trim());
if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
return `${lines[0]}\n\n`;
}
return "";
}
function _isEmote(model) {
const firstPart = model.parts[0];
return firstPart && firstPart.type === "plain" && firstPart.text.startsWith("/me ");
}
function createEditContent(model, editedEvent) {
const isEmote = _isEmote(model);
if (isEmote) {
// trim "/me "
model = model.clone();
model.removeText({index: 0, offset: 0}, 4);
}
const isReply = _isReply(editedEvent);
let plainPrefix = "";
let htmlPrefix = "";
if (isReply) {
plainPrefix = getTextReplyFallback(editedEvent);
htmlPrefix = getHtmlReplyFallback(editedEvent);
}
const body = textSerialize(model);
const newContent = {
"msgtype": isEmote ? "m.emote" : "m.text",
"body": plainPrefix + body,
};
const contentBody = {
msgtype: newContent.msgtype,
body: `${plainPrefix} * ${body}`,
};
const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: isReply});
if (formattedBody) {
newContent.format = "org.matrix.custom.html";
newContent.formatted_body = htmlPrefix + formattedBody;
contentBody.format = newContent.format;
contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
}
return Object.assign({
"m.new_content": newContent,
"m.relates_to": {
"rel_type": "m.replace",
"event_id": editedEvent.getId(),
},
}, contentBody);
}
export default class MessageEditor extends React.Component {
static propTypes = {
// the message event being edited
@ -53,7 +127,7 @@ export default class MessageEditor extends React.Component {
};
this._editorRef = null;
this._autocompleteRef = null;
this._hasModifications = false;
this._modifiedFlag = false;
}
_getRoom() {
@ -73,7 +147,7 @@ export default class MessageEditor extends React.Component {
}
_onInput = (event) => {
this._hasModifications = true;
this._modifiedFlag = true;
const sel = document.getSelection();
const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
this.model.update(text, event.inputType, caret);
@ -131,7 +205,7 @@ export default class MessageEditor extends React.Component {
} else if (event.key === "Escape") {
this._cancelEdit();
} else if (event.key === "ArrowUp") {
if (this._hasModifications || !this._isCaretAtStart()) {
if (this._modifiedFlag || !this._isCaretAtStart()) {
return;
}
const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
@ -140,7 +214,7 @@ export default class MessageEditor extends React.Component {
event.preventDefault();
}
} else if (event.key === "ArrowDown") {
if (this._hasModifications || !this._isCaretAtEnd()) {
if (this._modifiedFlag || !this._isCaretAtEnd()) {
return;
}
const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
@ -159,45 +233,28 @@ export default class MessageEditor extends React.Component {
dis.dispatch({action: 'focus_composer'});
}
_isEmote() {
const firstPart = this.model.parts[0];
return firstPart && firstPart.type === "plain" && firstPart.text.startsWith("/me ");
_hasModifications(newContent) {
// if nothing has changed then bail
const oldContent = this.props.editState.getEvent().getContent();
if (!this._modifiedFlag ||
(oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
oldContent["format"] === newContent["format"] &&
oldContent["formatted_body"] === newContent["formatted_body"])) {
return false;
}
return true;
}
_sendEdit = () => {
const isEmote = this._isEmote();
let model = this.model;
if (isEmote) {
// trim "/me "
model = model.clone();
model.removeText({index: 0, offset: 0}, 4);
const editedEvent = this.props.editState.getEvent();
const editContent = createEditContent(this.model, editedEvent);
const newContent = editContent["m.new_content"];
if (!this._hasModifications(newContent)) {
return;
}
const newContent = {
"msgtype": isEmote ? "m.emote" : "m.text",
"body": textSerialize(model),
};
const contentBody = {
msgtype: newContent.msgtype,
body: ` * ${newContent.body}`,
};
const formattedBody = htmlSerializeIfNeeded(model);
if (formattedBody) {
newContent.format = "org.matrix.custom.html";
newContent.formatted_body = formattedBody;
contentBody.format = newContent.format;
contentBody.formatted_body = ` * ${newContent.formatted_body}`;
}
const content = Object.assign({
"m.new_content": newContent,
"m.relates_to": {
"rel_type": "m.replace",
"event_id": this.props.editState.getEvent().getId(),
},
}, contentBody);
const roomId = this.props.editState.getEvent().getRoomId();
const roomId = editedEvent.getRoomId();
this._cancelPreviousPendingEdit();
this.context.matrixClient.sendMessage(roomId, content);
this.context.matrixClient.sendMessage(roomId, editContent);
dis.dispatch({action: "edit_event", event: null});
dis.dispatch({action: 'focus_composer'});

View File

@ -20,6 +20,11 @@ import * as HtmlUtils from '../../../HtmlUtils';
import {formatTime} from '../../../DateUtils';
import {MatrixEvent} from 'matrix-js-sdk';
import {pillifyLinks} from '../../../utils/pillify';
import { _t } from '../../../languageHandler';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import classNames from 'classnames';
export default class EditHistoryMessage extends React.PureComponent {
static propTypes = {
@ -27,35 +32,130 @@ export default class EditHistoryMessage extends React.PureComponent {
mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
};
constructor(props) {
super(props);
const cli = MatrixClientPeg.get();
const {userId} = cli.credentials;
const event = this.props.mxEvent;
const room = cli.getRoom(event.getRoomId());
if (event.localRedactionEvent()) {
event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
}
const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
}
_onAssociatedStatusChanged = () => {
this.setState({sendStatus: this.props.mxEvent.getAssociatedStatus()});
};
_onRedactClick = async () => {
const event = this.props.mxEvent;
const cli = MatrixClientPeg.get();
const ConfirmAndWaitRedactDialog = sdk.getComponent("dialogs.ConfirmAndWaitRedactDialog");
Modal.createTrackedDialog('Confirm Redact Dialog', 'Edit history', ConfirmAndWaitRedactDialog, {
redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
}, 'mx_Dialog_confirmredact');
};
_onViewSourceClick = () => {
const ViewSource = sdk.getComponent('structures.ViewSource');
Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
roomId: this.props.mxEvent.getRoomId(),
eventId: this.props.mxEvent.getId(),
content: this.props.mxEvent.event,
}, 'mx_Dialog_viewsource');
};
pillifyLinks() {
// not present for redacted events
if (this.refs.content) {
pillifyLinks(this.refs.content.children, this.props.mxEvent);
}
}
componentDidMount() {
pillifyLinks(this.refs.content.children, this.props.mxEvent);
this.pillifyLinks();
}
componentWillUnmount() {
const event = this.props.mxEvent;
if (event.localRedactionEvent()) {
event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);
}
}
componentDidUpdate() {
pillifyLinks(this.refs.content.children, this.props.mxEvent);
this.pillifyLinks();
}
_renderActionBar() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
// hide the button when already redacted
let redactButton;
if (!this.props.mxEvent.isRedacted()) {
redactButton = (
<AccessibleButton onClick={this._onRedactClick} disabled={!this.state.canRedact}>
{_t("Remove")}
</AccessibleButton>
);
}
const viewSourceButton = (
<AccessibleButton onClick={this._onViewSourceClick}>
{_t("View Source")}
</AccessibleButton>
);
// disabled remove button when not allowed
return (
<div className="mx_MessageActionBar">
{redactButton}
{viewSourceButton}
</div>
);
}
render() {
const {mxEvent} = this.props;
const originalContent = mxEvent.getOriginalContent();
const content = originalContent["m.new_content"] || originalContent;
const contentElements = HtmlUtils.bodyToHtml(content);
let contentContainer;
if (mxEvent.getContent().msgtype === "m.emote") {
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
contentContainer = (<div className="mx_EventTile_content" ref="content">*&nbsp;
<span className="mx_MEmoteBody_sender">{ name }</span>
&nbsp;{contentElements}
</div>);
if (mxEvent.isRedacted()) {
const UnknownBody = sdk.getComponent('messages.UnknownBody');
contentContainer = <UnknownBody mxEvent={this.props.mxEvent} />;
} else {
contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
const contentElements = HtmlUtils.bodyToHtml(content, null, {stripReplyFallback: true});
if (mxEvent.getContent().msgtype === "m.emote") {
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
contentContainer = (
<div className="mx_EventTile_content" ref="content">*&nbsp;
<span className="mx_MEmoteBody_sender">{ name }</span>
&nbsp;{contentElements}
</div>
);
} else {
contentContainer = <div className="mx_EventTile_content" ref="content">{contentElements}</div>;
}
}
const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
return <li className="mx_EventTile">
<div className="mx_EventTile_line">
<span className="mx_MessageTimestamp">{timestamp}</span>
{ contentContainer }
</div>
</li>;
const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
const classes = classNames({
"mx_EventTile": true,
"mx_EventTile_redacted": mxEvent.isRedacted(),
"mx_EventTile_sending": isSending,
"mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
});
return (
<li>
<div className={classes}>
<div className="mx_EventTile_line">
<span className="mx_MessageTimestamp">{timestamp}</span>
{ contentContainer }
{ this._renderActionBar() }
</div>
</div>
</li>
);
}
}

View File

@ -364,11 +364,11 @@ module.exports = React.createClass({
let editedTooltip;
if (this.state.editedMarkerHovered) {
const Tooltip = sdk.getComponent('elements.Tooltip');
const editEvent = this.props.mxEvent.replacingEvent();
const date = editEvent && formatDate(editEvent.getDate());
const date = this.props.mxEvent.replacingEventDate();
const dateString = date && formatDate(date);
editedTooltip = <Tooltip
tooltipClassName="mx_Tooltip_timeline"
label={_t("Edited at %(date)s. Click to view edits.", {date})}
label={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
/>;
}
return (

View File

@ -234,6 +234,7 @@ export default class AliasSettings extends React.Component {
<div className='mx_AliasSettings'>
{canonicalAliasSection}
<EditableItemList
id="roomAliases"
className={"mx_RoomSettings_localAliases"}
items={this.state.domainToAliases[localDomain] || []}
newItem={this.state.newAlias}

View File

@ -103,6 +103,7 @@ export default class RelatedGroupSettings extends React.Component {
const EditableItemList = sdk.getComponent('elements.EditableItemList');
return <div>
<EditableItemList
id="relatedGroups"
items={this.state.newGroupsList}
className={"mx_RelatedGroupSettings"}
newItem={this.state.newGroupId}

View File

@ -1143,7 +1143,7 @@ export default class MessageComposerInput extends React.Component {
const editingEnabled = SettingsStore.isFeatureEnabled("feature_message_editing");
const shouldSelectHistory = (editingEnabled && e.altKey) || !editingEnabled;
const shouldEditLastMessage = editingEnabled && !e.altKey && up;
const shouldEditLastMessage = editingEnabled && !e.altKey && up && !RoomViewStore.getQuotingEvent();
if (shouldSelectHistory) {
// Try select composer history

View File

@ -139,7 +139,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
{minimizeToTrayOption}
{autoLaunchOption}
<Field id={"autocompleteDelay"} label={_t('Autocomplete delay (ms)')} type='number'
value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay')}
value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10)}
onChange={this._onAutocompleteDelayChange} />
</div>
</div>

View File

@ -33,10 +33,10 @@ export function mdSerialize(model) {
}, "");
}
export function htmlSerializeIfNeeded(model) {
export function htmlSerializeIfNeeded(model, {forceHTML = false}) {
const md = mdSerialize(model);
const parser = new Markdown(md);
if (!parser.isPlainText()) {
if (!parser.isPlainText() || forceHTML) {
return parser.toHTML();
}
}

View File

@ -93,6 +93,7 @@
"Failed to add the following rooms to %(groupId)s:": "Failed to add the following rooms to %(groupId)s:",
"Unnamed Room": "Unnamed Room",
"Error": "Error",
"You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
"Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
"Dismiss": "Dismiss",
"Riot does not have permission to send you notifications - please check your browser settings": "Riot does not have permission to send you notifications - please check your browser settings",
@ -1126,6 +1127,7 @@
"Start chatting": "Start chatting",
"Click on the button below to start chatting!": "Click on the button below to start chatting!",
"Start Chatting": "Start Chatting",
"Removing…": "Removing…",
"Confirm Removal": "Confirm Removal",
"Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.",
"Clear all data on this device?": "Clear all data on this device?",
@ -1310,7 +1312,6 @@
"Reject invitation": "Reject invitation",
"Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
"Unable to reject invite": "Unable to reject invite",
"You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
"Resend": "Resend",
"Resend edit": "Resend edit",
"Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
@ -1586,8 +1587,10 @@
"You can now close this window or <a>log in</a> to your new account.": "You can now close this window or <a>log in</a> to your new account.",
"Registration Successful": "Registration Successful",
"Create your account": "Create your account",
"Failed to re-authenticate due to a homeserver problem": "Failed to re-authenticate due to a homeserver problem",
"Failed to re-authenticate": "Failed to re-authenticate",
"Enter your password to sign in and regain access to your account.": "Enter your password to sign in and regain access to your account.",
"Regain access your account and recover encryption keys stored on this device. Without them, you wont be able to read all of your secure messages on any device.": "Regain access your account and recover encryption keys stored on this device. Without them, you wont be able to read all of your secure messages on any device.",
"Forgotten your password?": "Forgotten your password?",
"Cannot re-authenticate with your account. Please contact your homeserver admin for more information.": "Cannot re-authenticate with your account. Please contact your homeserver admin for more information.",
"You're signed out": "You're signed out",

View File

@ -4943,10 +4943,10 @@ mathml-tag-names@^2.0.1:
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.1.tgz#6dff66c99d55ecf739ca53c492e626f1d12a33cc"
integrity sha512-pWB896KPGSGkp1XtyzRBftpTzwSOL0Gfk0wLvxt4f2mgzjY19o0LxJ3U25vNWTzsh7da+KTbuXQoQ3lOJZ8WHw==
matrix-js-sdk@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-2.0.1.tgz#e9691c7fc142793aa8cd79e92d45698bcc5da8c4"
integrity sha512-+yj9fBdIE65v1+46TL/eLQGohtNZGBEtOD1n3nTAVBMogyVb2bpUWnqTli0ghiOCG9MKq7tWi+G4bDBTABxuxA==
matrix-js-sdk@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-2.1.0.tgz#a8192d700e4d96028cdb64f3453935292e76faaf"
integrity sha512-fVgqxp9rrcGhQ9cnU2WW3KJCOIn/WJu/G2tTgWEtzeDkUl22JXiB6iYfrJO7XF8nm8W5DbJVtxWRRnV8BvWatQ==
dependencies:
another-json "^0.2.0"
babel-runtime "^6.26.0"