Do not focus to editor when formatWithContentModel (#2130)

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/setAlignment.ts

@@ -11,5 +11,7 @@ export default function setAlignment(
     editor: IContentModelEditor,
     alignment: 'left' | 'center' | 'right'
 ) {
+    editor.focus();
+
     formatWithContentModel(editor, 'setAlignment', model => setModelAlignment(model, alignment));
 }

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/setDirection.ts

@@ -8,5 +8,7 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param direction Direction value: ltr (Left to right) or rtl (Right to left)
  */
 export default function setDirection(editor: IContentModelEditor, direction: 'ltr' | 'rtl') {
+    editor.focus();
+
     formatWithContentModel(editor, 'setDirection', model => setModelDirection(model, direction));
 }

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/setHeadingLevel.ts

@@ -22,6 +22,8 @@ export default function setHeadingLevel(
     editor: IContentModelEditor,
     headingLevel: 0 | 1 | 2 | 3 | 4 | 5 | 6
 ) {
+    editor.focus();
+
     formatParagraphWithContentModel(editor, 'setHeadingLevel', para => {
         const tagName =
             headingLevel > 0

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/setIndentation.ts

@@ -14,6 +14,8 @@ export default function setIndentation(
     indentation: 'indent' | 'outdent',
     length?: number
 ) {
+    editor.focus();
+
     formatWithContentModel(
         editor,
         'setIndentation',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/setParagraphMargin.ts

@@ -14,6 +14,8 @@ export default function setParagraphMargin(
     marginTop?: string | null,
     marginBottom?: string | null
 ) {
+    editor.focus();
+
     formatParagraphWithContentModel(editor, 'setParagraphMargin', para => {
         if (!para.decorator) {
             para.decorator = createParagraphDecorator('p');

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/setSpacing.ts

@@ -7,6 +7,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param spacing Unitless/px value to set line height
  */
 export default function setSpacing(editor: IContentModelEditor, spacing: number | string) {
+    editor.focus();
+
     formatParagraphWithContentModel(editor, 'setSpacing', paragraph => {
         paragraph.format.lineHeight = spacing.toString();
         paragraph.segments.forEach(segment => {

packages-content-model/roosterjs-content-model-editor/lib/publicApi/block/toggleBlockQuote.ts

@@ -31,6 +31,8 @@ export default function toggleBlockQuote(
         ...quoteFormat,
     };
 
+    editor.focus();
+
     formatWithContentModel(
         editor,
         'toggleBlockQuote',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/format/clearFormat.ts

@@ -14,6 +14,8 @@ import type {
  * @param editor The editor to clear format from
  */
 export default function clearFormat(editor: IContentModelEditor) {
+    editor.focus();
+
     formatWithContentModel(editor, 'clearFormat', model => {
         const blocksToClear: [ContentModelBlockGroup[], ContentModelBlock][] = [];
         const segmentsToClear: ContentModelSegment[] = [];

packages-content-model/roosterjs-content-model-editor/lib/publicApi/image/changeImage.ts

@@ -9,6 +9,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param file The image file
  */
 export default function changeImage(editor: IContentModelEditor, file: File) {
+    editor.focus();
+
     const selection = editor.getDOMSelection();
     readFile(file, dataUrl => {
         if (dataUrl && !editor.isDisposed() && selection?.type === 'image') {

packages-content-model/roosterjs-content-model-editor/lib/publicApi/image/insertImage.ts

@@ -10,6 +10,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param file Image Blob file or source string
  */
 export default function insertImage(editor: IContentModelEditor, imageFileOrSrc: File | string) {
+    editor.focus();
+
     if (typeof imageFileOrSrc == 'string') {
         insertImageWithSrc(editor, imageFileOrSrc);
     } else {

packages-content-model/roosterjs-content-model-editor/lib/publicApi/image/setImageAltText.ts

@@ -9,6 +9,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param altText The image alt text
  */
 export default function setImageAltText(editor: IContentModelEditor, altText: string) {
+    editor.focus();
+
     formatImageWithContentModel(editor, 'setImageAltText', (image: ContentModelImage) => {
         image.alt = altText;
     });

packages-content-model/roosterjs-content-model-editor/lib/publicApi/image/setImageBorder.ts

@@ -16,6 +16,8 @@ export default function setImageBorder(
     border: Border | null,
     borderRadius?: string
 ) {
+    editor.focus();
+
     formatImageWithContentModel(editor, 'setImageBorder', (image: ContentModelImage) => {
         applyImageBorderFormat(image, border, borderRadius);
     });

packages-content-model/roosterjs-content-model-editor/lib/publicApi/image/setImageBoxShadow.ts

@@ -13,6 +13,8 @@ export default function setImageBoxShadow(
     boxShadow: string,
     margin?: string | null
 ) {
+    editor.focus();
+
     formatImageWithContentModel(editor, 'setImageBoxShadow', (image: ContentModelImage) => {
         image.format.boxShadow = boxShadow;
         if (margin) {

packages-content-model/roosterjs-content-model-editor/lib/publicApi/link/insertLink.ts

@@ -40,6 +40,8 @@ export default function insertLink(
     displayText?: string,
     target?: string
 ) {
+    editor.focus();
+
     let url = (checkXss(link) || '').trim();
     if (url) {
         const linkData = matchLink(url);

packages-content-model/roosterjs-content-model-editor/lib/publicApi/link/removeLink.ts

@@ -10,6 +10,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor instance
  */
 export default function removeLink(editor: IContentModelEditor) {
+    editor.focus();
+
     formatWithContentModel(editor, 'removeLink', model => {
         adjustSegmentSelection(
             model,

packages-content-model/roosterjs-content-model-editor/lib/publicApi/list/setListStartNumber.ts

@@ -8,6 +8,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param value The number to set to, must be equal or greater than 1
  */
 export default function setListStartNumber(editor: IContentModelEditor, value: number) {
+    editor.focus();
+
     formatWithContentModel(editor, 'setListStartNumber', model => {
         const listItem = getFirstSelectedListItem(model);
         const level = listItem?.levels[listItem?.levels.length - 1];

packages-content-model/roosterjs-content-model-editor/lib/publicApi/list/setListStyle.ts

@@ -11,6 +11,8 @@ import type { ListMetadataFormat } from 'roosterjs-content-model-types';
  * @param style The target list item style to set
  */
 export default function setListStyle(editor: IContentModelEditor, style: ListMetadataFormat) {
+    editor.focus();
+
     formatWithContentModel(editor, 'setListStyle', model => {
         const listItem = getFirstSelectedListItem(model);
 

packages-content-model/roosterjs-content-model-editor/lib/publicApi/list/toggleBullet.ts

@@ -9,6 +9,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleBullet(editor: IContentModelEditor) {
+    editor.focus();
+
     formatWithContentModel(editor, 'toggleBullet', model => setListType(model, 'UL'), {
         preservePendingFormat: true,
     });

packages-content-model/roosterjs-content-model-editor/lib/publicApi/list/toggleNumbering.ts

@@ -9,6 +9,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleNumbering(editor: IContentModelEditor) {
+    editor.focus();
+
     formatWithContentModel(editor, 'toggleNumbering', model => setListType(model, 'OL'), {
         preservePendingFormat: true,
     });

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/changeCapitalization.ts

@@ -14,6 +14,8 @@ export default function changeCapitalization(
     capitalization: 'sentence' | 'lowerCase' | 'upperCase' | 'capitalize',
     language?: string
 ) {
+    editor.focus();
+
     formatSegmentWithContentModel(editor, 'changeCapitalization', (_, __, segment) => {
         if (segment?.segmentType == 'Text') {
             switch (capitalization) {

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/changeFontSize.ts

@@ -25,6 +25,8 @@ export default function changeFontSize(
     editor: IContentModelEditor,
     change: 'increase' | 'decrease'
 ) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'changeFontSize',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/setBackgroundColor.ts

@@ -13,6 +13,8 @@ export default function setBackgroundColor(
     editor: IContentModelEditor,
     backgroundColor: string | null
 ) {
+    editor.focus();
+
     let lastParagraph: ContentModelParagraph | null = null;
     let lastSegmentIndex: number = -1;
 

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/setFontName.ts

@@ -7,6 +7,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param fontName The font name to set
  */
 export default function setFontName(editor: IContentModelEditor, fontName: string) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'setFontName',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/setFontSize.ts

@@ -11,6 +11,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param fontSize The font size to set
  */
 export default function setFontSize(editor: IContentModelEditor, fontSize: string) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'setFontSize',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/setTextColor.ts

@@ -7,6 +7,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param textColor The text color to set. Pass null to remove existing color.
  */
 export default function setTextColor(editor: IContentModelEditor, textColor: string | null) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'setTextColor',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleBold.ts

@@ -6,6 +6,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleBold(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleBold',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleCode.ts

@@ -14,6 +14,8 @@ const DefaultCode: ContentModelCode = {
  * @param editor The editor to operate on
  */
 export default function toggleCode(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleCode',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleItalic.ts

@@ -6,6 +6,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleItalic(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleItalic',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleStrikethrough.ts

@@ -6,6 +6,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleStrikethrough(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleStrikethrough',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleSubscript.ts

@@ -6,6 +6,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleSubscript(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleSubscript',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleSuperscript.ts

@@ -6,6 +6,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleSuperscript(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleSuperscript',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/segment/toggleUnderline.ts

@@ -6,6 +6,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param editor The editor to operate on
  */
 export default function toggleUnderline(editor: IContentModelEditor) {
+    editor.focus();
+
     formatSegmentWithContentModel(
         editor,
         'toggleUnderline',

packages-content-model/roosterjs-content-model-editor/lib/publicApi/table/editTable.ts

@@ -31,6 +31,8 @@ import {
  * @param operation The table operation to apply
  */
 export default function editTable(editor: IContentModelEditor, operation: TableOperation) {
+    editor.focus();
+
     formatWithContentModel(editor, 'editTable', model => {
         const [tableModel, path] = getFirstSelectedTable(model);
 

packages-content-model/roosterjs-content-model-editor/lib/publicApi/table/formatTable.ts

@@ -15,6 +15,8 @@ export default function formatTable(
     format: TableMetadataFormat,
     keepCellShade?: boolean
 ) {
+    editor.focus();
+
     formatWithContentModel(editor, 'formatTable', model => {
         const [tableModel] = getFirstSelectedTable(model);
 

packages-content-model/roosterjs-content-model-editor/lib/publicApi/table/insertTable.ts

@@ -25,6 +25,8 @@ export default function insertTable(
     rows: number,
     format?: Partial<TableMetadataFormat>
 ) {
+    editor.focus();
+
     formatWithContentModel(editor, 'insertTable', (model, context) => {
         const insertPosition = deleteSelection(model, [], context).insertPoint;
 

packages-content-model/roosterjs-content-model-editor/lib/publicApi/table/setTableCellShade.ts

@@ -11,6 +11,8 @@ import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor'
  * @param color The color to set. Pass null to remove existing shade color
  */
 export default function setTableCellShade(editor: IContentModelEditor, color: string | null) {
+    editor.focus();
+
     formatWithContentModel(editor, 'setTableCellShade', model => {
         const [table] = getFirstSelectedTable(model);
 

packages-content-model/roosterjs-content-model-editor/lib/publicApi/utils/formatWithContentModel.ts

@@ -35,8 +35,6 @@ export function formatWithContentModel(
         selectionOverride,
     } = options || {};
 
-    editor.focus();
-
     const model = editor.createContentModel(undefined /*option*/, selectionOverride);
     const context: FormatWithContentModelContext = {
         newEntities: [],

packages-content-model/roosterjs-content-model-editor/lib/publicApi/utils/paste.ts

@@ -48,6 +48,8 @@ export default function paste(
         clipboardData.snapshotBeforePaste = editor.getContent(GetContentMode.RawHTMLWithSelection);
     }
 
+    editor.focus();
+
     formatWithContentModel(
         editor,
         'Paste',

packages-content-model/roosterjs-content-model-editor/test/publicApi/format/clearFormatTest.ts

@@ -7,7 +7,9 @@ import { IContentModelEditor } from '../../../lib/publicTypes/IContentModelEdito
 
 describe('clearFormat', () => {
     it('Clear format', () => {
-        const editor = ({} as any) as IContentModelEditor;
+        const editor = ({
+            focus: () => {},
+        } as any) as IContentModelEditor;
         const model = ('Model' as any) as ContentModelDocument;
 
         spyOn(formatWithContentModel, 'formatWithContentModel').and.callFake(

packages-content-model/roosterjs-content-model-editor/test/publicApi/list/setListStartNumberTest.ts

@@ -21,7 +21,12 @@ describe('setListStartNumber', () => {
             }
         );
 
-        setListStartNumber(null!, 2);
+        setListStartNumber(
+            {
+                focus: () => {},
+            } as any,
+            2
+        );
 
         expect(formatWithContentModel.formatWithContentModel).toHaveBeenCalledTimes(1);
         expect(input).toEqual(expectedModel);

packages-content-model/roosterjs-content-model-editor/test/publicApi/list/setListStyleTest.ts

@@ -22,7 +22,12 @@ describe('setListStyle', () => {
             }
         );
 
-        setListStyle(null!, style);
+        setListStyle(
+            {
+                focus: () => {},
+            } as any,
+            style
+        );
 
         expect(formatWithContentModel.formatWithContentModel).toHaveBeenCalledTimes(1);
         expect(input).toEqual(expectedModel);