Pressing backspace on an empty editor (iOS only) deletes the entire Slate DOM structure

[abhi-bc]

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

How it looks after pressing backspace (the entire DOM inside `contenteditable is empty)

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.

[12joan]

Can you reproduce the problem on Plate's website, or with vanilla Slate?

[abhi-bc]

@12joan no it does not occur on PlateJS or Slate's website. I am sure it's an issue with my implementation and I am at a loss to figure out where it's originating from. I tried disabling all plugins, toolbars, custom keydown handlers, yet it continues to happen.

Any tips on how to chase this bug, or where to look for, would be appreciated.

One key difference - I am not using withPlaceholders HOC at all. my components look like this

            components: {
                [ELEMENT_BLOCKQUOTE]: BlockquoteElement,
                [ELEMENT_CODE_BLOCK]: CodeBlockElement,
                [ELEMENT_CODE_LINE]: CodeLineElement,
                [ELEMENT_CODE_SYNTAX]: CodeSyntaxLeaf,
                [ELEMENT_LINK]: LinkElement,
                [ELEMENT_UL]: withProps(ListElement, { variant: 'ul' }),
                [ELEMENT_OL]: withProps(ListElement, { variant: 'ol' }),
                [ELEMENT_LI]: withProps(ListElement, { variant: 'li' }),
                [ELEMENT_LIC]: withProps(ListElement, { variant: 'span' }),
                [ELEMENT_PARAGRAPH]: ParagraphElement,
                [MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }),
                [MARK_CODE]: CodeLeaf,
                [MARK_ITALIC]: withProps(PlateLeaf, { as: 'em', style: { fontStyle: 'italic' } }),
                [MARK_STRIKETHROUGH]: withProps(PlateLeaf, { as: 's' }),
                [MARK_UNDERLINE]: withProps(PlateLeaf, { as: 'u' }),
            },
        },

could this be causing an issue?

[12joan]

That's strange. I doubt withPlaceholders would be the deciding factor here.

I would try cloning the Plate template and iteratively making it closer and closer to your app to see at what point the problem can be reproduced.

[abhi-bc]

After a lot of trial and error, I decided to take the official PlateJS example repo for v36.x, strip it off all plugins and then compare it with my repo. Turns out the error was related to slate repo version

The official example uses [email protected] and [email protected] while I was using [email protected] and [email protected]. Reverting it to the older version fixed the issue. I guess we should not be using latest slate with old version of PlateJS.

I'll upgrade everything to latest when we migrate to PlateJS v39.x down the line

[abhi-bc]

So now that we upgraded to Plate v39.x, we have to use latest [email protected] because of hard dependency from @udecode/plate-utils. The problem is, this issue returned once we upgraded slate-react.

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

1. Version Packages ianstormtaylor/slate#5626, OR
2. Add Safari workaround inside shadow DOM. ianstormtaylor/slate#5648

Any ideas to fix or circumvent this?

@12joan The issue is now reproducible on PlateJS official example as well if you run it on iOS simulator.

Steps:

1. Clone https://github.com/udecode/plate-template
2. Add all packages from platejs.org
3. Run dev server
4. Navigate to localhost:8080 in iOS simulator's Safari
5. Press backspace on empty editor

You'll see the cursor moves up a little, and the editor has basically crashed at that point with no mode slate related DOM elements in the tree.

[12joan]

Can you try to reproduce this by removing the placeholder from a vanilla Slate example? https://slatejs.org/

[abhi-bc]

@12joan Yes, I can replicate this bug on official slate example as well. Steps:

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

[12joan]

Thanks for confirming that. Since this is a Slate bug, can check for an existing Slate issue and open a new one if one doesn't already exist?

[abhi-bc]

Thanks! I found an open slate issue here from Sep 1, 2024. ianstormtaylor/slate#5711

Closing this discussion since it's unrelated to PlateJS