slate icon indicating copy to clipboard operation
slate copied to clipboard

Custom table node allows entering text outside the table which leaves slate in a broken state

Open christian-schulze opened this issue 3 years ago • 3 comments

Description On Google Chrome (tested Arch Linux and MacOS) and Safari, using a custom node to support html tables allows moving the cursor beyond the bounds of the table, when there are no nodes below the table. When entering any character in this position, the character is entered twice, one in the last cell of the table, and one below the table. Attempting to delete the character in the last cell deletes two characters. Moving the cursor below the table shows an error in the developer console:

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

It is not possible to delete the character below the table. This issue does not effect Firefox (tested Arch Linux and MacOS).

Recording https://user-images.githubusercontent.com/239226/141764397-5abbaf88-2df5-4411-8aa2-abf5ba7a122f.mp4

Sandbox https://www.slatejs.org/examples/tables

Steps To reproduce the behavior:

  1. Navigate to https://www.slatejs.org/examples/tables in latest Google Chrome (tested Arch Linux and MacOS) or Safari
  2. Open the browsers developer console
  3. Completely delete the last paragraph in the editor (cursor should now be next to the 9)
  4. Press the down arrow key Observe that the cursor is now to the right of the table
  5. Press any letter Observe that the letter has been inserted twice, one inside the last cell of the table and one below the table Observe that the cursor has jumped into the last cell of the table, to the right of the newly inserted character
  6. Press the backspace key to delete the character Observe that both characters in the cell were deleted
  7. Press the down arrow to navigate below the table Observe the error message in the developer console

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

  1. Press the backspace key to delete the character below the table Observer that you cannot delete the character

Expectation Perhaps behaviour like Firefox, where the cursor won't go outside the bounds of the table. Or for the typed character to only be inserted in the last cell of the table.

Environment

  • Slate Version: 0.70.0
  • Operating System: Arch Linux and MacOS
  • Browser: Chrome, Safari

Context I've tried overriding the insertText function in a plugin, to detect if the cursor position is outside the table, with the intention of cancelling user input. But slate crashes with an error if I early return without calling the original insertText:

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

My next idea is to implement a normalisation rule to automatically insert a node below a table...I will report back with the outcome of this.

christian-schulze avatar Nov 15 '21 10:11 christian-schulze