fix issue of hl feature

src/editor.js

@@ -55,7 +55,8 @@ function decoApply(model, text) {
     false,
     false,
     true,
-    "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
+    // "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
+    null,
     false
   );
   let decoration = decoGet();
@@ -89,7 +90,8 @@ function decoRemove(model, text) {
     false,
     false,
     true,
-    "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
+    // "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
+    null,
     false
   );
 
@@ -105,7 +107,6 @@ function decoRemove(model, text) {
 
 function highlightToggle() {
   console.log("highligh toggle");
-  let decoExpectedLength = 1;
   let model = editor.getModel();
   let range = editor.getSelection();
   let text = model.getValueInRange(range);
@@ -114,13 +115,22 @@ function highlightToggle() {
     text = word.word;
     range.startColumn = word.startColumn;
     range.endColumn = word.endColumn;
-    decoExpectedLength = 2;
   }
 
   if (text === "") return;
 
+  let applyDeco = 1;
   let decos = model.getDecorationsInRange(range);
-  if (decos.length === decoExpectedLength) {
+  for (let deco of decos) {
+    if (
+      deco.options.className !== null &&
+      deco.options.className.indexOf("hl-") !== -1
+    ) {
+      applyDeco = 0;
+      break;
+    }
+  }
+  if (1 === applyDeco) {
     decoApply(model, text);
   } else {
     decoRemove(model, text);
@@ -587,6 +597,8 @@ amdRequire(["vs/editor/editor.main"], function () {
   }
 
   editor.onMouseUp(() => {
+    return;
+
     let model = editor.getModel();
     let range = editor.getSelection();
     console.log("In: " + range);

src/index.css

@@ -273,37 +273,37 @@ input {
 
 .hl-red {
   background-color: #ff8a80 !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hl-orange {
   background-color: #ffd180 !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hl-yellow {
   background-color: #ffff8d !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hl-green {
   background-color: #b9f6ca !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hl-blue {
   background-color: #80d8ff !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hl-indigo {
   background-color: #8c9eff !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hl-purple {
   background-color: #ea80fc !important;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .hex-select {