From 7b3dcee2c3afc1bef43d2e96eccdd81b0254f2db Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 12 Dec 2022 17:07:06 +0100
Subject: [PATCH 01/16] Add link buttons

---
 res/img/element-icons/room/composer/link.svg               | 3 +++
 .../wysiwyg_composer/components/FormattingButtons.tsx      | 7 +++++++
 2 files changed, 10 insertions(+)
 create mode 100644 res/img/element-icons/room/composer/link.svg

diff --git a/res/img/element-icons/room/composer/link.svg b/res/img/element-icons/room/composer/link.svg
new file mode 100644
index 00000000000..8c7429e16a2
--- /dev/null
+++ b/res/img/element-icons/room/composer/link.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.37751 4.10063L8.73382 3.74433C9.718 2.76019 11.3042 2.75074 12.2767 3.72324C13.2493 4.69573 13.2398 6.2819 12.2556 7.26605L10.5627 8.9589C9.57856 9.94304 7.99234 9.95249 7.01981 8.98M7.62266 11.8992L7.26619 12.2557C6.28201 13.2398 4.69578 13.2493 3.72325 12.2768C2.75073 11.3043 2.76018 9.7181 3.74436 8.73395L5.43717 7.0412C6.42134 6.05706 8.00756 6.04761 8.98009 7.0201" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index b7d8c325988..1b5f26b5bbb 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -23,6 +23,7 @@ import { Icon as ItalicIcon } from '../../../../../../res/img/element-icons/room
 import { Icon as UnderlineIcon } from '../../../../../../res/img/element-icons/room/composer/underline.svg';
 import { Icon as StrikeThroughIcon } from '../../../../../../res/img/element-icons/room/composer/strikethrough.svg';
 import { Icon as InlineCodeIcon } from '../../../../../../res/img/element-icons/room/composer/inline_code.svg';
+import { Icon as LinkIcon } from '../../../../../../res/img/element-icons/room/composer/link.svg';
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
@@ -77,5 +78,11 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
         <Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />} />
         <Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />} />
         <Button isActive={actionStates.inlineCode === 'reversed'} label={_td('Code')} keyCombo={{ ctrlOrCmdKey: true, key: 'e' }} onClick={() => composer.inlineCode()} icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />} />
+        <Button isActive={actionStates.link === 'reversed'}
+            label={_td('Link')}
+            onClick={() => {
+            // TODO display link modal
+            }}
+            icon={<LinkIcon className="mx_FormattingButtons_Icon" />} />
     </div>;
 }

From 1012488079249229c793c866efbe08f42cc1dc4a Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 13 Dec 2022 14:47:28 +0100
Subject: [PATCH 02/16] Add link modal

---
 res/css/_components.pcss                      |  1 +
 .../components/_LinkModal.pcss                | 19 +++++
 .../components/FormattingButtons.tsx          | 77 +++++++++---------
 .../wysiwyg_composer/components/LinkModal.tsx | 81 +++++++++++++++++++
 4 files changed, 139 insertions(+), 39 deletions(-)
 create mode 100644 res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
 create mode 100644 src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index cec02b53f30..1b8f046d321 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -306,6 +306,7 @@
 @import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_Editor.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
+@import "./views/rooms/wysiwyg_composer/components/_LinkModal.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
new file mode 100644
index 00000000000..3a2851a8eb8
--- /dev/null
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -0,0 +1,19 @@
+/*
+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.
+*/
+
+.mx_LinkModal {
+    padding: 32px;
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 6ea57cc946b..bbfcd490bb6 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -14,22 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEventHandler, ReactNode } from 'react';
-import { FormattingFunctions, AllActionStates } from '@matrix-org/matrix-wysiwyg';
-import classNames from 'classnames';
+import React, { MouseEventHandler, ReactNode } from "react";
+import { FormattingFunctions, AllActionStates } from "@matrix-org/matrix-wysiwyg";
+import classNames from "classnames";
 
