From 347865cafc1f2f3b0fc3d74d8758e082480df6ca Mon Sep 17 00:00:00 2001 From: Eric Meier Date: Mon, 3 Oct 2022 17:00:20 +0200 Subject: [PATCH] fix scrollIntoView when selection is collapsed inside mark placeholder (#5143) --- .changeset/dry-nails-brake.md | 5 +++++ packages/slate-react/src/plugin/react-editor.ts | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 .changeset/dry-nails-brake.md diff --git a/.changeset/dry-nails-brake.md b/.changeset/dry-nails-brake.md new file mode 100644 index 000000000..819b7d686 --- /dev/null +++ b/.changeset/dry-nails-brake.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Fix scrollIntoView when selection is collapsed inside mark placeholder diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index fb19eeb3b..46cb98b6e 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -35,6 +35,7 @@ import { isDOMSelection, normalizeDOMPoint, hasShadowRoot, + DOMText, } from '../utils/dom' import { IS_CHROME, IS_FIREFOX, IS_ANDROID } from '../utils/environment' @@ -346,8 +347,15 @@ export const ReactEditor = { point.offset === end && nextText?.hasAttribute('data-slate-mark-placeholder') ) { + const domText = nextText.childNodes[0] + domPoint = [ - nextText, + // COMPAT: If we don't explicity set the dom point to be on the actual + // dom text element, chrome will put the selection behind the actual dom + // text element, causing domRange.getBoundingClientRect() calls on a collapsed + // selection to return incorrect zero values (https://bugs.chromium.org/p/chromium/issues/detail?id=435438) + // which will cause issues when scrolling to it. + domText instanceof DOMText ? domText : nextText, nextText.textContent?.startsWith('\uFEFF') ? 1 : 0, ] break