search

ianstormtaylor / slate

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

Unable to set custom "boundary" to define scrolling container for the library scroll-into-view-if-needed #4590

Open ugrinovsky opened 3 years ago

ugrinovsky commented 3 years ago

Problem At the moment, the editor itself should be a scroll container. But if the scroll container needs to be above the editor, the scrolling logic will break.

Solution I suggest adding an prop for the editor: https://github.com/ianstormtaylor/slate/blob/d06706c9e15bbbdd7cdd9a1bbb38c87d37c85ea1/packages/slate-react/src/components/android/android-editable.tsx#L170 https://github.com/ianstormtaylor/slate/blob/7ba486aa397411a3e83ab636b0982167d95319c0/packages/slate-react/src/components/editable.tsx#L1305

slate-react:

scrollIntoView(leafEl, {
      scrollMode: 'if-needed',
      boundary: props.scrollBoundary || el
});

custom code:

const resolveScrollBoundary = (parent) => {
      return return !parent.classList.contains('.someClassName');
};

//...

<SlateEditable
      scrollBoundary={this.resolveScrollBoundary}
/>
max-sym commented 3 years ago

What do you mean exactly by "the scrolling logic will break" here?

For me, it scrolls the <html /> tag instead of my scrolling div.

max-sym commented 3 years ago

Similar thread in the scroll-into-view-if-needed repo: https://github.com/stipsan/scroll-into-view-if-needed/issues/635