Shadow DOM - Drag-and-drop text throws error

[Hentuloo]

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],0
Additionally, 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:

1. Render a Slate editor inside a Shadow DOM.
2. Select a portion of text.
3. Attempt to drag and drop the selected text into a different paragraph.

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!

[Hentuloo]

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 

[WindRunnerMax]

The compatibility here might not be great. Chrome needs 128 to support caretPositionPoint options.