Merge pull request #2138 from microsoft/u/juliaroldi/add-font-weight-…

…format-state Add font weight to format state
microsoft · Oct 16, 2023 · d0924ae · d0924ae
2 parents 6e2af84 + a5e76dd
commit d0924ae
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 1 deletion.
diff --git a/demo/scripts/controls/sidePane/formatState/FormatStatePane.tsx b/demo/scripts/controls/sidePane/formatState/FormatStatePane.tsx
@@ -69,6 +69,7 @@ export default class FormatStatePane extends React.Component<
                             {this.renderSpan(format.isStrikeThrough, 'Strike')}
                             {this.renderSpan(format.isSubscript, 'Subscript')}
                             {this.renderSpan(format.isSuperscript, 'Superscript')}
+                            {`Font-weight: ${format.fontWeight}`}
                         </td>
                     </tr>
                     <tr>

diff --git a/...tent-model/roosterjs-content-model-editor/lib/modelApi/common/retrieveModelFormatState.ts b/...tent-model/roosterjs-content-model-editor/lib/modelApi/common/retrieveModelFormatState.ts
@@ -151,6 +151,7 @@ function retrieveSegmentFormat(
     mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst);
     mergeValue(result, 'backgroundColor', mergedFormat.backgroundColor, isFirst);
     mergeValue(result, 'textColor', mergedFormat.textColor, isFirst);
+    mergeValue(result, 'fontWeight', mergedFormat.fontWeight, isFirst);
 
     //TODO: handle block owning segments with different line-heights
     mergeValue(result, 'lineHeight', mergedFormat.lineHeight, isFirst);

diff --git a/...model/roosterjs-content-model-editor/test/modelApi/common/retrieveModelFormatStateTest.ts b/...model/roosterjs-content-model-editor/test/modelApi/common/retrieveModelFormatStateTest.ts
@@ -45,6 +45,7 @@ describe('retrieveModelFormatState', () => {
         isUnderline: true,
         canUnlink: false,
         canAddImageAltText: false,
+        fontWeight: 'bold',
     };
 
     it('Empty model', () => {
@@ -332,6 +333,7 @@ describe('retrieveModelFormatState', () => {
             fontSize: '7.5pt',
             backgroundColor: 'red',
             textColor: 'green',
+            fontWeight: 'bold',
         });
     });
 
@@ -491,6 +493,7 @@ describe('retrieveModelFormatState', () => {
             isUnderline: true,
             isStrikeThrough: true,
             fontSize: '7.5pt',
+            fontWeight: 'bold',
         });
     });
 

diff --git a/packages/roosterjs-editor-core/lib/coreApi/getStyleBasedFormatState.ts b/packages/roosterjs-editor-core/lib/coreApi/getStyleBasedFormatState.ts
@@ -39,6 +39,7 @@ export const getStyleBasedFormatState: GetStyleBasedFormatState = (
               'margin-bottom',
               'text-align',
               'direction',
+              'font-weight',
           ])
         : [];
     const { contentDiv, darkColorHandler } = core;
@@ -90,5 +91,6 @@ export const getStyleBasedFormatState: GetStyleBasedFormatState = (
         marginBottom: styles[6],
         textAlign: styles[7],
         direction: styles[8],
+        fontWeight: styles[9],
     };
 };
diff --git a/packages/roosterjs-editor-core/test/coreApi/getStyleBasedFormatStateTest.ts b/packages/roosterjs-editor-core/test/coreApi/getStyleBasedFormatStateTest.ts
@@ -17,7 +17,7 @@ describe('getStyleBasedFormatState', () => {
     it('light mode', () => {
         const core = createEditorCore(div, {});
         div.innerHTML =
-            '<div style="font-family: arial; font-size: 12pt; color: black; background-color: white"><div id="div1">test</div></div>';
+            '<div style="font-family: arial; font-size: 12pt; color: black; background-color: white; font-weight: 600"><div id="div1">test</div></div>';
         const node = document.getElementById('div1');
         const style = getStyleBasedFormatState(core, node);
         expect(style.fontName).toBe('arial');
@@ -26,6 +26,7 @@ describe('getStyleBasedFormatState', () => {
         expect(style.backgroundColor).toBe('white');
         expect(style.textColors).toBeUndefined();
         expect(style.backgroundColors).toBeUndefined();
+        expect(style.fontWeight).toBe('600');
     });
 
     it('dark mode, no color node', () => {

diff --git a/packages/roosterjs-editor-types/lib/interface/FormatState.ts b/packages/roosterjs-editor-types/lib/interface/FormatState.ts
@@ -174,6 +174,11 @@ export interface StyleBasedFormatState {
      * Direction of the element ('ltr' or 'rtl')
      */
     direction?: string;
+
+    /**
+     * Font weight
+     */
+    fontWeight?: string;
 }
 
 /**