Margins are not collapsed because of `slate-data-spacer`

Do you want to request a feature or report a bug?

• Bug

Example to reproduce : https://jsfiddle.net/BanB4n/gszke21n/14/ Informations: MacOS, Google Chrome, Slate 0.33

What’s the current behavior?

The data-slate-spacer div prevents the collapsing of margin.

What’s the expected behavior?

At GitBook, we fixed this by adding position: absolute to the data-slate-spacer element. But we are not confident about this solution, since we are not sure to understand the purpose of this spacer.

[freeplant]

In our project, we render Markdown documents using Slate. The images in a document are rendered as inline nodes. With this change (adding position: 'absolute'), when an inline image is clicked, the view will jump to an incorrect scroll position.

In scrollToSelection() https://github.com/ianstormtaylor/slate/blob/1923888af1b07b6c21ea20b0a9f054a5cbb27654/packages/slate-react/src/utils/scroll-to-selection.js#L74

let cursorRect = range.getBoundingClientRect()

returns incorrect cursorRect.

Hope a better solution can be found.

[sampok]

I have the editor in a scrolling div and experienced the same problem as @freeplant, except that it didn’t seem to matter whether the image was inline or block.

In my case the solution was to set “position: relative” to the editor area (or an immediate wrapper). Without it absolute position was off and the view jumped when focusing on images.