Linebreak in lists do not work correctly

[d-e-v-esh]

Bug Report 🐛

When we press Enter in the middle of a sentence inside of a list, instead of pushing the rest of the sentence to the new line, it inserts a new line and then pushes the rest of the sentence to the new line which creates an extra unneeded line that can be very annoying at times for the user.

Expected Behavior

It should push the rest of the text to the next number without inserting an extra new line

Current Behavior

It inserts a new line and then pushes the rest of the paragraph to the next number.

Possible Solution

Steps to Reproduce

1. Paste a sample paragraph into the editor.
2. Click on the numbered list button in the toolbar
3. Now that the entire paragraph is under number 1 in the list, go to the end of the first line and press Enter
4. You would see an extra line that should not be there.

Context (Environment)

Desktop

• OS: Windows 10
• Browser: Chrome
• Version 88.0.4324.182 (Official Build) (64-bit)

Detailed Description

Possible Implementation

[K-Kumar-01]

@dselman I looked into the issue and here I am facing some difficulties.

const onKeyDown = useCallback((event) => {
    if (!canKeyDown(editor, event)) {
 const onKeyDown = useCallback((event) => {
    if (!canKeyDown(editor, event)) {
      event.preventDefault();
      return;
    }
    console.log(event.key);

    const isFormatEvent = () => formattingHotKeys.some(hotkey => isHotkey(hotkey, event));
    
    if (!canBeFormatted(editor) && isFormatEvent()) {
      event.preventDefault();
      return;
    }

    if (event.key === "Enter" && !isBlockHeading(editor)) {
      return;
    }    
    console.log('isFormatEvent',isFormatEvent())
    const hotkeys = Object.keys(HOTKEYS);
    hotkeys.forEach((hotkey) => {      
      if (isHotkey(hotkey, event)) {
        event.preventDefault();
        const { code, type } = HOTKEYS[hotkey];
        console.log(code,type);
        hotkeyActions[type](code);
      }
    });
  }, [canBeFormatted, canKeyDown, editor, hotkeyActions]);

On pressing the Enter key there is no console.log(): On pressing other keys(not hotkeys) there is console.log(); On pressing shortcut(hotkeys) keys, there is console.log() both times.

I am unable to understand as why there is no log when we press Enter key. Need help here

[d-e-v-esh]

@K-Kumar-01 That is because of this line here

    if (event.key === "Enter" && !isBlockHeading(editor)) {
      return;
    }

It basically means that if you are on a non-heading block and you press enter then everything should be ignored. I have detailed this issue and its solution in this pull request here #270 If you comment out that line then the console.log will work. This problem is causing few other problems in the issues list.

[Cronus1007]

@d-e-v-esh Shall I work upon this issue.

[jolanglinais]

I suspect we hold off on this Issue specifically until #270 is finished and then see where we stand.

[d-e-v-esh]

@irmerk Yes, I think that would be the best.

[Hanaffi]

@irmerk Can you assign it to me please?

[jolanglinais]

@Hanaffi please see https://github.com/accordproject/web-components/issues/284#issuecomment-796089929

[dezfuture]

I would like to contribute and fix the issue. Can you guide me on how should I go forward into solving this issue

[K-Kumar-01]

@dezfuture The issue #270 needs to be finished before you can pick up this issue

[K-Kumar-01]

@irmerk Since this issue is unblocked, I would like to work on it,

[jolanglinais]

I believe #270 needs to be finished first.

[AbhishekJamhoriya]

@d-e-v-esh can i work on this issue.

[jolanglinais]

@AbhishekJamhoriya please open a PR if you work on this.

[vikasazad]

Can i work on this issue?

[TC5022]

@d-e-v-esh I would like to work on this issue, if it's still open