Replace the content after implementing bullet list shortcut


I have to create a shortcut after which the bullet list will be created. The shortcut is * + Space (like in Slack). The problem is with the remained content which I need to replace. For now, when I press * + Space, I get the bullet list icon, and after it this content: "* ". I wrote this code to replace "* ", but it leaves the empty space at the beginning which I can’t get rid of.

What I get before executing the code below:

  • “* (and space)”

After executing code:

  • (one space here)

// Above is the function that creates bullet list and handle * + Space const { from, to } = state.selection;

    .delete(from + 1, to + 2)
      new TextSelection(
          customTransaction.selection.$cursor.pos - 1


Is there a method to move the cursor before space or remove it (replaceWith, replaceSelectionWith, deleteSelection I’ve already tried)?


Try the wrappingInputRule? Seems to fit your use case.

wrappingInputRule(/^([-+*])\s$/, bulletListType)

thanks a lot for the idea!
seems that it is exactly what I needed ) but could you please help me to implement this? What I doing now:

  • handle Space press
  • create nodeType
  • pass it to wrappingInputRule

Nothing happens on this function. Here is the code:

const spaceKeymap = state => {
  const listNodeType = state.schema.nodes.bullet_list;
  wrappingInputRule(/^([*]\s)/, listNodeType);

spaceKeymap is called when a user presses Space. What I am doing wrong?

Fixed it! We need to add inputRules when we get plugins and initialise state) thanks you a lot for helping))