From 3fbf38f17d9c67540a7762e31a810fe77be3e8f4 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Tue, 19 Sep 2023 07:58:53 +0200
Subject: [PATCH] Escape placeholder before injecting it into the style
 (#11607)

* Escape placeholder before injecting it into the style

In particular this adds escaping for backslashes which was previously missing.

* Update snapshots

* Add tests
---
 .../views/rooms/BasicMessageComposer.tsx         |  4 +---
 .../__snapshots__/RoomView-test.tsx.snap         |  4 ++--
 .../views/rooms/BasicMessageComposer-test.tsx    | 16 ++++++++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index c1db383dc18..2d21e9f616e 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -282,9 +282,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     };
 
     private showPlaceholder(): void {
-        // escape single quotes
-        const placeholder = this.props.placeholder?.replace(/'/g, "\\'");
-        this.editorRef.current?.style.setProperty("--placeholder", `'${placeholder}'`);
+        this.editorRef.current?.style.setProperty("--placeholder", `'${CSS.escape(this.props.placeholder ?? "")}'`);
         this.editorRef.current?.classList.add("mx_BasicMessageComposer_inputEmpty");
     }
 
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index 19df74f76d6..8df509e7ed0 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -446,7 +446,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   data-testid="basicmessagecomposer"
                   dir="auto"
                   role="textbox"
-                  style="--placeholder: 'Send a message…';"
+                  style="--placeholder: 'Send\\ a\\ message…';"
                   tabindex="0"
                   translate="no"
                 >
@@ -687,7 +687,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   data-testid="basicmessagecomposer"
                   dir="auto"
                   role="textbox"
-                  style="--placeholder: 'Send a message…';"
+                  style="--placeholder: 'Send\\ a\\ message…';"
                   tabindex="0"
                   translate="no"
                 >
diff --git a/test/components/views/rooms/BasicMessageComposer-test.tsx b/test/components/views/rooms/BasicMessageComposer-test.tsx
index 4215ce6e643..eb25cef8676 100644
--- a/test/components/views/rooms/BasicMessageComposer-test.tsx
+++ b/test/components/views/rooms/BasicMessageComposer-test.tsx
@@ -94,6 +94,22 @@ describe("BasicMessageComposer", () => {
         const transformedText = model.parts.map((part) => part.text).join("");
         expect(transformedText).toBe("/plain foobar\n");
     });
+
+    it("should escape single quote in placeholder", async () => {
+        const model = new EditorModel([], pc, renderer);
+        const composer = render(<BasicMessageComposer placeholder={"Don't"} model={model} room={room} />);
+        const input = composer.queryAllByRole("textbox");
+        const placeholder = input[0].style.getPropertyValue("--placeholder");
+        expect(placeholder).toMatch("'Don\\'t'");
+    });
+
+    it("should escape backslash in placeholder", async () => {
+        const model = new EditorModel([], pc, renderer);
+        const composer = render(<BasicMessageComposer placeholder={"w\\e"} model={model} room={room} />);
+        const input = composer.queryAllByRole("textbox");
+        const placeholder = input[0].style.getPropertyValue("--placeholder");
+        expect(placeholder).toMatch("'w\\\\e'");
+    });
 });
 
 function generateMockDataTransferForString(string: string): DataTransfer {