Fix #1752, rename header to heading

demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx

@@ -37,7 +37,7 @@ import { removeLinkButton } from './removeLinkButton';
 import { Ribbon, RibbonButton, RibbonPlugin } from 'roosterjs-react';
 import { rtlButton } from './rtlButton';
 import { setBulletedListStyleButton } from './setBulletedListStyleButton';
-import { setHeaderLevelButton } from './setHeaderLevelButton';
+import { setHeadingLevelButton } from './setHeadingLevelButton';
 import { setNumberedListStyleButton } from './setNumberedListStyleButton';
 import { setTableCellShadeButton } from './setTableCellShadeButton';
 import { setTableHeaderButton } from './setTableHeaderButton';
@@ -84,7 +84,7 @@ const buttons = [
     superscriptButton,
     subscriptButton,
     strikethroughButton,
-    setHeaderLevelButton,
+    setHeadingLevelButton,
     codeButton,
     ltrButton,
     rtlButton,

demo/scripts/controls/ribbonButtons/contentModel/setHeadingLevelButton.ts

@@ -0,0 +1,36 @@
+import { isContentModelEditor, setHeadingLevel } from 'roosterjs-content-model-editor';
+import {
+    getButtons,
+    HeadingButtonStringKey,
+    KnownRibbonButtonKey,
+    RibbonButton,
+} from 'roosterjs-react';
+
+const originalHeadingButton: RibbonButton<HeadingButtonStringKey> = getButtons([
+    KnownRibbonButtonKey.Heading,
+])[0] as RibbonButton<HeadingButtonStringKey>;
+const keys: HeadingButtonStringKey[] = [
+    'buttonNameNoHeading',
+    'buttonNameHeading1',
+    'buttonNameHeading2',
+    'buttonNameHeading3',
+    'buttonNameHeading4',
+    'buttonNameHeading5',
+    'buttonNameHeading6',
+];
+
+export const setHeadingLevelButton: RibbonButton<HeadingButtonStringKey> = {
+    dropDownMenu: {
+        ...originalHeadingButton.dropDownMenu,
+    },
+    key: 'buttonNameHeading',
+    unlocalizedText: 'Heading',
+    iconName: 'Header1',
+    onClick: (editor, key) => {
+        const headingLevel = keys.indexOf(key);
+
+        if (isContentModelEditor(editor) && headingLevel >= 0) {
+            setHeadingLevel(editor, headingLevel as 0 | 1 | 2 | 3 | 4 | 5 | 6);
+        }
+    },
+};

demo/scripts/controls/sidePane/formatState/FormatStatePane.tsx

@@ -83,8 +83,8 @@ export default class FormatStatePane extends React.Component<
                             {this.renderSpan(format.tableHasHeader, 'Table Has Header')}
                             <span
                                 className={
-                                    format.headerLevel == 0 && styles.inactive
-                                }>{`Header ${format.headerLevel}`}</span>
+                                    format.headingLevel == 0 && styles.inactive
+                                }>{`Heading ${format.headingLevel}`}</span>
                         </td>
                     </tr>
                     <tr>

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/headingProcessor.ts

@@ -20,8 +20,8 @@ export const headingProcessor: ElementProcessor<HTMLHeadingElement> = (group, el
             parseFormat(element, context.formatParsers.segmentOnBlock, segmentFormat, context);
 
             // These formats are already declared on heading element, no need to keep them in context.
-            // And we should not duplicate them in context, either. Because when we want to turn off header,
-            // inner text should not keep those text format from header.
+            // And we should not duplicate them in context, either. Because when we want to turn off heading,
+            // inner text should not keep those text format from heading.
             getObjectKeys(segmentFormat).forEach(key => {
                 delete context.segmentFormat[key];
             });

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/defaultStyles.ts

@@ -161,7 +161,7 @@ export const defaultImplicitFormatMap: DefaultImplicitFormatMap = {
     },
     h4: {
         fontWeight: 'bold',
-        fontSize: '1em', // Set this default value here to overwrite existing font size when change header level
+        fontSize: '1em', // Set this default value here to overwrite existing font size when change heading level
     },
     h5: {
         fontWeight: 'bold',

packages-content-model/roosterjs-content-model-dom/test/domToModel/processors/headingProcessorTest.ts

@@ -87,7 +87,7 @@ describe('headingProcessor', () => {
         });
     });
 
