outline / rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
https://www.getoutline.com
BSD 3-Clause "New" or "Revised" License
2.87k stars 588 forks source link

Pressing enter in an empty nested list item creates several more empty list items #497

Closed seeruk closed 3 years ago

seeruk commented 3 years ago

If you make a nested list, something like this:

* Hello
* World
  * Nested
  *

Then hit enter in that last empty item, you end up with something like this:

* Hello
* World
  * Nested
* 
*
  *

Note, this also happens in further nested lists, it just produces the same 3 empty nodes 1 level of nesting higher than the level you were at when you hit enter on the initial empty list item.

To Reproduce Steps to reproduce the behavior:

  1. Enter the first markdown structure seen above
  2. Hit enter in the empty (last) list item
  3. See error

Edit: It also looks like you need to specify prosemirror-transform 1.2.5 in resolutions for this issue to occur, but a fresh install in a CRA project also exhibits these symptoms with the resolutions applied.

My package.json for the fresh CRA project ```json { "name": "my-app", "version": "0.1.0", "private": true, "resolutions": { "prosemirror-transform": "1.2.5" }, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^16.9.56", "@types/react-dom": "^16.9.12", "react": "^16.14.0", "react-dom": "^16.14.0", "react-scripts": "4.0.3", "rich-markdown-editor": "^11.14.0", "styled-components": "^5.3.0", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ```

Expected behavior It should probably step back up in list levels until it's at the top level then revert to an empty paragraph after that.

Version 11.14.0

Screenshots Before:

Screenshot 2021-07-17 at 23 06 03

After:

Screenshot 2021-07-17 at 23 11 35

Desktop (please complete the following information):

Smartphone (please complete the following information): N/A / not tested there

seeruk commented 3 years ago

Seems to be linked to #427 actually. I've removed the resolutions I added for prosemirror-transform and that fixes this list issue, but then I'm back to having the issue described in #427 with headings affecting the line above or below.

Edit: For now I've gotten around this by using these resolutions, basically just taking the versions from your package.json file:

{
    "resolutions": {
        "prosemirror-commands": "1.1.6",
        "prosemirror-dropcursor": "1.3.3",
        "prosemirror-gapcursor": "1.1.5",
        "prosemirror-history": "1.1.3",
        "prosemirror-inputrules": "1.1.3",
        "prosemirror-keymap": "1.1.4",
        "prosemirror-markdown": "1.4.4",
        "prosemirror-model": "1.13.3",
        "prosemirror-schema-list": "1.1.2",
        "prosemirror-state": "1.3.4",
        "prosemirror-tables": "1.1.1",
        "prosemirror-transform": "1.2.5",
        "prosemirror-utils": "0.9.6",
        "prosemirror-view": "1.18.1"
    }
}

With this both headings and lists work as expected. I'm not sure what it is that needs locking more tightly, but something seems to just be slightly off (maybe a bug in prosemirror, or they're not using semver?)

tommoor commented 3 years ago

Thanks for providing the follow up 👍

I've also added the "prosemirror-transform" resolution inside this package in the hopes to prevent future reports until compatibility is achieved.