Fix regression around pasting links (#8537)

* Fix regression around pasting links

* Add tests

test/components/views/rooms/BasicMessageComposer-test.tsx

@@ -0,0 +1,65 @@
+/*
+Copyright 2022 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 { mount, ReactWrapper } from 'enzyme';
+import { MatrixClient, Room } from 'matrix-js-sdk/src/matrix';
+
+import BasicMessageComposer from '../../../../src/components/views/rooms/BasicMessageComposer';
+import * as TestUtils from "../../../test-utils";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import EditorModel from "../../../../src/editor/model";
+import { createPartCreator, createRenderer } from "../../../editor/mock";
+
+describe("BasicMessageComposer", () => {
+    const renderer = createRenderer();
+    const pc = createPartCreator();
+
+    beforeEach(() => {
+        TestUtils.stubClient();
+    });
+
+    it("should allow a user to paste a URL without it being mangled", () => {
+        const model = new EditorModel([], pc, renderer);
+
+        const wrapper = render(model);
+
+        wrapper.find(".mx_BasicMessageComposer_input").simulate("paste", {
+            clipboardData: {
+                getData: type => {
+                    if (type === "text/plain") {
+                        return "https://element.io";
+                    }
+                },
+            },
+        });
+
+        expect(model.parts).toHaveLength(1);
+        expect(model.parts[0].text).toBe("https://element.io");
+    });
+});
+
+function render(model: EditorModel): ReactWrapper {
+    const client: MatrixClient = MatrixClientPeg.get();
+
+    const roomId = '!1234567890:domain';
+    const userId = client.getUserId();
+    const room = new Room(roomId, client, userId);
+
+    return mount((
+        <BasicMessageComposer model={model} room={room} />
+    ));
+}

test/editor/mock.ts

@@ -18,6 +18,7 @@ import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import AutocompleteWrapperModel from "../../src/editor/autocomplete";
 import { PartCreator } from "../../src/editor/parts";
+import DocumentPosition from "../../src/editor/position";
 
 class MockAutoComplete {
     public _updateCallback;
@@ -78,11 +79,11 @@ export function createPartCreator(completions = []) {
 }
 
 export function createRenderer() {
-    const render = (c) => {
+    const render = (c: DocumentPosition) => {
         render.caret = c;
         render.count += 1;
     };
     render.count = 0;
-    render.caret = null;
+    render.caret = null as DocumentPosition;
     return render;
 }

test/editor/operations-test.ts

@@ -17,21 +17,88 @@ limitations under the License.
 import EditorModel from "../../src/editor/model";
 import { createPartCreator, createRenderer } from "./mock";
 import {
-    toggleInlineFormat,
-    selectRangeOfWordAtCaret,
     formatRange,
     formatRangeAsCode,
+    formatRangeAsLink,
+    selectRangeOfWordAtCaret,
+    toggleInlineFormat,
 } from "../../src/editor/operations";
 import { Formatting } from "../../src/components/views/rooms/MessageComposerFormatBar";
 import { longestBacktickSequence } from '../../src/editor/deserialize';
 
 const SERIALIZED_NEWLINE = { "text": "\n", "type": "newline" };
 
-describe('editor/operations: formatting operations', () => {
-    describe('toggleInlineFormat', () => {
-        it('works for words', () => {
-            const renderer = createRenderer();
-            const pc = createPartCreator();
+describe("editor/operations: formatting operations", () => {
+    const renderer = createRenderer();
+    const pc = createPartCreator();
+
+    describe("formatRange", () => {
+        it.each([
+            [Formatting.Bold, "hello **world**!"],
+        ])("should correctly wrap format %s", (formatting: Formatting, expected: string) => {
+            const model = new EditorModel([
+                pc.plain("hello world!"),
+            ], pc, renderer);
+
+            const range = model.startRange(model.positionForOffset(6, false),
+                model.positionForOffset(11, false));  // around "world"
+
+            expect(range.parts[0].text).toBe("world");
+            expect(model.serializeParts()).toEqual([{ "text": "hello world!", "type": "plain" }]);
+            formatRange(range, formatting);
+            expect(model.serializeParts()).toEqual([{ "text": expected, "type": "plain" }]);
+        });
+
+        it("should apply to word range is within if length 0", () => {
+            const model = new EditorModel([
+                pc.plain("hello world!"),
+            ], pc, renderer);
+
+            const range = model.startRange(model.positionForOffset(6, false));
+
+            expect(model.serializeParts()).toEqual([{ "text": "hello world!", "type": "plain" }]);
+            formatRange(range, Formatting.Bold);
+            expect(model.serializeParts()).toEqual([{ "text": "hello **world!**", "type": "plain" }]);
+        });
+
+        it("should do nothing for a range with length 0 at initialisation", () => {
+            const model = new EditorModel([
+                pc.plain("hello world!"),
+            ], pc, renderer);
+
+            const range = model.startRange(model.positionForOffset(6, false));
+            range.setWasEmpty(false);
+
+            expect(model.serializeParts()).toEqual([{ "text": "hello world!", "type": "plain" }]);
+            formatRange(range, Formatting.Bold);
+            expect(model.serializeParts()).toEqual([{ "text": "hello world!", "type": "plain" }]);
+        });
+    });
+
+    describe("formatRangeAsLink", () => {
+        it.each([
+            // Caret is denoted by | in the expectation string
+            ["testing", "[testing](|)", ""],
+            ["testing", "[testing](foobar|)", "foobar"],
+            ["[testing]()", "testing|", ""],
+            ["[testing](foobar)", "testing|", ""],
+        ])("converts %s -> %s", (input: string, expectation: string, text: string) => {
+            const model = new EditorModel([
+                pc.plain(`foo ${input} bar`),
+            ], pc, renderer);
+
+            const range = model.startRange(model.positionForOffset(4, false),
+                model.positionForOffset(4 + input.length, false));  // around input
+
+            expect(range.parts[0].text).toBe(input);
+            formatRangeAsLink(range, text);
+            expect(renderer.caret.offset).toBe(4 + expectation.indexOf("|"));
+            expect(model.parts[0].text).toBe("foo " + expectation.replace("|", "") + " bar");
+        });
+    });
+
+    describe("toggleInlineFormat", () => {
+        it("works for words", () => {
             const model = new EditorModel([
                 pc.plain("hello world!"),
             ], pc, renderer);