Shadow DOM - Drag-and-drop text throws error #5749
Labels
Comments
|
It seems like the caretRangeFromPoint method in react-editor.ts is not working correctly. I will try to fix it later with something along the lines of: if (document.caretPositionFromPoint) {
const shadowRootOrDocument = ReactEditor.toDOMNode(editor, editor).getRootNode();
const shadowRoot = shadowRootOrDocument instanceof ShadowRoot ? shadowRootOrDocument : null;
const caretPos = document.caretPositionFromPoint(x, y, {
shadowRoots: shadowRoot ? [shadowRoot] : [],
});
const node = caretPos.offsetNode;
const offset = caretPos.offset;
const selection = shadowRoot ? shadowRoot.getSelection() : window.getSelection();
selection?.setBaseAndExtent(node, offset, node, offset);
domRange = selection;
} else if (document.caretRangeFromPoint) {
// existing code |
|
The compatibility here might not be great. Chrome needs 128 to support caretPositionPoint options. |
5 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Upon trying to drag and drop the text, the following error appears in the console:
Error: Cannot resolve a Slate point from DOM point: [object HTMLDivElement],0Additionally, the text is not moved to the new location.
This issue can be reproduced on the official Slate website:: https://www.slatejs.org/examples/shadow-dom
Steps to reproduce:
Environment:
System: Ubuntu
Browser: Chrome, Version 125.0.6422.141 (Official Build) (64-bit)
Context:
In my case, I need to use a Shadow DOM because I am developing a Chrome extension that will be injected into various websites. The Shadow DOM allows me to create an isolated environment where the editor is unaffected by the surrounding page's styles or scripts, ensuring it functions independently. This is crucial for maintaining consistent and predictable behavior across different host pages.
Thank you for your help and suggestions!
The text was updated successfully, but these errors were encountered: