Commands for plain text editor (#10567)

* add the handlers for when autocomplete is open plus rough / handling

* hack in using the wysiwyg autocomplete

* switch to using onSelect for the behaviour

* expand comment

* add a handle command function to replace text

* add event firing step

* fix TS errors for RefObject

* extract common functionality to new util

* use util for plain text mode

* use util for rich text mode

* remove unused imports

* make util able to handle either type of keyboard event

* fix TS error for mxClient

* lift all new code into main component prior to extracting to custom hook

* shift logic into custom hook

* rename ref to editorRef for clarity

* remove comment

* try to add cypress test for behaviour

* remove unused imports

* fix various lint/TS errors for CI

* update cypress test

* add test for pressing escape to close autocomplete

* expand cypress tests

* add typing while autocomplete open test

* refactor to single piece of state and update comments

* update comment

* extract functions for testing

* add first tests

* improve tests

* remove console log

* call useSuggestion hook from different location

* update useSuggestion hook tests

* improve cypress tests

* remove unused import

* fix selector in cypress test

* add another set of util tests

* remove .only

* remove .only

* remove import

* improve cypress tests

* remove .only

* add comment

* improve comments

* tidy up tests

* consolidate all cypress tests to one

* add early return

* fix typo, add documentation

* add early return, tidy up comments

* change function expression to function declaration

* add documentation

* fix broken test

* add check to cypress tests

* update types

* update comment

* update comments

* shift ref declaration inside the hook

* remove unused import

* update cypress test and add comments

* update usePlainTextListener comments

* apply suggested changes to useSuggestion

* update tests

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
alunturner 2023-04-27 08:37:47 +01:00 committed by GitHub
parent 0a22ed90ef
commit ca25c8f430
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 626 additions and 48 deletions

View file

@ -298,6 +298,28 @@ describe("WysiwygComposer", () => {
expect(screen.getByRole("link", { name: mockCompletions[0].completion })).toBeInTheDocument();
});
it("pressing escape closes the autocomplete", async () => {
await insertMentionInput();
// press escape
await userEvent.keyboard("{Escape}");
// check that it closes the autocomplete
await waitFor(() => {
expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
});
});
it("typing with the autocomplete open still works as expected", async () => {
await insertMentionInput();
// add some more text, then check the autocomplete is open AND the text is in the composer
await userEvent.keyboard("extra");
expect(screen.queryByRole("presentation")).toBeInTheDocument();
expect(screen.getByRole("textbox")).toHaveTextContent("@abcextra");
});
it("clicking on a mention in the composer dispatches the correct action", async () => {
await insertMentionInput();