Highlight range when showing hover details (#2747)

assets/js/hooks/cell_editor/live_editor.js

@@ -1,6 +1,5 @@
 import {
   EditorView,
-  hoverTooltip,
   keymap,
   highlightSpecialChars,
   drawSelection,
@@ -57,6 +56,7 @@ import {
 import { ancestorNode, closestNode } from "./live_editor/codemirror/tree_utils";
 import { selectingClass } from "./live_editor/codemirror/selecting_class";
 import { globalPubsub } from "../../lib/pubsub";
+import { hoverDetails } from "./live_editor/codemirror/hover_details";
 
 /**
  * Mounts cell source editor with real-time collaboration mechanism.
@@ -352,7 +352,7 @@ export default class LiveEditor {
         this.intellisense
           ? [
               autocompletion({ override: [this.completionSource.bind(this)] }),
-              hoverTooltip(this.docsHoverTooltipSource.bind(this)),
+              hoverDetails(this.docsHoverTooltipSource.bind(this)),
               signature(this.signatureSource.bind(this), {
                 activateOnTyping: settings.editor_auto_signature,
               }),

assets/js/hooks/cell_editor/live_editor/codemirror/hover_details.js

@@ -0,0 +1,26 @@
+import { Decoration, EditorView, hoverTooltip } from "@codemirror/view";
+import { RangeSet } from "@codemirror/state";
+
+/**
+ * Returns an extension that enables hover details tooltip.
+ */
+export function hoverDetails(hoverTooltipSource) {
+  const tooltipExtension = hoverTooltip(hoverTooltipSource);
+
+  const decorationsExtension = EditorView.decorations.from(
+    tooltipExtension.active,
+    (tooltips) => {
+      const backgroundDecoration = Decoration.mark({
+        class: "cm-hoverDocsSelection",
+      });
+
+      const decorationRanges = tooltips.map((tooltip) =>
+        backgroundDecoration.range(tooltip.pos, tooltip.end),
+      );
+
+      return RangeSet.of(decorationRanges, true);
+    },
+  );
+
+  return [tooltipExtension, decorationsExtension];
+}

assets/js/hooks/cell_editor/live_editor/codemirror/theme.js

@@ -289,6 +289,10 @@ function buildEditorTheme(colors, { dark }) {
         },
       },
 
+      ".cm-hoverDocsSelection": {
+        backgroundColor: colors.selectionMatchBackground,
+      },
+
       // Signature
 
       ".cm-tooltip.cm-signatureHint": {

assets/package-lock.json

@@ -1970,9 +1970,9 @@
       "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
     },
     "node_modules/@codemirror/view": {
-      "version": "6.27.0",
+      "version": "6.32.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.32.0.tgz",
-      "integrity": "sha512-8kqX1sHbVW1lVzWwrjAbh4dR7eKhV8eIQ952JKaBXOoXE04WncoqCy4DMU701LSrPZ3N2Q4zsTawz7GQ+2mrUw==",
+      "integrity": "sha512-AgVNvED2QTsZp5e3syoHLsrWtwJFYWdx1Vr/m3f4h1ATQz0ax60CfXF3Htdmk69k2MlYZw8gXesnQdHtzyVmAw==",
       "dependencies": {
         "@codemirror/state": "^6.4.0",
         "style-mod": "^4.1.0",
@@ -16265,9 +16265,9 @@
       "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
     },
     "@codemirror/view": {
-      "version": "6.27.0",
+      "version": "6.32.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.32.0.tgz",
-      "integrity": "sha512-8kqX1sHbVW1lVzWwrjAbh4dR7eKhV8eIQ952JKaBXOoXE04WncoqCy4DMU701LSrPZ3N2Q4zsTawz7GQ+2mrUw==",
+      "integrity": "sha512-AgVNvED2QTsZp5e3syoHLsrWtwJFYWdx1Vr/m3f4h1ATQz0ax60CfXF3Htdmk69k2MlYZw8gXesnQdHtzyVmAw==",
       "requires": {
         "@codemirror/state": "^6.4.0",
         "style-mod": "^4.1.0",