Use undate library to handle modifier keys

client/js/keybinds.js

@@ -2,7 +2,8 @@
 
 const $ = require("jquery");
 const Mousetrap = require("mousetrap");
-const input = $("#input");
+const wrapCursor = require("undate").wrapCursor;
+const input = $("#input").get(0);
 const sidebar = $("#sidebar");
 const windows = $("#windows");
 const contextMenuContainer = $("#context-menu-container");
@@ -78,21 +79,8 @@ for (const hotkey in colorsHotkeys) {
 	Mousetrap.bind("mod+" + hotkey, function(e) {
 		e.preventDefault();
 
-		const cursorPosStart = input.prop("selectionStart");
+		const modifier = colorsHotkeys[e.key];
-		const cursorPosEnd = input.prop("selectionEnd");
-		const value = input.val();
-		let newValue = value.substring(0, cursorPosStart) + colorsHotkeys[e.key];
 
-		if (cursorPosStart === cursorPosEnd) {
+		wrapCursor(input, modifier, input.selectionStart === input.selectionEnd ? "" : modifier);
-			// If no text is selected, insert at cursor
-			newValue += value.substring(cursorPosEnd, value.length);
-		} else {
-			// If text is selected, insert formatting character at start and the end
-			newValue += value.substring(cursorPosStart, cursorPosEnd) + colorsHotkeys[e.key] + value.substring(cursorPosEnd, value.length);
-		}
-
-		input
-			.val(newValue)
-			.get(0).setSelectionRange(cursorPosStart + 1, cursorPosEnd + 1);
 	});
 }

package.json

@@ -92,6 +92,7 @@
     "stylelint": "9.1.1",
     "stylelint-config-standard": "18.2.0",
     "textcomplete": "0.16.1",
+    "undate": "0.2.4",
     "webpack": "3.11.0",
     "webpack-dev-server": "2.11.1"
   }

yarn.lock

@@ -6810,7 +6810,7 @@ ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
 
-undate@^0.2.3:
+undate@0.2.4, undate@^0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/undate/-/undate-0.2.4.tgz#ccb2a8cf38edc035d1006fcb2909c4c6024a8400"