splitListItem mismatched transaction error when pressing enter

1

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.

state issue 1
state issue 11920×1080 2.71 MB

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);

view.state
view.state1920×1080 3.72 MB

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

2

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.

2 Likes
3

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?

4

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