splitListItem mismatched transaction error when pressing enter

After both my supervisor and I spending some time on this, we figured we’d try posting here to see what we’re missing.

We’re working on creating both bulleted and ordered lists. Below is our key map bindings for ‘Enter’: const onEnter = (state: EditorState, dispatch, view: EditorView) => { const blockType = state.selection.$head.parent;

      chainCommands(
        newlineInCode,
        createParagraphNear,
        liftEmptyBlock,
        splitBlockKeepMarks
      )(state, dispatch);
      splitListItem(schema.nodes.list_item)(state, view.dispatch);
      setBlockType(blockType.type, blockType.attrs)(
        view.state,
        view.dispatch,
        view
      );
      return true;
    };

    bind('Enter', onEnter);

However, this results in an applying mismatched transaction error in the console.

Such an error makes sense as it would seem the most recent version of the state is not being dispatched. When I attempt to resolve this error by passing in the following code instead, upon pressing enter, the next line is indented and it does not have a list item.

   const onEnter = (state: EditorState, dispatch, view: EditorView) => {
      const blockType = state.selection.$head.parent;

      chainCommands(
        newlineInCode,
        createParagraphNear,
        liftEmptyBlock,
        splitBlockKeepMarks
      )(state, dispatch);
      splitListItem(schema.nodes.list_item)(view.state, view.dispatch);
      setBlockType(blockType.type, blockType.attrs)(
        view.state,
        view.dispatch,
        view
      );
      return true;
    };

    bind('Enter', onEnter);

Behavior we want: as a user is typing a list, pressing enter creates a new list item directly below the preceding list item at the same indention level as the previous list item.

Questions we need assistance resolving: how do we pass in the appropriate version of the EditorState to the splitListItem function to result in the intended behavior? Hopefully this also resolves the strange spacing issue where there is a large amount of space between the list items upon pressing enter.

Thank you in advance for your help

That onEnter function is applying multiple commands after each other—that doesn’t seem like a reasonable thing to do. Enter shouldn’t have the effect of multiple commands at once. I think you’re probably working at the wrong abstraction level—to compose multiple operations, build up a transaction directly. Commands are pre-packaged user actions and don’t really compose well.

1 Like

Thank you for the fast response.

I’m still a bit confused, but perhaps I am not understanding correctly. Aren’t newlineInCode, createParagraphNear, liftEmptyBlock, and splitBlockKeepMarks the default bindings for Enter? We used a previous similar post for guidance. Are you saying that by adding the splitListItem function as we’ve done, that constitutes the multiple commands?

I’ve resolved the issue; I was being a bit thick. Thank you as always for your guidance, @marijn.