JSFiddle - React, Tailwind, and code Playground
HTML
<textarea>Lorem Ipsum [text] dolar, rock n'[more] roller.</textarea>
JavaScript
$('textarea').on('keydown', function(e) {
// Is Ctrl-left and Ctrl+right pressed?
if (e.ctrlKey && (e.which === 37 || e.which === 39)) {
var pos = this.selectionStart;
var val = this.value;
var openBracketOnLeft = val.substr(0, pos).lastIndexOf('[');
var closeBracketOnLeft = val.substr(0, pos).lastIndexOf(']');
var closeBracketOnRight = val.substr(pos).indexOf(']');
// Is start of selection within two brackets?
if (openBracketOnLeft > closeBracketOnLeft && closeBracketOnRight !== -1) {
closeBracketOnRight += pos + 1;
var tagText = val.substr(openBracketOnLeft, closeBracketOnRight - openBracketOnLeft);
// Is Ctrl-left pressed, and is tag not yet on far left?
var level = 0;
do {
if (e.which === 37 && openBracketOnLeft) {
ch = val.substr(openBracketOnLeft - 1, 1);
val = val.substr(0, openBracketOnLeft - 1)
+ tagText
+ ch
+ val.substr(closeBracketOnRight);
openBracketOnLeft--;
closeBracketOnRight--;
// Is Ctrl-right pressed, and is tag not yet on far right?
} else if (e.which === 39 && closeBracketOnRight < val.length) {
ch = val.substr(closeBracketOnRight, 1);
val = val.substr(0, openBracketOnLeft)
+ ch
+ tagText
+ val.substr(closeBracketOnRight + 1);
openBracketOnLeft++;
closeBracketOnRight++;
} else {
break;
}
level += ch == '[' ? 1 : ch == ']' ? -1 : 0;
} while (level);
...