From 06cda0b2c15457c9ff80dde20f2bcf460fa3ab28 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 23 Nov 2017 05:59:46 +0300
Subject: [PATCH] fix colorpicker swatch glitches by monkeypatching
 match-highlighter

---
 edit/colorpicker-helper.js                    | 48 +++++++++++++++++++
 vendor-overwrites/colorpicker/colorpicker.css | 11 +----
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/edit/colorpicker-helper.js b/edit/colorpicker-helper.js
index c65e6a31..e38433b1 100644
--- a/edit/colorpicker-helper.js
+++ b/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;
+    }
+  }
 };
diff --git a/vendor-overwrites/colorpicker/colorpicker.css b/vendor-overwrites/colorpicker/colorpicker.css
index 21dd4084..4dc63ead 100644
--- a/vendor-overwrites/colorpicker/colorpicker.css
+++ b/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;