Run multiple commands in sequence

1

Is it possible to run multiple commands in sequence? First I thought chainCommands is the solution but this function does another job.

2

You can call them one after the other. Is there anything about that that is causing problems for you?

3

Yeah, my fault :man_facepalming::sweat_smile:

4

Hi guys! It does not seem to work. In my case just the last command work, because the first command creates a transaction and call dispatch() but all the following work with old transaction

5

Commands don’t compose like that. You can call multiple commands in order to execute them after each other. But you can’t make them combine their transactions.

6

You can call multiple commands in order to execute them after each other

Do you think this is possible? Commands call dispatch() inside them, so it means that we should pass another updated state into the next command. Imagine the case:

const runCommands = (state, dispatch) => {
   command1(state, dispatch);
   command2(state, dispatch); // the state here would be still
}

as the result just the command2 will be applied

another example:

const runCommands = (state, dispatch) => {
   command1(state, (tr) => {
      const newState = state.tr.apply(tr);
      command2(state, dispatch); // prosemirror throws an error here that the tr is still or mismatched
   });
7

The idea would be

command1(view.state, view.dispatch)
command2(view.state, view.dispatch)
8

Unfortunately, it does not work.

In the command1 we call dispatch(state.tr); and the command2 gets the old state.tr and call it’s own dispatch(state.tr)

9

I assume you meant to use newState in the 2nd line?

10

yes, exactly

11

In my case: “prosemirror-state”: “^1.4.3” “prosemirror-transform”: “^1.10.4”, “prosemirror-view”: “^1.40.0”

This is my approach:

const view = editorView
const { state, dispatch } = view
const { tr, schema, selection } = state;
const $pos = selection.$from
const pos = $pos.after()
const { paragraph, blockquote } = schema.nodes
const p = paragraph.create();
tr.insert(pos, p).setSelection(TextSelection.create(tr.doc, pos + 1));
const newState = state.apply(tr)
wrapIn(blockquote)(newState, (wrapTr) => {
    wrapTr.steps.forEach(step => tr.step(step))
    dispatch(tr);
})

This way I can perform other operations before calling the command, and submit everything in one dispatch within the command.

The 2 keypoint is:

const newState = state.apply(tr)

and

wrapTr.steps.forEach(step => tr.step(step))
12

TipTap has a createChainableState that you might like to take a look at:

The logic isn’t all contained in that file but it’s a good starting point for investigating their approach.