From f8be509e4d0b5c13bb791e0fd5702242319d114f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Gonz=C3=A1lez?= Date: Wed, 31 Mar 2021 16:50:54 -0300 Subject: [PATCH] fix: autoscroll when block is bigger than viewport (#3746) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: autoscroll when block is bigger than viewport * Create lazy-trains-sell.md * Update lazy-trains-sell.md * Update lazy-trains-sell.md Co-authored-by: Tomás González Co-authored-by: Ian Storm Taylor --- .changeset/lazy-trains-sell.md | 5 +++++ packages/slate-react/src/components/editable.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/lazy-trains-sell.md diff --git a/.changeset/lazy-trains-sell.md b/.changeset/lazy-trains-sell.md new file mode 100644 index 000000000..4df2c411e --- /dev/null +++ b/.changeset/lazy-trains-sell.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Fix editor auto-scrolling behavior when a block is bigger than the viewport. diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index b765bfbd1..d0a2c998e 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -204,10 +204,14 @@ export const Editable = (props: EditableProps) => { ) } const leafEl = newDomRange.startContainer.parentElement! + leafEl.getBoundingClientRect = newDomRange.getBoundingClientRect.bind( + newDomRange + ) scrollIntoView(leafEl, { scrollMode: 'if-needed', boundary: el, }) + delete leafEl.getBoundingClientRect } else { domSelection.removeAllRanges() }