From e91f4b7eb25622dcee27ac4b608ddddd802d1ed2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 14 Apr 2021 19:15:19 +0200 Subject: [PATCH 1/5] Add model var MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/SendMessageComposer.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 75bc9431466..a3e841a0e24 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -328,6 +328,8 @@ export default class SendMessageComposer extends React.Component { } async _sendMessage() { + const model = this.model; + if (this.model.isEmpty) { return; } @@ -336,7 +338,7 @@ export default class SendMessageComposer extends React.Component { 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) { @@ -377,7 +379,7 @@ export default class SendMessageComposer extends React.Component { } } - if (isQuickReaction(this.model)) { + if (isQuickReaction(model)) { shouldSend = false; this._sendQuickReaction(); } @@ -386,7 +388,7 @@ export default class SendMessageComposer extends React.Component { const startTime = CountlyAnalytics.getTimestamp(); const {roomId} = this.props.room; if (!content) { - content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent); + content = createMessageContent(model, this.props.permalinkCreator, replyToEvent); } // don't bother sending an empty message if (!content.body.trim()) return; @@ -409,9 +411,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.clearUndoHistory(); this._editorRef.focus(); this._clearStoredEditorState(); From 3edf05d38d72ec72522842d7e27a2e298b2e077c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Apr 2021 08:43:00 +0200 Subject: [PATCH 2/5] Replace emoji at the end of a message MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/rooms/BasicMessageComposer.tsx | 15 ++++++++++----- src/components/views/rooms/SendMessageComposer.js | 7 ++++++- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 9d9e3a1ba0f..f19b5903df0 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -51,6 +51,7 @@ 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$'); +export const REGEX_EMOTICON = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')$'); const IS_MAC = navigator.platform.indexOf("Mac") !== -1; @@ -150,7 +151,7 @@ export default class BasicMessageEditor extends React.Component } } - private replaceEmoticon = (caretPosition: DocumentPosition) => { + public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp) { const {model} = this.props; const range = model.startRange(caretPosition); // expand range max 8 characters backwards from caretPosition, @@ -161,7 +162,7 @@ export default class BasicMessageEditor extends React.Component n -= 1; return n >= 0 && (part.type === "plain" || part.type === "pill-candidate"); }); - 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,7 +181,7 @@ export default class BasicMessageEditor extends React.Component return range.replace([partCreator.plain(data.unicode + " ")]); } } - }; + } private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff) => { renderModel(this.editorRef.current, this.props.model); @@ -567,8 +568,7 @@ export default class BasicMessageEditor extends React.Component }; private configureEmoticonAutoReplace = () => { - const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji'); - this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null); + this.props.model.setTransformCallback(this.transform); }; private configureShouldShowPillAvatar = () => { @@ -576,6 +576,11 @@ export default class BasicMessageEditor extends React.Component this.setState({ showPillAvatar }); }; + private transform = (documentPosition: DocumentPosition) => { + 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/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index a3e841a0e24..703d409b005 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -28,7 +28,7 @@ import { stripPrefix, } from '../../../editor/serialize'; import {CommandPartCreator} from '../../../editor/parts'; -import BasicMessageComposer from "./BasicMessageComposer"; +import BasicMessageComposer, {REGEX_EMOTICON} from "./BasicMessageComposer"; import ReplyThread from "../elements/ReplyThread"; import {parseEvent} from '../../../editor/deserialize'; import {findEditableEvent} from '../../../utils/EventUtils'; @@ -334,6 +334,11 @@ export default class SendMessageComposer extends React.Component { return; } + // Replace emoticon at the end of the message + const caret = this._editorRef.getCaret(); + const position = model.positionForOffset(caret.offset, caret.atNodeEnd); + this._editorRef.replaceEmoticon(position, REGEX_EMOTICON); + const replyToEvent = this.props.replyToEvent; let shouldSend = true; let content; From 609196a240a8783576fea33599c343a68648e53f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Apr 2021 10:02:50 +0200 Subject: [PATCH 3/5] Replace emoticon before a newline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/rooms/BasicMessageComposer.tsx | 15 ++++++++++----- src/editor/range.ts | 7 +++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index f19b5903df0..e84d8bb9c00 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -50,7 +50,7 @@ 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; @@ -160,7 +160,7 @@ export default class BasicMessageEditor extends React.Component range.expandBackwardsWhile((index, offset) => { const part = model.parts[index]; n -= 1; - return n >= 0 && (part.type === "plain" || part.type === "pill-candidate"); + return n >= 0 && ["plain", "pill-candidate", "newline"].includes(part.type); }); const emoticonMatch = regex.exec(range.text); if (emoticonMatch) { @@ -170,15 +170,20 @@ 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.moveStart(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)]); } } } diff --git a/src/editor/range.ts b/src/editor/range.ts index 838dfd8b983..b390ad1d5ed 100644 --- a/src/editor/range.ts +++ b/src/editor/range.ts @@ -39,6 +39,13 @@ export default class Range { }); } + moveEndBackwards(delta: number) { + this._end = this._end.backwardsWhile(this.model, () => { + delta -= 1; + return delta >= 0; + }); + } + trim() { this._start = this._start.forwardsWhile(this.model, whitespacePredicate); this._end = this._end.backwardsWhile(this.model, whitespacePredicate); From d36f8ccb95bce378026f7a17d9d49fe99191abcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Apr 2021 10:18:49 +0200 Subject: [PATCH 4/5] Rename moveStart to moveStartForwards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit So it it's clear what it does Signed-off-by: Šimon Brandner --- src/components/views/rooms/BasicMessageComposer.tsx | 2 +- src/editor/range.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index e84d8bb9c00..09f43fc9a40 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -177,7 +177,7 @@ export default class BasicMessageEditor extends React.Component // 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 + moveStart); + range.moveStartForwards(emoticonMatch.index + moveStart); // and move end backwards so that we don't replace the trailing space/newline range.moveEndBackwards(moveEnd); diff --git a/src/editor/range.ts b/src/editor/range.ts index b390ad1d5ed..313a1b9ac80 100644 --- a/src/editor/range.ts +++ b/src/editor/range.ts @@ -32,7 +32,7 @@ export default class Range { this._end = bIsLarger ? positionB : positionA; } - moveStart(delta: number) { + moveStartForwards(delta: number) { this._start = this._start.forwardsWhile(this.model, () => { delta -= 1; return delta >= 0; From f4ca073b4ae316400b163492c1fcbbc992bbaf7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 11 Sep 2021 10:26:15 +0200 Subject: [PATCH 5/5] Don't auto replace if not enabled MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/SendMessageComposer.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx index 0a33af30b9b..b2fca33dfe3 100644 --- a/src/components/views/rooms/SendMessageComposer.tsx +++ b/src/components/views/rooms/SendMessageComposer.tsx @@ -354,9 +354,11 @@ export default class SendMessageComposer extends React.Component { } // Replace emoticon at the end of the message - const caret = this.editorRef.current?.getCaret(); - const position = model.positionForOffset(caret.offset, caret.atNodeEnd); - this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON); + 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;