From aea2395e3f08642c5a52d86944fe064c72048b49 Mon Sep 17 00:00:00 2001
From: Marijn Haverbeke <marijn@haverbeke.berlin>
Date: Mon, 23 Sep 2024 16:01:55 +0200
Subject: [PATCH] Fix bad display of wrapped whitespace in highlightWhitespace

FIX: Fix an issue where the dots past the wrapping point were displayed incorrectly
when using `highlightWhitespace` with a wrapped sequence of spaces.

Closes https://github.com/codemirror/dev/issues/1444
---
 src/highlight-space.ts | 22 +++++-----------------
 src/theme.ts           |  2 +-
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/highlight-space.ts b/src/highlight-space.ts
index 252c267..d56d4ff 100644
--- a/src/highlight-space.ts
+++ b/src/highlight-space.ts
@@ -3,21 +3,6 @@ import {ViewPlugin} from "./extension"
 import {MatchDecorator} from "./matchdecorator"
 import {Decoration} from "./decoration"
 
-const WhitespaceDeco = new Map<string, Decoration>()
-
-function getWhitespaceDeco(space: string): Decoration {
-  let deco = WhitespaceDeco.get(space)
-  if (!deco) WhitespaceDeco.set(space, deco = Decoration.mark({
-    attributes: space === "\t" ? {
-      class: "cm-highlightTab",
-    } : {
-      class: "cm-highlightSpace",
-      "data-display": space.replace(/ /g, "·")
-    }
-  }))
-  return deco
-}
-
 function matcher(decorator: MatchDecorator): Extension {
   return ViewPlugin.define(view => ({
     decorations: decorator.createDeco(view),
@@ -29,9 +14,12 @@ function matcher(decorator: MatchDecorator): Extension {
   })
 }
 
+const tabDeco = Decoration.mark({class: "cm-highlightTab"})
+const spaceDeco = Decoration.mark({class: "cm-highlightSpace"})
+
 const whitespaceHighlighter = matcher(new MatchDecorator({
-  regexp: /\t| +/g,
-  decoration: match => getWhitespaceDeco(match[0]),
+  regexp: /\t| /g,
+  decoration: match => match[0] == "\t" ? tabDeco : spaceDeco,
   boundary: /\S/,
 }))
 
diff --git a/src/theme.ts b/src/theme.ts
index 44ba17a..613cfc6 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -249,7 +249,7 @@ export const baseTheme = buildTheme("." + baseThemeID, {
   },
 
   ".cm-highlightSpace:before": {
-    content: "attr(data-display)",
+    content: '"·"',
     position: "absolute",
     pointerEvents: "none",
     color: "#888"