OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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
pull/28788/head^2
Johannes Marbach 2023-09-19 07:58:53 +02:00 committed by GitHub
parent e9c9377e78
commit 3fbf38f17d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/views/rooms/BasicMessageComposer.tsx
View File

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

4
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

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

16
test/components/views/rooms/BasicMessageComposer-test.tsx
View File

@ -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 {