ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
29.71k stars 3.24k forks source link

Cannot resolve a DOM point from Slate point #4323

Open ghingis opened 3 years ago

ghingis commented 3 years ago

I saw a couple of closed ticket with this error, but we think our issue is a bit different from those. We have a scenario, where Slate is just a part of a document editor.

  const editorRef = useRef<ReactEditor>()
  if (!editorRef.current) {
    editorRef.current = withReact(createEditor())
  }
  const editor = editorRef.current

This document editor has it's own history, so we can not use slate-history. Whenever this document editor undos or redus, we update the value of Slate and we get the error in the title.

As far as we can tell, the error happens when the position of the cursor will be invalid for the new value. This is something that should be easy to fix, we just have to save the selector as well in the document state when onChange happens in Slate.

But the onChange does not provide a selector and the editor.selector does not represent the new state of the selector at the time when the onChange fires.

So either way slate should provide a way to get the proper selector for the change. And also there should be a safe way to set a new selector too, since if we set the selector before the editor gets the new value, it crashes with the same error, but there is no event that slate fires after it sets its new values.

We tried to do something like this, but to no avail:

    editor.selection = {
      anchor: {
        path: [0],
        offset: 0
      },
      focus: {
        path: [0],
        offset: 0
      }
    };
    editor.children = value;
    editor.selection = selection;

If we were to miss something, please let us know how to save and set value and selector safely.

PibeG commented 3 years ago

Try using Transforms.select(editor: Editor, target: Location) That use case is in the docs: https://docs.slatejs.org/concepts/04-transforms#selection-transforms