Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SlateEditor error when inserting/removing custom inline element in very specific ways #5928

Closed
razvanMiu opened this issue Mar 26, 2024 · 0 comments · Fixed by #5926
Closed

Comments

@razvanMiu
Copy link
Contributor

razvanMiu commented Mar 26, 2024

Describe the bug
In a slate block you can add text and you can wrap that text with block or inline elements. An element in slate is a type of node that has a specific renderer. We have default elements but we can also add custom elements. As an example volto-slate-footnote is a custom inline element that allows wrapping some text with a footnote.
For understanding the issue let's say that the slate block render the following text: this is a text and the custom inline element applied over a portion of the text will result in: this is a <CustomInlineElement>text</CustomInlineElement>

Bug 1: when the cursor is at the end of a custom inline element, but not in the element itself, I see the unwrap button in the toolbar. If I want to remove (unwrap) it, pressing the unwrap button, I get the following error:

Uncaught TypeError: link is not iterable
    at utils.js:76:1

The error comes from the _unwrapElement function because indeed there is no match for that element when the cursor is at the end however I still see the unwrap button in the toolbar because if the cursor is at the end of a custom inline element SlateEditor behave as if that element is active.

_bug_remove_element

Bug 2: In a slate table when trying to wrap some text with a custom inline element I get the following error:

Uncaught Error: When setting the selection and the current selection is `null` you must provide at least an `anchor` and `focus`, but you passed: {"anchor":null,"focus":null}
    at utils.js:53:1

The error comes from _insertElement function. From my testing it seems like after wrapping the text with the element the new selection is ok but then when applying it to the editor it sees it as if being null so maybe a solution for this would be to set the selection asynchronous, in a setTimeout.

_bug_insert_element

To Reproduce

Bug 1:

  1. Add some text in a slate block
  2. Wrap the last word with a custom inline element
  3. Move the cursor at the end of the word that was wrapped
  4. You will see the context toolbar of that custom inline element allowing you to unwrap the element
  5. Press the unwrap button

Bug 2:

  1. Add some text in a cell in a slate table block
  2. Wrap that text with a custom inline element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant