Estoy creando el editor de texto y quiero implementar una marca de GitHub como sintaxis ([text|link]) y convertir esto a <a heref="link">text</a> .

Estoy usando el siguiente código:

 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);

Entonces, implementé esto al hacer clic en el botón, pero necesito lograrlo en el evento keyDown , por ejemplo, si el usuario ingresa, quiero obtener la última línea, analizar el enlace y agregar la etiqueta de anclaje.

Básicamente quiero implementar algo como este gif:

¿Pueden ayudarme a lograr esta funcionalidad tan pronto como el usuario escriba [text|link] y presione Intro ?