fix: missing type aliases and MarkerGroup in ace-builds

Author: mkslanc

ace-internal.d.ts

@@ -29,6 +29,9 @@ export namespace Ace {
     type Config = typeof import("./src/config");
     type GutterTooltip = import( "./src/mouse/default_gutter_handler").GutterTooltip;
     type GutterKeyboardEvent = import( "./src/keyboard/gutter_handler").GutterKeyboardEvent;
+    type HoverTooltip = import("ace-code/src/tooltip").HoverTooltip;
+    type Tooltip = import("ace-code/src/tooltip").Tooltip;
+    type PopupManager = import("ace-code/src/tooltip").PopupManager;
 
     type AfterLoadCallback = (err: Error | null, module: unknown) => void;
     type LoaderFunction = (moduleName: string, afterLoad: AfterLoadCallback) => void;

ace.d.ts

@@ -38,6 +38,9 @@ declare module "ace-code" {
         type Config = typeof import("ace-code/src/config");
         type GutterTooltip = import("ace-code/src/mouse/default_gutter_handler").GutterTooltip;
         type GutterKeyboardEvent = import("ace-code/src/keyboard/gutter_handler").GutterKeyboardEvent;
+        type HoverTooltip = import("ace-code/src/tooltip").HoverTooltip;
+        type Tooltip = import("ace-code/src/tooltip").Tooltip;
+        type PopupManager = import("ace-code/src/tooltip").PopupManager;
         type AfterLoadCallback = (err: Error | null, module: unknown) => void;
         type LoaderFunction = (moduleName: string, afterLoad: AfterLoadCallback) => void;
         export interface ConfigOptions {

demo/test_ace_builds/index.ts

@@ -2,10 +2,16 @@ import * as ace from "ace-builds";
 import {Range, Ace} from "ace-builds";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "../../src/test/mockdom.js";
+
 var HoverTooltip = ace.require("ace/tooltip").HoverTooltip;
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-monokai";
 
+const MarkerGroup = ace.require("ace/marker_group").MarkerGroup;
+const MouseEvent = ace.require("ace/mouse/mouse_event").MouseEvent;
+var Tooltip = ace.require("ace/tooltip").Tooltip;
+var popupManager: Ace.PopupManager = ace.require("ace/tooltip").popupManager;
+
 const editor = ace.edit(null); // should not be an error
 editor.setTheme("ace/theme/monokai");
 editor.session.setMode("ace/mode/javascript");
@@ -19,7 +25,20 @@ function configure(config: Ace.Config) {
 
 configure(ace.config) // should not be a error
 
-const hover = new HoverTooltip();
+const markerGroup: Ace.MarkerGroup = new MarkerGroup(editor.session);
+const markers: Ace.MarkerGroupItem[] = [
+    {
+        range: new Range(0, 0, 10, 10),
+        className: "test-class"
+    }
+]
+markerGroup.setMarkers(markers);
+markerGroup.markers.every(marker => {
+    console.log(marker.range);
+    return true;
+});
+
+const hover: Ace.HoverTooltip = new HoverTooltip();
 hover.setDataProvider((e: any, editor: Ace.Editor) => {
     const domNode = document.createElement("div");
     hover.showForRange(editor, new Range(1, 3, 3, 1), domNode, e);
@@ -34,4 +53,14 @@ editor.commands.on('exec', ({editor, command}) => {
     console.log(editor.getValue(), command.name);
 });
 
+editor.container.addEventListener('click', (e: MouseEvent) => {
+    var mouseEvent: Ace.MouseEvent = new MouseEvent(e, editor);
+    mouseEvent.x = e.x * 2;
+});
+
+var tooltip: Ace.Tooltip = new Tooltip(editor.container);
+tooltip.show('hello');
+
+popupManager.addPopup(tooltip);
+
 editor.destroy && editor.destroy();

demo/test_ace_builds/package.json

@@ -11,6 +11,6 @@
     "ace-builds": "file:../../ace-builds-latest.tgz"
   },
   "devDependencies": {
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   }
 }

src/ext/language_tools.js

@@ -6,6 +6,8 @@ var config = require("../config");
 var lang = require("../lib/lang");
 var util = require("../autocomplete/util");
 
+var MarkerGroup = require("../marker_group").MarkerGroup;
+
 var textCompleter = require("../autocomplete/text_completer");
 /**@type {import("../../ace-internal").Ace.Completer}*/
 var keyWordCompleter = {
@@ -230,3 +232,5 @@ require("../config").defineOptions(Editor.prototype, "editor", {
         value: false
     }
 });
+
+exports.MarkerGroup = MarkerGroup;

types/ace-ext.d.ts

@@ -85,7 +85,8 @@ declare module "ace-code/src/ext/language_tools" {
     import textCompleter = require("ace-code/src/autocomplete/text_completer");
     export var keyWordCompleter: import("ace-code").Ace.Completer;
     export var snippetCompleter: import("ace-code").Ace.Completer;
-    export { textCompleter };
+    import { MarkerGroup } from "ace-code/src/marker_group";
+    export { textCompleter, MarkerGroup };
 }
 declare module "ace-code/src/ext/inline_autocomplete" {
     /**

types/ace-modules.d.ts

@@ -3313,6 +3313,49 @@ declare module "ace-code/src/autocomplete" {
         completions: Ace.FilteredList;
     }
 }
+declare module "ace-code/src/marker_group" {
+    export type EditSession = import("ace-code/src/edit_session").EditSession;
+    export type MarkerGroupItem = {
+        range: import("ace-code/src/range").Range;
+        className: string;
+    };
+    export type LayerConfig = import("ace-code").Ace.LayerConfig;
+    export type Marker = import("ace-code/src/layer/marker").Marker;
+    export class MarkerGroup {
+        /**
+         * @param {{markerType: "fullLine" | "line" | undefined}} [options] Options controlling the behvaiour of the marker.
+         * User `markerType` to control how the markers which are part of this group will be rendered:
+         * - `undefined`: uses `text` type markers where only text characters within the range will be highlighted.
+         * - `fullLine`: will fully highlight all the rows within the range, including the characters before and after the range on the respective rows.
+         * - `line`: will fully highlight the lines within the range but will only cover the characters between the start and end of the range.
+         */
+        constructor(session: EditSession, options?: {
+            markerType: "fullLine" | "line" | undefined;
+        });
+        markerType: "line" | "fullLine";
+        markers: import("ace-code").Ace.MarkerGroupItem[];
+        session: EditSession;
+        /**
+         * Finds the first marker containing pos
+         */
+        getMarkerAtPosition(pos: import("ace-code").Ace.Point): import("ace-code").Ace.MarkerGroupItem | undefined;
+        /**
+         * Comparator for Array.sort function, which sorts marker definitions by their positions
+         *
+         * @param {MarkerGroupItem} a first marker.
+         * @param {MarkerGroupItem} b second marker.
+         * @returns {number} negative number if a should be before b, positive number if b should be before a, 0 otherwise.
+         */
+        markersComparator(a: MarkerGroupItem, b: MarkerGroupItem): number;
+        /**
+         * Sets marker definitions to be rendered. Limits the number of markers at MAX_MARKERS.
+         * @param {MarkerGroupItem[]} markers an array of marker definitions.
+         */
+        setMarkers(markers: MarkerGroupItem[]): void;
+        update(html: any, markerLayer: Marker, session: EditSession, config: LayerConfig): void;
+        MAX_MARKERS: number;
+    }
+}
 declare module "ace-code/src/autocomplete/text_completer" {
     export function getCompletions(editor: any, session: any, pos: any, prefix: any, callback: any): void;
 }
@@ -3417,49 +3460,6 @@ declare module "ace-code/src/occur" {
     import { Search } from "ace-code/src/search";
     import { EditSession } from "ace-code/src/edit_session";
 }
-declare module "ace-code/src/marker_group" {
-    export type EditSession = import("ace-code/src/edit_session").EditSession;
-    export type MarkerGroupItem = {
-        range: import("ace-code/src/range").Range;
-        className: string;
-    };
-    export type LayerConfig = import("ace-code").Ace.LayerConfig;
-    export type Marker = import("ace-code/src/layer/marker").Marker;
-    export class MarkerGroup {
-        /**
-         * @param {{markerType: "fullLine" | "line" | undefined}} [options] Options controlling the behvaiour of the marker.
-         * User `markerType` to control how the markers which are part of this group will be rendered:
-         * - `undefined`: uses `text` type markers where only text characters within the range will be highlighted.
-         * - `fullLine`: will fully highlight all the rows within the range, including the characters before and after the range on the respective rows.
-         * - `line`: will fully highlight the lines within the range but will only cover the characters between the start and end of the range.
-         */
-        constructor(session: EditSession, options?: {
-            markerType: "fullLine" | "line" | undefined;
-        });
-        markerType: "line" | "fullLine";
-        markers: import("ace-code").Ace.MarkerGroupItem[];
-        session: EditSession;
-        /**
-         * Finds the first marker containing pos
-         */
-        getMarkerAtPosition(pos: import("ace-code").Ace.Point): import("ace-code").Ace.MarkerGroupItem | undefined;
-        /**
-         * Comparator for Array.sort function, which sorts marker definitions by their positions
-         *
-         * @param {MarkerGroupItem} a first marker.
-         * @param {MarkerGroupItem} b second marker.
-         * @returns {number} negative number if a should be before b, positive number if b should be before a, 0 otherwise.
-         */
-        markersComparator(a: MarkerGroupItem, b: MarkerGroupItem): number;
-        /**
-         * Sets marker definitions to be rendered. Limits the number of markers at MAX_MARKERS.
-         * @param {MarkerGroupItem[]} markers an array of marker definitions.
-         */
-        setMarkers(markers: MarkerGroupItem[]): void;
-        update(html: any, markerLayer: Marker, session: EditSession, config: LayerConfig): void;
-        MAX_MARKERS: number;
-    }
-}
 declare module "ace-code/src/edit_session/fold" {
     export class Fold extends RangeList {
         constructor(range: Range, placeholder: any);