diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 41c9dad394..389a5c9706 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -23,11 +23,11 @@ limitations under the License. } .mx_EventTile[data-layout=bubble] { - position: relative; margin-top: var(--gutterSize); - margin-left: 50px; + margin-left: 49px; margin-right: 100px; + font-size: $font-14px; &.mx_EventTile_continuation { margin-top: 2px; @@ -77,10 +77,11 @@ limitations under the License. max-width: 70%; } - .mx_SenderProfile { + > .mx_SenderProfile { position: relative; top: -2px; left: 2px; + font-size: $font-15px; } &[data-self=false] { @@ -113,8 +114,6 @@ limitations under the License. .mx_ReplyTile .mx_SenderProfile { display: block; - top: unset; - left: unset; } .mx_ReactionsRow { @@ -287,6 +286,8 @@ limitations under the License. .mx_EventTile_line, .mx_EventTile_info { min-width: 100%; + // Preserve alignment with left edge of text in bubbles + margin: 0; } .mx_EventTile_e2eIcon { @@ -294,9 +295,10 @@ limitations under the License. } .mx_EventTile_line > a { + // Align timestamps with those of normal bubble tiles right: auto; - top: -15px; - left: -68px; + top: -11px; + left: -95px; } } @@ -326,11 +328,10 @@ limitations under the License. } .mx_EventTile_line { - margin: 0 5px; + margin: 0; > a { - left: auto; - right: 0; - transform: translateX(calc(100% + 5px)); + // Align timestamps with those of normal bubble tiles + left: -76px; } } @@ -340,7 +341,8 @@ limitations under the License. } .mx_EventListSummary[data-expanded=false][data-layout=bubble] { - padding: 0 34px; + // Align with left edge of bubble tiles + padding: 0 49px; } /* events that do not require bubble layout */ diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 3fffbfd64c..6db2185dd5 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -172,14 +172,12 @@ limitations under the License. } } - // In the general case, we leave height of headers alone even if sticky, so - // that the sublists below them do not jump. However, that leaves a gap - // when scrolled to the top above the first sublist (whose header can only - // ever stick to top), so we force height to 0 for only that first header. - // See also https://github.com/vector-im/element-web/issues/14429. - &:first-child .mx_RoomSublist_headerContainer { - height: 0; - padding-bottom: 4px; + // In the general case, we reserve space for each sublist header to prevent + // scroll jumps when they become sticky. However, that leaves a gap when + // scrolled to the top above the first sublist (whose header can only ever + // stick to top), so we make sure to exclude the first visible sublist. + &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_headerContainer { + height: 24px; } .mx_RoomSublist_resizeBox { diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts index e48fd52cb1..5f5aeb389f 100644 --- a/src/Lifecycle.ts +++ b/src/Lifecycle.ts @@ -574,11 +574,12 @@ async function doSetLoggedIn( await abortLogin(); } - PosthogAnalytics.instance.updateAnonymityFromSettings(credentials.userId); - Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl); MatrixClientPeg.replaceUsingCreds(credentials); + + PosthogAnalytics.instance.updateAnonymityFromSettings(credentials.userId); + const client = MatrixClientPeg.get(); if (credentials.freshLogin && SettingsStore.getValue("feature_dehydration")) { diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 073f24523d..154f167745 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -17,8 +17,8 @@ limitations under the License. import SettingsStore from "./settings/SettingsStore"; import { SettingLevel } from "./settings/SettingLevel"; -import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix"; import EventEmitter from 'events'; +import { MatrixClientPeg } from "./MatrixClientPeg"; // XXX: MediaDeviceKind is a union type, so we make our own enum export enum MediaDeviceKindEnum { @@ -74,8 +74,8 @@ export default class MediaDeviceHandler extends EventEmitter { const audioDeviceId = SettingsStore.getValue("webrtc_audioinput"); const videoDeviceId = SettingsStore.getValue("webrtc_videoinput"); - setMatrixCallAudioInput(audioDeviceId); - setMatrixCallVideoInput(videoDeviceId); + MatrixClientPeg.get().getMediaHandler().setAudioInput(audioDeviceId); + MatrixClientPeg.get().getMediaHandler().setVideoInput(videoDeviceId); } public setAudioOutput(deviceId: string): void { @@ -90,7 +90,7 @@ export default class MediaDeviceHandler extends EventEmitter { */ public setAudioInput(deviceId: string): void { SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); - setMatrixCallAudioInput(deviceId); + MatrixClientPeg.get().getMediaHandler().setAudioInput(deviceId); } /** @@ -100,7 +100,7 @@ export default class MediaDeviceHandler extends EventEmitter { */ public setVideoInput(deviceId: string): void { SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); - setMatrixCallVideoInput(deviceId); + MatrixClientPeg.get().getMediaHandler().setVideoInput(deviceId); } public setDevice(deviceId: string, kind: MediaDeviceKindEnum): void { diff --git a/src/PosthogAnalytics.ts b/src/PosthogAnalytics.ts index 860a155aff..ca0d321e7c 100644 --- a/src/PosthogAnalytics.ts +++ b/src/PosthogAnalytics.ts @@ -18,6 +18,8 @@ import posthog, { PostHog } from 'posthog-js'; import PlatformPeg from './PlatformPeg'; import SdkConfig from './SdkConfig'; import SettingsStore from './settings/SettingsStore'; +import { MatrixClientPeg } from "./MatrixClientPeg"; +import { MatrixClient } from "matrix-js-sdk/src/client"; /* Posthog analytics tracking. * @@ -141,6 +143,7 @@ export class PosthogAnalytics { private enabled = false; private static _instance = null; private platformSuperProperties = {}; + private static ANALYTICS_ID_EVENT_TYPE = "im.vector.web.analytics_id"; public static get instance(): PosthogAnalytics { if (!this._instance) { @@ -274,9 +277,32 @@ export class PosthogAnalytics { this.anonymity = anonymity; } - public async identifyUser(userId: string): Promise { + private static getRandomAnalyticsId(): string { + return [...crypto.getRandomValues(new Uint8Array(16))].map((c) => c.toString(16)).join(''); + } + + public async identifyUser(client: MatrixClient, analyticsIdGenerator: () => string): Promise { if (this.anonymity == Anonymity.Pseudonymous) { - this.posthog.identify(await hashHex(userId)); + // Check the user's account_data for an analytics ID to use. Storing the ID in account_data allows + // different devices to send the same ID. + try { + const accountData = await client.getAccountDataFromServer(PosthogAnalytics.ANALYTICS_ID_EVENT_TYPE); + let analyticsID = accountData?.id; + if (!analyticsID) { + // Couldn't retrieve an analytics ID from user settings, so create one and set it on the server. + // Note there's a race condition here - if two devices do these steps at the same time, last write + // wins, and the first writer will send tracking with an ID that doesn't match the one on the server + // until the next time account data is refreshed and this function is called (most likely on next + // page load). This will happen pretty infrequently, so we can tolerate the possibility. + analyticsID = analyticsIdGenerator(); + await client.setAccountData("im.vector.web.analytics_id", { id: analyticsID }); + } + this.posthog.identify(analyticsID); + } catch (e) { + // The above could fail due to network requests, but not essential to starting the application, + // so swallow it. + console.log("Unable to identify user for tracking" + e.toString()); + } } } @@ -349,7 +375,7 @@ export class PosthogAnalytics { // Identify the user (via hashed user ID) to posthog if anonymity is pseudonmyous this.setAnonymity(PosthogAnalytics.getAnonymityFromSettings()); if (userId && this.getAnonymity() == Anonymity.Pseudonymous) { - await this.identifyUser(userId); + await this.identifyUser(MatrixClientPeg.get(), PosthogAnalytics.getRandomAnalyticsId); } } } diff --git a/src/Resend.ts b/src/Resend.ts index 38b84a28e0..be9fb9550b 100644 --- a/src/Resend.ts +++ b/src/Resend.ts @@ -48,11 +48,6 @@ export default class Resend { // XXX: temporary logging to try to diagnose // https://github.com/vector-im/element-web/issues/3148 console.log('Resend got send failure: ' + err.name + '(' + err + ')'); - - dis.dispatch({ - action: 'message_send_failed', - event: event, - }); }); } diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 14a9e54259..280d56d3c0 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1897,15 +1897,10 @@ export default class MatrixChat extends React.PureComponent { onSendEvent(roomId: string, event: MatrixEvent) { const cli = MatrixClientPeg.get(); - if (!cli) { - dis.dispatch({ action: 'message_send_failed' }); - return; - } + if (!cli) return; cli.sendEvent(roomId, event.getType(), event.getContent()).then(() => { dis.dispatch({ action: 'message_sent' }); - }, (err) => { - dis.dispatch({ action: 'message_send_failed' }); }); } diff --git a/src/components/views/avatars/MemberStatusMessageAvatar.js b/src/components/views/avatars/MemberStatusMessageAvatar.tsx similarity index 76% rename from src/components/views/avatars/MemberStatusMessageAvatar.js rename to src/components/views/avatars/MemberStatusMessageAvatar.tsx index 82b7b8e400..8c703b3b32 100644 --- a/src/components/views/avatars/MemberStatusMessageAvatar.js +++ b/src/components/views/avatars/MemberStatusMessageAvatar.tsx @@ -15,43 +15,48 @@ limitations under the License. */ import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { _t } from "../../../languageHandler"; import MemberAvatar from '../avatars/MemberAvatar'; import classNames from 'classnames'; import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu"; import SettingsStore from "../../../settings/SettingsStore"; -import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu"; +import { ChevronFace, ContextMenu, ContextMenuButton } from "../../structures/ContextMenu"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { ResizeMethod } from "matrix-js-sdk/src/@types/partials"; + +interface IProps { + member: RoomMember; + width?: number; + height?: number; + resizeMethod?: ResizeMethod; +} + +interface IState { + hasStatus: boolean; + menuDisplayed: boolean; +} @replaceableComponent("views.avatars.MemberStatusMessageAvatar") -export default class MemberStatusMessageAvatar extends React.Component { - static propTypes = { - member: PropTypes.object.isRequired, - width: PropTypes.number, - height: PropTypes.number, - resizeMethod: PropTypes.string, - }; - - static defaultProps = { +export default class MemberStatusMessageAvatar extends React.Component { + public static defaultProps: Partial = { width: 40, height: 40, resizeMethod: 'crop', }; + private button = createRef(); - constructor(props) { + constructor(props: IProps) { super(props); this.state = { hasStatus: this.hasStatus, menuDisplayed: false, }; - - this._button = createRef(); } - componentDidMount() { + public componentDidMount(): void { if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) { throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user"); } @@ -62,44 +67,44 @@ export default class MemberStatusMessageAvatar extends React.Component { if (!user) { return; } - user.on("User._unstable_statusMessage", this._onStatusMessageCommitted); + user.on("User._unstable_statusMessage", this.onStatusMessageCommitted); } - componentWillUnmount() { + public componentWillUnmount(): void { const { user } = this.props.member; if (!user) { return; } user.removeListener( "User._unstable_statusMessage", - this._onStatusMessageCommitted, + this.onStatusMessageCommitted, ); } - get hasStatus() { + private get hasStatus(): boolean { const { user } = this.props.member; if (!user) { return false; } - return !!user._unstable_statusMessage; + return !!user.unstable_statusMessage; } - _onStatusMessageCommitted = () => { + private onStatusMessageCommitted = (): void => { // The `User` object has observed a status message change. this.setState({ hasStatus: this.hasStatus, }); }; - openMenu = () => { + private openMenu = (): void => { this.setState({ menuDisplayed: true }); }; - closeMenu = () => { + private closeMenu = (): void => { this.setState({ menuDisplayed: false }); }; - render() { + public render(): JSX.Element { const avatar = - + ); } @@ -140,7 +145,7 @@ export default class MemberStatusMessageAvatar extends React.Component { return void; +} + +/** * This component can be used to display generic HTML content in a contextual * menu. */ - @replaceableComponent("views.context_menus.GenericElementContextMenu") -export default class GenericElementContextMenu extends React.Component { - static propTypes = { - element: PropTypes.element.isRequired, - // Function to be called when the parent window is resized - // This can be used to reposition or close the menu on resize and - // ensure that it is not displayed in a stale position. - onResize: PropTypes.func, - }; - - constructor(props) { +export default class GenericElementContextMenu extends React.Component { + constructor(props: IProps) { super(props); - this.resize = this.resize.bind(this); } - componentDidMount() { - this.resize = this.resize.bind(this); + public componentDidMount(): void { window.addEventListener("resize", this.resize); } - componentWillUnmount() { + public componentWillUnmount(): void { window.removeEventListener("resize", this.resize); } - resize() { + private resize = (): void => { if (this.props.onResize) { this.props.onResize(); } - } + }; - render() { + public render(): JSX.Element { return
{ this.props.element }
; } } diff --git a/src/components/views/context_menus/GenericTextContextMenu.js b/src/components/views/context_menus/GenericTextContextMenu.tsx similarity index 86% rename from src/components/views/context_menus/GenericTextContextMenu.js rename to src/components/views/context_menus/GenericTextContextMenu.tsx index 474732e88b..3ca158dd02 100644 --- a/src/components/views/context_menus/GenericTextContextMenu.js +++ b/src/components/views/context_menus/GenericTextContextMenu.tsx @@ -15,16 +15,15 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { replaceableComponent } from "../../../utils/replaceableComponent"; -@replaceableComponent("views.context_menus.GenericTextContextMenu") -export default class GenericTextContextMenu extends React.Component { - static propTypes = { - message: PropTypes.string.isRequired, - }; +interface IProps { + message: string; +} - render() { +@replaceableComponent("views.context_menus.GenericTextContextMenu") +export default class GenericTextContextMenu extends React.Component { + public render(): JSX.Element { return
{ this.props.message }
; } } diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.tsx similarity index 71% rename from src/components/views/context_menus/StatusMessageContextMenu.js rename to src/components/views/context_menus/StatusMessageContextMenu.tsx index e05b05116c..954dc3f5c0 100644 --- a/src/components/views/context_menus/StatusMessageContextMenu.js +++ b/src/components/views/context_menus/StatusMessageContextMenu.tsx @@ -14,53 +14,59 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { ChangeEvent } from 'react'; import { _t } from '../../../languageHandler'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; -import * as sdk from '../../../index'; -import AccessibleButton from '../elements/AccessibleButton'; +import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { User } from "matrix-js-sdk/src/models/user"; +import Spinner from "../elements/Spinner"; + +interface IProps { + // js-sdk User object. Not required because it might not exist. + user?: User; +} + +interface IState { + message: string; + waiting: boolean; +} @replaceableComponent("views.context_menus.StatusMessageContextMenu") -export default class StatusMessageContextMenu extends React.Component { - static propTypes = { - // js-sdk User object. Not required because it might not exist. - user: PropTypes.object, - }; - - constructor(props) { +export default class StatusMessageContextMenu extends React.Component { + constructor(props: IProps) { super(props); this.state = { message: this.comittedStatusMessage, + waiting: false, }; } - componentDidMount() { + public componentDidMount(): void { const { user } = this.props; if (!user) { return; } - user.on("User._unstable_statusMessage", this._onStatusMessageCommitted); + user.on("User._unstable_statusMessage", this.onStatusMessageCommitted); } - componentWillUnmount() { + public componentWillUnmount(): void { const { user } = this.props; if (!user) { return; } user.removeListener( "User._unstable_statusMessage", - this._onStatusMessageCommitted, + this.onStatusMessageCommitted, ); } - get comittedStatusMessage() { - return this.props.user ? this.props.user._unstable_statusMessage : ""; + get comittedStatusMessage(): string { + return this.props.user ? this.props.user.unstable_statusMessage : ""; } - _onStatusMessageCommitted = () => { + private onStatusMessageCommitted = (): void => { // The `User` object has observed a status message change. this.setState({ message: this.comittedStatusMessage, @@ -68,14 +74,14 @@ export default class StatusMessageContextMenu extends React.Component { }); }; - _onClearClick = (e) => { + private onClearClick = (): void=> { MatrixClientPeg.get()._unstable_setStatusMessage(""); this.setState({ waiting: true, }); }; - _onSubmit = (e) => { + private onSubmit = (e: ButtonEvent): void => { e.preventDefault(); MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message); this.setState({ @@ -83,27 +89,25 @@ export default class StatusMessageContextMenu extends React.Component { }); }; - _onStatusChange = (e) => { + private onStatusChange = (e: ChangeEvent): void => { // The input field's value was changed. this.setState({ - message: e.target.value, + message: (e.target as HTMLInputElement).value, }); }; - render() { - const Spinner = sdk.getComponent('views.elements.Spinner'); - + public render(): JSX.Element { let actionButton; if (this.comittedStatusMessage) { if (this.state.message === this.comittedStatusMessage) { actionButton = { _t("Clear status") } ; } else { actionButton = { _t("Update status") } ; @@ -112,7 +116,7 @@ export default class StatusMessageContextMenu extends React.Component { actionButton = { _t("Set status") } ; @@ -120,13 +124,13 @@ export default class StatusMessageContextMenu extends React.Component { let spinner = null; if (this.state.waiting) { - spinner = ; + spinner = ; } const form =
{ actionButton } diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 48f2e2a39b..d83e2e964a 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -50,7 +50,8 @@ import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from import { replaceableComponent } from "../../../utils/replaceableComponent"; // matches emoticons which follow the start of a line or whitespace -const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$'); +const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$'); +export const REGEX_EMOTICON = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')$'); const IS_MAC = navigator.platform.indexOf("Mac") !== -1; @@ -161,7 +162,7 @@ export default class BasicMessageEditor extends React.Component } } - private replaceEmoticon = (caretPosition: DocumentPosition): number => { + public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp): number { const { model } = this.props; const range = model.startRange(caretPosition); // expand range max 8 characters backwards from caretPosition, @@ -170,9 +171,9 @@ export default class BasicMessageEditor extends React.Component range.expandBackwardsWhile((index, offset) => { const part = model.parts[index]; n -= 1; - return n >= 0 && (part.type === Type.Plain || part.type === Type.PillCandidate); + return n >= 0 && [Type.Plain, Type.PillCandidate, Type.Newline].includes(part.type); }); - const emoticonMatch = REGEX_EMOTICON_WHITESPACE.exec(range.text); + const emoticonMatch = regex.exec(range.text); if (emoticonMatch) { const query = emoticonMatch[1].replace("-", ""); // try both exact match and lower-case, this means that xd won't match xD but :P will match :p @@ -180,18 +181,23 @@ export default class BasicMessageEditor extends React.Component if (data) { const { partCreator } = model; - const hasPrecedingSpace = emoticonMatch[0][0] === " "; + const moveStart = emoticonMatch[0][0] === " " ? 1 : 0; + const moveEnd = emoticonMatch[0].length - emoticonMatch.length - moveStart; + // we need the range to only comprise of the emoticon // because we'll replace the whole range with an emoji, // so move the start forward to the start of the emoticon. // Take + 1 because index is reported without the possible preceding space. - range.moveStart(emoticonMatch.index + (hasPrecedingSpace ? 1 : 0)); + range.moveStartForwards(emoticonMatch.index + moveStart); + // and move end backwards so that we don't replace the trailing space/newline + range.moveEndBackwards(moveEnd); + // this returns the amount of added/removed characters during the replace // so the caret position can be adjusted. - return range.replace([partCreator.plain(data.unicode + " ")]); + return range.replace([partCreator.plain(data.unicode)]); } } - }; + } private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff): void => { renderModel(this.editorRef.current, this.props.model); @@ -607,8 +613,7 @@ export default class BasicMessageEditor extends React.Component }; private configureEmoticonAutoReplace = (): void => { - const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji'); - this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null); + this.props.model.setTransformCallback(this.transform); }; private configureShouldShowPillAvatar = (): void => { @@ -621,6 +626,11 @@ export default class BasicMessageEditor extends React.Component this.setState({ surroundWith }); }; + private transform = (documentPosition: DocumentPosition): void => { + const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji'); + if (shouldReplace) this.replaceEmoticon(documentPosition, REGEX_EMOTICON_WHITESPACE); + }; + componentWillUnmount() { document.removeEventListener("selectionchange", this.onSelectionChange); this.editorRef.current.removeEventListener("input", this.onInput, true); diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 506bf09a92..332341fd23 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -57,7 +57,7 @@ let instanceCount = 0; const NARROW_MODE_BREAKPOINT = 500; interface IComposerAvatarProps { - me: object; + me: RoomMember; } function ComposerAvatar(props: IComposerAvatarProps) { diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx index bb5d537895..b2fca33dfe 100644 --- a/src/components/views/rooms/SendMessageComposer.tsx +++ b/src/components/views/rooms/SendMessageComposer.tsx @@ -31,8 +31,8 @@ import { textSerialize, unescapeMessage, } from '../../../editor/serialize'; +import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer"; import { CommandPartCreator, Part, PartCreator, SerializedPart, Type } from '../../../editor/parts'; -import BasicMessageComposer from "./BasicMessageComposer"; import ReplyThread from "../elements/ReplyThread"; import { findEditableEvent } from '../../../utils/EventUtils'; import SendHistoryManager from "../../../SendHistoryManager"; @@ -347,15 +347,24 @@ export default class SendMessageComposer extends React.Component { } public async sendMessage(): Promise { - if (this.model.isEmpty) { + const model = this.model; + + if (model.isEmpty) { return; } + // Replace emoticon at the end of the message + if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) { + const caret = this.editorRef.current?.getCaret(); + const position = model.positionForOffset(caret.offset, caret.atNodeEnd); + this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON); + } + const replyToEvent = this.props.replyToEvent; let shouldSend = true; let content; - if (!containsEmote(this.model) && this.isSlashCommand()) { + if (!containsEmote(model) && this.isSlashCommand()) { const [cmd, args, commandText] = this.getSlashCommand(); if (cmd) { if (cmd.category === CommandCategories.messages) { @@ -400,7 +409,7 @@ export default class SendMessageComposer extends React.Component { } } - if (isQuickReaction(this.model)) { + if (isQuickReaction(model)) { shouldSend = false; this.sendQuickReaction(); } @@ -410,7 +419,7 @@ export default class SendMessageComposer extends React.Component { const { roomId } = this.props.room; if (!content) { content = createMessageContent( - this.model, + model, replyToEvent, this.props.replyInThread, this.props.permalinkCreator, @@ -446,9 +455,9 @@ export default class SendMessageComposer extends React.Component { CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, !!replyToEvent, content); } - this.sendHistoryManager.save(this.model, replyToEvent); + this.sendHistoryManager.save(model, replyToEvent); // clear composer - this.model.reset([]); + model.reset([]); this.editorRef.current?.clearUndoHistory(); this.editorRef.current?.focus(); this.clearStoredEditorState(); diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index cec67499ae..17fda93921 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -277,9 +277,13 @@ export default class CallView extends React.Component { if (this.state.screensharing) { isScreensharing = await this.props.call.setScreensharingEnabled(false); } else { - const { finished } = Modal.createDialog(DesktopCapturerSourcePicker); - const [source] = await finished; - isScreensharing = await this.props.call.setScreensharingEnabled(true, source); + if (window.electron?.getDesktopCapturerSources) { + const { finished } = Modal.createDialog(DesktopCapturerSourcePicker); + const [source] = await finished; + isScreensharing = await this.props.call.setScreensharingEnabled(true, source); + } else { + isScreensharing = await this.props.call.setScreensharingEnabled(true); + } } this.setState({ diff --git a/src/editor/range.ts b/src/editor/range.ts index 13776177a7..4336a15130 100644 --- a/src/editor/range.ts +++ b/src/editor/range.ts @@ -32,13 +32,20 @@ export default class Range { this._end = bIsLarger ? positionB : positionA; } - public moveStart(delta: number): void { + public moveStartForwards(delta: number): void { this._start = this._start.forwardsWhile(this.model, () => { delta -= 1; return delta >= 0; }); } + public moveEndBackwards(delta: number): void { + this._end = this._end.backwardsWhile(this.model, () => { + delta -= 1; + return delta >= 0; + }); + } + public trim(): void { this._start = this._start.forwardsWhile(this.model, whitespacePredicate); this._end = this._end.backwardsWhile(this.model, whitespacePredicate); diff --git a/test/PosthogAnalytics-test.ts b/test/PosthogAnalytics-test.ts index 6cb1743051..2832fbe92e 100644 --- a/test/PosthogAnalytics-test.ts +++ b/test/PosthogAnalytics-test.ts @@ -218,15 +218,28 @@ bd75b3e080945674c0351f75e0db33d1e90986fa07b318ea7edf776f5eef38d4`); it("Should identify the user to posthog if pseudonymous", async () => { analytics.setAnonymity(Anonymity.Pseudonymous); - await analytics.identifyUser("foo"); - expect(fakePosthog.identify.mock.calls[0][0]) - .toBe("2c26b46b68ffc68ff99b453c1d30413413422d706483bfa0f98a5e886266e7ae"); + class FakeClient { + getAccountDataFromServer = jest.fn().mockResolvedValue(null); + setAccountData = jest.fn().mockResolvedValue({}); + } + await analytics.identifyUser(new FakeClient(), () => "analytics_id" ); + expect(fakePosthog.identify.mock.calls[0][0]).toBe("analytics_id"); }); it("Should not identify the user to posthog if anonymous", async () => { analytics.setAnonymity(Anonymity.Anonymous); - await analytics.identifyUser("foo"); + await analytics.identifyUser(null); expect(fakePosthog.identify.mock.calls.length).toBe(0); }); + + it("Should identify using the server's analytics id if present", async () => { + analytics.setAnonymity(Anonymity.Pseudonymous); + class FakeClient { + getAccountDataFromServer = jest.fn().mockResolvedValue({ id: "existing_analytics_id" }); + setAccountData = jest.fn().mockResolvedValue({}); + } + await analytics.identifyUser(new FakeClient(), () => "new_analytics_id" ); + expect(fakePosthog.identify.mock.calls[0][0]).toBe("existing_analytics_id"); + }); }); });