`DOMEditor.findPath` returns no or wrong path

[delijah]

Description
When using DOMEditor.findPath within the onChange event handler, it either throws an error, or returns a wrong path, after manipulating the document. The reason is, NODE_TO_INDEX and NODE_TO_PARENT only updates on render, but onChange is fired before the changes have been rendered.

Sandbox
https://codesandbox.io/p/sandbox/fyslvy

Steps
To reproduce the behavior:

1. Visit the codesandbox link
2. Click within text on the first line
3. Press enter
4. See error / wrong paths in console

Expectation
DOMEditor.findPath should return the correct path at any point in time.

Environment

• Slate Version: 0.118.0
• Operating System: macOS
• Browser: Chrome

Context
This became a problem while using useEditorSelector from plate.js. useEditorSelector is fired directly after onChange, if we want to retrieve a path of a node in there, it fails. Example:

import { type EditorSelection, type Path, PathApi } from 'platejs';
import { useEditorSelector } from 'platejs/react';

const isPathFocused = (selection: EditorSelection, path?: Path) =>
    Boolean(path && selection?.focus.path && PathApi.isCommon(path, selection.focus.path));

export const useEditorNodeFocused = (node: TNode, options?: Options) => {
    const focused = useEditorSelector((editor) => {
        const { selection } = editor;
        const path = DOMEditor.findPath(editor, node);

        return isPathFocused(selection, path);
    }, []);

    return focused;
};

[12joan]

This is indeed an unusual quirk of how paths are computed. There have been efforts in the past to compute paths in the core slate package instead, but those efforts seem to have stalled. See #5800.

As a workaround, you can use Slate's useSlateSelector instead of useEditorSelector and pass { deferred: true } as an option, which tells it to only run the selector after the editor has finished re-rendering, when the new path will be available and correct. As a side-effect of this, the result of the selector might be out of sync for one very brief render pass, but this probably isn't an issue for checking if a node is focused.

[delijah]

Ok. At the moment we are using a custom findPath function. Of course, this is not an option for slate, there we would need an index, for better performance.

const findNodePath = (editor: PlateEditor, needle: TNode, options: Options = {}) => {
    const { depth = Infinity } = options;
    const needleKey = editor.api.findKey(needle);

    if (!needleKey) {
        return;
    }

    const stack: Path[] = [[]];

    while (stack.length) {
        const path = stack.pop()!;
        const node = NodeApi.get(editor, path);

        if (!node) {
            continue;
        }

        if (editor.api.findKey(node) === needleKey) {
            return path;
        }

        if (Array.isArray(node.children) && path.length < depth) {
            const len = node.children.length;

            for (let i = len - 1; i >= 0; i--) {
                stack.push(path.concat(i));
            }
        }
    }
};

Wondering what's the better option.

[delijah]

@12joan Do you think this change might already be sufficient? Or is it not gonna be that easy? 😅

#5939

[delijah]

Ok.. the tests answer is: no, it is not that easy.

[12joan]

Replied here: #5939 (comment)