Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] error when selecting text with mouse in shadow dom #4548

Open
1 of 2 tasks
hungtcs opened this issue Jun 4, 2024 · 2 comments
Open
1 of 2 tasks

[Bug] error when selecting text with mouse in shadow dom #4548

hungtcs opened this issue Jun 4, 2024 · 2 comments

Comments

@hungtcs
Copy link

hungtcs commented Jun 4, 2024

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

Link To Monaco Playground

Monaco Editor Playground Code

const defaultValue = `async function main() {
  // select this text with the mouse and an error will appear in the console
}
main().catch((err) => console.error(err))
`;

class MyElement extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: "open" });
		const styleLink = document.createElement('link');
		styleLink.rel ='stylesheet';
		styleLink.href = 'node_modules/monaco-editor/min/vs/editor/editor.main.css'
		shadowRoot.appendChild(styleLink);
	}

	connectedCallback() {
		const conatiner = document.createElement("div");
		conatiner.style.width ='100%'
		conatiner.style.height ='320px'
		conatiner.style.resize ='both'
		conatiner.style.overflow ='hidden'
		this.shadowRoot?.appendChild(conatiner);
		
		monaco.editor.create(conatiner, {
			value: defaultValue,
			theme: 'vs-dark',
			language: "javascript",
			automaticLayout: true,
		});
	}
}

customElements.define('my-element', MyElement);

Reproduction Steps

  1. Select the text in editor with the mouse
  2. An error will appear in the console

Actual (Problematic) Behavior

An error occurred in the console

image

Expected Behavior

No response

Additional Context

No response

@hungtcs
Copy link
Author

hungtcs commented Jun 4, 2024

The method can be traced through the stack

function shadowCaretRangeFromPoint(shadowRoot, x, y) {
    const range = document.createRange();
    // Get the element under the point
    let el = shadowRoot.elementFromPoint(x, y);
    if (el !== null) {
        // parameter 1 is not of type 'Node'.                       // <---
        range.setStart(el.firstChild, offset);
        range.setEnd(el.firstChild, offset);
    }
    return range;
}

@dominik1996
Copy link

We ran into the same issue: v0.47.0 is the last version to work correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants