@codingame/monaco-vscode-api 19.0.1 → 19.1.0

package/README.md

@@ -397,6 +397,32 @@ Add this plugin in your configuration:
 }
 ```
 
+## Sandbox mode (⚠️ beta ⚠️)
+
+One issue with VSCode is it's only designed to be initialized once. So the initialization options (workbench options, remote server authority...) can't be updated/reloaded. Also it's not possible to "unload" the services.
+
+To still be able to do it, a possibility is to run all VSCode code inside an iframe instead of in the main page. But then VSCode will render in the iframe only and won't be well integrated in the page.
+
+To better integrate it, it's also possible to run the code in the iframe, but make the code interact with the main page dom.
+
+This library supports that mode. To enable that, you should
+- have a secondary html entrypoint, that initialize the services
+- load that secondary html in an iframe
+- in the iframe, set `window.vscodeWindow` to the parent window, also initialize the service with a container mounted in that window
+- do not import any monaco-vscode-library from the top window, but you can declare functions on the iframe window to get objects to the top window
+
+To "unload" the workbench, you should:
+- remove the iframe element from the top frame
+- remove or empty the workbench container
+- cleanup the elements that VSCode has injected in the page head: `document.querySelectorAll('[data-vscode]').forEach((el) => el.remove())`
+
+⚠️ `window.vscodeWindow` should be set BEFORE any VSCode code is loaded
+
+
+Note: it can be used in combination with shadow dom
+
+It's demonstrated in the demo, by adding `?sandbox` query parameter to the demo url
+
 ## Troubleshooting
 
 If something doesn't work, make sure to check out the [Troubleshooting](https://github.com/CodinGame/monaco-vscode-api/wiki/Troubleshooting) wiki page.

package/css.js

@@ -1,40 +1,47 @@
 
+import { mainWindow } from './vscode/src/vs/base/browser/window.js';
 
 const sheets = [];
 function registerCss(module) {
     const exportedValue = module.default;
     let sheet = undefined;
     if (typeof exportedValue === 'string') {
-        sheet = new CSSStyleSheet();
+        sheet = new mainWindow.CSSStyleSheet();
         sheet.replaceSync(exportedValue);
     }
     else if (exportedValue instanceof CSSStyleSheet) {
-        sheet = exportedValue;
+        sheet = new mainWindow.CSSStyleSheet();
+        sheet.replaceSync(Array.from(exportedValue.cssRules)
+            .map((r) => r.cssText)
+            .join('\n'));
     }
     if (sheet != null) {
         const fontFaces = Array.from(sheet.cssRules)
-            .filter((rule) => rule instanceof CSSFontFaceRule)
+            .filter((rule) => rule instanceof mainWindow.CSSFontFaceRule)
             .map((r) => r.cssText);
         if (fontFaces.length > 0) {
-            const fontFaceStyleSheet = new CSSStyleSheet();
+            const fontFaceStyleSheet = new mainWindow.CSSStyleSheet();
             for (const fontFace of fontFaces) {
                 fontFaceStyleSheet.insertRule(fontFace);
             }
-            document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceStyleSheet];
+            mainWindow.document.adoptedStyleSheets = [
+                ...mainWindow.document.adoptedStyleSheets,
+                fontFaceStyleSheet
+            ];
         }
         sheets.push(sheet);
     }
 }
 function getInjectElement(target) {
     const root = target.getRootNode();
-    if (root instanceof ShadowRoot) {
+    if (root instanceof mainWindow.ShadowRoot) {
         return root;
     }
-    return document;
+    return target.ownerDocument;
 }
 function injectCss(target) {
     const root = getInjectElement(target);
-    if (root instanceof ShadowRoot && sheets.length === 0) {
+    if (root instanceof mainWindow.ShadowRoot && sheets.length === 0) {
         console.error("@codingame/monaco-vscode-api was loaded inside a shadow dom, but it's unable to load the css into it because the bundler configuration wasn't applied properly: imported css files should export their content as default");
     }
     root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingame/monaco-vscode-api",
-  "version": "19.0.1",
+  "version": "19.1.0",
   "private": false,
   "description": "VSCode public API plugged on the monaco editor",
   "keywords": [],
@@ -15,13 +15,13 @@
   },
   "type": "module",
   "dependencies": {
-    "@codingame/monaco-vscode-base-service-override": "19.0.1",
-    "@codingame/monaco-vscode-environment-service-override": "19.0.1",
-    "@codingame/monaco-vscode-extensions-service-override": "19.0.1",
-    "@codingame/monaco-vscode-files-service-override": "19.0.1",
-    "@codingame/monaco-vscode-host-service-override": "19.0.1",
-    "@codingame/monaco-vscode-layout-service-override": "19.0.1",
-    "@codingame/monaco-vscode-quickaccess-service-override": "19.0.1",
+    "@codingame/monaco-vscode-base-service-override": "19.1.0",
+    "@codingame/monaco-vscode-environment-service-override": "19.1.0",
+    "@codingame/monaco-vscode-extensions-service-override": "19.1.0",
+    "@codingame/monaco-vscode-files-service-override": "19.1.0",
+    "@codingame/monaco-vscode-host-service-override": "19.1.0",
+    "@codingame/monaco-vscode-layout-service-override": "19.1.0",
+    "@codingame/monaco-vscode-quickaccess-service-override": "19.1.0",
     "@vscode/iconv-lite-umd": "0.7.0",
     "dompurify": "3.2.6",
     "jschardet": "3.1.4",

package/services.js

@@ -392,10 +392,10 @@ export { IAuthenticationQueryService } from './vscode/src/vs/workbench/services/
 export { ICoreExperimentationService } from './vscode/src/vs/workbench/services/coreExperimentation/common/coreExperimentationService.service.js';
 export { IWorkbenchMcpManagementService } from './vscode/src/vs/workbench/services/mcp/common/mcpWorkbenchManagementService.service.js';
 
-if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.102.3-8a78630c-9dfe-4c23-9c5b-8111a9a632f4") {
-    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.102.3-8a78630c-9dfe-4c23-9c5b-8111a9a632f4"}, ${window.monacoVscodeApiBuildId} is already loaded`);
+if (window.monacoVscodeApiBuildId != null && window.monacoVscodeApiBuildId !== "1.102.3-3cf9ce2a-676e-4066-93c4-6d5137cfca59") {
+    throw new Error(`Another version of monaco-vscode-api has already been loaded. Trying to load ${"1.102.3-3cf9ce2a-676e-4066-93c4-6d5137cfca59"}, ${window.monacoVscodeApiBuildId} is already loaded`);
 }
