Composition text bugs with placeholder

[knubie]

🐞 Bug

What's the current behavior?

When using IME to type with placeholder text present, the placeholder text movies with the IME input instead of begin removed. Once IME completes, behavior varies by browser:

Chrome:
Raises the following error:

Cannot resolve a Slate point from DOM point: [object Text],5

If the error is caught, the composition text is inserted correctly.

Safari
Composition text is inserted correctly, but cursor is placed at the beginning of the input.

Firefox
Composition text is inserted twice. Adding additional text / modifying the slate state in any way will raise an error:

Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":11}

See: #3824

Slate: v0.58.1
Browser: Chrome / Safari / Firefox / Edge
OS: Mac / Windows / Linux / iOS / Android

What's the expected behavior?

1. Placeholder text should be removed as soon as composition starts.
2. Completing the composition should insert the composition text and place the cursor at the end of the inserted text.

Duplicate of #3369

[fulgari]

Any updates please?

[fulgari]

ok, I found a workaround:

    const onComposition = (e: React.CompositionEvent<HTMLDivElement>) => {
        if (e.type === "compositionstart") {
            setComposition(true);
            if (value[0].children.length === 1 && value[0].children[0].text === "")
            ) {
                setIsPlaceholderRemove(true);
                editor.insertText(" "); // important, this will be added at the head of the composition text and change the visibility of placeholder
            }
        } else if (e.type === "compositionend") {
            setComposition(false);
            if (isPlaceholderRemove) {
                editor.deleteBackward("character"); // remove the space " " we just added
                setIsPlaceholderRemove(false);
            }
        }
    };

[neko-neko]

I was not able to reproduce the problem on 0.65.3. Probably fixed in #4352.