Bug: Enter not working as intended

[MarNeumann]

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.

[MarNeumann]

It looks like, the behaviour is not only limited to the ENTER-Key

https://github.com/facebook/lexical/assets/21364119/517fb2f4-a0f3-432f-b8cf-1e7f33360d76

[zurfyx]

This is the first time I see such as issue, it might be specific to your setup or plugins. I would start by adding a debugger onto the beforeInput function, the INSERT_PARAGRAPH_COMMAND should hit https://github.com/facebookexternal/Outline//blob/c0e7e784f1f3d61574e1cc9424faccc071300230/packages/lexical/src/LexicalEvents.ts#L582-L584 (if it doesn't even see beforeinput someone else might be preventing the event).

If the command hit but the new line isn't rendered make sure the rich text plugin command handler for INSERT_PARAGRAPH_COMMAND is not overwritten by another plugin.

[kennetpostigo]

@MarNeumann did you find a solution to this?

[misaelupg]

I have a similar setup, and the issue seems to be in the Tamagui reset.css file:

p, input, textarea, button, ul, ol, li, pre, dialog {
    all: unset;
    box-sizing: border-box;
}

Overriding all: unset with all: revert within the scope of the editor instance styles, fixes the issue without affecting the default Tamagui styles.

.editor-paragraph {
    all: revert;
}