-window.monacoVscodeApiBuildId = "1.102.3-8a78630c-9dfe-4c23-9c5b-8111a9a632f4";
+window.monacoVscodeApiBuildId = "1.102.3-3cf9ce2a-676e-4066-93c4-6d5137cfca59";
 async function initialize(overrides, container = document.body, configuration = {}, env) {
     checkServicesNotInitialized();
     injectCss(container);

package/vscode/src/vs/base/browser/dom.d.ts

@@ -118,6 +118,16 @@ export declare const sharedMutationObserver: {
 };
 export declare function createMetaElement(container?: HTMLElement): HTMLMetaElement;
 export declare function createLinkElement(container?: HTMLElement): HTMLLinkElement;
+export declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
+export declare function createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;
+export declare function createElementNS(namespaceURI: "http://www.w3.org/1999/xhtml", qualifiedName: string): HTMLElement;
+export declare function createElementNS<K extends keyof SVGElementTagNameMap>(namespaceURI: "http://www.w3.org/2000/svg", qualifiedName: K): SVGElementTagNameMap[K];
+export declare function createElementNS(namespaceURI: "http://www.w3.org/2000/svg", qualifiedName: string): SVGElement;
+export declare function createElementNS<K extends keyof MathMLElementTagNameMap>(namespaceURI: "http://www.w3.org/1998/Math/MathML", qualifiedName: K): MathMLElementTagNameMap[K];
+export declare function createElementNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", qualifiedName: string): MathMLElement;
+export declare function createElementNS(namespaceURI: string | null, qualifiedName: string, options?: ElementCreationOptions): Element;
+export declare function createElementNS(namespace: string | null, qualifiedName: string, options?: string | ElementCreationOptions): Element;
+export declare function isElement(e: unknown): e is Element;
 export declare function isHTMLElement(e: unknown): e is HTMLElement;
 export declare function isHTMLAnchorElement(e: unknown): e is HTMLAnchorElement;
 export declare function isHTMLSpanElement(e: unknown): e is HTMLSpanElement;
@@ -125,6 +135,7 @@ export declare function isHTMLTextAreaElement(e: unknown): e is HTMLTextAreaElem
 export declare function isHTMLInputElement(e: unknown): e is HTMLInputElement;
 export declare function isHTMLButtonElement(e: unknown): e is HTMLButtonElement;
 export declare function isHTMLDivElement(e: unknown): e is HTMLDivElement;
+export declare function isHTMLIframeElement(e: unknown): e is HTMLDivElement;
 export declare function isSVGElement(e: unknown): e is SVGElement;
 export declare function isMouseEvent(e: unknown): e is MouseEvent;
 export declare function isKeyboardEvent(e: unknown): e is KeyboardEvent;

package/vscode/src/vs/base/browser/dom.js

@@ -665,42 +665,55 @@ function createLinkElement(container = mainWindow.document.head) {
     return createHeadElement('link', container);
 }
 function createHeadElement(tagName, container = mainWindow.document.head) {
-    const element = document.createElement(tagName);
+    const element = createElement(tagName);
+    element.setAttribute('data-vscode', 'true');
     container.appendChild(element);
     return element;
 }
+function createElement(tagName, options) {
+    return mainWindow.document.createElement(tagName, options);
+}
+function createElementNS(namespace, qualifiedName, options) {
+    return mainWindow.document.createElementNS(namespace, qualifiedName, options);
+}
+function isElement(e) {
+    return e instanceof mainWindow.Element || e instanceof getWindow(e).Element;
+}
 function isHTMLElement(e) {
-    return e instanceof HTMLElement || e instanceof getWindow(e).HTMLElement;
+    return e instanceof mainWindow.HTMLElement || e instanceof getWindow(e).HTMLElement;
 }
 function isHTMLAnchorElement(e) {
-    return e instanceof HTMLAnchorElement || e instanceof getWindow(e).HTMLAnchorElement;
+    return e instanceof mainWindow.HTMLAnchorElement || e instanceof getWindow(e).HTMLAnchorElement;
 }
 function isHTMLTextAreaElement(e) {
-    return e instanceof HTMLTextAreaElement || e instanceof getWindow(e).HTMLTextAreaElement;
+    return e instanceof mainWindow.HTMLTextAreaElement || e instanceof getWindow(e).HTMLTextAreaElement;
 }
 function isHTMLInputElement(e) {
-    return e instanceof HTMLInputElement || e instanceof getWindow(e).HTMLInputElement;
+    return e instanceof mainWindow.HTMLInputElement || e instanceof getWindow(e).HTMLInputElement;
 }
 function isHTMLButtonElement(e) {
-    return e instanceof HTMLButtonElement || e instanceof getWindow(e).HTMLButtonElement;
+    return e instanceof mainWindow.HTMLButtonElement || e instanceof getWindow(e).HTMLButtonElement;
 }
 function isHTMLDivElement(e) {
-    return e instanceof HTMLDivElement || e instanceof getWindow(e).HTMLDivElement;
+    return e instanceof mainWindow.HTMLDivElement || e instanceof getWindow(e).HTMLDivElement;
+}
+function isHTMLIframeElement(e) {
+    return e instanceof mainWindow.HTMLIFrameElement || e instanceof getWindow(e).HTMLIFrameElement;
 }
 function isSVGElement(e) {
-    return e instanceof SVGElement || e instanceof getWindow(e).SVGElement;
+    return e instanceof mainWindow.SVGElement || e instanceof getWindow(e).SVGElement;
 }
 function isMouseEvent(e) {
-    return e instanceof MouseEvent || e instanceof getWindow(e).MouseEvent;
+    return e instanceof mainWindow.MouseEvent || e instanceof getWindow(e).MouseEvent;
 }
 function isKeyboardEvent(e) {
-    return e instanceof KeyboardEvent || e instanceof getWindow(e).KeyboardEvent;
+    return e instanceof mainWindow.KeyboardEvent || e instanceof getWindow(e).KeyboardEvent;
 }
 function isPointerEvent(e) {
-    return e instanceof PointerEvent || e instanceof getWindow(e).PointerEvent;
+    return e instanceof mainWindow.PointerEvent || e instanceof getWindow(e).PointerEvent;
 }
 function isDragEvent(e) {
-    return e instanceof DragEvent || e instanceof getWindow(e).DragEvent;
+    return e instanceof mainWindow.DragEvent || e instanceof getWindow(e).DragEvent;
 }
 const EventType = {
     CLICK: 'click',
@@ -869,10 +882,10 @@ function _$(namespace, description, attrs, ...children) {
     const tagName = match[1] || 'div';
     let result;
     if (namespace !== Namespace.HTML) {
-        result = document.createElementNS(namespace, tagName);
+        result = createElementNS(namespace, tagName);
     }
     else {
-        result = document.createElement(tagName);
+        result = createElement(tagName);
     }
     if (match[3]) {
         result.id = match[3];
@@ -978,7 +991,7 @@ function triggerDownload(dataOrUri, name) {
         setTimeout(() => URL.revokeObjectURL(url));
     }
     const activeWindow = getActiveWindow();
-    const anchor = document.createElement('a');
+    const anchor = createElement('a');
     activeWindow.document.body.appendChild(anchor);
     anchor.download = name;
     anchor.href = url;
@@ -988,7 +1001,7 @@ function triggerDownload(dataOrUri, name) {
 function triggerUpload() {
     return ( new Promise(resolve => {
         const activeWindow = getActiveWindow();
-        const input = document.createElement('input');
+        const input = createElement('input');
         activeWindow.document.body.appendChild(input);
         input.type = 'file';
         input.multiple = true;
@@ -1021,7 +1034,7 @@ function detectFullscreen(targetWindow, containerElement) {
     return null;
 }
 function hookDomPurifyHrefAndSrcSanitizer(allowedProtocols, allowDataImages = false) {
-    const anchor = document.createElement('a');
+    const anchor = createElement('a');
     dompurify.addHook('afterSanitizeAttributes', (node) => {
         for (const attr of ['href', 'src']) {
             if (node.hasAttribute(attr)) {
@@ -1343,7 +1356,7 @@ function h(tag, ...args) {
         throw ( new Error('Bad use of h'));
     }
     const tagName = match.groups['tag'] || 'div';
-    const el = document.createElement(tagName);
+    const el = createElement(tagName);
     if (match.groups['id']) {
         el.id = match.groups['id'];
     }
@@ -1418,7 +1431,7 @@ function svgElem(tag, ...args) {
         throw ( new Error('Bad use of h'));
     }
     const tagName = match.groups['tag'] || 'div';
-    const el = document.createElementNS('http://www.w3.org/2000/svg', tagName);
+    const el = createElementNS('http://www.w3.org/2000/svg', tagName);
     if (match.groups['id']) {
         el.id = match.groups['id'];
     }
@@ -1585,7 +1598,7 @@ var n;
 class ObserverNode {
     constructor(tag, ref, obsRef, ns, className, attributes, children) {
         this._deriveds = [];
-        this._element = (ns ? document.createElementNS(ns, tag) : document.createElement(tag));
+        this._element = (ns ? createElementNS(ns, tag) : createElement(tag));
         if (ref) {
             ref(this._element);
         }
@@ -1811,4 +1824,4 @@ function isObservable(obj) {
     return !!obj && obj.read !== undefined && obj.reportChanges !== undefined;
 }
 
-export { $, DetectedFullscreenMode, Dimension, DragAndDropObserver, EventHelper, EventType, LiveElement, ModifierKeyEmitter, Namespace, ObserverNode, ObserverNodeWithElement, SafeTriangle, WindowIdleValue, WindowIntervalTimer, addDisposableGenericMouseDownListener, addDisposableGenericMouseMoveListener, addDisposableGenericMouseUpListener, addDisposableListener, addDisposableThrottledListener, addStandardDisposableGenericMouseDownListener, addStandardDisposableGenericMouseUpListener, addStandardDisposableListener, after, animate, append, basicMarkupHtmlTags, clearNode, computeScreenAwareSize, copyAttributes, createLinkElement, createMetaElement, detectFullscreen, disposableWindowInterval, finalHandler, findParentWithClass, getActiveDocument, getActiveElement, getActiveWindow, getClientArea, getComputedStyle, getContentHeight, getContentWidth, getDocument, getDomNodePagePosition, getDomNodeZoomLevel, getLargestChildWidth, getRootContainer, getShadowRoot, getTopLeftOffset, getTotalHeight, getTotalScrollWidth, getTotalWidth, getWindow, getWindowById, getWindowId, getWindows, getWindowsCount, h, hasParentWithClass, hide, hookDomPurifyHrefAndSrcSanitizer, isActiveDocument, isActiveElement, isAncestor, isAncestorOfActiveElement, isAncestorUsingFlowTo, isDragEvent, isEditableElement, isElementInBottomRightQuarter, isEventLike, isHTMLAnchorElement, isHTMLButtonElement, isHTMLDivElement, isHTMLElement, isHTMLInputElement, isHTMLTextAreaElement, isInShadowDOM, isKeyboardEvent, isMouseEvent, isPointerEvent, isSVGElement, isShadowRoot, measure, modify, multibyteAwareBtoa, n, onDidRegisterWindow, onDidUnregisterWindow, onWillUnregisterWindow, position, prepend, registerWindow, reset, restoreParentsScrollTop, runAtThisOrScheduleAtNextAnimationFrame, runWhenWindowIdle, safeInnerHtml, saveParentsScrollTop, scheduleAtNextAnimationFrame, setParentFlowTo, setVisibility, sharedMutationObserver, show, size, svgElem, trackAttributes, trackFocus, triggerDownload, triggerUpload, windowOpenNoOpener, windowOpenPopup, windowOpenWithSuccess };
+export { $, DetectedFullscreenMode, Dimension, DragAndDropObserver, EventHelper, EventType, LiveElement, ModifierKeyEmitter, Namespace, ObserverNode, ObserverNodeWithElement, SafeTriangle, WindowIdleValue, WindowIntervalTimer, addDisposableGenericMouseDownListener, addDisposableGenericMouseMoveListener, addDisposableGenericMouseUpListener, addDisposableListener, addDisposableThrottledListener, addStandardDisposableGenericMouseDownListener, addStandardDisposableGenericMouseUpListener, addStandardDisposableListener, after, animate, append, basicMarkupHtmlTags, clearNode, computeScreenAwareSize, copyAttributes, createElement, createElementNS, createLinkElement, createMetaElement, detectFullscreen, disposableWindowInterval, finalHandler, findParentWithClass, getActiveDocument, getActiveElement, getActiveWindow, getClientArea, getComputedStyle, getContentHeight, getContentWidth, getDocument, getDomNodePagePosition, getDomNodeZoomLevel, getLargestChildWidth, getRootContainer, getShadowRoot, getTopLeftOffset, getTotalHeight, getTotalScrollWidth, getTotalWidth, getWindow, getWindowById, getWindowId, getWindows, getWindowsCount, h, hasParentWithClass, hide, hookDomPurifyHrefAndSrcSanitizer, isActiveDocument, isActiveElement, isAncestor, isAncestorOfActiveElement, isAncestorUsingFlowTo, isDragEvent, isEditableElement, isElement, isElementInBottomRightQuarter, isEventLike, isHTMLAnchorElement, isHTMLButtonElement, isHTMLDivElement, isHTMLElement, isHTMLIframeElement, isHTMLInputElement, isHTMLTextAreaElement, isInShadowDOM, isKeyboardEvent, isMouseEvent, isPointerEvent, isSVGElement, isShadowRoot, measure, modify, multibyteAwareBtoa, n, onDidRegisterWindow, onDidUnregisterWindow, onWillUnregisterWindow, position, prepend, registerWindow, reset, restoreParentsScrollTop, runAtThisOrScheduleAtNextAnimationFrame, runWhenWindowIdle, safeInnerHtml, saveParentsScrollTop, scheduleAtNextAnimationFrame, setParentFlowTo, setVisibility, sharedMutationObserver, show, size, svgElem, trackAttributes, trackFocus, triggerDownload, triggerUpload, windowOpenNoOpener, windowOpenPopup, windowOpenWithSuccess };

package/vscode/src/vs/base/browser/domStylesheets.js

@@ -1,7 +1,8 @@
 
 import { toDisposable, DisposableStore } from '../common/lifecycle.js';
 import '../common/observableInternal/index.js';
-import { getWindows, sharedMutationObserver } from './dom.js';
+import { isShadowRoot, createElement, getWindows, sharedMutationObserver } from './dom.js';
+import { isFirefox } from './browser.js';
 import { mainWindow } from './window.js';
 import { autorun } from '../common/observableInternal/reactions/autorun.js';
 
@@ -39,14 +40,15 @@ class WrappedStyleElement {
 let shadowRootContainer;
 function setContainerElement(container) {
     const root = container.getRootNode();
-    if (root instanceof ShadowRoot) {
+    if (isShadowRoot(root)) {
         shadowRootContainer = root;
     }
 }
 function createStyleSheet(container = mainWindow.document.head, beforeAppend, disposableStore) {
-    const style = document.createElement('style');
+    const style = createElement('style');
     style.type = 'text/css';
     style.media = 'screen';
+    style.setAttribute('data-vscode', 'true');
     beforeAppend?.(style);
     container.appendChild(style);
     if (disposableStore) {
@@ -84,7 +86,13 @@ function cloneGlobalStyleSheet(globalStylesheet, globalStylesheetClones, windowE
     for (const rule of getDynamicStyleSheetRules(globalStylesheet)) {
         clone.sheet?.insertRule(rule.cssText, clone.sheet?.cssRules.length);
     }
-    disposables.add(sharedMutationObserver.observe(globalStylesheet, disposables, { childList: true })(() => {
+    let observeInit = {
+        childList: true
+    };
+    if (isFirefox) {
+        observeInit = { ...observeInit, attributes: true, attributeFilter: ['data-version'] };
+    }
+    disposables.add(sharedMutationObserver.observe(globalStylesheet, disposables, observeInit)(() => {
         clone.textContent = globalStylesheet.textContent;
     }));
     globalStylesheetClones.add(clone);

package/vscode/src/vs/base/browser/formattedTextRenderer.js

@@ -1,5 +1,5 @@
 
-import { addStandardDisposableListener } from './dom.js';
+import { createElement as createElement$1, addStandardDisposableListener } from './dom.js';
 
 function renderText(text, options = {}) {
     const element = createElement(options);
@@ -13,7 +13,7 @@ function renderFormattedText(formattedText, options = {}) {
 }
 function createElement(options) {
     const tagName = options.inline ? 'span' : 'div';
-    const element = document.createElement(tagName);
+    const element = createElement$1(tagName);
     if (options.className) {
         element.className = options.className;
     }
@@ -57,23 +57,23 @@ function _renderFormattedText(element, treeNode, actionHandler, renderCodeSegmen
         child = document.createTextNode(treeNode.content || '');
     }
     else if (treeNode.type === FormatType.Bold) {
-        child = document.createElement('b');
+        child = createElement$1('b');
     }
     else if (treeNode.type === FormatType.Italics) {
-        child = document.createElement('i');
+        child = createElement$1('i');
     }
     else if (treeNode.type === FormatType.Code && renderCodeSegments) {
-        child = document.createElement('code');
+        child = createElement$1('code');
     }
     else if (treeNode.type === FormatType.Action && actionHandler) {
-        const a = document.createElement('a');
+        const a = createElement$1('a');
         actionHandler.disposables.add(addStandardDisposableListener(a, 'click', (event) => {
             actionHandler.callback(String(treeNode.index), event);
         }));
         child = a;
     }
     else if (treeNode.type === FormatType.NewLine) {
-        child = document.createElement('br');
+        child = createElement$1('br');
     }
     else if (treeNode.type === FormatType.Root) {
         child = element;

package/vscode/src/vs/base/browser/keyboardEvent.js

@@ -3,6 +3,7 @@ import { isFirefox, isWebKit } from './browser.js';
 import { KeyCodeUtils, KeyCode, EVENT_KEY_CODE_MAP, KeyMod as KeyMod$1 } from '../common/keyCodes.js';
 import { KeyCodeChord } from '../common/keybindings.js';
 import { isMacintosh, isLinux } from '../common/platform.js';
+import { isHTMLIframeElement } from './dom.js';
 
 function extractKeyCode(e) {
     if (e.charCode) {
@@ -78,12 +79,18 @@ function printStandardKeyboardEvent(e) {
     }
     return `modifiers: [${modifiers.join(',')}], code: ${e.code}, keyCode: ${e.keyCode} ('${( KeyCodeUtils.toString(e.keyCode))}')`;
 }
+function getTarget(source) {
+    if (isHTMLIframeElement(source.target)) {
+        return source.target;
+    }
+    return source.composedPath()[0] ?? source.target;
+}
 class StandardKeyboardEvent {
     constructor(source) {
         this._standardKeyboardEventBrand = true;
         const e = source;
         this.browserEvent = e;
-        this.target = e.target;
+        this.target = getTarget(e);
         this.ctrlKey = e.ctrlKey;
         this.shiftKey = e.shiftKey;
         this.altKey = e.altKey;

package/vscode/src/vs/base/browser/pixelRatio.js

@@ -1,5 +1,5 @@
 
-import { getWindowId, onDidUnregisterWindow } from './dom.js';
+import { createElement, getWindowId, onDidUnregisterWindow } from './dom.js';
 import { Emitter, Event } from '../common/event.js';
 import { Disposable, markAsSingleton } from '../common/lifecycle.js';
 
@@ -37,7 +37,7 @@ class PixelRatioMonitorImpl extends Disposable {
         }));
     }
     _getPixelRatio(targetWindow) {
-        const ctx = document.createElement('canvas').getContext('2d');
+        const ctx = createElement('canvas').getContext('2d');
         const dpr = targetWindow.devicePixelRatio || 1;
         const bsr = ctx.webkitBackingStorePixelRatio ||
             ctx.mozBackingStorePixelRatio ||

package/vscode/src/vs/base/browser/ui/actionbar/actionViewItems.js

@@ -2,7 +2,7 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { isFirefox } from '../../browser.js';
 import { DataTransfers } from '../../dnd.js';
-import { addDisposableListener, EventType, EventHelper } from '../../dom.js';
+import { addDisposableListener, EventType, EventHelper, createElement } from '../../dom.js';
 import { Gesture, EventType as EventType$1 } from '../../touch.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { SelectBox } from '../selectBox/selectBox.js';
@@ -197,13 +197,13 @@ class ActionViewItem extends BaseActionViewItem {
     render(container) {
         super.render(container);
         assertType(this.element);
-        const label = document.createElement('a');
+        const label = createElement('a');
         label.classList.add('action-label');
         label.setAttribute('role', this.getDefaultAriaRole());
         this.label = label;
         this.element.appendChild(label);
         if (this.options.label && this.options.keybinding && !this.options.keybindingNotRenderedWithLabel) {
-            const kbLabel = document.createElement('span');
+            const kbLabel = createElement('span');
             kbLabel.classList.add('keybinding');
             kbLabel.textContent = this.options.keybinding;
             this.element.appendChild(kbLabel);

package/vscode/src/vs/base/browser/ui/actionbar/actionbar.js

@@ -1,6 +1,6 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
-import { addDisposableListener, EventType, trackFocus, getActiveElement, isAncestor, isHTMLElement, EventHelper, clearNode } from '../../dom.js';
+import { createElement, addDisposableListener, EventType, trackFocus, getActiveElement, isAncestor, isHTMLElement, EventHelper, clearNode } from '../../dom.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { BaseActionViewItem, ActionViewItem } from './actionViewItems.js';
 import { createInstantHoverDelegate } from '../hover/hoverDelegateFactory.js';
@@ -52,7 +52,7 @@ class ActionBar extends Disposable {
         this._actionRunnerDisposables.add(this._actionRunner.onWillRun(e => this._onWillRun.fire(e)));
         this.viewItems = [];
         this.focusedItem = undefined;
-        this.domNode = document.createElement('div');
+        this.domNode = createElement('div');
         this.domNode.className = 'monaco-action-bar';
         let previousKeys;
         let nextKeys;
@@ -129,7 +129,7 @@ class ActionBar extends Disposable {
             }
         }));
         this._register(this.focusTracker.onDidFocus(() => this.updateFocusedItem()));
-        this.actionsList = document.createElement('ul');
+        this.actionsList = createElement('ul');
         this.actionsList.className = 'actions-container';
         if (this.options.highlightToggledItems) {
             this.actionsList.classList.add('highlight-toggled');
@@ -236,7 +236,7 @@ class ActionBar extends Disposable {
         const actions = Array.isArray(arg) ? arg : [arg];
         let index = isNumber(options.index) ? options.index : null;
         actions.forEach((action) => {
-            const actionViewItemElement = document.createElement('li');
+            const actionViewItemElement = createElement('li');
             actionViewItemElement.className = 'action-item';
             actionViewItemElement.setAttribute('role', 'presentation');
             let item;

package/vscode/src/vs/base/browser/ui/aria/aria.js

@@ -1,6 +1,6 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
-import { clearNode } from '../../dom.js';
+import { createElement, clearNode } from '../../dom.js';
 import * as aria from './aria.css';
 
 registerCss(aria);
@@ -11,10 +11,10 @@ let alertContainer2;
 let statusContainer;
 let statusContainer2;
 function setARIAContainer(parent) {
-    ariaContainer = document.createElement('div');
+    ariaContainer = createElement('div');
     ariaContainer.className = 'monaco-aria-container';
     const createAlertContainer = () => {
-        const element = document.createElement('div');
+        const element = createElement('div');
         element.className = 'monaco-alert';
         element.setAttribute('role', 'alert');
         element.setAttribute('aria-atomic', 'true');
@@ -24,7 +24,7 @@ function setARIAContainer(parent) {
     alertContainer = createAlertContainer();
     alertContainer2 = createAlertContainer();
     const createStatusContainer = () => {
-        const element = document.createElement('div');
+        const element = createElement('div');
         element.className = 'monaco-status';
         element.setAttribute('aria-live', 'polite');
         element.setAttribute('aria-atomic', 'true');

package/vscode/src/vs/base/browser/ui/button/button.js

@@ -1,6 +1,6 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
-import { EventType, addDisposableListener, EventHelper, trackFocus, reset, isActiveElement, $ } from '../../dom.js';
+import { createElement, EventType, addDisposableListener, EventHelper, trackFocus, reset, isActiveElement, $ } from '../../dom.js';
 import dompurify from 'dompurify';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { renderMarkdown, renderStringAsPlaintext } from '../../markdownRenderer.js';
@@ -39,7 +39,7 @@ class Button extends Disposable {
         this._onDidClick = this._register(( new Emitter()));
         this._onDidEscape = this._register(( new Emitter()));
         this.options = options;
-        this._element = document.createElement('a');
+        this._element = createElement('a');
         this._element.classList.add('monaco-button');
         this._element.tabIndex = 0;
         this._element.setAttribute('role', 'button');
@@ -49,10 +49,10 @@ class Button extends Disposable {
         this._element.style.color = foreground || '';
         this._element.style.backgroundColor = background || '';
         if (options.supportShortLabel) {
-            this._labelShortElement = document.createElement('div');
+            this._labelShortElement = createElement('div');
             this._labelShortElement.classList.add('monaco-button-label-short');
             this._element.appendChild(this._labelShortElement);
-            this._labelElement = document.createElement('div');
+            this._labelElement = createElement('div');
             this._labelElement.classList.add('monaco-button-label');
             this._element.appendChild(this._labelElement);
             this._element.classList.add('monaco-text-button-with-short-label');
@@ -119,7 +119,7 @@ class Button extends Disposable {
                 if (segment === '') {
                     continue;
                 }
-                const node = document.createElement('span');
+                const node = createElement('span');
                 node.textContent = segment;
                 elements.push(node);
             }
@@ -262,7 +262,7 @@ class ButtonWithDropdown extends Disposable {
         super();
         this._onDidClick = this._register(( new Emitter()));
         this.onDidClick = this._onDidClick.event;
-        this.element = document.createElement('div');
+        this.element = createElement('div');
         this.element.classList.add('monaco-button-dropdown');
         container.appendChild(this.element);
         if (!options.hoverDelegate) {
@@ -277,9 +277,9 @@ class ButtonWithDropdown extends Disposable {
             true,
             async () => this._onDidClick.fire(undefined)
         )));
-        this.separatorContainer = document.createElement('div');
+        this.separatorContainer = createElement('div');
         this.separatorContainer.classList.add('monaco-button-dropdown-separator');
-        this.separator = document.createElement('div');
+        this.separator = createElement('div');
         this.separatorContainer.appendChild(this.separator);
         this.element.appendChild(this.separatorContainer);
         const border = options.buttonBorder;
@@ -342,10 +342,10 @@ class ButtonWithDropdown extends Disposable {
 class ButtonWithDescription {
     constructor(container, options) {
         this.options = options;
-        this._element = document.createElement('div');
+        this._element = createElement('div');
         this._element.classList.add('monaco-description-button');
         this._button = ( new Button(this._element, options));
-        this._descriptionElement = document.createElement('div');
+        this._descriptionElement = createElement('div');
         this._descriptionElement.classList.add('monaco-button-description');
         this._element.appendChild(this._descriptionElement);
         container.appendChild(this._element);

package/vscode/src/vs/base/browser/ui/contextview/contextview.js

@@ -1,7 +1,7 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { BrowserFeatures } from '../../canIUse.js';
-import { $, hide, addStandardDisposableListener, clearNode, show, isHTMLElement, getDomNodePagePosition, getDomNodeZoomLevel, getTotalWidth, getTotalHeight, getActiveWindow, getWindow, isAncestor } from '../../dom.js';
+import { $, hide, createElement, addStandardDisposableListener, clearNode, show, isHTMLElement, getDomNodePagePosition, getDomNodeZoomLevel, getTotalWidth, getTotalHeight, getActiveWindow, getWindow, isAncestor } from '../../dom.js';
 import { Disposable, toDisposable, DisposableStore } from '../../../common/lifecycle.js';
 import { isIOS } from '../../../common/platform.js';
 import { Range } from '../../../common/range.js';
@@ -106,7 +106,7 @@ class ContextView extends Disposable {
                 this.shadowRootHostElement = $('.shadow-root-host');
                 this.container.appendChild(this.shadowRootHostElement);
                 this.shadowRoot = this.shadowRootHostElement.attachShadow({ mode: 'open' });
-                const style = document.createElement('style');
+                const style = createElement('style');
                 style.textContent = SHADOW_ROOT_CSS;
                 this.shadowRoot.appendChild(style);
                 this.shadowRoot.appendChild(this.view);