Merge pull request #138 from mkslanc/error-hover-tooltip

Fix: Error hover tooltip
mkslanc · Sep 12, 2024 · f49ab1a · f49ab1a
2 parents 9f7bc45 + 2408338
commit f49ab1a
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ace-linters-root",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "build:ace-linters": "cd packages/ace-linters && npm run build",
     "build:ace-sql-linter": "cd packages/ace-sql-linter && npm run build",

diff --git a/packages/ace-linters/package.json b/packages/ace-linters/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ace-linters",
   "author": "Azat Alimov <mkslanc@gmail.com>",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "clean": "rimraf build",
     "prebuild": "node prebuild.js",

diff --git a/packages/ace-linters/src/ace/marker_group.ts b/packages/ace-linters/src/ace/marker_group.ts
@@ -29,6 +29,17 @@ export class MarkerGroup {
         });
     }
 
+    /**
+     * Finds all markers that contain the given position.
+     * @param {Position} pos - The position to search for.
+     * @returns {Ace.MarkerGroupItem[]} - An array of all markers that contain the given position.
+     */
+    getMarkersAtPosition(pos) {
+        return this.markers.filter(function (marker) {
+            return marker.range.contains(pos.row, pos.column);
+        });
+    }
+
     /**
      * Comparator for Array.sort function, which sorts marker definitions by their positions
      *

diff --git a/packages/ace-linters/src/language-provider.ts b/packages/ace-linters/src/language-provider.ts
@@ -326,44 +326,45 @@ export class LanguageProvider {
     }
 
     private $initHoverTooltip(editor) {
+        const Range = editor.getSelectionRange().constructor;
+
         this.$hoverTooltip.setDataProvider((e, editor) => {
-            let session = editor.session;
-            let docPos = e.getDocumentPosition();
+            const session = editor.session;
+            const docPos = e.getDocumentPosition();
 
             this.doHover(session, docPos, (hover) => {
-                if (!hover)
-                    return;
-                var errorMarker = this.$getSessionLanguageProvider(session).state?.diagnosticMarkers?.getMarkerAtPosition(docPos);
-
-                if (!errorMarker && !hover?.content) return;
+                const errorMarkers = this.$getSessionLanguageProvider(session).state?.diagnosticMarkers?.getMarkersAtPosition(docPos) ?? [];
+                const hasHoverContent = hover?.content;
+                if (errorMarkers.length === 0 && !hasHoverContent) return;
 
-                var range = hover?.range || errorMarker?.range;
-                const Range = editor.getSelectionRange().constructor;
+                var range = hover?.range ?? errorMarkers[0]?.range;
                 range = range ? Range.fromPoints(range.start, range.end) : session.getWordRange(docPos.row, docPos.column);
-                var hoverNode = hover && document.createElement("div");
-                if (hoverNode) {
-                    // todo render markdown using ace markdown mode
-                    hoverNode.innerHTML = this.getTooltipText(hover);
-                }
-
-                var domNode = document.createElement('div');
+                const hoverNode = hasHoverContent ? this.createHoverNode(hover) : null;
+                const errorNode = errorMarkers.length > 0 ? this.createErrorNode(errorMarkers) : null;
 
-                if (errorMarker) {
-                    var errorDiv = document.createElement('div');
-                    var errorText = document.createTextNode(errorMarker.tooltipText.trim());
-                    errorDiv.appendChild(errorText);
-                    domNode.appendChild(errorDiv);
-                }
+                const domNode = document.createElement('div');
+                if (errorNode) domNode.appendChild(errorNode);
+                if (hoverNode) domNode.appendChild(hoverNode);
 
-                if (hoverNode) {
-                    domNode.appendChild(hoverNode);
-                }
                 this.$hoverTooltip.showForRange(editor, range, domNode, e);
             });
         });
         this.$hoverTooltip.addToEditor(editor);
     }
 
+
+    private createHoverNode(hover) {
+        const hoverNode = document.createElement("div");
+        hoverNode.innerHTML = this.getTooltipText(hover);
+        return hoverNode;
+    }
+
+    private createErrorNode(errorMarkers) {
+        const errorDiv = document.createElement('div');
+        errorDiv.textContent = errorMarkers.map(el => el.tooltipText.trim()).join("\n");
+        return errorDiv;
+    }
+
     private setStyles(editor) {
         if (!this.stylesEmbedded) {
             setStyles(editor);

diff --git a/packages/ace-linters/types/ace/marker_group.d.ts b/packages/ace-linters/types/ace/marker_group.d.ts
@@ -9,6 +9,12 @@ export declare class MarkerGroup {
      * @returns Ace.MarkerGroupItem
      */
     getMarkerAtPosition(pos: any): any;
+    /**
+     * Finds all markers that contain the given position.
+     * @param {Position} pos - The position to search for.
+     * @returns {Ace.MarkerGroupItem[]} - An array of all markers that contain the given position.
+     */
+    getMarkersAtPosition(pos: any): any[];
     /**
      * Comparator for Array.sort function, which sorts marker definitions by their positions
      *

diff --git a/packages/ace-linters/types/language-provider.d.ts b/packages/ace-linters/types/language-provider.d.ts
@@ -67,6 +67,8 @@ export declare class LanguageProvider {
     $registerEditor(editor: Ace.Editor): void;
     private $provideCodeActions;
     private $initHoverTooltip;
+    private createHoverNode;
+    private createErrorNode;
     private setStyles;
     setGlobalOptions<T extends keyof ServiceOptionsMap>(serviceName: T & string, options: ServiceOptionsMap[T], merge?: boolean): void;
     /**