# Trigger InputRule on enter?

**URL:** <https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118>\
**Category:** Uncategorized\
**Created:** [December 23, 2017, 10:33pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118 "2017-12-23T22:33:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wes-r](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/wes-r/32/77_2.png) [@wes-r](https://discuss.prosemirror.net/u/wes-r)\
**Post date:** [December 23, 2017, 10:33pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/1 "2017-12-23T22:33:19Z")

</div>

I’d like to trigger my markdown code block shortcut on whitespace OR enter:

````
```js(space|enter)

````

InputRules were definitely not designed for ENTER, thoughts on extending it to make it work? Perhaps there’s another way for me to go about triggering this on enter?

I could also see people wanting to trigger this via a multiline rule that awaits the bottom ```:

````
```js
function() { return true;}
```
````

---

<div class="post-metadata">

**Author:** ![bradleyayers](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bradleyayers/32/350_2.png) [@bradleyayers](https://discuss.prosemirror.net/u/bradleyayers)\
**Post date:** [January 28, 2018, 10:19pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/2 "2018-01-28T22:19:52Z")

</div>

Did you ever find a solution to this? I’m facing the same problem where I want to allow URLs to be linkified when they occur at the end of a paragraph.

---

<div class="post-metadata">

**Author:** ![ncphillips](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/ncphillips/32/387_2.png) [@ncphillips](https://discuss.prosemirror.net/u/ncphillips)\
**Post date:** [April 12, 2018, 6:15pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/3 "2018-04-12T18:15:34Z")

</div>

I am also looking to do exactly this code-block example.

I might go with `/^```([a-zA-Z]*)? $/`, but the SPACE feels kinda weird compared to ENTER

---

<div class="post-metadata">

**Author:** ![5id](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/5id/32/566_2.png) [@5id](https://discuss.prosemirror.net/u/5id)\
**Post date:** [April 12, 2018, 10:17pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/4 "2018-04-12T22:17:16Z")

</div>

You can do this, but you’ll need to handle the ‘Enter’ keypress yourself. i.e. inside an ‘Enter’ keymap handler you’ll need to do something like

````auto
if (!state.selection.$cursor) {
  return false;
}
const { nodeBefore } = state.selection.$from;
if (!nodeBefore || !nodeBefore.isText) {
  return false;
}
const regex = /^```([a-zA-Z]*)?$/;
const matches = nodeBefore.text.match(regex);
if (matches) {
  const [, language] = matches;
  // create the node with the language, etc. & set the selection inside it
  // you may also want to assert a depth in the document, etc. if you have blockquotes, etc as otherwise this would get triggered in there too
  return true;
}
return false;

````

The reason why this doesn’t work is because the inputrules plugin[only looks at the text between the parent of the node you’re typing in and your selection head](https://github.com/ProseMirror/prosemirror-inputrules/blob/master/src/inputrules.js#L68) - which means these input rules can never span across paragraphs.

---

<div class="post-metadata">

**Author:** ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)\
**Post date:** [October 12, 2020, 8:23am UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/5 "2020-10-12T08:23:16Z")

</div>

For posterity, an easy way to implement this is to add a `handleKeyDown` to the `inputRules` function of `prosemirror-inputrules`. Original source code [here](https://github.com/ProseMirror/prosemirror-inputrules/blob/master/src/inputrules.js#L52-L80).

```auto
export function inputRules({rules}) {
  let plugin = new Plugin({
    state: {
      init() { return null },
      apply(tr, prev) {
        let stored = tr.getMeta(this)
        if (stored) return stored
        return tr.selectionSet || tr.docChanged ? null : prev
      }
    },

    props: {
      handleTextInput(view, from, to, text) {
        return run(view, from, to, text, rules, plugin)
      },
      handleDOMEvents: {
        compositionend: (view) => {
          setTimeout(() => {
            let {$cursor} = view.state.selection
            if ($cursor) run(view, $cursor.pos, $cursor.pos, "", rules, plugin)
          })
        }
      },
      handleKeyDown(view, event) {
        if (event.key !== "Enter") return false;
        let {$cursor} = view.state.selection
        if ($cursor) return run(view, $cursor.pos, $cursor.pos, "\n", rules, plugin)
        return false;
      }
    },

    isInputRules: true
  })
  return plugin
}

```

Within a specific inputrule, you would then want to add the `\n` character at the end. For example for codeblocks,

````auto
textblockTypeInputRule(/^```([^\s]*)[\s\n]$/, nodeType, match => ({...match[1] && {lang: match[1]}}))

````

Edit: gif of working example

 ![enterinputrule](https://discuss.prosemirror.net/uploads/secondsite/original/2X/5/5a519381aa3a85ed5704adb121892d7eb9560101.gif)

---

<div class="post-metadata">

**Author:** ![percy507](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/percy507/32/2357_2.png) [@percy507](https://discuss.prosemirror.net/u/percy507)\
**Post date:** [December 16, 2021, 3:12pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/6 "2021-12-16T15:12:41Z")

</div>

> [@bhl](#):
>
> For posterity, an easy way to implement this is to add a `handleKeyDown` to the `inputRules` function of `prosemirror-inputrules`

Thanks for the solution 👍.

Well, let me add a note.

> **Add the `inputRule` plugin in front of the `keymap` plugin** , because keymap may register `Enter` key handler which will intercept the `Enter` keydown event.

---

<div class="post-metadata">

**Author:** ![davidb](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/davidb/32/4237_2.png) [@davidb](https://discuss.prosemirror.net/u/davidb)\
**Post date:** [September 11, 2024, 12:47pm UTC](https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118/7 "2024-09-11T12:47:19Z")

</div>

I was able to condense @bhl 's solution so that it can be added to what `inputRules` returns, that way you don’t have to duplicate the library code:

```auto
  const rplugin = inputRules({ rules: [/* ... your rules */] });

  const hkd = (view, event) => {
    if (event.key !== 'Enter') return false;
    const { $cursor } = view.state.selection;
    if ($cursor) return rplugin.props.handleTextInput(view, $cursor.pos, $cursor.pos, '\n');
    return false;
  };
  rplugin.props.handleKeyDown = hkd; // Add the handleKeyDown function

```

And yes, I also noticed this:

> [@](#):
>
> Add the inputRule plugin in front of the keymap plugin

Thanks everyone for the help! It works perfectly!