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

RTE plain text mentions as pills (#10852)

Browse source 
* insert mentions as links styled as pills

* post merge fix and update test

* update comments, move typeguard out

* create a text node instead of setting innerText

* update test

* update test

* fix broken cypress test, remove .only

* make it able to deal with inserting in middle of blank lines

* update comment

* fix strict null error

* use typeguard

* avoid implicit truth check

* add hook tests

* add comment

* Update test/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
This commit is contained in:
alunturner 2023-05-16 12:54:16 +01:00 • committed by GitHub
parent acdbae3e8c
commit 0d981326ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 146 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -78,34 +78,42 @@ describe("processMention", () => {
expect(mockSetText).not.toHaveBeenCalled();
});
it("can insert a mention into an empty text node", () => {
// make an empty text node, set the cursor inside it and then append to the document
const textNode = document.createTextNode("");
document.body.appendChild(textNode);
document.getSelection()?.setBaseAndExtent(textNode, 0, textNode, 0);
it("can insert a mention into a text node", () => {
// make a text node and an editor div, set the cursor inside the text node and then
// append node to editor, then editor to document
const textNode = document.createTextNode("@a");
const mockEditor = document.createElement("div");
mockEditor.appendChild(textNode);
document.body.appendChild(mockEditor);
document.getSelection()?.setBaseAndExtent(textNode, 1, textNode, 1);
// call the util function
const href = "href";
const displayName = "displayName";
const mockSetSuggestion = jest.fn();
const mockSetSuggestionData = jest.fn();
const mockSetText = jest.fn();
processMention(
href,
displayName,
{},
{ node: textNode, startOffset: 0, endOffset: 0 } as unknown as Suggestion,
mockSetSuggestion,
{ "data-test-attribute": "test" },
{ node: textNode, startOffset: 0, endOffset: 2 } as unknown as Suggestion,
mockSetSuggestionData,
mockSetText,
);
// placeholder testing for the changed content - these tests will all be changed
// when the mention is inserted as an <a> tagfs
const { textContent } = textNode;
expect(textContent!.includes(href)).toBe(true);
expect(textContent!.includes(displayName)).toBe(true);
// check that the editor has a single child
expect(mockEditor.children).toHaveLength(1);
const linkElement = mockEditor.firstElementChild as HTMLElement;
expect(mockSetText).toHaveBeenCalledWith(expect.stringContaining(displayName));
expect(mockSetSuggestion).toHaveBeenCalledWith(null);
// and that the child is an <a> tag with the expected attributes and content
expect(linkElement).toBeInstanceOf(HTMLAnchorElement);
expect(linkElement).toHaveAttribute(href, href);
expect(linkElement).toHaveAttribute("contenteditable", "false");
expect(linkElement).toHaveAttribute("data-test-attribute", "test");
expect(linkElement.textContent).toBe(displayName);
expect(mockSetText).toHaveBeenCalledWith();
expect(mockSetSuggestionData).toHaveBeenCalledWith(null);
});
});