diff --git a/ace-internal.d.ts b/ace-internal.d.ts index 6ab24a9a3c..828a45cc8d 100644 --- a/ace-internal.d.ts +++ b/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; diff --git a/ace.d.ts b/ace.d.ts index 50b01cc56d..0c370fee98 100644 --- a/ace.d.ts +++ b/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 { diff --git a/demo/test_ace_builds/index.ts b/demo/test_ace_builds/index.ts index b23b1f110c..1fa7f5cadb 100644 --- a/demo/test_ace_builds/index.ts +++ b/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(); \ No newline at end of file diff --git a/demo/test_ace_builds/package.json b/demo/test_ace_builds/package.json index 7c637625b1..a6af1786a6 100644 --- a/demo/test_ace_builds/package.json +++ b/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" } } diff --git a/src/ext/language_tools.js b/src/ext/language_tools.js index b34a8a6680..5245764ef7 100644 --- a/src/ext/language_tools.js +++ b/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; \ No newline at end of file diff --git a/types/ace-ext.d.ts b/types/ace-ext.d.ts index 05e71c852e..70f2362f33 100644 --- a/types/ace-ext.d.ts +++ b/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" { /** diff --git a/types/ace-modules.d.ts b/types/ace-modules.d.ts index c617c70e41..6212102195 100644 --- a/types/ace-modules.d.ts +++ b/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);