monaco-editor-core
Version:
A browser based code editor
355 lines (354 loc) • 16.9 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { registerSingleton } from '../../../../platform/instantiation/common/extensions.js';
import { registerThemingParticipant } from '../../../../platform/theme/common/themeService.js';
import { editorHoverBorder } from '../../../../platform/theme/common/colorRegistry.js';
import { IHoverService } from '../../../../platform/hover/browser/hover.js';
import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
import { HoverWidget } from './hoverWidget.js';
import { Disposable, DisposableStore, toDisposable } from '../../../../base/common/lifecycle.js';
import { addDisposableListener, EventType, getActiveElement, isAncestorOfActiveElement, isAncestor, getWindow, isHTMLElement } from '../../../../base/browser/dom.js';
import { IKeybindingService } from '../../../../platform/keybinding/common/keybinding.js';
import { StandardKeyboardEvent } from '../../../../base/browser/keyboardEvent.js';
import { IAccessibilityService } from '../../../../platform/accessibility/common/accessibility.js';
import { ILayoutService } from '../../../../platform/layout/browser/layoutService.js';
import { mainWindow } from '../../../../base/browser/window.js';
import { ContextViewHandler } from '../../../../platform/contextview/browser/contextViewService.js';
import { ManagedHoverWidget } from './updatableHoverWidget.js';
import { TimeoutTimer } from '../../../../base/common/async.js';
let HoverService = class HoverService extends Disposable {
constructor(_instantiationService, contextMenuService, _keybindingService, _layoutService, _accessibilityService) {
super();
this._instantiationService = _instantiationService;
this._keybindingService = _keybindingService;
this._layoutService = _layoutService;
this._accessibilityService = _accessibilityService;
this._managedHovers = new Map();
contextMenuService.onDidShowContextMenu(() => this.hideHover());
this._contextViewHandler = this._register(new ContextViewHandler(this._layoutService));
}
showHover(options, focus, skipLastFocusedUpdate) {
if (getHoverOptionsIdentity(this._currentHoverOptions) === getHoverOptionsIdentity(options)) {
return undefined;
}
if (this._currentHover && this._currentHoverOptions?.persistence?.sticky) {
return undefined;
}
this._currentHoverOptions = options;
this._lastHoverOptions = options;
const trapFocus = options.trapFocus || this._accessibilityService.isScreenReaderOptimized();
const activeElement = getActiveElement();
// HACK, remove this check when #189076 is fixed
if (!skipLastFocusedUpdate) {
if (trapFocus && activeElement) {
if (!activeElement.classList.contains('monaco-hover')) {
this._lastFocusedElementBeforeOpen = activeElement;
}
}
else {
this._lastFocusedElementBeforeOpen = undefined;
}
}
const hoverDisposables = new DisposableStore();
const hover = this._instantiationService.createInstance(HoverWidget, options);
if (options.persistence?.sticky) {
hover.isLocked = true;
}
hover.onDispose(() => {
const hoverWasFocused = this._currentHover?.domNode && isAncestorOfActiveElement(this._currentHover.domNode);
if (hoverWasFocused) {
// Required to handle cases such as closing the hover with the escape key
this._lastFocusedElementBeforeOpen?.focus();
}
// Only clear the current options if it's the current hover, the current options help
// reduce flickering when the same hover is shown multiple times
if (this._currentHoverOptions === options) {
this._currentHoverOptions = undefined;
}
hoverDisposables.dispose();
}, undefined, hoverDisposables);
// Set the container explicitly to enable aux window support
if (!options.container) {
const targetElement = isHTMLElement(options.target) ? options.target : options.target.targetElements[0];
options.container = this._layoutService.getContainer(getWindow(targetElement));
}
this._contextViewHandler.showContextView(new HoverContextViewDelegate(hover, focus), options.container);
hover.onRequestLayout(() => this._contextViewHandler.layout(), undefined, hoverDisposables);
if (options.persistence?.sticky) {
hoverDisposables.add(addDisposableListener(getWindow(options.container).document, EventType.MOUSE_DOWN, e => {
if (!isAncestor(e.target, hover.domNode)) {
this.doHideHover();
}
}));
}
else {
if ('targetElements' in options.target) {
for (const element of options.target.targetElements) {
hoverDisposables.add(addDisposableListener(element, EventType.CLICK, () => this.hideHover()));
}
}
else {
hoverDisposables.add(addDisposableListener(options.target, EventType.CLICK, () => this.hideHover()));
}
const focusedElement = getActiveElement();
if (focusedElement) {
const focusedElementDocument = getWindow(focusedElement).document;
hoverDisposables.add(addDisposableListener(focusedElement, EventType.KEY_DOWN, e => this._keyDown(e, hover, !!options.persistence?.hideOnKeyDown)));
hoverDisposables.add(addDisposableListener(focusedElementDocument, EventType.KEY_DOWN, e => this._keyDown(e, hover, !!options.persistence?.hideOnKeyDown)));
hoverDisposables.add(addDisposableListener(focusedElement, EventType.KEY_UP, e => this._keyUp(e, hover)));
hoverDisposables.add(addDisposableListener(focusedElementDocument, EventType.KEY_UP, e => this._keyUp(e, hover)));
}
}
if ('IntersectionObserver' in mainWindow) {
const observer = new IntersectionObserver(e => this._intersectionChange(e, hover), { threshold: 0 });
const firstTargetElement = 'targetElements' in options.target ? options.target.targetElements[0] : options.target;
observer.observe(firstTargetElement);
hoverDisposables.add(toDisposable(() => observer.disconnect()));
}
this._currentHover = hover;
return hover;
}
hideHover() {
if (this._currentHover?.isLocked || !this._currentHoverOptions) {
return;
}
this.doHideHover();
}
doHideHover() {
this._currentHover = undefined;
this._currentHoverOptions = undefined;
this._contextViewHandler.hideContextView();
}
_intersectionChange(entries, hover) {
const entry = entries[entries.length - 1];
if (!entry.isIntersecting) {
hover.dispose();
}
}
showAndFocusLastHover() {
if (!this._lastHoverOptions) {
return;
}
this.showHover(this._lastHoverOptions, true, true);
}
_keyDown(e, hover, hideOnKeyDown) {
if (e.key === 'Alt') {
hover.isLocked = true;
return;
}
const event = new StandardKeyboardEvent(e);
const keybinding = this._keybindingService.resolveKeyboardEvent(event);
if (keybinding.getSingleModifierDispatchChords().some(value => !!value) || this._keybindingService.softDispatch(event, event.target).kind !== 0 /* ResultKind.NoMatchingKb */) {
return;
}
if (hideOnKeyDown && (!this._currentHoverOptions?.trapFocus || e.key !== 'Tab')) {
this.hideHover();
this._lastFocusedElementBeforeOpen?.focus();
}
}
_keyUp(e, hover) {
if (e.key === 'Alt') {
hover.isLocked = false;
// Hide if alt is released while the mouse is not over hover/target
if (!hover.isMouseIn) {
this.hideHover();
this._lastFocusedElementBeforeOpen?.focus();
}
}
}
// TODO: Investigate performance of this function. There seems to be a lot of content created
// and thrown away on start up
setupManagedHover(hoverDelegate, targetElement, content, options) {
targetElement.setAttribute('custom-hover', 'true');
if (targetElement.title !== '') {
console.warn('HTML element already has a title attribute, which will conflict with the custom hover. Please remove the title attribute.');
console.trace('Stack trace:', targetElement.title);
targetElement.title = '';
}
let hoverPreparation;
let hoverWidget;
const hideHover = (disposeWidget, disposePreparation) => {
const hadHover = hoverWidget !== undefined;
if (disposeWidget) {
hoverWidget?.dispose();
hoverWidget = undefined;
}
if (disposePreparation) {
hoverPreparation?.dispose();
hoverPreparation = undefined;
}
if (hadHover) {
hoverDelegate.onDidHideHover?.();
hoverWidget = undefined;
}
};
const triggerShowHover = (delay, focus, target, trapFocus) => {
return new TimeoutTimer(async () => {
if (!hoverWidget || hoverWidget.isDisposed) {
hoverWidget = new ManagedHoverWidget(hoverDelegate, target || targetElement, delay > 0);
await hoverWidget.update(typeof content === 'function' ? content() : content, focus, { ...options, trapFocus });
}
}, delay);
};
let isMouseDown = false;
const mouseDownEmitter = addDisposableListener(targetElement, EventType.MOUSE_DOWN, () => {
isMouseDown = true;
hideHover(true, true);
}, true);
const mouseUpEmitter = addDisposableListener(targetElement, EventType.MOUSE_UP, () => {
isMouseDown = false;
}, true);
const mouseLeaveEmitter = addDisposableListener(targetElement, EventType.MOUSE_LEAVE, (e) => {
isMouseDown = false;
hideHover(false, e.fromElement === targetElement);
}, true);
const onMouseOver = (e) => {
if (hoverPreparation) {
return;
}
const toDispose = new DisposableStore();
const target = {
targetElements: [targetElement],
dispose: () => { }
};
if (hoverDelegate.placement === undefined || hoverDelegate.placement === 'mouse') {
// track the mouse position
const onMouseMove = (e) => {
target.x = e.x + 10;
if ((isHTMLElement(e.target)) && getHoverTargetElement(e.target, targetElement) !== targetElement) {
hideHover(true, true);
}
};
toDispose.add(addDisposableListener(targetElement, EventType.MOUSE_MOVE, onMouseMove, true));
}
hoverPreparation = toDispose;
if ((isHTMLElement(e.target)) && getHoverTargetElement(e.target, targetElement) !== targetElement) {
return; // Do not show hover when the mouse is over another hover target
}
toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
};
const mouseOverDomEmitter = addDisposableListener(targetElement, EventType.MOUSE_OVER, onMouseOver, true);
const onFocus = () => {
if (isMouseDown || hoverPreparation) {
return;
}
const target = {
targetElements: [targetElement],
dispose: () => { }
};
const toDispose = new DisposableStore();
const onBlur = () => hideHover(true, true);
toDispose.add(addDisposableListener(targetElement, EventType.BLUR, onBlur, true));
toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
hoverPreparation = toDispose;
};
// Do not show hover when focusing an input or textarea
let focusDomEmitter;
const tagName = targetElement.tagName.toLowerCase();
if (tagName !== 'input' && tagName !== 'textarea') {
focusDomEmitter = addDisposableListener(targetElement, EventType.FOCUS, onFocus, true);
}
const hover = {
show: focus => {
hideHover(false, true); // terminate a ongoing mouse over preparation
triggerShowHover(0, focus, undefined, focus); // show hover immediately
},
hide: () => {
hideHover(true, true);
},
update: async (newContent, hoverOptions) => {
content = newContent;
await hoverWidget?.update(content, undefined, hoverOptions);
},
dispose: () => {
this._managedHovers.delete(targetElement);
mouseOverDomEmitter.dispose();
mouseLeaveEmitter.dispose();
mouseDownEmitter.dispose();
mouseUpEmitter.dispose();
focusDomEmitter?.dispose();
hideHover(true, true);
}
};
this._managedHovers.set(targetElement, hover);
return hover;
}
showManagedHover(target) {
const hover = this._managedHovers.get(target);
if (hover) {
hover.show(true);
}
}
dispose() {
this._managedHovers.forEach(hover => hover.dispose());
super.dispose();
}
};
HoverService = __decorate([
__param(0, IInstantiationService),
__param(1, IContextMenuService),
__param(2, IKeybindingService),
__param(3, ILayoutService),
__param(4, IAccessibilityService)
], HoverService);
export { HoverService };
function getHoverOptionsIdentity(options) {
if (options === undefined) {
return undefined;
}
return options?.id ?? options;
}
class HoverContextViewDelegate {
get anchorPosition() {
return this._hover.anchor;
}
constructor(_hover, _focus = false) {
this._hover = _hover;
this._focus = _focus;
// Render over all other context views
this.layer = 1;
}
render(container) {
this._hover.render(container);
if (this._focus) {
this._hover.focus();
}
return this._hover;
}
getAnchor() {
return {
x: this._hover.x,
y: this._hover.y
};
}
layout() {
this._hover.layout();
}
}
function getHoverTargetElement(element, stopElement) {
stopElement = stopElement ?? getWindow(element).document.body;
while (!element.hasAttribute('custom-hover') && element !== stopElement) {
element = element.parentElement;
}
return element;
}
registerSingleton(IHoverService, HoverService, 1 /* InstantiationType.Delayed */);
registerThemingParticipant((theme, collector) => {
const hoverBorder = theme.getColor(editorHoverBorder);
if (hoverBorder) {
collector.addRule(`.monaco-workbench .workbench-hover .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`);
collector.addRule(`.monaco-workbench .workbench-hover hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`);
}
});