I am creating the text editor and I want to implement a GitHub mark like syntax ([text|link]) and convert this to <a heref="link">text</a>.

I am using the below code:

let range = timeline.contentWindow.getSelection().getRangeAt(0).toString();
      let info = null;
      info = range.match(/\[*(.*)\|\s*(.*)]/);
      let html =
        "<a  href=" +
        (info !== null ? info[2] : range) +
        ">" +
        (info !== null ? info[1] : range) +
        "</a>";
      innerDoc.execCommand('insertHTML', false, html);

So I have implemented this on button click but I need to achieve this in keyDown event for example if the user hit enters I want to get the last line and parse the link and add the anchor tag.

Basically I want to implement something like this gif:

Can you please help me to achieve this functionality as soon as the user types [text|link] and hits enter?