Extending Example Prosemirror with custom keymap

1

Hi,

I’m trying to keymap Tab and Shift-Tab to indent / dedent by extending the “prosemirror-example-setup”.

I feel like there’s something I’m clearly not grokking around what command is re: liftListItem but I can’t for the life of me get it to work? I’ve verified that this binding works, but I think I need to pass some stuff to liftListItem?

Any help greatly appreciated. Been stuck on this for a few hours now so figured I should see if anyone has any pointer.

2

That’s not a great idea—those already move focus, and by rebinding them you’re breaking keyboard accessibility.

The docs give the type of this function. You pass it the list item node type from your schema, and it returns a command function that you can put in a keymap.

3

That’s what I thought I was doing :confused:

editorState.config.plugins = editorState.plugins.concat([
  keymap({
Tab: liftListItem(schema.spec.nodes["list_item"], { name: "Dedent" }),
  }),
]);

Yet it doesn’t work. I can confirm that the “Tab” key binding works, but the indenting does not.

4

liftListItem moves an item to a parent list, which would correspond to dedenting, so I think your expectation might be wrong.

5

Yeah, you’re right. But that binding that I did still doesn’t work for dedenting, so for some reason it’s not working properly. Which is the core problem.

6

I figured it out! Thanks @marijn :slight_smile:

For anyone who finds this from google, my solve was to get the node directly from the editorState:

editorState.config.plugins = editorState.plugins.concat([
  keymap({
"Shift-Tab": liftListItem(editorState.schema.nodes.list_item),
  }),
   keymap({
Tab: sinkListItem(editorState.schema.nodes.list_item),
  }),
]);
1 Like
7

I get that, but part of this is me just trying to learn too. Any chance you could take a look and see what I’m doing wrong?

We have a pretty extensive set of keybindings for the app, and a way to change focus and submit the text etc just using your keyboard.