search

ianstormtaylor / slate

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

"Cannot resolve a Slate point from DOM point" #5711

Open ehsankh1370 opened 2 months ago

ehsankh1370 commented 2 months ago

Description Only in ios safari when i type some content in the editor and HOLD backspace button to remove the content and then i write again i get "Cannot resolve a Slate point from DOM point" error. after receiving this error no removing action (backspace) is not working. this issue is happening even in the slate demo link here

Steps To reproduce the behavior:

  1. in ios safari Go to https://www.slatejs.org/examples/richtext
  2. remove the whole content while HOLDING backspace
  3. then try to type some characters
  4. and then try to remove( tap or hold backspace) - and you see Cannot resolve a Slate point from DOM point error in the console
  5. then you see that nothing is going to be removed

Expectation i expect to type and remove whenever i type and tap or hold backspace

Environment

abhi-bc commented 4 weeks ago

That's correct and it happens on Plate JS as well. Some of my findings are here: https://github.com/udecode/plate/discussions/3584

To re-iterate: When pressing backspace on an empty editor (in iOS), it deletes the entire Slate DOM structure inside my editor, which eventually crashes after. Any idea why this is happening? I tried deleting all plugins and it still happens. Ideally, if there's no more text, it should not delete the default <p> tag and underlying Slate elements, but it does so any way.

See below: How an empty editor DOM looks before pressing backspace Screenshot 2024-09-25 at 4 31 39 PM

How it looks after pressing backspace (the entire DOM inside `contenteditable is empty) Screenshot 2024-09-25 at 4 33 26 PM

I'm using PlateJS v36.x. I added a keydown handler and returned false if editor.children = [{ type: p, children: [{ text: '' }] }] this works but there has to better way? Would like to know what's causing this on iOS? Works fine on other platforms.

Steps to reproduce:

  1. Clone gh repo clone ianstormtaylor/slat
  2. yarn install && yarn build
  3. Open site/examples/ts/richtext.tsx and delete placeholder prop from line 50
  4. yarn start
  5. Start iOS simulator, open https://localhost:3000/examples/richtext in Safari
  6. Keep pressing backspace on iOS soft keyboard until everything is gone. Press a few more times when it's empty
  7. Try to type anything now

Editor will crash with following error: Error: Cannot resolve a Slate point from DOM point: [object HTMLDivElement],0 Screenshot 2024-10-25 at 10 00 43 AM

Findings: Adding a placeholder prop to <Editable> reduces the occurrence by a lot but it still happens occasionally.

The issue originates from slate-react@v0.103.0 onwards so I am guessing the culprit might be

  1. https://github.com/ianstormtaylor/slate/pull/5626, OR
  2. https://github.com/ianstormtaylor/slate/pull/5648
abhi-bc commented 4 weeks ago

@ehsankh1370 Maybe change the issue title to iOS Safari backspace issue: Cannot resolve a Slate point from DOM point for better visibility.

washanhanzi commented 2 days ago

5762