diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts index 6f13d3fd272..1bde32ca2b3 100644 --- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts +++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts @@ -21,6 +21,8 @@ import SettingsStore from "../../../../../settings/SettingsStore"; import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks"; import { addReplyToMessageContent } from "../../../../../utils/Reply"; +export const EMOTE_PREFIX = "/me "; + // Merges favouring the given relation function attachRelation(content: IContent, relation?: IEventRelation): void { if (relation) { @@ -61,6 +63,8 @@ interface CreateMessageContentParams { editedEvent?: MatrixEvent; } +const isMatrixEvent = (e: MatrixEvent | undefined): e is MatrixEvent => e instanceof MatrixEvent; + export async function createMessageContent( message: string, isHTML: boolean, @@ -72,22 +76,22 @@ export async function createMessageContent( editedEvent, }: CreateMessageContentParams, ): Promise { - // TODO emote ? - - const isEditing = Boolean(editedEvent); - const isReply = isEditing ? Boolean(editedEvent?.replyEventId) : Boolean(replyToEvent); + const isEditing = isMatrixEvent(editedEvent); + const isReply = isEditing ? Boolean(editedEvent.replyEventId) : isMatrixEvent(replyToEvent); const isReplyAndEditing = isEditing && isReply; - /*const isEmote = containsEmote(model); + const isEmote = message.startsWith(EMOTE_PREFIX); if (isEmote) { - model = stripEmoteCommand(model); + // if we are dealing with an emote we want to remove the prefix so that `/me` does not + // appear after the `* ` text in the timeline + message = message.slice(EMOTE_PREFIX.length); } - if (startsWith(model, "//")) { - model = stripPrefix(model, "/"); + if (message.startsWith("//")) { + // if user wants to enter a single slash at the start of a message, this + // is how they have to do it (due to it clashing with commands), so here we + // remove the first character to make sure //word displays as /word + message = message.slice(1); } - model = unescapeMessage(model);*/ - - // const body = textSerialize(model); // if we're editing rich text, the message content is pure html // BUT if we're not, the message content will be plain text @@ -96,8 +100,7 @@ export async function createMessageContent( const formattedBodyPrefix = (isReplyAndEditing && getHtmlReplyFallback(editedEvent)) || ""; const content: IContent = { - // TODO emote - msgtype: MsgType.Text, + msgtype: isEmote ? MsgType.Emote : MsgType.Text, body: isEditing ? `${bodyPrefix} * ${body}` : body, }; diff --git a/src/components/views/rooms/wysiwyg_composer/utils/message.ts b/src/components/views/rooms/wysiwyg_composer/utils/message.ts index 9753ebae494..1c8c17f818a 100644 --- a/src/components/views/rooms/wysiwyg_composer/utils/message.ts +++ b/src/components/views/rooms/wysiwyg_composer/utils/message.ts @@ -31,7 +31,7 @@ import dis from "../../../../../dispatcher/dispatcher"; import { createRedactEventDialog } from "../../../dialogs/ConfirmRedactDialog"; import { endEditing, cancelPreviousPendingEdit } from "./editing"; import EditorStateTransfer from "../../../../../utils/EditorStateTransfer"; -import { createMessageContent } from "./createMessageContent"; +import { createMessageContent, EMOTE_PREFIX } from "./createMessageContent"; import { isContentModified } from "./isContentModified"; import { CommandCategories, getCommand } from "../../../../../SlashCommands"; import { runSlashCommand, shouldSendAnyway } from "../../../../../editor/commands"; @@ -78,11 +78,11 @@ export async function sendMessage( let content: IContent | null = null; - // Functionality here approximates what can be found in SendMessageComposer.sendMessage() - if (message.startsWith("/") && !message.startsWith("//")) { + // Slash command handling here approximates what can be found in SendMessageComposer.sendMessage() + // but note that the /me and // special cases are handled by the call to createMessageContent + if (message.startsWith("/") && !message.startsWith("//") && !message.startsWith(EMOTE_PREFIX)) { const { cmd, args } = getCommand(message); if (cmd) { - // TODO handle /me special case separately, see end of SlashCommands.Commands const threadId = relation?.rel_type === THREAD_RELATION_TYPE.name ? relation?.event_id : null; let commandSuccessful: boolean; [content, commandSuccessful] = await runSlashCommand(cmd, args, roomId, threadId ?? null); diff --git a/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts index 340a4c1af2c..a77c7dc6045 100644 --- a/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts +++ b/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts @@ -13,10 +13,14 @@ 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 { MsgType } from "matrix-js-sdk/src/matrix"; import { mkEvent } from "../../../../../test-utils"; import { RoomPermalinkCreator } from "../../../../../../src/utils/permalinks/Permalinks"; -import { createMessageContent } from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/createMessageContent"; +import { + createMessageContent, + EMOTE_PREFIX, +} from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/createMessageContent"; describe("createMessageContent", () => { const permalinkCreator = { @@ -130,4 +134,24 @@ describe("createMessageContent", () => { }, }); }); + + it("Should strip the /me prefix from a message", async () => { + const textBody = "some body text"; + const content = await createMessageContent(EMOTE_PREFIX + textBody, true, { permalinkCreator }); + + expect(content).toMatchObject({ body: textBody, formatted_body: textBody }); + }); + + it("Should strip single / from message prefixed with //", async () => { + const content = await createMessageContent("//twoSlashes", true, { permalinkCreator }); + + expect(content).toMatchObject({ body: "/twoSlashes", formatted_body: "/twoSlashes" }); + }); + + it("Should set the content type to MsgType.Emote when /me prefix is used", async () => { + const textBody = "some body text"; + const content = await createMessageContent(EMOTE_PREFIX + textBody, true, { permalinkCreator }); + + expect(content).toMatchObject({ msgtype: MsgType.Emote }); + }); });