fix colorpicker swatch glitches by monkeypatching match-highlighter

edit/colorpicker-helper.js

@@ -2,6 +2,7 @@
 'use strict';
 
 window.initColorpicker = () => {
+  initOverlayHooks();
   onDOMready().then(() => {
     $('#colorpicker-settings').onclick = configureColorpicker;
   });
@@ -105,4 +106,51 @@ window.initColorpicker = () => {
     }
     input.focus();
   }
+
+  function initOverlayHooks() {
+    const COLORVIEW_DISABLED_SUFFIX = ' colorview-disabled';
+    const originalAddOverlay = CodeMirror.prototype.addOverlay;
+    CodeMirror.prototype.addOverlay = addOverlayHook;
+
+    function addOverlayHook(overlay) {
+      if (overlay === (this.state.matchHighlighter || {}).overlay) {
+        if (overlay.token !== tokenHook) {
+          overlay.stylusColorpickerHelper = {
+            token: overlay.token,
+          };
+          overlay.token = tokenHook;
+        }
+      }
+      originalAddOverlay.apply(this, arguments);
+    }
+
+    function tokenHook(stream) {
+      const style = this.stylusColorpickerHelper.token.call(this, stream);
+      if (style === 'matchhighlight') {
+        return tokenHookForHighlighter.call(this, stream, style);
+      } else {
+        return style;
+      }
+    }
+
+    function tokenHookForHighlighter(stream, style) {
+      const {start, pos, lineOracle: {baseTokens}} = stream;
+      if (!baseTokens) {
+        return style;
+      }
+      for (let prev = 0, i = 1; i < baseTokens.length; i += 2) {
+        const end = baseTokens[i];
+        if (prev < start && start < end) {
+          const base = baseTokens[i + 1];
+          if (base && base.includes('colorview')) {
+            return style + COLORVIEW_DISABLED_SUFFIX;
+          }
+        } else if (end > pos) {
+          break;
+        }
+        prev = end;
+      }
+      return style;
+    }
+  }
 };

vendor-overwrites/colorpicker/colorpicker.css

@@ -5,7 +5,7 @@
   white-space: nowrap;
 }
 
-.cm-colorview::before {
+.cm-colorview:not(.cm-colorview-disabled)::before {
   content: "";
   position: relative;
   display: inline-block;
@@ -17,15 +17,6 @@
   background-repeat: repeat;
 }
 
-/* overlay at the start splits our colorview: don't style the tail */
-.cm-colorview.cm-overlay + .cm-colorview:not([data-colorpicker])::before,
-/* overlay in the middle splits our colorview: don't style the middle */
-.cm-colorview + .cm-colorview.cm-overlay:not([data-colorpicker])::before,
-/* ...and the tail */
-.cm-colorview + .cm-colorview.cm-overlay:not([data-colorpicker]) + .cm-colorview:not([data-colorpicker])::before {
-  content: none;
-}
-
 .codemirror-colorview-background {
   position: absolute;
   left: 2px;