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

Author: Johennes

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");
     }
 

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"
                 >

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 {