Creating a new input rule does not seem to work

Hello,

Yesterday I got great help from Nikolay in creating a custom editor node, see https://www.telerik.com/forums/creating-a-custom-editor-node-with-html-inside. Now I would like to extend his solution so that when a user types (for example) `${name}`, it will be converted into my new node.

I looked at https://www.telerik.com/kendo-react-ui/components/editor/plugins/#toc-input-rules and tried to add this to the code solution from Nikolay. This is my StackBlitz so far: https://stackblitz.com/edit/react-y3dx71-uqujbr?file=app%2Fmain.jsx

On line 55, I added code for creating the new rule, and on line 78 I add the new rule to the editor plugins. But this does not seem to work, when I input something that I thought would match the rule, nothing happens.

What am I doing wrong here?

Also, I would like to add a condition to the rule: It should only be converted if the text matches one of the "code" props in the "shortcodes" array in InsertShortcodeTool.tsx. I tried looking at match property in the input rules documentation, but honestly I don't understand how it works.