Provide our own implementation of scrollCaretIntoView

.vscode/settings.json

@@ -11,7 +11,8 @@
         "coverage": true,
         ".vscode/**": true,
         "dist/**": true,
-        "stats.json": true
+        "stats.json": true,
+        "assets/**": true
     },
     "prettier.arrowParens": "avoid",
     "prettier.singleQuote": true,

demo/scripts/controlsV2/plugins/SamplePickerPlugin.tsx

@@ -10,12 +10,12 @@ import {
     PickerHelper,
     PickerPlugin,
     PickerSelectionChangMode,
-    getDOMInsertPointRect,
 } from 'roosterjs-content-model-plugins';
 import {
     createContentModelDocument,
     createEntity,
     createParagraph,
+    getDOMInsertPointRect,
 } from 'roosterjs-content-model-dom';
 
 const itemStyle = mergeStyles({

demo/scripts/controlsV2/roosterjsReact/pasteOptions/component/showPasteOptionPane.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { ButtonKeys, Buttons } from '../utils/buttons';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { getDOMInsertPointRect } from 'roosterjs-content-model-plugins';
+import { getDOMInsertPointRect, getObjectKeys } from 'roosterjs-content-model-dom';
 import { getLocalizedString } from '../../common/index';
-import { getObjectKeys } from 'roosterjs-content-model-dom';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { IconButton } from '@fluentui/react/lib/Button';
 import { memoizeFunction } from '@fluentui/react/lib/Utilities';

demo/scripts/controlsV2/sidePane/formatState/FormatStatePlugin.ts

@@ -1,5 +1,5 @@
 import { FormatStatePane, FormatStatePaneProps, FormatStatePaneState } from './FormatStatePane';
-import { getDOMInsertPointRect } from 'roosterjs-content-model-plugins';
+import { getDOMInsertPointRect } from 'roosterjs-content-model-dom';
 import { getFormatState } from 'roosterjs-content-model-api';
 import { PluginEvent } from 'roosterjs-content-model-types';
 import { SidePaneElementProps } from '../SidePaneElement';

packages/roosterjs-content-model-core/lib/command/paste/mergePasteContent.ts

@@ -95,7 +95,7 @@ export function mergePasteContent(
         {
             changeSource: ChangeSource.Paste,
             getChangeData: () => clipboardData,
-            scrollCaretIntoView: false, // TODO #2633: Make a full fix to the scroll behavior
+            scrollCaretIntoView: true,
             apiName: 'paste',
         }
     );

packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts

@@ -1,4 +1,5 @@
-import { ChangeSource, getSelectionRootNode } from 'roosterjs-content-model-dom';
+import { ChangeSource } from 'roosterjs-content-model-dom';
+import { scrollCaretIntoView } from './scrollCaretIntoView';
 import type {
     ChangedEntity,
     ContentChangedEvent,
@@ -31,7 +32,7 @@ export const formatContentModel: FormatContentModel = (
         changeSource,
         rawEvent,
         selectionOverride,
-        scrollCaretIntoView,
+        scrollCaretIntoView: scroll,
     } = options || {};
     const model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     const context: FormatContentModelContext = {
@@ -70,12 +71,8 @@ export const formatContentModel: FormatContentModel = (
 
             handlePendingFormat(core, context, selection);
 
-            if (selection && scrollCaretIntoView) {
-                const selectionRoot = getSelectionRootNode(selection);
-                const rootElement =
-                    selectionRoot && core.domHelper.findClosestElementAncestor(selectionRoot);
-
-                rootElement?.scrollIntoView();
+            if (scroll && (selection?.type == 'range' || selection?.type == 'image')) {
+                scrollCaretIntoView(core, selection);
             }
 
             const eventData: ContentChangedEvent = {

packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/scrollCaretIntoView.ts

@@ -0,0 +1,39 @@
+import { getDOMInsertPointRect } from 'roosterjs-content-model-dom';
+import type { EditorCore, ImageSelection, RangeSelection } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ */
+export function scrollCaretIntoView(core: EditorCore, selection: RangeSelection | ImageSelection) {
+    const rect = getDOMInsertPointRect(
+        core.physicalRoot.ownerDocument,
+        selection.type == 'image'
+            ? {
+                  node: selection.image,
+                  offset: 0,
+              }
+            : selection.isReverted
+            ? {
+                  node: selection.range.startContainer,
+                  offset: selection.range.startOffset,
+              }
+            : {
+                  node: selection.range.endContainer,
+                  offset: selection.range.endOffset,
+              }
+    );
+    const visibleRect = core.api.getVisibleViewport(core);
+    const scrollContainer = core.domEvent.scrollContainer;
+
+    if (rect && visibleRect) {
+        if (rect.bottom > visibleRect.bottom) {
+            const zoomScale = core.domHelper.calculateZoomScale();
+
+            scrollContainer.scrollTop += (rect.bottom - visibleRect.bottom) / zoomScale;
+        } else if (rect.top < visibleRect.top) {
+            const zoomScale = core.domHelper.calculateZoomScale();
+
+            scrollContainer.scrollTop += (rect.top - visibleRect.top) / zoomScale;
+        }
+    }
+}

packages/roosterjs-content-model-core/test/coreApi/formatContentModel/formatContentModelTest.ts

@@ -1,3 +1,4 @@
+import * as scrollCaretIntoView from '../../../lib/coreApi/formatContentModel/scrollCaretIntoView';
 import * as transformColor from 'roosterjs-content-model-dom/lib/domUtils/style/transformColor';
 import { ChangeSource, createImage } from 'roosterjs-content-model-dom';
 import { formatContentModel } from '../../../lib/coreApi/formatContentModel/formatContentModel';
@@ -21,7 +22,6 @@ describe('formatContentModel', () => {
     let hasFocus: jasmine.Spy;
     let getClientWidth: jasmine.Spy;
     let announce: jasmine.Spy;
-    let findClosestElementAncestor: jasmine.Spy;
 
     const apiName = 'mockedApi';
     const mockedContainer = 'C' as any;
@@ -43,7 +43,6 @@ describe('formatContentModel', () => {
         hasFocus = jasmine.createSpy('hasFocus');
         getClientWidth = jasmine.createSpy('getClientWidth');
         announce = jasmine.createSpy('announce');
-        findClosestElementAncestor = jasmine.createSpy('findClosestElementAncestor ');
 
         core = ({
             api: {
@@ -64,7 +63,6 @@ describe('formatContentModel', () => {
             domHelper: {
                 hasFocus,
                 getClientWidth,
-                findClosestElementAncestor,
             },
         } as any) as EditorCore;
     });
@@ -554,14 +552,14 @@ describe('formatContentModel', () => {
         });
 
         it('Has scrollCaretIntoView, and callback return true', () => {
-            const scrollIntoViewSpy = jasmine.createSpy('scrollIntoView');
-            const mockedImage = { scrollIntoView: scrollIntoViewSpy } as any;
+            const scrollCaretIntoViewSpy = spyOn(scrollCaretIntoView, 'scrollCaretIntoView');
+            const mockedImage = 'IMAGE' as any;
 
-            findClosestElementAncestor.and.returnValue(mockedImage);
             setContentModel.and.returnValue({
                 type: 'image',
                 image: mockedImage,
             });
+
             formatContentModel(
                 core,
                 (model, context) => {
@@ -574,8 +572,10 @@ describe('formatContentModel', () => {
                 }
             );
 
-            expect(findClosestElementAncestor).toHaveBeenCalledWith(mockedImage);
-            expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
+            expect(scrollCaretIntoViewSpy).toHaveBeenCalledWith(core, {
+                type: 'image',
+                image: mockedImage,
+            });
         });
     });