Bug: Enter not working as intended
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 61
Description
Hi guys,
hope your doing fine. I did run into a quite weird Bug when using the RichTextPlugin with Solito and NextJS 13.
### Expected Behavior:
Pressing Enter should create a new paragraph and move the cursor to the beginning of the next line, allowing for proper organization and separation of text when using the RichTextPlugin.
### Actual Behavior:
When pressing Enter, the cursor remains within the same paragraph, causing the text to continue in the same line instead of creating a new paragraph. Although pressing Enter twice seems to visually create a new paragraph, the DOM structure of the document does not reflect this correctly.
### Steps to reproduce:
I am using a monorepo with Solio and Next.js 13, which adds complexity to the process of reproducing the error. Right now i can't provide a CodeSandbox. I added a list of dependencies tho. Maybe someone has a idea nonethenless. Thanks for helping me out :)
### Video Attachment:
https://github.com/facebook/lexical/assets/21364119/2d9e4d70-47c7-40b9-bc1d-03bbfc60310b
### Environment Details:
Lexical Version: 0.11.1
Operating System: macOS
Browser: arc, Safari (for good measure)
#### Dependencies:
```
{
"version": "0.0.10",
"name": "@codama-starter/frontend",
"private": true,
"main": "index.ts",
"scripts": {
"check-types": "tsc --noEmit"
},
"dependencies": {
"@lexical/react": "0.11.1",
"@tamagui/animations-react-native": "1.23.0",
"@tamagui/font-inter": "1.23.0",
"@tamagui/lucide-icons": "^1.27.3",
"@tamagui/react-native-media-driver": "1.23.0",
"@tamagui/shorthands": "1.23.0",
"@tamagui/themes": "1.23.0",
"jwt-decode": "^3.1.2",
"lexical": "0.11.1",
"pocketbase": "^0.14.4",
"solito": "^3.2.5",
"tamagui": "1.23.0",
"usehooks-ts": "^2.9.1",
"zustand": "^4.3.3"
},
"devDependencies": {
"@storybook/jest": "^0.1.0",
"@storybook/react": "^7.0.8",
"@storybook/testing-library": "^0.1.0"
},
"sideEffects": false
}
```
```
{
"name": "@codama-starter/next",
"version": "0.1.3",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"check-types": "tsc --noemit"
},
"dependencies": {
"@codama-starter/frontend": "0.0.10",
"@tamagui/next-theme": "1.23.0",
"next": "13.2.4",
"raf": "^3.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native": "^0.71.6"
},
"devDependencies": {
"@fontsource/inter": "^4.5.14",
"@tamagui/next-plugin": "1.23.0",
"@types/node": "^18.6.4",
"eslint-config-next": "^13.2.4",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"next-images": "^1.8.4",
"next-transpile-modules": "^10.0.0",
"url-loader": "^4.1.1"
}
}
```
### Note:
Please let me know if any additional information or clarification is required.
Contributor guide
Research direction
Start by reproducing the Enter behavior at the RichTextPlugin entry point in the reported Solito and Next.js 13 monorepo setup, then inspect the resulting document DOM after one and two presses. Done means one Enter creates a paragraph and moves the cursor to the next line, with the DOM reflecting that paragraph structure.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100