-    it('header with format from context', () => {
+    it('heading with format from context', () => {
         const group = createContentModelDocument();
         const h1 = document.createElement('h1');
 

packages-content-model/roosterjs-content-model-editor/lib/index.ts

@@ -56,7 +56,7 @@ export { default as getSelectedSegments } from './publicApi/selection/getSelecte
 export { default as setIndentation } from './publicApi/block/setIndentation';
 export { default as setAlignment } from './publicApi/block/setAlignment';
 export { default as setDirection } from './publicApi/block/setDirection';
-export { default as setHeaderLevel } from './publicApi/block/setHeaderLevel';
+export { default as setHeadingLevel } from './publicApi/block/setHeadingLevel';
 export { default as toggleBlockQuote } from './publicApi/block/toggleBlockQuote';
 export { default as setSpacing } from './publicApi/block/setSpacing';
 export { default as setImageBorder } from './publicApi/image/setImageBorder';

packages-content-model/roosterjs-content-model-editor/lib/modelApi/common/retrieveModelFormatState.ts

@@ -152,12 +152,13 @@ function retrieveParagraphFormat(
     paragraph: ContentModelParagraph,
     isFirst: boolean
 ) {
-    const headerLevel = parseInt((paragraph.decorator?.tagName || '').substring(1));
-    const validHeaderLevel = headerLevel >= 1 && headerLevel <= 6 ? headerLevel : undefined;
+    const headingLevel = parseInt((paragraph.decorator?.tagName || '').substring(1));
+    const validHeadingLevel = headingLevel >= 1 && headingLevel <= 6 ? headingLevel : undefined;
 
     mergeValue(result, 'marginBottom', paragraph.format.marginBottom, isFirst);
     mergeValue(result, 'marginTop', paragraph.format.marginTop, isFirst);
-    mergeValue(result, 'headerLevel', validHeaderLevel, isFirst);
+    mergeValue(result, 'headingLevel', validHeadingLevel, isFirst);
+    mergeValue(result, 'headerLevel', validHeadingLevel, isFirst);
     mergeValue(result, 'textAlign', paragraph.format.textAlign, isFirst);
     mergeValue(result, 'direction', paragraph.format.direction, isFirst);
 }

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

@@ -6,29 +6,29 @@ import {
     ContentModelSegmentFormat,
 } from 'roosterjs-content-model-types';
 
-type HeaderLevelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingLevelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 /**
- * Set header level of selected paragraphs
- * @param editor The editor to set header level to
- * @param headerLevel Level of header, from 1 to 6. Set to 0 means set it back to a regular paragraph
+ * Set heading level of selected paragraphs
+ * @param editor The editor to set heading level to
+ * @param headingLevel Level of heading, from 1 to 6. Set to 0 means set it back to a regular paragraph
  */
-export default function setHeaderLevel(
+export default function setHeadingLevel(
     editor: IContentModelEditor,
-    headerLevel: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    headingLevel: 0 | 1 | 2 | 3 | 4 | 5 | 6
 ) {
-    formatParagraphWithContentModel(editor, 'setHeaderLevel', para => {
+    formatParagraphWithContentModel(editor, 'setHeadingLevel', para => {
         const tagName =
-            headerLevel > 0
-                ? (('h' + headerLevel) as HeaderLevelTags | null)
-                : getExistingHeaderHeaderTag(para.decorator);
-        const headerStyle =
+            headingLevel > 0
+                ? (('h' + headingLevel) as HeadingLevelTags | null)
+                : getExistingHeadingTag(para.decorator);
+        const headingStyle =
             (tagName && (defaultImplicitFormatMap[tagName] as ContentModelSegmentFormat)) || {};
 
-        if (headerLevel > 0) {
+        if (headingLevel > 0) {
             para.decorator = {
                 tagName: tagName!,
-                format: { ...headerStyle },
+                format: { ...headingStyle },
             };
 
             // Remove existing formats since tags have default font size and weight
@@ -42,11 +42,11 @@ export default function setHeaderLevel(
     });
 }
 
-function getExistingHeaderHeaderTag(
+function getExistingHeadingTag(
     decorator?: ContentModelParagraphDecorator
-): HeaderLevelTags | null {
+): HeadingLevelTags | null {
     const tag = decorator?.tagName || '';
     const level = parseInt(tag.substring(1));
 
-    return level >= 1 && level <= 6 ? (tag as HeaderLevelTags) : null;
+    return level >= 1 && level <= 6 ? (tag as HeadingLevelTags) : null;
 }

packages-content-model/roosterjs-content-model-editor/test/modelApi/common/retrieveModelFormatStateTest.ts

@@ -139,7 +139,7 @@ describe('retrieveModelFormatState', () => {
         });
     });
 
-    it('Single selection with header', () => {
+    it('Single selection with heading', () => {
         const model = createContentModelDocument();
         const result: ContentModelFormatState = {};
         const para = createParagraph(false, undefined, undefined, {
@@ -157,6 +157,7 @@ describe('retrieveModelFormatState', () => {
 
         expect(result).toEqual({
             ...baseFormatResult,
+            headingLevel: 1,
             headerLevel: 1,
             isBlockQuote: false,
             isCodeInline: false,
@@ -275,7 +276,7 @@ describe('retrieveModelFormatState', () => {
         });
     });
 
-    it('With table header', () => {
+    it('With table heading', () => {
         const model = createContentModelDocument();
         const result: ContentModelFormatState = {};
         const table = createTable(1);

packages-content-model/roosterjs-content-model-editor/test/publicApi/block/setHeaderLevelTest.ts → packages-content-model/roosterjs-content-model-editor/test/publicApi/block/setHeadingLevelTest.ts

@@ -1,16 +1,16 @@
-import setHeaderLevel from '../../../lib/publicApi/block/setHeaderLevel';
+import setHeadingLevel from '../../../lib/publicApi/block/setHeadingLevel';
 import { ContentModelDocument } from 'roosterjs-content-model-types';
 import { paragraphTestCommon } from './paragraphTestCommon';
 
-describe('setHeaderLevel to 1', () => {
+describe('setHeadingLevel to 1', () => {
     function runTest(
         model: ContentModelDocument,
         result: ContentModelDocument,
         calledTimes: number
     ) {
         paragraphTestCommon(
-            'setHeaderLevel',
-            editor => setHeaderLevel(editor, 1),
+            'setHeadingLevel',
+            editor => setHeadingLevel(editor, 1),
             model,
             result,
             calledTimes
@@ -171,7 +171,7 @@ describe('setHeaderLevel to 1', () => {
         );
     });
 
-    it('With existing header', () => {
+    it('With existing heading', () => {
         runTest(
             {
                 blockGroupType: 'Document',
@@ -229,15 +229,15 @@ describe('setHeaderLevel to 1', () => {
     });
 });
 
-describe('setHeaderLevel to 0', () => {
+describe('setHeadingLevel to 0', () => {
     function runTest(
         model: ContentModelDocument,
         result: ContentModelDocument,
         calledTimes: number
     ) {
         paragraphTestCommon(
-            'setHeaderLevel',
-            editor => setHeaderLevel(editor, 0),
+            'setHeadingLevel',
+            editor => setHeadingLevel(editor, 0),
             model,
             result,
             calledTimes
@@ -344,7 +344,7 @@ describe('setHeaderLevel to 0', () => {
         );
     });
 
-    it('With existing header', () => {
+    it('With existing heading', () => {
         runTest(
             {
                 blockGroupType: 'Document',

packages-content-model/roosterjs-content-model-types/lib/block/ContentModelParagraph.ts

@@ -21,7 +21,7 @@ export interface ContentModelParagraph
     segmentFormat?: ContentModelSegmentFormat;
 
     /**
-     * Header info for this paragraph if it is a header
+     * Decorator info for this paragraph, used by heading and P tags
      */
     decorator?: ContentModelParagraphDecorator;
 

packages-content-model/roosterjs-content-model-types/lib/decorator/ContentModelParagraphDecorator.ts

@@ -3,8 +3,8 @@ import { ContentModelWithFormat } from '../format/ContentModelWithFormat';
 
 /**
  * Represent decorator for a paragraph in Content Model
- * A decorator of paragraph can represent a header, or a P tag that act likes a paragraph but with some extra format info
- * since header is also a kind of paragraph, with some extra information
+ * A decorator of paragraph can represent a heading, or a P tag that act likes a paragraph but with some extra format info
+ * since heading is also a kind of paragraph, with some extra information
  */
 export interface ContentModelParagraphDecorator
     extends ContentModelWithFormat<ContentModelSegmentFormat> {