facebook / facebook/lexical

Bug: Android text selection inserts invisible character (ZWS)

Open
#7,566 0 comments 0 reactions 0 assignees View on GitHub
android-bug
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
55

Description

## Steps To Reproduce

1. Open the text editor on an Android device.
2. Try to select (highlight) some text.

https://github.com/user-attachments/assets/db288075-cb59-457f-987d-ba7617c16af3

## Impact of fix

After a detailed study of the bug, it was found that the problem is caused by inserting a special character when selecting text (Zero Width Space (code 8203)). An exception was added to temporarily solve the permanent deletion of text.

Example code below:

```
import { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { COMMAND_PRIORITY_CRITICAL, CONTROLLED_TEXT_INSERTION_COMMAND } from 'lexical';

const isAndroid = () => /android/i.test(navigator.userAgent);

function AndroidFixPlugin() {
const [editor] = useLexicalComposerContext();

useEffect(() => {
const removeTextInsertionListener = editor.registerCommand(
CONTROLLED_TEXT_INSERTION_COMMAND, (text: string) => {
// Checking for Zero Width Space (code 8203) on Android
if (isAndroid() && text.length === 1 && text.charCodeAt(0) === 8203) {
return true;
}

return false;
}, COMMAND_PRIORITY_CRITICAL
);

return () => {
removeTextInsertionListener();
};
}, [editor]);

return null;
}

export default AndroidFixPlugin;
```

```

// .... another Plugins

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.