-import { Icon as BoldIcon } from '../../../../../../res/img/element-icons/room/composer/bold.svg';
-import { Icon as ItalicIcon } from '../../../../../../res/img/element-icons/room/composer/italic.svg';
-import { Icon as UnderlineIcon } from '../../../../../../res/img/element-icons/room/composer/underline.svg';
-import { Icon as StrikeThroughIcon } from '../../../../../../res/img/element-icons/room/composer/strikethrough.svg';
-import { Icon as InlineCodeIcon } from '../../../../../../res/img/element-icons/room/composer/inline_code.svg';
-import { Icon as LinkIcon } from '../../../../../../res/img/element-icons/room/composer/link.svg';
-import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
-import { Alignment } from '../../../elements/Tooltip';
-import { KeyboardShortcut } from '../../../settings/KeyboardShortcut';
-import { KeyCombo } from '../../../../../KeyBindingsManager';
-import { _td } from '../../../../../languageHandler';
-import { ButtonEvent } from '../../../elements/AccessibleButton';
+import { Icon as BoldIcon } from "../../../../../../res/img/element-icons/room/composer/bold.svg";
+import { Icon as ItalicIcon } from "../../../../../../res/img/element-icons/room/composer/italic.svg";
+import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/room/composer/underline.svg";
+import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
+import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
+import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
+import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
+import { Alignment } from "../../../elements/Tooltip";
+import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
+import { KeyCombo } from "../../../../../KeyBindingsManager";
+import { _td } from "../../../../../languageHandler";
+import { ButtonEvent } from "../../../elements/AccessibleButton";
+import { openLinkModal } from "./LinkModal";
 
 interface TooltipProps {
     label: string;
@@ -39,10 +40,10 @@ interface TooltipProps {
 function Tooltip({ label, keyCombo }: TooltipProps) {
     return (
         <div className="mx_FormattingButtons_Tooltip">
-            { label }
-            { keyCombo && (
+            {label}
+            {keyCombo && (
                 <KeyboardShortcut value={keyCombo} className="mx_FormattingButtons_Tooltip_KeyboardShortcut" />
-            ) }
+            )}
         </div>
     );
 }
@@ -59,14 +60,14 @@ function Button({ label, keyCombo, onClick, isActive, icon }: ButtonProps) {
             element="button"
             onClick={onClick as (e: ButtonEvent) => void}
             title={label}
-            className={classNames('mx_FormattingButtons_Button', {
+            className={classNames("mx_FormattingButtons_Button", {
                 mx_FormattingButtons_active: isActive,
                 mx_FormattingButtons_Button_hover: !isActive,
             })}
             tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
             alignment={Alignment.Top}
         >
-            { icon }
+            {icon}
         </AccessibleTooltipButton>
     );
 }
@@ -80,45 +81,43 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
     return (
         <div className="mx_FormattingButtons">
             <Button
-                isActive={actionStates.bold === 'reversed'}
-                label={_td('Bold')}
-                keyCombo={{ ctrlOrCmdKey: true, key: 'b' }}
+                isActive={actionStates.bold === "reversed"}
+                label={_td("Bold")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
                 onClick={() => composer.bold()}
                 icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.italic === 'reversed'}
-                label={_td('Italic')}
-                keyCombo={{ ctrlOrCmdKey: true, key: 'i' }}
+                isActive={actionStates.italic === "reversed"}
+                label={_td("Italic")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
                 onClick={() => composer.italic()}
                 icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.underline === 'reversed'}
-                label={_td('Underline')}
-                keyCombo={{ ctrlOrCmdKey: true, key: 'u' }}
+                isActive={actionStates.underline === "reversed"}
+                label={_td("Underline")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
                 onClick={() => composer.underline()}
                 icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.strikeThrough === 'reversed'}
-                label={_td('Strikethrough')}
+                isActive={actionStates.strikeThrough === "reversed"}
+                label={_td("Strikethrough")}
                 onClick={() => composer.strikeThrough()}
                 icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.inlineCode === 'reversed'}
-                label={_td('Code')}
-                keyCombo={{ ctrlOrCmdKey: true, key: 'e' }}
+                isActive={actionStates.inlineCode === "reversed"}
+                label={_td("Code")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.link === 'reversed'}
-                label={_td('Link')}
-                onClick={() => {
-                    // TODO display link modal
-                }}
+                isActive={actionStates.link === "reversed"}
+                label={_td("Link")}
+                onClick={() => openLinkModal(composer)}
                 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
new file mode 100644
index 00000000000..6b7d4f81fac
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -0,0 +1,81 @@
+/*
+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 { FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
+import React, { ChangeEvent, useState } from "react";
+
+import { _td } from "../../../../../languageHandler";
+import Modal from "../../../../../Modal";
+import QuestionDialog from "../../../dialogs/QuestionDialog";
+import Field from "../../../elements/Field";
+
+export function openLinkModal(composer: FormattingFunctions) {
+    const modal = Modal.createDialog(
+        LinkModal,
+        { composer, onClose: () => modal.close() },
+        "mx_CompoundDialog",
+        false,
+        true,
+    );
+}
+
+function isEmpty(text: string) {
+    return text.length < 1;
+}
+
+interface LinkModalProps {
+    composer: FormattingFunctions;
+    onClose: () => void;
+}
+
+export function LinkModal({ composer, onClose }: LinkModalProps) {
+    const [fields, setFields] = useState({ text: "", link: "" });
+    const isSaveDisabled = isEmpty(fields.text) || isEmpty(fields.link);
+
+    return (
+        <QuestionDialog
+            className="mx_LinkModal"
+            title={_td("Create a link")}
+            button={_td("Save")}
+            buttonDisabled={isSaveDisabled}
+            hasCancelButton={true}
+            onFinished={(isClickOnSave: boolean) => {
+                if (isClickOnSave) {
+                    composer.link(fields.link, fields.text)
+                }
+                onClose();
+            }}
+            description={
+                <>
+                    <Field
+                        label={_td("Text")}
+                        value={fields.text}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setFields((fields) => ({ ...fields, text: e.target.value }))
+                        }
+                    />
+                    <Field
+                        label={_td("Link")}
+                        value={fields.link}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setFields((fields) => ({ ...fields, link: e.target.value }))
+                        }
+                    />
+                </>
+            }
+        />
+    );
+}

From 761bab2d90d5c62c6a1adcc41f6fb951e9d82e57 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 13 Dec 2022 15:45:39 +0100
Subject: [PATCH 03/16] Handle link click

---
 .../wysiwyg_composer/components/_Editor.pcss  |  4 +++
 .../wysiwyg_composer/components/Editor.tsx    |  3 ++
 .../rooms/wysiwyg_composer/hooks/useLink.ts   | 28 +++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index d48476cfd7f..4b6c8dadbdf 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -47,4 +47,8 @@ limitations under the License.
         white-space: nowrap;
         color: $tertiary-content;
     }
+
+    a {
+        cursor: pointer;
+    }
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
index e0c6c3b394d..7a7858b0504 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
@@ -18,6 +18,7 @@ import classNames from "classnames";
 import React, { CSSProperties, forwardRef, memo, MutableRefObject, ReactNode } from "react";
 
 import { useIsExpanded } from "../hooks/useIsExpanded";
+import { useLink } from "../hooks/useLink";
 import { useSelection } from "../hooks/useSelection";
 
 const HEIGHT_BREAKING_POINT = 20;
@@ -36,6 +37,7 @@ export const Editor = memo(
     ) {
         const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
         const { onFocus, onBlur, selectPreviousSelection, onInput } = useSelection();
+        const { onClick } = useLink()
 
         return (
             <div
@@ -61,6 +63,7 @@ export const Editor = memo(
                         onFocus={onFocus}
                         onBlur={onBlur}
                         onInput={onInput}
+                        onClick={onClick}
                     />
                 </div>
                 {rightComponent?.(selectPreviousSelection)}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts
new file mode 100644
index 00000000000..a35034d3d6f
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts
@@ -0,0 +1,28 @@
+/*
+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 { MouseEvent, useCallback } from "react";
+
+export function useLink() {
+    const onClick = useCallback((evt: MouseEvent<HTMLDivElement>) => {
+        const target = evt.target as HTMLLinkElement;
+        if (target.nodeName === 'A') {
+            window.open(target.href, '_blank');
+        }
+    }, [])
+
+    return { onClick }
+}

From bed5c767e914c68c76bdd8d3d770378bd353892e Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 14 Dec 2022 17:28:18 +0100
Subject: [PATCH 04/16] Add insert link to rich text editor

---
 .../wysiwyg_composer/components/_Editor.pcss  |  4 ---
 .../{hooks/useLink.ts => ComposerContext.ts}  | 22 +++++++-----
 .../wysiwyg_composer/SendWysiwygComposer.tsx  | 25 +++++++-------
 .../wysiwyg_composer/components/Editor.tsx    |  9 ++---
 .../wysiwyg_composer/components/Emoji.tsx     |  8 +++--
 .../wysiwyg_composer/components/LinkModal.tsx | 34 ++++++++++++-------
 .../components/PlainTextComposer.tsx          |  2 +-
 .../components/WysiwygComposer.tsx            |  2 +-
 .../wysiwyg_composer/hooks/useSelection.ts    | 31 ++++++-----------
 .../views/rooms/wysiwyg_composer/types.ts     |  2 ++
 .../rooms/wysiwyg_composer/utils/selection.ts |  9 ++++-
 11 files changed, 78 insertions(+), 70 deletions(-)
 rename src/components/views/rooms/wysiwyg_composer/{hooks/useLink.ts => ComposerContext.ts} (54%)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 4b6c8dadbdf..d48476cfd7f 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -47,8 +47,4 @@ limitations under the License.
         white-space: nowrap;
         color: $tertiary-content;
     }
-
-    a {
-        cursor: pointer;
-    }
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
similarity index 54%
rename from src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts
rename to src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
index a35034d3d6f..65cb603ab16 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useLink.ts
+++ b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
@@ -14,15 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MouseEvent, useCallback } from "react";
+import { createContext, useContext } from "react";
 
-export function useLink() {
-    const onClick = useCallback((evt: MouseEvent<HTMLDivElement>) => {
-        const target = evt.target as HTMLLinkElement;
-        if (target.nodeName === 'A') {
-            window.open(target.href, '_blank');
-        }
-    }, [])
+import { SubSelection } from "./types";
 
-    return { onClick }
+export const defaultContext = { selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 } };
+
+export interface ComposerContextState {
+    selection: SubSelection;
+}
+
+export const ComposerContext = createContext<ComposerContextState>(defaultContext);
+ComposerContext.displayName = "ComposerContext";
+
+export function useComposerContext() {
+    return useContext(ComposerContext);
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index 4d726721674..abaa80739b5 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -24,6 +24,7 @@ import { E2EStatus } from "../../../../utils/ShieldUtils";
 import E2EIcon from "../E2EIcon";
 import { AboveLeftOf } from "../../../structures/ContextMenu";
 import { Emoji } from "./components/Emoji";
+import { ComposerContext, defaultContext } from "./ComposerContext";
 
 interface ContentProps {
     disabled?: boolean;
@@ -58,17 +59,17 @@ export function SendWysiwygComposer({
     const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer;
 
     return (
-        <Composer
-            className="mx_SendWysiwygComposer"
-            leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
-            rightComponent={(selectPreviousSelection) => (
-                <Emoji menuPosition={menuPosition} selectPreviousSelection={selectPreviousSelection} />
-            )}
-            {...props}
-        >
-            {(ref, composerFunctions) => (
-                <Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
-            )}
-        </Composer>
+        <ComposerContext.Provider value={defaultContext}>
+            <Composer
+                className="mx_SendWysiwygComposer"
+                leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
+                rightComponent={<Emoji menuPosition={menuPosition} />}
+                {...props}
+            >
+                {(ref, composerFunctions) => (
+                    <Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
+                )}
+            </Composer>
+        </ComposerContext.Provider>
     );
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
index 7a7858b0504..215d3be84fb 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
@@ -18,7 +18,6 @@ import classNames from "classnames";
 import React, { CSSProperties, forwardRef, memo, MutableRefObject, ReactNode } from "react";
 
 import { useIsExpanded } from "../hooks/useIsExpanded";
-import { useLink } from "../hooks/useLink";
 import { useSelection } from "../hooks/useSelection";
 
 const HEIGHT_BREAKING_POINT = 20;
@@ -27,7 +26,7 @@ interface EditorProps {
     disabled: boolean;
     placeholder?: string;
     leftComponent?: ReactNode;
-    rightComponent?: (selectPreviousSelection: () => void) => ReactNode;
+    rightComponent?: ReactNode;
 }
 
 export const Editor = memo(
@@ -36,8 +35,7 @@ export const Editor = memo(
         ref,
     ) {
         const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
-        const { onFocus, onBlur, selectPreviousSelection, onInput } = useSelection();
-        const { onClick } = useLink()
+        const { onFocus, onBlur, onInput } = useSelection();
 
         return (
             <div
@@ -63,10 +61,9 @@ export const Editor = memo(
                         onFocus={onFocus}
                         onBlur={onBlur}
                         onInput={onInput}
-                        onClick={onClick}
                     />
                 </div>
-                {rightComponent?.(selectPreviousSelection)}
+                {rightComponent}
             </div>
         );
     }),
diff --git a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx
index b36d5c635ea..74ebad636ec 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx
@@ -22,20 +22,22 @@ import dis from "../../../../../dispatcher/dispatcher";
 import { ComposerInsertPayload } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../../../dispatcher/actions";
 import { useRoomContext } from "../../../../../contexts/RoomContext";
+import { useComposerContext } from "../ComposerContext";
+import { setSelection } from "../utils/selection";
 
 interface EmojiProps {
-    selectPreviousSelection: () => void;
     menuPosition: AboveLeftOf;
 }
 
-export function Emoji({ selectPreviousSelection, menuPosition }: EmojiProps) {
+export function Emoji({ menuPosition }: EmojiProps) {
     const roomContext = useRoomContext();
+    const composerContext = useComposerContext();
 
     return (
         <EmojiButton
             menuPosition={menuPosition}
             addEmoji={(emoji) => {
-                selectPreviousSelection();
+                setSelection(composerContext.selection);
                 dis.dispatch<ComposerInsertPayload>({
                     action: Action.ComposerInsert,
                     text: emoji,
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 6b7d4f81fac..88230cd00df 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -21,11 +21,13 @@ import { _td } from "../../../../../languageHandler";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import Field from "../../../elements/Field";
+import { useComposerContext } from "../ComposerContext";
+import { isSelectionEmpty, setSelection } from "../utils/selection";
 
 export function openLinkModal(composer: FormattingFunctions) {
     const modal = Modal.createDialog(
         LinkModal,
-        { composer, onClose: () => modal.close() },
+        { composer, onClose: () => modal.close(), isTextEnabled: isSelectionEmpty() },
         "mx_CompoundDialog",
         false,
         true,
@@ -38,12 +40,15 @@ function isEmpty(text: string) {
 
 interface LinkModalProps {
     composer: FormattingFunctions;
+    isTextEnabled: boolean;
     onClose: () => void;
 }
 
-export function LinkModal({ composer, onClose }: LinkModalProps) {
+function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps) {
+    const composerContext = useComposerContext();
+
     const [fields, setFields] = useState({ text: "", link: "" });
-    const isSaveDisabled = isEmpty(fields.text) || isEmpty(fields.link);
+    const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
 
     return (
         <QuestionDialog
@@ -52,21 +57,26 @@ export function LinkModal({ composer, onClose }: LinkModalProps) {
             button={_td("Save")}
             buttonDisabled={isSaveDisabled}
             hasCancelButton={true}
-            onFinished={(isClickOnSave: boolean) => {
+            onFinished={async (isClickOnSave: boolean) => {
                 if (isClickOnSave) {
-                    composer.link(fields.link, fields.text)
+                    setSelection(composerContext.selection);
+
+                    // Waiting for selection to be effective
+                    setTimeout(() => composer.link(fields.link, isTextEnabled ? fields.text : undefined), 0);
                 }
                 onClose();
             }}
             description={
                 <>
-                    <Field
-                        label={_td("Text")}
-                        value={fields.text}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            setFields((fields) => ({ ...fields, text: e.target.value }))
-                        }
-                    />
+                    {isTextEnabled && (
+                        <Field
+                            label={_td("Text")}
+                            value={fields.text}
+                            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                setFields((fields) => ({ ...fields, text: e.target.value }))
+                            }
+                        />
+                    )}
                     <Field
                         label={_td("Link")}
                         value={fields.link}
diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
index a9cf2411d2f..868002810f8 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -33,7 +33,7 @@ interface PlainTextComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: (selectPreviousSelection: () => void) => ReactNode;
+    rightComponent?: ReactNode;
     children?: (ref: MutableRefObject<HTMLDivElement | null>, composerFunctions: ComposerFunctions) => ReactNode;
 }
 
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index b41e144e0f5..eb0e3c068fe 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -32,7 +32,7 @@ interface WysiwygComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: (selectPreviousSelection: () => void) => ReactNode;
+    rightComponent?: ReactNode;
     children?: (ref: MutableRefObject<HTMLDivElement | null>, wysiwyg: FormattingFunctions) => ReactNode;
 }
 
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSelection.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSelection.ts
index fc829ab9a39..29b927e4f24 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useSelection.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSelection.ts
@@ -14,18 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MutableRefObject, useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 
 import useFocus from "../../../../../hooks/useFocus";
-import { setSelection } from "../utils/selection";
+import { useComposerContext, ComposerContextState } from "../ComposerContext";
 
-type SubSelection = Pick<Selection, "anchorNode" | "anchorOffset" | "focusNode" | "focusOffset">;
-
-function setSelectionRef(selectionRef: MutableRefObject<SubSelection>) {
+function setSelectionContext(composerContext: ComposerContextState) {
     const selection = document.getSelection();
 
     if (selection) {
-        selectionRef.current = {
+        composerContext.selection = {
             anchorNode: selection.anchorNode,
             anchorOffset: selection.anchorOffset,
             focusNode: selection.focusNode,
@@ -35,17 +33,12 @@ function setSelectionRef(selectionRef: MutableRefObject<SubSelection>) {
 }
 
 export function useSelection() {
-    const selectionRef = useRef<SubSelection>({
-        anchorNode: null,
-        anchorOffset: 0,
-        focusNode: null,
-        focusOffset: 0,
-    });
+    const composerContext = useComposerContext();
     const [isFocused, focusProps] = useFocus();
 
     useEffect(() => {
         function onSelectionChange() {
-            setSelectionRef(selectionRef);
+            setSelectionContext(composerContext);
         }
 
         if (isFocused) {
@@ -53,15 +46,11 @@ export function useSelection() {
         }
 
         return () => document.removeEventListener("selectionchange", onSelectionChange);
-    }, [isFocused]);
+    }, [isFocused, composerContext]);
 
     const onInput = useCallback(() => {
-        setSelectionRef(selectionRef);
-    }, []);
-
-    const selectPreviousSelection = useCallback(() => {
-        setSelection(selectionRef.current);
-    }, []);
+        setSelectionContext(composerContext);
+    }, [composerContext]);
 
-    return { ...focusProps, selectPreviousSelection, onInput };
+    return { ...focusProps, onInput };
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/types.ts b/src/components/views/rooms/wysiwyg_composer/types.ts
index 60367933530..6505825b286 100644
--- a/src/components/views/rooms/wysiwyg_composer/types.ts
+++ b/src/components/views/rooms/wysiwyg_composer/types.ts
@@ -18,3 +18,5 @@ export type ComposerFunctions = {
     clear: () => void;
     insertText: (text: string) => void;
 };
+
+export type SubSelection = Pick<Selection, "anchorNode" | "anchorOffset" | "focusNode" | "focusOffset">;
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/selection.ts b/src/components/views/rooms/wysiwyg_composer/utils/selection.ts
index 5f36be975e7..845a57daaaf 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/selection.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/selection.ts
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function setSelection(selection: Pick<Selection, "anchorNode" | "anchorOffset" | "focusNode" | "focusOffset">) {
+import { SubSelection } from "../types";
+
+export function setSelection(selection: SubSelection) {
     if (selection.anchorNode && selection.focusNode) {
         const range = new Range();
         range.setStart(selection.anchorNode, selection.anchorOffset);
@@ -24,3 +26,8 @@ export function setSelection(selection: Pick<Selection, "anchorNode" | "anchorOf
         document.getSelection()?.addRange(range);
     }
 }
+
+export function isSelectionEmpty() {
+    const selection = document.getSelection();
+    return Boolean(selection?.isCollapsed);
+}

From 8880d7953d628a7db46bc8b7061e051b9c66bea1 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 15 Dec 2022 15:01:05 +0100
Subject: [PATCH 05/16] Upgrade matrix-wysiwyg version

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

diff --git a/package.json b/package.json
index 37e7ffe7a4a..8b965f4e914 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.9.0",
+        "@matrix-org/matrix-wysiwyg": "^0.11.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 e103b128b1a..4348fe74304 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1525,10 +1525,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.3.0.tgz#a428f7e3f164ffadf38f35bc0f0f9a3e47369ce6"
   integrity sha512-f1WIMA8tjNB3V5g1C34yIpIJK47z6IJ4SLiY4j+J9Gw4X8C3TKGTAx563rMcMvW3Uk/PFqnIBXtkavHBXoYJ9A==
 
-"@matrix-org/matrix-wysiwyg@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.9.0.tgz#8651eacdc0bbfa313501e4feeb713c74dbf099cc"
-  integrity sha512-utxLZPSmBR/oKFeLLteAfqprhSW8prrH9IKzeMK1VswQYganPusYYO8u86kCQt4SuDz/1Zc8C7r76xmOiVJ9JQ==
+"@matrix-org/matrix-wysiwyg@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.11.0.tgz#3000ee809a3e38242c5da47bef17c572582f2f6b"
+  integrity sha512-B16iLfNnW4PKG4fpDuwJVc0QUrUUqTkhwJ/kxzawcxwVNmWbsPCWJ3hkextYrN2gqRL1d4CNASkNbWLCNNiXhA==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
   version "3.2.8"

From 211e307c34ed7473a7d4a6f86b1366adff07c6cb Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 15 Dec 2022 15:07:51 +0100
Subject: [PATCH 06/16] Fix plain text composer test warning

---
 .../components/PlainTextComposer-test.tsx          | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
index bb41b18dc8b..ed421f50afd 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { PlainTextComposer } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer";
@@ -106,10 +106,7 @@ describe("PlainTextComposer", () => {
                 disconnect: jest.fn(),
             };
         });
-        jest.spyOn(global, "requestAnimationFrame").mockImplementation((cb) => {
-            cb(0);
-            return 0;
-        });
+        jest.useFakeTimers();
 
         //When
         render(<PlainTextComposer onChange={jest.fn()} onSend={jest.fn()} />);
@@ -123,12 +120,15 @@ describe("PlainTextComposer", () => {
             [{ contentBoxSize: [{ blockSize: 100 }] } as unknown as ResizeObserverEntry],
             {} as ResizeObserver,
         );
-        jest.runAllTimers();
+
+        act(() => {
+            jest.runAllTimers();
+        });
 
         // Then
         expect(screen.getByTestId("WysiwygComposerEditor").attributes["data-is-expanded"].value).toBe("true");
 
+        jest.useRealTimers();
         (global.ResizeObserver as jest.Mock).mockRestore();
-        (global.requestAnimationFrame as jest.Mock).mockRestore();
     });
 });

From 1f2366a051e2e6da1fd71abb408e120425c29a9c Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 15 Dec 2022 15:21:19 +0100
Subject: [PATCH 07/16] Add missing act

---
 .../EditWysiwygComposer-test.tsx              | 22 +++++++++----------
 .../SendWysiwygComposer-test.tsx              | 13 +++++------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
index cc53c88dc03..224a7124ed3 100644
--- a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@@ -226,20 +226,20 @@ describe("EditWysiwygComposer", () => {
         expect(screen.getByRole("textbox")).not.toHaveFocus();
 
         // When we send an action that would cause us to get focus
-        act(() => {
-            defaultDispatcher.dispatch({
-                action: Action.FocusEditMessageComposer,
-                context: null,
-            });
-            // (Send a second event to exercise the clearTimeout logic)
-            defaultDispatcher.dispatch({
-                action: Action.FocusEditMessageComposer,
-                context: null,
-            });
+        defaultDispatcher.dispatch({
+            action: Action.FocusEditMessageComposer,
+            context: null,
+        });
+        // (Send a second event to exercise the clearTimeout logic)
+        defaultDispatcher.dispatch({
+            action: Action.FocusEditMessageComposer,
+            context: null,
         });
 
         // Wait for event dispatch to happen
-        await flushPromises();
+        await act(async () => {
+            await flushPromises();
+        });
 
         // Then we don't get it because we are disabled
         expect(screen.getByRole("textbox")).not.toHaveFocus();
diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
index 669c611f8ce..dbe72891e0e 100644
--- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import "@testing-library/jest-dom";
 import React from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import RoomContext from "../../../../../src/contexts/RoomContext";
@@ -117,12 +117,9 @@ describe("SendWysiwygComposer", () => {
         expect(screen.getByTestId("PlainTextComposer")).toBeTruthy();
     });
 
-    describe.each([
-        { isRichTextEnabled: true, emptyContent: "<br>" },
-        { isRichTextEnabled: false, emptyContent: "" },
-    ])(
+    describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
         "Should focus when receiving an Action.FocusSendMessageComposer action",
-        ({ isRichTextEnabled, emptyContent }) => {
+        ({ isRichTextEnabled }) => {
             afterEach(() => {
                 jest.resetAllMocks();
             });
@@ -198,7 +195,9 @@ describe("SendWysiwygComposer", () => {
                 });
 
                 // Wait for event dispatch to happen
-                await flushPromises();
+                await act(async () => {
+                    await flushPromises();
+                });
 
                 // Then we don't get it because we are disabled
                 expect(screen.getByRole("textbox")).not.toHaveFocus();

From 88916589c35912e138d0a8bb7e10cae90276a964 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 15 Dec 2022 16:55:53 +0100
Subject: [PATCH 08/16] Add test to link creation

---
 .../wysiwyg_composer/components/LinkModal.tsx |   2 +-
 .../components/FormattingButtons-test.tsx     |   7 +
 .../components/LinkModal-test.tsx             | 124 ++++++++++++++++++
 3 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx

diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 88230cd00df..d38a240d5c9 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -44,7 +44,7 @@ interface LinkModalProps {
     onClose: () => void;
 }
 
-function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps) {
+export function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps) {
     const composerContext = useComposerContext();
 
     const [fields, setFields] = useState({ text: "", link: "" });
diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index d143e43a628..a467aa404e7 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -20,6 +20,7 @@ import userEvent from "@testing-library/user-event";
 import { AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 
 import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
+import * as LinkModal from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
 
 describe("FormattingButtons", () => {
     const wysiwyg = {
@@ -28,6 +29,7 @@ describe("FormattingButtons", () => {
         underline: jest.fn(),
         strikeThrough: jest.fn(),
         inlineCode: jest.fn(),
+        link: jest.fn(),
     } as unknown as FormattingFunctions;
 
     const actionStates = {
@@ -36,6 +38,7 @@ describe("FormattingButtons", () => {
         underline: "enabled",
         strikeThrough: "enabled",
         inlineCode: "enabled",
+        link: "enabled",
     } as AllActionStates;
 
     afterEach(() => {
@@ -52,16 +55,19 @@ describe("FormattingButtons", () => {
         expect(screen.getByLabelText("Underline")).not.toHaveClass("mx_FormattingButtons_active");
         expect(screen.getByLabelText("Strikethrough")).not.toHaveClass("mx_FormattingButtons_active");
         expect(screen.getByLabelText("Code")).not.toHaveClass("mx_FormattingButtons_active");
+        expect(screen.getByLabelText("Link")).not.toHaveClass("mx_FormattingButtons_active");
     });
 
     it("Should call wysiwyg function on button click", () => {
         // When
+        const spy = jest.spyOn(LinkModal, "openLinkModal");
         render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
         screen.getByLabelText("Bold").click();
         screen.getByLabelText("Italic").click();
         screen.getByLabelText("Underline").click();
         screen.getByLabelText("Strikethrough").click();
         screen.getByLabelText("Code").click();
+        screen.getByLabelText("Link").click();
 
         // Then
         expect(wysiwyg.bold).toHaveBeenCalledTimes(1);
@@ -69,6 +75,7 @@ describe("FormattingButtons", () => {
         expect(wysiwyg.underline).toHaveBeenCalledTimes(1);
         expect(wysiwyg.strikeThrough).toHaveBeenCalledTimes(1);
         expect(wysiwyg.inlineCode).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it("Should display the tooltip on mouse over", async () => {
diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
new file mode 100644
index 00000000000..c51961b24f9
--- /dev/null
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -0,0 +1,124 @@
+/*
+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 { FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+
+import { ComposerContext } from "../../../../../../src/components/views/rooms/wysiwyg_composer/ComposerContext";
+import { LinkModal } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
+import { mockPlatformPeg } from "../../../../../test-utils";
+import * as selection from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
+
+describe("LinkModal", () => {
+    const composer = {
+        link: jest.fn(),
+    } as unknown as FormattingFunctions;
+    const defaultValue = { focusNode: null, anchorNode: null, focusOffset: 3, anchorOffset: 4 };
+
+    const customRender = (isTextEnabled: boolean, onClose: () => void) => {
+        return render(
+            <ComposerContext.Provider value={{ selection: defaultValue }}>
+                <LinkModal composer={composer} isTextEnabled={isTextEnabled} onClose={onClose} />
+            </ComposerContext.Provider>,
+        );
+    };
+
+    mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
+    const selectionSpy = jest.spyOn(selection, "setSelection");
+
+    afterEach(() => {
+        jest.clearAllMocks();
+        jest.useRealTimers();
+    });
+
+    it("Should create a link", async () => {
+        // When
+        const onClose = jest.fn();
+        customRender(false, onClose);
+
+        // Then
+        expect(screen.getByLabelText("Link")).toBeTruthy();
+        expect(screen.getByText("Save")).toBeDisabled();
+
+        // When
+        await userEvent.type(screen.getByLabelText("Link"), "l");
+
+        // Then
+        await waitFor(() => {
+            expect(screen.getByText("Save")).toBeEnabled();
+            expect(screen.getByLabelText("Link")).toHaveAttribute("value", "l");
+        });
+
+        // When
+        jest.useFakeTimers();
+        screen.getByText("Save").click();
+
+        // Then
+        expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
+        expect(onClose).toBeCalledTimes(1);
+
+        // When
+        jest.runAllTimers();
+
+        // Then
+        expect(composer.link).toHaveBeenCalledWith("l", undefined);
+    });
+
+    it("Should create a link with text", async () => {
+        // When
+        const onClose = jest.fn();
+        customRender(true, onClose);
+
+        // Then
+        expect(screen.getByLabelText("Text")).toBeTruthy();
+        expect(screen.getByLabelText("Link")).toBeTruthy();
+        expect(screen.getByText("Save")).toBeDisabled();
+
+        // When
+        await userEvent.type(screen.getByLabelText("Text"), "t");
+
+        // Then
+        await waitFor(() => {
+            expect(screen.getByText("Save")).toBeDisabled();
+            expect(screen.getByLabelText("Text")).toHaveAttribute("value", "t");
+        });
+
+        // When
+        await userEvent.type(screen.getByLabelText("Link"), "l");
+
+        // Then
+        await waitFor(() => {
+            expect(screen.getByText("Save")).toBeEnabled();
+            expect(screen.getByLabelText("Link")).toHaveAttribute("value", "l");
+        });
+
+        // When
+        jest.useFakeTimers();
+        screen.getByText("Save").click();
+
+        // Then
+        expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
+        expect(onClose).toBeCalledTimes(1);
+
+        // When
+        jest.runAllTimers();
+
+        // Then
+        expect(composer.link).toHaveBeenCalledWith("l", "t");
+    });
+});

From 9b9b91d45fab9caab41e4aca6568fdd12b375fd7 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 15 Dec 2022 17:00:07 +0100
Subject: [PATCH 09/16] Update i18n

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

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a740446d360..2b95abea584 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2123,6 +2123,9 @@
     "Italic": "Italic",
     "Underline": "Underline",
     "Code": "Code",
+    "Link": "Link",
+    "Create a link": "Create a link",
+    "Text": "Text",
     "Error updating main address": "Error updating main address",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
     "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",

From 2cd48566f3966727e37e327e1785809f7fc1475c Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 15 Dec 2022 17:11:32 +0100
Subject: [PATCH 10/16] fix ts errors

---
 .../views/rooms/wysiwyg_composer/ComposerContext.ts       | 4 +++-
 .../rooms/wysiwyg_composer/components/LinkModal-test.tsx  | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
index 65cb603ab16..0a6441ffeb4 100644
--- a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
+++ b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
@@ -18,7 +18,9 @@ import { createContext, useContext } from "react";
 
 import { SubSelection } from "./types";
 
-export const defaultContext = { selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 } };
+export const defaultContext: { selection: SubSelection } = {
+    selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 },
+};
 
 export interface ComposerContextState {
     selection: SubSelection;
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 c51961b24f9..898b83080ae 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -23,12 +23,18 @@ import { ComposerContext } from "../../../../../../src/components/views/rooms/wy
 import { LinkModal } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
 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";
 
 describe("LinkModal", () => {
     const composer = {
         link: jest.fn(),
     } as unknown as FormattingFunctions;
-    const defaultValue = { focusNode: null, anchorNode: null, focusOffset: 3, anchorOffset: 4 };
+    const defaultValue: SubSelection = {
+        focusNode: null,
+        anchorNode: null,
+        focusOffset: 3,
+        anchorOffset: 4,
+    };
 
     const customRender = (isTextEnabled: boolean, onClose: () => void) => {
         return render(

From 5061d7ed215f73105ec55148ce8a615360e5468b Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 16 Dec 2022 11:37:17 +0100
Subject: [PATCH 11/16] Add styling to LinkModal.tsx

---
 .../wysiwyg_composer/components/_LinkModal.pcss   | 15 +++++++++++++++
 .../wysiwyg_composer/components/LinkModal.tsx     |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 3a2851a8eb8..35f30042b84 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -16,4 +16,19 @@ limitations under the License.
 
 .mx_LinkModal {
     padding: 32px;
+
+    .mx_Dialog_content {
+        margin-top: 30px;
+        margin-bottom: 42px;
+    }
+
+    .mx_LinkModal_content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mx_Dialog_primary {
+        // Override the default min-with of the primary button
+        min-width: 76px !important;
+    }
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index d38a240d5c9..a5a78ca7925 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -67,7 +67,7 @@ export function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps)
                 onClose();
             }}
             description={
-                <>
+                <div className="mx_LinkModal_content">
                     {isTextEnabled && (
                         <Field
                             label={_td("Text")}
@@ -84,7 +84,7 @@ export function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps)
                             setFields((fields) => ({ ...fields, link: e.target.value }))
                         }
                     />
-                </>
+                </div>
             }
         />
     );

From a46122d71d95d7d12b011fede6cfd73e467233c8 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 16 Dec 2022 14:05:45 +0100
Subject: [PATCH 12/16] Fix ComposerContext unwanted value sharing

---
 .../rooms/wysiwyg_composer/ComposerContext.ts | 10 +++--
 .../wysiwyg_composer/EditWysiwygComposer.tsx  | 42 ++++++++++---------
 .../wysiwyg_composer/SendWysiwygComposer.tsx  |  7 ++--
 .../components/FormattingButtons.tsx          |  5 ++-
 .../wysiwyg_composer/components/LinkModal.tsx | 11 +++--
 .../components/LinkModal-test.tsx             | 10 +++--
 6 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
index 0a6441ffeb4..8c512f1cd53 100644
--- a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
+++ b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts
@@ -18,15 +18,17 @@ import { createContext, useContext } from "react";
 
 import { SubSelection } from "./types";
 
-export const defaultContext: { selection: SubSelection } = {
-    selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 },
-};
+export function getDefaultContextValue(): { selection: SubSelection } {
+    return {
+        selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 },
+    };
+}
 
 export interface ComposerContextState {
     selection: SubSelection;
 }
 
-export const ComposerContext = createContext<ComposerContextState>(defaultContext);
+export const ComposerContext = createContext<ComposerContextState>(getDefaultContextValue());
 ComposerContext.displayName = "ComposerContext";
 
 export function useComposerContext() {
diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
index 275d30bb1f4..f00aadcdffb 100644
--- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, RefObject } from "react";
+import React, { forwardRef, RefObject, useRef } from "react";
 import classNames from "classnames";
 
 import EditorStateTransfer from "../../../../utils/EditorStateTransfer";
@@ -23,6 +23,7 @@ import { EditionButtons } from "./components/EditionButtons";
 import { useWysiwygEditActionHandler } from "./hooks/useWysiwygEditActionHandler";
 import { useEditing } from "./hooks/useEditing";
 import { useInitialContent } from "./hooks/useInitialContent";
+import { ComposerContext, getDefaultContextValue } from "./ComposerContext";
 
 interface ContentProps {
     disabled: boolean;
@@ -44,6 +45,7 @@ interface EditWysiwygComposerProps {
 }
 
 export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
+    const defaultContextValue = useRef(getDefaultContextValue());
     const initialContent = useInitialContent(editorStateTransfer);
     const isReady = !editorStateTransfer || initialContent !== undefined;
 
@@ -51,24 +53,26 @@ export function EditWysiwygComposer({ editorStateTransfer, className, ...props }
 
     return (
         isReady && (
-            <WysiwygComposer
-                className={classNames("mx_EditWysiwygComposer", className)}
-                initialContent={initialContent}
-                onChange={onChange}
-                onSend={editMessage}
-                {...props}
-            >
-                {(ref) => (
-                    <>
-                        <Content disabled={props.disabled} ref={ref} />
-                        <EditionButtons
-                            onCancelClick={endEditing}
-                            onSaveClick={editMessage}
-                            isSaveDisabled={isSaveDisabled}
-                        />
-                    </>
-                )}
-            </WysiwygComposer>
+            <ComposerContext.Provider value={defaultContextValue.current}>
+                <WysiwygComposer
+                    className={classNames("mx_EditWysiwygComposer", className)}
+                    initialContent={initialContent}
+                    onChange={onChange}
+                    onSend={editMessage}
+                    {...props}
+                >
+                    {(ref) => (
+                        <>
+                            <Content disabled={props.disabled} ref={ref} />
+                            <EditionButtons
+                                onCancelClick={endEditing}
+                                onSaveClick={editMessage}
+                                isSaveDisabled={isSaveDisabled}
+                            />
+                        </>
+                    )}
+                </WysiwygComposer>
+            </ComposerContext.Provider>
         )
     );
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index abaa80739b5..032a8411a52 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ForwardedRef, forwardRef, MutableRefObject } from "react";
+import React, { ForwardedRef, forwardRef, MutableRefObject, useRef } from "react";
 
 import { useWysiwygSendActionHandler } from "./hooks/useWysiwygSendActionHandler";
 import { WysiwygComposer } from "./components/WysiwygComposer";
@@ -24,7 +24,7 @@ import { E2EStatus } from "../../../../utils/ShieldUtils";
 import E2EIcon from "../E2EIcon";
 import { AboveLeftOf } from "../../../structures/ContextMenu";
 import { Emoji } from "./components/Emoji";
-import { ComposerContext, defaultContext } from "./ComposerContext";
+import { ComposerContext, getDefaultContextValue } from "./ComposerContext";
 
 interface ContentProps {
     disabled?: boolean;
@@ -57,9 +57,10 @@ export function SendWysiwygComposer({
     ...props
 }: SendWysiwygComposerProps) {
     const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer;
+    const defaultContextValue = useRef(getDefaultContextValue());
 
     return (
-        <ComposerContext.Provider value={defaultContext}>
+        <ComposerContext.Provider value={defaultContextValue.current}>
             <Composer
                 className="mx_SendWysiwygComposer"
                 leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index bbfcd490bb6..d2cafb11989 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -31,6 +31,7 @@ import { KeyCombo } from "../../../../../KeyBindingsManager";
 import { _td } from "../../../../../languageHandler";
 import { ButtonEvent } from "../../../elements/AccessibleButton";
 import { openLinkModal } from "./LinkModal";
+import { useComposerContext } from "../ComposerContext";
 
 interface TooltipProps {
     label: string;
@@ -78,6 +79,8 @@ interface FormattingButtonsProps {
 }
 
 export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) {
+    const composerContext = useComposerContext();
+
     return (
         <div className="mx_FormattingButtons">
             <Button
@@ -117,7 +120,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 isActive={actionStates.link === "reversed"}
                 label={_td("Link")}
-                onClick={() => openLinkModal(composer)}
+                onClick={() => openLinkModal(composer, composerContext)}
                 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 a5a78ca7925..6c1315ab769 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -21,13 +21,13 @@ import { _td } from "../../../../../languageHandler";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import Field from "../../../elements/Field";
-import { useComposerContext } from "../ComposerContext";
+import { ComposerContextState } from "../ComposerContext";
 import { isSelectionEmpty, setSelection } from "../utils/selection";
 
-export function openLinkModal(composer: FormattingFunctions) {
+export function openLinkModal(composer: FormattingFunctions, composerContext: ComposerContextState) {
     const modal = Modal.createDialog(
         LinkModal,
-        { composer, onClose: () => modal.close(), isTextEnabled: isSelectionEmpty() },
+        { composerContext, composer, onClose: () => modal.close(), isTextEnabled: isSelectionEmpty() },
         "mx_CompoundDialog",
         false,
         true,
@@ -42,11 +42,10 @@ interface LinkModalProps {
     composer: FormattingFunctions;
     isTextEnabled: boolean;
     onClose: () => void;
+    composerContext: ComposerContextState;
 }
 
-export function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps) {
-    const composerContext = useComposerContext();
-
+export function LinkModal({ composer, isTextEnabled, onClose, composerContext }: LinkModalProps) {
     const [fields, setFields] = useState({ text: "", link: "" });
     const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
 
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 898b83080ae..b4a3fd4828a 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -19,7 +19,6 @@ import { render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import userEvent from "@testing-library/user-event";
 
-import { ComposerContext } from "../../../../../../src/components/views/rooms/wysiwyg_composer/ComposerContext";
 import { LinkModal } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
 import { mockPlatformPeg } from "../../../../../test-utils";
 import * as selection from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
@@ -38,9 +37,12 @@ describe("LinkModal", () => {
 
     const customRender = (isTextEnabled: boolean, onClose: () => void) => {
         return render(
-            <ComposerContext.Provider value={{ selection: defaultValue }}>
-                <LinkModal composer={composer} isTextEnabled={isTextEnabled} onClose={onClose} />
-            </ComposerContext.Provider>,
+            <LinkModal
+                composer={composer}
+                isTextEnabled={isTextEnabled}
+                onClose={onClose}
+                composerContext={{ selection: defaultValue }}
+            />,
         );
     };
 

From ad532cbcf480b68fc369d67b24de22efd9e30a77 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 20 Dec 2022 15:19:29 +0100
Subject: [PATCH 13/16] Review changes

---
 .../wysiwyg_composer/components/_LinkModal.pcss    |  2 +-
 .../rooms/wysiwyg_composer/components/Emoji.tsx    | 13 +++++++------
 .../wysiwyg_composer/components/LinkModal.tsx      |  6 ++----
 .../rooms/wysiwyg_composer/utils/selection.ts      |  3 +++
 .../wysiwyg_composer/components/LinkModal-test.tsx | 14 +++++++-------
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 35f30042b84..e95775f0d16 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_LinkModal {
-    padding: 32px;
+    padding: $spacing-32;
 
     .mx_Dialog_content {
         margin-top: 30px;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx
index 74ebad636ec..5a4b356f349 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx
@@ -37,12 +37,13 @@ export function Emoji({ menuPosition }: EmojiProps) {
         <EmojiButton
             menuPosition={menuPosition}
             addEmoji={(emoji) => {
-                setSelection(composerContext.selection);
-                dis.dispatch<ComposerInsertPayload>({
-                    action: Action.ComposerInsert,
-                    text: emoji,
-                    timelineRenderingType: roomContext.timelineRenderingType,
-                });
+                setSelection(composerContext.selection).then(() =>
+                    dis.dispatch<ComposerInsertPayload>({
+                        action: Action.ComposerInsert,
+                        text: emoji,
+                        timelineRenderingType: roomContext.timelineRenderingType,
+                    }),
+                );
                 return true;
             }}
         />
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index 6c1315ab769..af4e752816b 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -58,10 +58,8 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext }:
             hasCancelButton={true}
             onFinished={async (isClickOnSave: boolean) => {
                 if (isClickOnSave) {
-                    setSelection(composerContext.selection);
-
-                    // Waiting for selection to be effective
-                    setTimeout(() => composer.link(fields.link, isTextEnabled ? fields.text : undefined), 0);
+                    await setSelection(composerContext.selection);
+                    composer.link(fields.link, isTextEnabled ? fields.text : undefined);
                 }
                 onClose();
             }}
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/selection.ts b/src/components/views/rooms/wysiwyg_composer/utils/selection.ts
index 845a57daaaf..0390a3cefa9 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/selection.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/selection.ts
@@ -25,6 +25,9 @@ export function setSelection(selection: SubSelection) {
         document.getSelection()?.removeAllRanges();
         document.getSelection()?.addRange(range);
     }
+
+    // Waiting for the next loop to ensure that the selection is effective
+    return new Promise((resolve) => setTimeout(resolve, 0));
 }
 
 export function isSelectionEmpty() {
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 b4a3fd4828a..c2fd1aeff20 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -25,7 +25,7 @@ import * as selection from "../../../../../../src/components/views/rooms/wysiwyg
 import { SubSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/types";
 
 describe("LinkModal", () => {
-    const composer = {
+    const formattingFunctions = {
         link: jest.fn(),
     } as unknown as FormattingFunctions;
     const defaultValue: SubSelection = {
@@ -38,7 +38,7 @@ describe("LinkModal", () => {
     const customRender = (isTextEnabled: boolean, onClose: () => void) => {
         return render(
             <LinkModal
-                composer={composer}
+                composer={formattingFunctions}
                 isTextEnabled={isTextEnabled}
                 onClose={onClose}
                 composerContext={{ selection: defaultValue }}
@@ -46,9 +46,9 @@ describe("LinkModal", () => {
         );
     };
 
-    mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
     const selectionSpy = jest.spyOn(selection, "setSelection");
 
+    beforeEach(() => mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) }));
     afterEach(() => {
         jest.clearAllMocks();
         jest.useRealTimers();
@@ -78,13 +78,13 @@ describe("LinkModal", () => {
 
         // Then
         expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
-        expect(onClose).toBeCalledTimes(1);
+        await waitFor(() => expect(onClose).toBeCalledTimes(1));
 
         // When
         jest.runAllTimers();
 
         // Then
-        expect(composer.link).toHaveBeenCalledWith("l", undefined);
+        expect(formattingFunctions.link).toHaveBeenCalledWith("l", undefined);
     });
 
     it("Should create a link with text", async () => {
@@ -121,12 +121,12 @@ describe("LinkModal", () => {
 
         // Then
         expect(selectionSpy).toHaveBeenCalledWith(defaultValue);
-        expect(onClose).toBeCalledTimes(1);
+        await waitFor(() => expect(onClose).toBeCalledTimes(1));
 
         // When
         jest.runAllTimers();
 
         // Then
-        expect(composer.link).toHaveBeenCalledWith("l", "t");
+        expect(formattingFunctions.link).toHaveBeenCalledWith("l", "t");
     });
 });

From 38fb044556c3d156f459ba89e6a62d61cb1fb910 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 20 Dec 2022 16:04:40 +0100
Subject: [PATCH 14/16] Remove custom style for Save button

---
 .../views/rooms/wysiwyg_composer/components/_LinkModal.pcss  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index e95775f0d16..5bd02cc245a 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -26,9 +26,4 @@ limitations under the License.
         display: flex;
         flex-direction: column;
     }
-
-    .mx_Dialog_primary {
-        // Override the default min-with of the primary button
-        min-width: 76px !important;
-    }
 }

From 421bc29058075443f6627b814fe1fea228ebcd50 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 20 Dec 2022 17:22:18 +0100
Subject: [PATCH 15/16] Add auto-focus for text field in LinkModal.tsx

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

diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
index af4e752816b..2dcfc43eadf 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -67,6 +67,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext }:
                 <div className="mx_LinkModal_content">
                     {isTextEnabled && (
                         <Field
+                            autoFocus={true}
                             label={_td("Text")}
                             value={fields.text}
                             onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -75,6 +76,7 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext }:
                         />
                     )}
                     <Field
+                        autoFocus={!isTextEnabled}
                         label={_td("Link")}
                         value={fields.link}
                         onChange={(e: ChangeEvent<HTMLInputElement>) =>

From 7875d49807f5f8a1aebe22b38dc4a77b572fe74d Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 21 Dec 2022 15:13:14 +0100
Subject: [PATCH 16/16] Update i18n

---
 src/i18n/strings/en_EN.json | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ba56f075427..83d6c2d7cc1 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1879,9 +1879,7 @@
     "Mod": "Mod",
     "From a thread": "From a thread",
     "This event could not be displayed": "This event could not be displayed",
-    "Message Actions": "Message Actions",
-    "View in room": "View in room",
-    "Copy link to thread": "Copy link to thread",
+    " in <strong>%(room)s</strong>": " in <strong>%(room)s</strong>",
     "Encrypted by an unverified session": "Encrypted by an unverified session",
     "Unencrypted": "Unencrypted",
     "Encrypted by a deleted session": "Encrypted by a deleted session",
@@ -2130,12 +2128,12 @@
     "Italic": "Italic",
     "Underline": "Underline",
     "Code": "Code",
-    "Message Actions": "Message Actions",
-    "View in room": "View in room",
-    "Copy link to thread": "Copy link to thread",
     "Link": "Link",
     "Create a link": "Create a link",
     "Text": "Text",
+    "Message Actions": "Message Actions",
+    "View in room": "View in room",
+    "Copy link to thread": "Copy link to thread",
     "Error updating main address": "Error updating main address",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
     "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",