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

Folded headers prevent newline creation #538

Closed haveanicedavid closed 2 years ago

haveanicedavid commented 3 years ago

When using folded headers on a newly added header, trying to create a new line from the folded header doesn't behave as expected. New lines are created, but they're appended to the folded content and don't show until opening. Cursor position stays on the header, and keyboard navigation breaks

To Reproduce Steps to reproduce the behavior:

  1. Create a header with some content underneath
  2. Fold that header
  3. Click to end of line on the header and hit enter
  4. Cursor will not move, and typing will append to the current header line

Expected behavior Ideally, the folded header would properly maintain its content, a new line would be created, and the cursor would be placed there (so it would behave like a normal document without the folded content).

Screenshots https://www.loom.com/share/816c1dc8b41e48a6ab49a6995801b0d5

Desktop (please complete the following information):

tommoor commented 3 years ago

Thanks for the solid bug report, agreed in expected behavior

tommoor commented 3 years ago

Looking at fixing this, but there is some awkwardness – because any content beneath the heading and before the next heading is automatically collapsed even if you place the new paragraph at the end instead of the beginning it's still invisible.

The only way to hit "enter" and get a visible paragraph for typing would be to place it after the next non-collapsed heading which would be super weird.

I'm beginning to think the answer is to auto-expand the header in this scenario.

haveanicedavid commented 2 years ago

@tommoor Just seeing this - I was poking through the codebase last night trying to brainstorm.

I'm not sure how this would fit with Outline, but for my use case what would be great is to have newline creation on collapsed headers default to creating a new header at the same depth as the current ie newline from a collapsed h1 produces another h1 sibling, h2 => h2 etc

So if my cursor (|) is at the end of a collapsed header:

# Collapsed Header  |

and I hit enter, instead of creating a paragraph mark ie

# Collapsed Header
Paragraph text which is under nested header (and thus hidden in the dom) |

it would create another header of the same depth:

# Collapsed Header
# Newly created line |
# Open Header
## Collapsed sub-header 
## Newline from ^ creates sibling sub-header |

etc.

The UX makes a lot of sense to me, because the only situation I would create a newline from a collapsed header is to create another header at the same depth - like to hide away content while I'm producing a larger document. If I want to add to the content under a header (and not create a sibling), it makes sense to require users to manually expand the collapsed header (so they see where the content is being added)

What do you think?

tommoor commented 2 years ago

I think this is a great solution, not sure why I didn't think of it 😉