Microsoft/monaco-editor

[Bug] Clicking on context menu action doesn't re-focus if the editor is on a shadow dom

Open

#4 010 ouverte le 6 juin 2023

Voir sur GitHub
 (0 commentaires) (2 réactions) (0 assignés)JavaScript (1 283 forks)batch import
bugeditor-corehelp wanted

Métriques du dépôt

Stars
 (14 836 stars)
Métriques de merge PR
 (Merge moyen 6h 26m) (15 PRs mergées en 30 j)

Description

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.39.0#XQAAAAI6BAAAAAAAAABBqQkHQ5NjdYzqEXhNewrSKZslyM_G2I4bTkHQYW1lB1MplPA6z0speGDFvgRIQQx0HI9zdEFZdk3ipJqwzu6RT44vPXZPcpCKxnvgE9TYAtuAi9VQr3EAhbQJCn4JPD8EaFYCtRcYWa8_pnHjN-uDjxrhmN3g8tmx0iWUz1zF7VMROnGNjfHj2TFmcBooqFj0KG-T22ZTQveC4ldZtj1EFTqyCu3JsVl3KOYJ6jN6L0f3T19XU0zb02ACeJdPM0CLl86jemlCWOl0JG2J0dhzEnjqM4XqGYciXM6FV3rlh6jWFIDoEjxiyRdkgg164RAoK8mzvr3giDxMuoweZZDoih64ZPCD5FGSGyefl8oP3r2o6-A-doKI7bGjscOo0bFg51Ej-q0LUp49Nf980se0b39IbB-NuZaImBNP1_GTMBRfD0LuX4tCYeRojU5qSHjJuoFtma8Z2LCLsQDvni7nbpCpjPO6wxOxKQToWD7HNeRAK0pRdgdwBvfeofsZ_MQad99NC7BbZfS5veQowPkFo3RV52gVyWlYW5bn4MOA0x0jD3f19SKbmJQUfFmKWveSAWGoTwm0WYmns4p_Z3bZ2ixsX23j4tz2pGSqMquo_3qLxH8bGPC2AAmLZRhSFWWhw-A_BuLIDN4Bu8ZDVCxV0t2m4DpJqLF87KFHo-wlgjyFjRegisvjvowEvfV7DoaTytMAQQdqg2u0IlmErqXrM6vNBeAEFTn8bEpPtc7sV6RK3gjnnqc2_B76l_0sYZtlzsZQcNExdqmPhXuIB7PVX5nn2m6UZ9v_Z3b_AA

Monaco Editor Playground Code

customElements.define(
	"code-view-monaco",
	class CodeViewMonaco extends HTMLElement {
		_monacoEditor;
		/** @type HTMLElement */
		_editor;

		constructor() {
			super();

			const shadowRoot = this.attachShadow({ mode: "open" });

			// Copy over editor styles
			const styles = document.querySelectorAll(
				"link[rel='stylesheet'][data-name^='vs/']"
			);
			for (const style of styles) {
				shadowRoot.appendChild(style.cloneNode(true));
			}

			const template = /** @type HTMLTemplateElement */ (
				document.getElementById("editor-template")
			);
			shadowRoot.appendChild(template.content.cloneNode(true));

			this._editor = shadowRoot.querySelector("#container");
			this._monacoEditor = monaco.editor.create(this._editor, {
				automaticLayout: true,
				language: "javascript",

				value: `function hello() {
	alert('Hello world!');
}`,
			});
		}
	}
);

Reproduction Steps

  • select a piece of the text
  • right click the selected text
  • "Copy" ( or any other action)

Actual (Problematic) Behavior

the selected text is copied but loses the focus

Expected Behavior

it should do the same as an editor not in a shadow dom(e.g.: https://microsoft.github.io/monaco-editor/playground.html?source=v0.39.0#example-creating-the-editor-hello-world) and keep the focus.

Additional Context

I believe this issue is also making it impossible to use the "Paste" action in a shadow-dom, it loses the focus as soon as you open the context menu, making it impossible to go through this condition. But I can't reproduce it in playground because "Paste" action doesn't work at all in playground https://github.com/microsoft/monaco-editor/issues/2264

Guide contributeur