From aec130e43bcbe1929fa59c05ab88968396ca8ea8 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 2 Jan 2023 17:51:24 +0100
Subject: [PATCH 01/14] Use BaseDialog instead of QuestionDialog

---
 .../components/_LinkModal.pcss                | 15 ++-
 .../components/FormattingButtons.tsx          |  2 +-
 .../wysiwyg_composer/components/LinkModal.tsx | 99 ++++++++++++-------
 .../components/LinkModal-test.tsx             |  1 +
 4 files changed, 78 insertions(+), 39 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 5bd02cc245a..0610a90c4cd 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -17,13 +17,18 @@ limitations under the License.
 .mx_LinkModal {
     padding: $spacing-32;
 
-    .mx_Dialog_content {
-        margin-top: 30px;
-        margin-bottom: 42px;
-    }
-
     .mx_LinkModal_content {
         display: flex;
         flex-direction: column;
+
+        .mx_LinkModal_buttons {
+            display: flex;
+            align-items: baseline;
+
+            .mx_Dialog_buttons {
+                display: inline-block;
+            }
+        }
     }
+
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index d2cafb11989..6f85328ba56 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -120,7 +120,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 isActive={actionStates.link === "reversed"}
                 label={_td("Link")}
-                onClick={() => openLinkModal(composer, composerContext)}
+                onClick={() => openLinkModal(composer, composerContext, actionStates.link === "reversed")}
                 icon={<LinkIcon className="mx_FormattingButtons_Icon" />}
             />
         </div>
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 2dcfc43eadf..fcda58cc98a 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -17,17 +17,28 @@ limitations under the License.
 import { FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 import React, { ChangeEvent, useState } from "react";
 
-import { _td } from "../../../../../languageHandler";
+import { _t, _td } from "../../../../../languageHandler";
 import Modal from "../../../../../Modal";
-import QuestionDialog from "../../../dialogs/QuestionDialog";
 import Field from "../../../elements/Field";
 import { ComposerContextState } from "../ComposerContext";
 import { isSelectionEmpty, setSelection } from "../utils/selection";
+import BaseDialog from "../../../dialogs/BaseDialog";
+import DialogButtons from "../../../elements/DialogButtons";
 
-export function openLinkModal(composer: FormattingFunctions, composerContext: ComposerContextState) {
+export function openLinkModal(
+    composer: FormattingFunctions,
+    composerContext: ComposerContextState,
+    isEdition: boolean,
+) {
     const modal = Modal.createDialog(
         LinkModal,
-        { composerContext, composer, onClose: () => modal.close(), isTextEnabled: isSelectionEmpty() },
+        {
+            composerContext,
+            composer,
+            onClose: () => modal.close(),
+            isTextEnabled: !isEdition && isSelectionEmpty(),
+            isEdition,
+        },
         "mx_CompoundDialog",
         false,
         true,
@@ -43,48 +54,70 @@ interface LinkModalProps {
     isTextEnabled: boolean;
     onClose: () => void;
     composerContext: ComposerContextState;
+    isEdition: boolean;
 }
 
-export function LinkModal({ composer, isTextEnabled, onClose, composerContext }: LinkModalProps) {
+export function LinkModal({ composer, isTextEnabled, onClose, composerContext, isEdition }: LinkModalProps) {
     const [fields, setFields] = useState({ text: "", link: "" });
     const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
 
     return (
-        <QuestionDialog
+        <BaseDialog
             className="mx_LinkModal"
-            title={_td("Create a link")}
-            button={_td("Save")}
-            buttonDisabled={isSaveDisabled}
-            hasCancelButton={true}
-            onFinished={async (isClickOnSave: boolean) => {
-                if (isClickOnSave) {
+            title={isEdition ? _td("Edit link") : _td("Create a link")}
+            hasCancel={true}
+            onFinished={() => onClose()}
+        >
+            <form
+                id="link_form"
+                className="mx_LinkModal_content"
+                onSubmit={async (evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+
                     await setSelection(composerContext.selection);
                     composer.link(fields.link, isTextEnabled ? fields.text : undefined);
-                }
-                onClose();
-            }}
-            description={
-                <div className="mx_LinkModal_content">
-                    {isTextEnabled && (
-                        <Field
-                            autoFocus={true}
-                            label={_td("Text")}
-                            value={fields.text}
-                            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                                setFields((fields) => ({ ...fields, text: e.target.value }))
-                            }
-                        />
-                    )}
+                    onClose();
+                }}
+            >
+                {isTextEnabled && (
                     <Field
-                        autoFocus={!isTextEnabled}
-                        label={_td("Link")}
-                        value={fields.link}
+                        required={true}
+                        autoFocus={true}
+                        label={_td("Text")}
+                        value={fields.text}
                         onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            setFields((fields) => ({ ...fields, link: e.target.value }))
+                            setFields((fields) => ({ ...fields, text: e.target.value }))
                         }
                     />
+                )}
+                <Field
+                    required={true}
+                    autoFocus={!isTextEnabled}
+                    label={_td("Link")}
+                    value={fields.link}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setFields((fields) => ({ ...fields, link: e.target.value }))
+                    }
+                />
+
+                <div className="mx_LinkModal_buttons">
+                    <button
+                        className="danger"
+                        onClick={() => {
+                            // TODO
+                        }}
+                    >
+                        {_t("Remove")}
+                    </button>
+                    <DialogButtons
+                        primaryButton={_t("Save")}
+                        primaryDisabled={isSaveDisabled}
+                        primaryIsSubmit={true}
+                        onCancel={() => onClose()}
+                    />
                 </div>
-            }
-        />
+            </form>
+        </BaseDialog>
     );
 }
diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
index c2fd1aeff20..5ea5d3a4c0c 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -42,6 +42,7 @@ describe("LinkModal", () => {
                 isTextEnabled={isTextEnabled}
                 onClose={onClose}
                 composerContext={{ selection: defaultValue }}
+                isEdition={false}
             />,
         );
     };

From f143a14271029c262512756f0036d33b484c9bf6 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 3 Jan 2023 16:04:44 +0100
Subject: [PATCH 02/14] Add Remove behavior for link

---
 .../wysiwyg_composer/components/LinkModal.tsx | 33 ++++++++++---------
 .../components/LinkModal-test.tsx             | 16 +++++++--
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index fcda58cc98a..07e17ed4c91 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -28,7 +28,7 @@ import DialogButtons from "../../../elements/DialogButtons";
 export function openLinkModal(
     composer: FormattingFunctions,
     composerContext: ComposerContextState,
-    isEdition: boolean,
+    isEditing: boolean,
 ) {
     const modal = Modal.createDialog(
         LinkModal,
@@ -36,8 +36,8 @@ export function openLinkModal(
             composerContext,
             composer,
             onClose: () => modal.close(),
-            isTextEnabled: !isEdition && isSelectionEmpty(),
-            isEdition,
+            isTextEnabled: !isEditing && isSelectionEmpty(),
+            isEditing,
         },
         "mx_CompoundDialog",
         false,
@@ -54,22 +54,21 @@ interface LinkModalProps {
     isTextEnabled: boolean;
     onClose: () => void;
     composerContext: ComposerContextState;
-    isEdition: boolean;
+    isEditing: boolean;
 }
 
-export function LinkModal({ composer, isTextEnabled, onClose, composerContext, isEdition }: LinkModalProps) {
+export function LinkModal({ composer, isTextEnabled, onClose, composerContext, isEditing }: LinkModalProps) {
     const [fields, setFields] = useState({ text: "", link: "" });
     const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
 
     return (
         <BaseDialog
             className="mx_LinkModal"
-            title={isEdition ? _td("Edit link") : _td("Create a link")}
+            title={isEditing ? _td("Edit link") : _td("Create a link")}
             hasCancel={true}
             onFinished={() => onClose()}
         >
             <form
-                id="link_form"
                 className="mx_LinkModal_content"
                 onSubmit={async (evt) => {
                     evt.preventDefault();
@@ -102,14 +101,18 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                 />
 
                 <div className="mx_LinkModal_buttons">
-                    <button
-                        className="danger"
-                        onClick={() => {
-                            // TODO
-                        }}
-                    >
-                        {_t("Remove")}
-                    </button>
+                    {isEditing && (
+                        <button
+                            type="button"
+                            className="danger"
+                            onClick={() => {
+                                composer.removeLinks();
+                                onClose();
+                            }}
+                        >
+                            {_t("Remove")}
+                        </button>
+                    )}
                     <DialogButtons
                         primaryButton={_t("Save")}
                         primaryDisabled={isSaveDisabled}
diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
index 5ea5d3a4c0c..bc6ecc53709 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -27,6 +27,7 @@ import { SubSelection } from "../../../../../../src/components/views/rooms/wysiw
 describe("LinkModal", () => {
     const formattingFunctions = {
         link: jest.fn(),
+        removeLinks: jest.fn(),
     } as unknown as FormattingFunctions;
     const defaultValue: SubSelection = {
         focusNode: null,
@@ -35,14 +36,14 @@ describe("LinkModal", () => {
         anchorOffset: 4,
     };
 
-    const customRender = (isTextEnabled: boolean, onClose: () => void) => {
+    const customRender = (isTextEnabled: boolean, onClose: () => void, isEditing = false) => {
         return render(
             <LinkModal
                 composer={formattingFunctions}
                 isTextEnabled={isTextEnabled}
                 onClose={onClose}
                 composerContext={{ selection: defaultValue }}
-                isEdition={false}
+                isEditing={isEditing}
             />,
         );
     };
@@ -130,4 +131,15 @@ describe("LinkModal", () => {
         // Then
         expect(formattingFunctions.link).toHaveBeenCalledWith("l", "t");
     });
+
+    it("Should remove the link", async () => {
+        // When
+        const onClose = jest.fn();
+        customRender(true, onClose, true);
+        await userEvent.click(screen.getByText("Remove"));
+
+        // Then
+        expect(formattingFunctions.removeLinks).toHaveBeenCalledTimes(1);
+        expect(onClose).toBeCalledTimes(1);
+    });
 });

From 13d508d12a8facfd65e0f4503e962d8ca439e06d Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 5 Jan 2023 14:20:02 +0100
Subject: [PATCH 03/14] Update @matrix-org/matrix-wysiwyg to 0.14.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 37f8a2d8953..cf00952f231 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.3.0",
-        "@matrix-org/matrix-wysiwyg": "^0.13.0",
+        "@matrix-org/matrix-wysiwyg": "^0.14.0",
         "@matrix-org/react-sdk-module-api": "^0.0.3",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",
diff --git a/yarn.lock b/yarn.lock
index e7e33c7db30..09116fdb506 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1525,10 +1525,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
   integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==
 
-"@matrix-org/matrix-wysiwyg@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.13.0.tgz#e643df4e13cdc5dbf9285740bc0ce2aef9873c16"
-  integrity sha512-MCeTj4hkl0snjlygd1v+mEEOgaN6agyjAVjJEbvEvP/BaYaDiPEXMTDaRQrcUt3OIY53UNhm1DDEn4yPTn83Jg==
+"@matrix-org/matrix-wysiwyg@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.14.0.tgz#359fabf5af403b3f128fe6ede3bff9754a9e18c4"
+  integrity sha512-iSwIR7kS/zwAzy/8S5cUMv2aceoJl/vIGhqmY9hSU0gVyzmsyaVnx00uNMvVDBUFiiPT2gonN8R3+dxg58TPaQ==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"

From 85ac061f20661e8b393a6e13aa68450cee9dfc64 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 5 Jan 2023 14:38:38 +0100
Subject: [PATCH 04/14] Fix _LinkModal.pcss lint

---
 res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 0610a90c4cd..155f1e1b7bf 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -30,5 +30,4 @@ limitations under the License.
             }
         }
     }
-
 }

From cd995ca4760d9daadff83ee3a44bf320213f6c46 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 5 Jan 2023 14:39:07 +0100
Subject: [PATCH 05/14] Update locales

---
 src/i18n/strings/en_EN.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e481dfca6fb..3702ed8835a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2136,6 +2136,7 @@
     "Underline": "Underline",
     "Code": "Code",
     "Link": "Link",
+    "Edit link": "Edit link",
     "Create a link": "Create a link",
     "Text": "Text",
     "Message Actions": "Message Actions",

From f65ba046f95ab5e1a855d190433ab6de1c5b7d06 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 5 Jan 2023 14:53:10 +0100
Subject: [PATCH 06/14] Display selected link

---
 .../views/rooms/wysiwyg_composer/components/LinkModal.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 07e17ed4c91..efb262dd347 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -58,7 +58,7 @@ interface LinkModalProps {
 }
 
 export function LinkModal({ composer, isTextEnabled, onClose, composerContext, isEditing }: LinkModalProps) {
-    const [fields, setFields] = useState({ text: "", link: "" });
+    const [fields, setFields] = useState({ text: "", link: isEditing ? composer.getLink() : "" });
     const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
 
     return (

From 99bbad2020c523669afa2f9d1a0e8751d61397ff Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 5 Jan 2023 15:36:27 +0100
Subject: [PATCH 07/14] Add test for initial content in link editing

---
 .../wysiwyg_composer/components/LinkModal-test.tsx    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
index bc6ecc53709..b0f02ecd98a 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -23,11 +23,13 @@ import { LinkModal } from "../../../../../../src/components/views/rooms/wysiwyg_
 import { mockPlatformPeg } from "../../../../../test-utils";
 import * as selection from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
 import { SubSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/types";
+import spyOn = jest.spyOn;
 
 describe("LinkModal", () => {
     const formattingFunctions = {
         link: jest.fn(),
         removeLinks: jest.fn(),
+        getLink: jest.fn(),
     } as unknown as FormattingFunctions;
     const defaultValue: SubSelection = {
         focusNode: null,
@@ -142,4 +144,13 @@ describe("LinkModal", () => {
         expect(formattingFunctions.removeLinks).toHaveBeenCalledTimes(1);
         expect(onClose).toBeCalledTimes(1);
     });
+
+    it("Should display the link in editing", async () => {
+        // When
+        spyOn(formattingFunctions, "getLink").mockReturnValue("my initial content");
+        customRender(true, jest.fn(), true);
+
+        // Then
+        expect(screen.getByLabelText("Link")).toContainHTML("my initial content");
+    });
 });

From e53220533d3c2464d7297a1318dd32b77ad9a55e Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 6 Jan 2023 11:20:20 +0100
Subject: [PATCH 08/14] Don't display placeholder in LinkModal.tsx

---
 src/components/views/elements/Field.tsx       |  3 +-
 .../wysiwyg_composer/components/LinkModal.tsx |  2 +
 test/components/views/elements/Field-test.tsx | 54 +++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 test/components/views/elements/Field-test.tsx

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 31a6e88897c..22f2fad788a 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -261,8 +261,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         } = this.props;
 
         this.inputRef = inputRef || React.createRef();
-
-        inputProps.placeholder = inputProps.placeholder || inputProps.label;
+        inputProps.placeholder = inputProps.placeholder ?? inputProps.label;
         inputProps.id = this.id; // this overwrites the id from props
 
         inputProps.onFocus = this.onFocus;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index efb262dd347..7b32b6a6584 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -85,6 +85,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                         autoFocus={true}
                         label={_td("Text")}
                         value={fields.text}
+                        placeholder=""
                         onChange={(e: ChangeEvent<HTMLInputElement>) =>
                             setFields((fields) => ({ ...fields, text: e.target.value }))
                         }
@@ -95,6 +96,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     autoFocus={!isTextEnabled}
                     label={_td("Link")}
                     value={fields.link}
+                    placeholder=""
                     onChange={(e: ChangeEvent<HTMLInputElement>) =>
                         setFields((fields) => ({ ...fields, link: e.target.value }))
                     }
diff --git a/test/components/views/elements/Field-test.tsx b/test/components/views/elements/Field-test.tsx
new file mode 100644
index 00000000000..199f1c25577
--- /dev/null
+++ b/test/components/views/elements/Field-test.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright 2023 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 { render, screen } from "@testing-library/react";
+
+import Field from "../../../../src/components/views/elements/Field";
+
+describe("Field", () => {
+    describe("Placeholder", () => {
+        it("Should display a placeholder", async () => {
+            // When
+            const { rerender } = render(<Field value="" placeholder="my placeholder" />);
+
+            // Then
+            expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "my placeholder");
+
+            // When
+            rerender(<Field value="" placeholder="" />);
+
+            // Then
+            expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "");
+        });
+
+        it("Should display label as placeholder", async () => {
+            // When
+            render(<Field value="" label="my label" />);
+
+            // Then
+            expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "my label");
+        });
+
+        it("Should not display a placeholder", async () => {
+            // When
+            render(<Field value="" />);
+
+            // Then
+            expect(screen.getByRole("textbox")).not.toHaveAttribute("placeholder", "my placeholder");
+        });
+    });
+});

From e4b54d571ad079bfcee16dc7d471f3730489c9aa Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 6 Jan 2023 12:15:17 +0100
Subject: [PATCH 09/14] Enabled save button only when link is changed

---
 .../wysiwyg_composer/components/LinkModal.tsx    | 16 ++++++++++------
 .../components/LinkModal-test.tsx                | 11 ++++++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 7b32b6a6584..1efb621877f 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -36,7 +36,7 @@ export function openLinkModal(
             composerContext,
             composer,
             onClose: () => modal.close(),
-            isTextEnabled: !isEditing && isSelectionEmpty(),
+            isTextEnabled: isSelectionEmpty(),
             isEditing,
         },
         "mx_CompoundDialog",
@@ -58,8 +58,10 @@ interface LinkModalProps {
 }
 
 export function LinkModal({ composer, isTextEnabled, onClose, composerContext, isEditing }: LinkModalProps) {
+    const [hasLinkChanged, setHasLinkChanged] = useState(false);
     const [fields, setFields] = useState({ text: "", link: isEditing ? composer.getLink() : "" });
-    const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
+    const hasText = !isEditing && isTextEnabled;
+    const isSaveDisabled = !hasLinkChanged || (hasText && isEmpty(fields.text)) || isEmpty(fields.link);
 
     return (
         <BaseDialog
@@ -79,7 +81,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     onClose();
                 }}
             >
-                {isTextEnabled && (
+                {hasText && (
                     <Field
                         required={true}
                         autoFocus={true}
@@ -97,9 +99,11 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     label={_td("Link")}
                     value={fields.link}
                     placeholder=""
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        setFields((fields) => ({ ...fields, link: e.target.value }))
-                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        console.log("onChange", e.target.value);
+                        setFields((fields) => ({ ...fields, link: e.target.value }));
+                        setHasLinkChanged(true);
+                    }}
                 />
 
                 <div className="mx_LinkModal_buttons">
diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
index b0f02ecd98a..47719f083e6 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -23,13 +23,12 @@ import { LinkModal } from "../../../../../../src/components/views/rooms/wysiwyg_
 import { mockPlatformPeg } from "../../../../../test-utils";
 import * as selection from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
 import { SubSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/types";
-import spyOn = jest.spyOn;
 
 describe("LinkModal", () => {
     const formattingFunctions = {
         link: jest.fn(),
         removeLinks: jest.fn(),
-        getLink: jest.fn(),
+        getLink: jest.fn().mockReturnValue("my initial content"),
     } as unknown as FormattingFunctions;
     const defaultValue: SubSelection = {
         focusNode: null,
@@ -147,10 +146,16 @@ describe("LinkModal", () => {
 
     it("Should display the link in editing", async () => {
         // When
-        spyOn(formattingFunctions, "getLink").mockReturnValue("my initial content");
         customRender(true, jest.fn(), true);
 
         // Then
         expect(screen.getByLabelText("Link")).toContainHTML("my initial content");
+        expect(screen.getByText("Save")).toBeDisabled();
+
+        // When
+        await userEvent.type(screen.getByLabelText("Link"), "l");
+
+        // Then
+        await waitFor(() => expect(screen.getByText("Save")).toBeEnabled());
     });
 });

From 9d2774d8bb15b3b83a19615ad08a6948ab985aaf Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 6 Jan 2023 14:50:19 +0100
Subject: [PATCH 10/14] Minor fixes

---
 src/components/views/elements/Field.tsx                         | 1 +
 .../views/rooms/wysiwyg_composer/components/LinkModal.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 22f2fad788a..295cdf99a93 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -261,6 +261,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         } = this.props;
 
         this.inputRef = inputRef || React.createRef();
+
         inputProps.placeholder = inputProps.placeholder ?? inputProps.label;
         inputProps.id = this.id; // this overwrites the id from props
 
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 1efb621877f..c44e5d9d185 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -95,7 +95,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                 )}
                 <Field
                     required={true}
-                    autoFocus={!isTextEnabled}
+                    autoFocus={!hasText}
                     label={_td("Link")}
                     value={fields.link}
                     placeholder=""

From 0693afbd3fd2725b8c17bbdb62316c86fe249dce Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 6 Jan 2023 16:56:55 +0100
Subject: [PATCH 11/14] Add new styling

---
 .../wysiwyg_composer/components/_LinkModal.pcss   | 15 ++++++++++++++-
 .../wysiwyg_composer/components/LinkModal.tsx     |  2 ++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 155f1e1b7bf..75862115437 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -16,14 +16,27 @@ limitations under the License.
 
 .mx_LinkModal {
     padding: $spacing-32;
+    max-width: calc(600px - ($spacing-32 * 2));
+    height: calc(341px - ($spacing-32 * 2));
+    display: flex;
+    flex-direction: column;
 
     .mx_LinkModal_content {
         display: flex;
         flex-direction: column;
+        flex: 1;
+        gap: 8px;
+        margin-top: 7px;
+
+        .mx_LinkModal_Field {
+            flex: initial;
+            height: 40px;
+        }
 
         .mx_LinkModal_buttons {
             display: flex;
-            align-items: baseline;
+            flex: 1;
+            align-items: flex-end;
 
             .mx_Dialog_buttons {
                 display: inline-block;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index c44e5d9d185..2a14a9d76ea 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -87,6 +87,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                         autoFocus={true}
                         label={_td("Text")}
                         value={fields.text}
+                        className="mx_LinkModal_Field"
                         placeholder=""
                         onChange={(e: ChangeEvent<HTMLInputElement>) =>
                             setFields((fields) => ({ ...fields, text: e.target.value }))
@@ -98,6 +99,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     autoFocus={!hasText}
                     label={_td("Link")}
                     value={fields.link}
+                    className="mx_LinkModal_Field"
                     placeholder=""
                     onChange={(e: ChangeEvent<HTMLInputElement>) => {
                         console.log("onChange", e.target.value);

From 1edaefcd77201b5db5281b19f580072ee4235c7b Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 9 Jan 2023 18:02:29 +0100
Subject: [PATCH 12/14] Add workaround to deal with field focus when LinkModal
 is submitted

---
 .../rooms/wysiwyg_composer/components/LinkModal.tsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 2a14a9d76ea..7aa83034195 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -76,9 +76,15 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     evt.preventDefault();
                     evt.stopPropagation();
 
+                    onClose();
+
+                    // When submitting is done when pressing enter when the link field has the focus,
+                    // The link field is getting back the focus (due to react-focus-lock)
+                    // So we are waiting that the focus stuff is done to play with the composer selection
+                    await new Promise((resolve) => setTimeout(resolve, 0));
+
                     await setSelection(composerContext.selection);
                     composer.link(fields.link, isTextEnabled ? fields.text : undefined);
-                    onClose();
                 }}
             >
                 {hasText && (
@@ -102,7 +108,6 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     className="mx_LinkModal_Field"
                     placeholder=""
                     onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                        console.log("onChange", e.target.value);
                         setFields((fields) => ({ ...fields, link: e.target.value }));
                         setHasLinkChanged(true);
                     }}

From 7b98a86125340ad42657478ee7e36029391c6b3d Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 9 Jan 2023 18:21:11 +0100
Subject: [PATCH 13/14] Fix LinkModal-test.tsx

---
 .../components/LinkModal-test.tsx             | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
index 47719f083e6..527f7e7b3d6 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -78,13 +78,13 @@ describe("LinkModal", () => {
         // When
         jest.useFakeTimers();
         screen.getByText("Save").click();
+        jest.runAllTimers();
 
         // Then
-        expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
-        await waitFor(() => expect(onClose).toBeCalledTimes(1));
-
-        // When
-        jest.runAllTimers();
+        await waitFor(() => {
+            expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
+            expect(onClose).toBeCalledTimes(1);
+        });
 
         // Then
         expect(formattingFunctions.link).toHaveBeenCalledWith("l", undefined);
@@ -121,13 +121,13 @@ describe("LinkModal", () => {
         // When
         jest.useFakeTimers();
         screen.getByText("Save").click();
+        jest.runAllTimers();
 
         // Then
-        expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
-        await waitFor(() => expect(onClose).toBeCalledTimes(1));
-
-        // When
-        jest.runAllTimers();
+        await waitFor(() => {
+            expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
+            expect(onClose).toBeCalledTimes(1);
+        });
 
         // Then
         expect(formattingFunctions.link).toHaveBeenCalledWith("l", "t");

From 55888f13673d1a8effe471889fd163bcb31d8f5d Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 10 Jan 2023 10:46:31 +0100
Subject: [PATCH 14/14] Minor fixes and improvements

---
 .../wysiwyg_composer/components/_LinkModal.pcss      |  7 ++++---
 .../rooms/wysiwyg_composer/components/LinkModal.tsx  | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 75862115437..b5c1c04d576 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -16,8 +16,9 @@ limitations under the License.
 
 .mx_LinkModal {
     padding: $spacing-32;
-    max-width: calc(600px - ($spacing-32 * 2));
-    height: calc(341px - ($spacing-32 * 2));
+    max-width: 600px;
+    height: 341px;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
 
@@ -25,7 +26,7 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: 8px;
+        gap: $spacing-8;
         margin-top: 7px;
 
         .mx_LinkModal_Field {
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 7aa83034195..0e41d8baa43 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 import React, { ChangeEvent, useState } from "react";
 
-import { _t, _td } from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import Modal from "../../../../../Modal";
 import Field from "../../../elements/Field";
 import { ComposerContextState } from "../ComposerContext";
@@ -66,9 +66,9 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
     return (
         <BaseDialog
             className="mx_LinkModal"
-            title={isEditing ? _td("Edit link") : _td("Create a link")}
+            title={isEditing ? _t("Edit link") : _t("Create a link")}
             hasCancel={true}
-            onFinished={() => onClose()}
+            onFinished={onClose}
         >
             <form
                 className="mx_LinkModal_content"
@@ -91,7 +91,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     <Field
                         required={true}
                         autoFocus={true}
-                        label={_td("Text")}
+                        label={_t("Text")}
                         value={fields.text}
                         className="mx_LinkModal_Field"
                         placeholder=""
@@ -103,7 +103,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                 <Field
                     required={true}
                     autoFocus={!hasText}
-                    label={_td("Link")}
+                    label={_t("Link")}
                     value={fields.link}
                     className="mx_LinkModal_Field"
                     placeholder=""
@@ -130,7 +130,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                         primaryButton={_t("Save")}
                         primaryDisabled={isSaveDisabled}
                         primaryIsSubmit={true}
-                        onCancel={() => onClose()}
+                        onCancel={onClose}
                     />
                 </div>
             </form>