Update the Entity's format when applying format on the content inside the Entity (#3196)

* Update the Entity's format when applying format on the content inside the Entity

* fix test

Author: haven2world

packages/roosterjs-content-model-api/lib/publicApi/utils/formatSegmentWithContentModel.ts

@@ -92,7 +92,13 @@ export function formatSegmentWithContentModel(
 
             segmentAndParagraphs.forEach(item => {
                 if (item[0].segmentType == 'Entity') {
-                    expandEntitySelections(editor, item[0], formatsAndSegments, modelsFromEntities);
+                    expandEntitySelections(
+                        editor,
+                        item[0],
+                        formatsAndSegments,
+                        modelsFromEntities,
+                        item[1]
+                    );
                 } else {
                     formatsAndSegments.push([item[0].format, item[0], item[1]]);
                 }
@@ -148,7 +154,8 @@ function expandEntitySelections(
         ShallowMutableContentModelSegment | null,
         ShallowMutableContentModelParagraph | null
     ][],
-    modelsFromEntities: [ContentModelEntity, FormattableRoot, ContentModelDocument][]
+    modelsFromEntities: [ContentModelEntity, FormattableRoot, ContentModelDocument][],
+    paragraph: ShallowMutableContentModelParagraph | null
 ) {
     const { id, entityType: type, isReadonly } = entity.entityFormat;
 
@@ -185,6 +192,9 @@ function expandEntitySelections(
                 modelsFromEntities.push([entity, root, model]);
             }
         });
+        if (formattableRoots.length > 0) {
+            formatsAndSegments.push([entity.format, entity, paragraph]);
+        }
     }
 }
 

packages/roosterjs-content-model-api/test/publicApi/utils/formatSegmentWithContentModelTest.ts

@@ -440,7 +440,9 @@ describe('formatSegmentWithContentModel', () => {
                 {
                     segmentType: 'Entity',
                     blockType: 'Entity',
-                    format: {},
+                    format: {
+                        fontFamily: 'test',
+                    },
                     entityFormat: { id: 'TestEntity1', entityType: 'TestEntity', isReadonly: true },
                     wrapper: div,
                     isSelected: true,
@@ -449,7 +451,7 @@ describe('formatSegmentWithContentModel', () => {
         });
         expect(formatContentModel).toHaveBeenCalledTimes(1);
         expect(formatResult).toBeTrue();
-        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback).toHaveBeenCalledTimes(2);
         expect(triggerEvent).toHaveBeenCalledTimes(1);
         expect(triggerEvent).toHaveBeenCalledWith('entityOperation', {
             entity: { id: 'TestEntity1', type: 'TestEntity', isReadonly: true, wrapper: div },