Skip to content

Commit

Permalink
Scroll caret into view when call formatContentModel (#2617)
Browse files Browse the repository at this point in the history
  • Loading branch information
JiuqingSong authored May 7, 2024
1 parent a3a14a4 commit 9b86a06
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export function mergePasteContent(
{
changeSource: ChangeSource.Paste,
getChangeData: () => clipboardData,
scrollCaretIntoView: true,
apiName: 'paste',
}
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeSource } from 'roosterjs-content-model-dom';
import { ChangeSource, getSelectionRootNode } from 'roosterjs-content-model-dom';
import type {
ChangedEntity,
ContentChangedEvent,
Expand All @@ -24,8 +24,15 @@ export const formatContentModel: FormatContentModel = (
options,
domToModelOptions
) => {
const { apiName, onNodeCreated, getChangeData, changeSource, rawEvent, selectionOverride } =
options || {};
const {
apiName,
onNodeCreated,
getChangeData,
changeSource,
rawEvent,
selectionOverride,
scrollCaretIntoView,
} = options || {};
const model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
const context: FormatContentModelContext = {
newEntities: [],
Expand Down Expand Up @@ -63,6 +70,14 @@ export const formatContentModel: FormatContentModel = (

handlePendingFormat(core, context, selection);

if (selection && scrollCaretIntoView) {
const selectionRoot = getSelectionRootNode(selection);
const rootElement =
selectionRoot && core.domHelper.findClosestElementAncestor(selectionRoot);

rootElement?.scrollIntoView();
}

const eventData: ContentChangedEvent = {
eventType: 'contentChanged',
contentModel: clearModelCache ? undefined : model,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ 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;
Expand All @@ -42,6 +43,7 @@ describe('formatContentModel', () => {
hasFocus = jasmine.createSpy('hasFocus');
getClientWidth = jasmine.createSpy('getClientWidth');
announce = jasmine.createSpy('announce');
findClosestElementAncestor = jasmine.createSpy('findClosestElementAncestor ');

core = ({
api: {
Expand All @@ -62,6 +64,7 @@ describe('formatContentModel', () => {
domHelper: {
hasFocus,
getClientWidth,
findClosestElementAncestor,
},
} as any) as EditorCore;
});
Expand Down Expand Up @@ -549,6 +552,31 @@ describe('formatContentModel', () => {
});
expect(announce).not.toHaveBeenCalled();
});

it('Has scrollCaretIntoView, and callback return true', () => {
const scrollIntoViewSpy = jasmine.createSpy('scrollIntoView');
const mockedImage = { scrollIntoView: scrollIntoViewSpy } as any;

findClosestElementAncestor.and.returnValue(mockedImage);
setContentModel.and.returnValue({
type: 'image',
image: mockedImage,
});
formatContentModel(
core,
(model, context) => {
context.clearModelCache = true;
return true;
},
{
scrollCaretIntoView: true,
apiName,
}
);

expect(findClosestElementAncestor).toHaveBeenCalledWith(mockedImage);
expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
});
});

describe('Editor does not have focus', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export function keyboardDelete(editor: IEditor, rawEvent: KeyboardEvent) {
rawEvent,
changeSource: ChangeSource.Keyboard,
getChangeData: () => rawEvent.which,
scrollCaretIntoView: true,
apiName: rawEvent.key == 'Delete' ? 'handleDeleteKey' : 'handleBackspaceKey',
}
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export function keyboardInput(editor: IEditor, rawEvent: KeyboardEvent) {
}
},
{
scrollCaretIntoView: true,
rawEvent,
}
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ export interface FormatContentModelOptions {
* When specified, use this selection range to override current selection inside editor
*/
selectionOverride?: DOMSelection;

/**
* When pass to true, scroll the editing caret into view after write DOM tree if need
*/
scrollCaretIntoView?: boolean;
}

/**
Expand Down

0 comments on commit 9b86a06

Please sign in to comment.