imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update rich text editor dependency and associated changes (#11098)

Browse source 
* fix logic error

* update types

* extract message content to variable

* use the new messageContent property

* sort out mention types to make them a  map

* update getMentionAttributes to use AllowedMentionAttributes

* add plain text handling

* change type and handling for attributes when creating a mention in plain text

* tidy, add comment

* revert TS config change

* fix broken types in test

* update tests

* bump rte

* fix import and ts errors

* fix broken tests
This commit is contained in:
alunturner 2023-06-19 09:00:11 +01:00 • committed by GitHub
parent 97765613bc
commit fa31ed55d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 108 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

3
test/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete-test.tsx
View file

@ -70,6 +70,7 @@ describe("WysiwygAutocomplete", () => {
]);
const mockHandleMention = jest.fn();
const mockHandleCommand = jest.fn();
const mockHandleAtRoomMention = jest.fn();
const renderComponent = (props: Partial<React.ComponentProps<typeof WysiwygAutocomplete>> = {}) => {
const mockClient = stubClient();
@ -84,6 +85,7 @@ describe("WysiwygAutocomplete", () => {
suggestion={null}
handleMention={mockHandleMention}
handleCommand={mockHandleCommand}
handleAtRoomMention={mockHandleAtRoomMention}
{...props}
/>
</RoomContext.Provider>
@ -98,6 +100,7 @@ describe("WysiwygAutocomplete", () => {
suggestion={null}
handleMention={mockHandleMention}
handleCommand={mockHandleCommand}
handleAtRoomMention={mockHandleAtRoomMention}
/>,
);
expect(screen.queryByTestId("autocomplete-wrapper")).not.toBeInTheDocument();

10
test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
View file

@ -164,7 +164,7 @@ describe("WysiwygComposer", () => {
const mockCompletions: ICompletion[] = [
{
type: "user",
href: "www.user1.com",
href: "https://matrix.to/#/@user_1:element.io",
completion: "user_1",
completionId: "@user_1:host.local",
range: { start: 1, end: 1 },
@ -172,7 +172,7 @@ describe("WysiwygComposer", () => {
},
{
type: "user",
href: "www.user2.com",
href: "https://matrix.to/#/@user_2:element.io",
completion: "user_2",
completionId: "@user_2:host.local",
range: { start: 1, end: 1 },
@ -189,7 +189,7 @@ describe("WysiwygComposer", () => {
},
{
type: "room",
href: "www.room1.com",
href: "https://matrix.to/#/#room_1:element.io",
completion: "#room_with_completion_id",
completionId: "@room_1:host.local",
range: { start: 1, end: 1 },
@ -197,7 +197,7 @@ describe("WysiwygComposer", () => {
},
{
type: "room",
href: "www.room2.com",
href: "https://matrix.to/#/#room_2:element.io",
completion: "#room_without_completion_id",
range: { start: 1, end: 1 },
component: <div>room_without_completion_id</div>,
@ -285,9 +285,9 @@ describe("WysiwygComposer", () => {
it("pressing enter selects the mention and inserts it into the composer as a link", async () => {
await insertMentionInput();
// press enter
await userEvent.keyboard("{Enter}");
screen.debug();
// check that it closes the autocomplete
await waitFor(() => {

6
test/components/views/rooms/wysiwyg_composer/hooks/useSuggestion-test.tsx
View file

@ -72,7 +72,7 @@ describe("processMention", () => {
it("returns early when suggestion is null", () => {
const mockSetSuggestion = jest.fn();
const mockSetText = jest.fn();
processMention("href", "displayName", {}, null, mockSetSuggestion, mockSetText);
processMention("href", "displayName", new Map(), null, mockSetSuggestion, mockSetText);
expect(mockSetSuggestion).not.toHaveBeenCalled();
expect(mockSetText).not.toHaveBeenCalled();
@ -95,7 +95,7 @@ describe("processMention", () => {
processMention(
href,
displayName,
{ "data-test-attribute": "test" },
new Map([["style", "test"]]),
{ node: textNode, startOffset: 0, endOffset: 2 } as unknown as Suggestion,
mockSetSuggestionData,
mockSetText,
@ -109,7 +109,7 @@ describe("processMention", () => {
expect(linkElement).toBeInstanceOf(HTMLAnchorElement);
expect(linkElement).toHaveAttribute(href, href);
expect(linkElement).toHaveAttribute("contenteditable", "false");
expect(linkElement).toHaveAttribute("data-test-attribute", "test");
expect(linkElement).toHaveAttribute("style", "test");
expect(linkElement.textContent).toBe(displayName);
expect(mockSetText).toHaveBeenCalledWith();

56
test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
View file

@ -143,12 +143,12 @@ describe("getMentionDisplayText", () => {
});
describe("getMentionAttributes", () => {
it("returns an empty object for completion types other than room, user or at-room", () => {
it("returns an empty map for completion types other than room, user or at-room", () => {
const nonHandledCompletionTypes = ["community", "command"] as const;
const nonHandledCompletions = nonHandledCompletionTypes.map((type) => createMockCompletion({ type }));
nonHandledCompletions.forEach((completion) => {
expect(getMentionAttributes(completion, mockClient, mockRoom)).toEqual({});
expect(getMentionAttributes(completion, mockClient, mockRoom)).toEqual(new Map());
});
});
@ -164,14 +164,14 @@ describe("getMentionAttributes", () => {
mockAvatar.getInitialLetter.mockReturnValue(testInitialLetter);
describe("user mentions", () => {
it("returns an empty object when no member can be found", () => {
it("returns an empty map when no member can be found", () => {
const userCompletion = createMockCompletion({ type: "user" });
// mock not being able to find a member
mockRoom.getMember.mockImplementationOnce(() => null);
const result = getMentionAttributes(userCompletion, mockClient, mockRoom);
expect(result).toEqual({});
expect(result).toEqual(new Map());
});
it("returns expected attributes when avatar url is not default", () => {
@ -179,10 +179,12 @@ describe("getMentionAttributes", () => {
const result = getMentionAttributes(userCompletion, mockClient, mockRoom);
expect(result).toEqual({
"data-mention-type": "user",
"style": `--avatar-background: url(${testAvatarUrlForMember}); --avatar-letter: '\u200b'`,
});
expect(result).toEqual(
new Map([
["data-mention-type", "user"],
["style", `--avatar-background: url(${testAvatarUrlForMember}); --avatar-letter: '\u200b'`],
]),
);
});
it("returns expected style attributes when avatar url matches default", () => {
@ -193,10 +195,15 @@ describe("getMentionAttributes", () => {
const result = getMentionAttributes(userCompletion, mockClient, mockRoom);
expect(result).toEqual({
"data-mention-type": "user",
"style": `--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`,
});
expect(result).toEqual(
new Map([
["data-mention-type", "user"],
[
"style",
`--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`,
],
]),
);
});
});
@ -206,10 +213,12 @@ describe("getMentionAttributes", () => {
const result = getMentionAttributes(userCompletion, mockClient, mockRoom);
expect(result).toEqual({
"data-mention-type": "room",
"style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`,
});
expect(result).toEqual(
new Map([
["data-mention-type", "room"],
["style", `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`],
]),
);
});
it("returns expected style attributes when avatar url for room is falsy", () => {
@ -220,10 +229,15 @@ describe("getMentionAttributes", () => {
const result = getMentionAttributes(userCompletion, mockClient, mockRoom);
expect(result).toEqual({
"data-mention-type": "room",
"style": `--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`,
});
expect(result).toEqual(
new Map([
["data-mention-type", "room"],
[
"style",
`--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`,
],
]),
);
});
});
@ -233,7 +247,7 @@ describe("getMentionAttributes", () => {
const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom);
expect(result).toEqual({ "data-mention-type": "at-room" });
expect(result).toEqual(new Map([["data-mention-type", "at-room"]]));
});
});
});