nextcloud-libraries / nextcloud-libraries/nextcloud-vue

NcRichContenteditable: Unable to navigate to start/end of content containing NcMentionBubble on Firefox

Open
#6,022 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser: Firefox feature: rich-contenteditable feature: richtext
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

First reported in https://github.com/nextcloud/server/issues/35296 (which was itself a repost of https://github.com/nextcloud/server/pull/35187#pullrequestreview-1185707572), but after some testing, I believe this is more of a components issue rather than strictly a server issue (but you can correct me if I'm wrong).

Steps to reproduce

  1. Open https://nextcloud-vue-components.netlify.app/#/Components/NcRichContenteditable in Firefox.
  2. In either of the example boxes provided (doesn't matter which one), do the following steps:
Case 1
  1. Append a mention @Test01 after the example sentence.
  2. Press Backspace to remove the space after the mention.
  3. Press Left to move the cursor to the left of the mention.
  4. Press Right.

Expected: the cursor should be directly to the right of the mention.
Actual: the cursor remains in place.

  1. In the other example box, click anywhere in the whitespace to the right to place the cursor at the end.
  2. Press Backspace to remove the space after the mention.

Expected: the cursor should be directly to the right of the mention.
Actual: the cursor disappears entirely.

The same also happens when you click in the whitespace again to try to place the cursor that way. This is the worst case as the mention can no longer be edited in this state (unless you undo with Ctrl-Z, but that's only if a previous state is available which may not always be the case).

Case 2
  1. Delete the example sentence and replace it with a mention @Test01.
  2. Press Backspace to remove the space after the mention.
  3. Press Left.

Expected: the cursor should be directly to the left of the mention.
Actual: the cursor remains in place.

  1. Click in the whitespace to the left of the mention.

Expected: the cursor should be directly to the left of the mention.
Actual: the cursor disappears entirely.

  1. In the other example box, click anywhere in the whitespace to the right to place the cursor at the end.
  2. Press Backspace to remove the space after the mention.

Expected: the cursor should be directly to the right of the mention.
Actual: the cursor disappears entirely, and the content is now un-editable (as above).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the NcRichContenteditable examples at the linked component demo and reproduce both mention-navigation cases in Firefox. Done means the cursor remains editable and moves directly to the left or right of NcMentionBubble after the described keyboard and whitespace interactions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.