Add support for adding/removing space before/after paragraphs in content model

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

@@ -49,6 +49,7 @@ import {
     tableSplitButton,
 } from './tableEditButtons';
 import { spacingButton } from './spacingButton';
+import { spaceAfterButton, spaceBeforeButton } from './spaceBeforeAfterButtons';
 
 const buttons = [
     formatPainterButton,
@@ -98,6 +99,8 @@ const buttons = [
     changeImageButton,
     imageBoxShadowButton,
     spacingButton,
+    spaceBeforeButton,
+    spaceAfterButton,
 ];
 
 export default function ContentModelRibbon(props: { ribbonPlugin: RibbonPlugin; isRtl: boolean }) {

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

@@ -0,0 +1,49 @@
+import { RibbonButton } from 'roosterjs-react';
+import { getFormatState, isContentModelEditor, setParagraphMargin } from 'roosterjs-content-model';
+
+const spaceAfterButtonKey = 'buttonNameSpaceAfter';
+const spaceBeforeButtonKey = 'buttonNameSpaceBefore';
+
+/**
+ * @internal
+ * "Add space after" button on the format ribbon
+ */
+export const spaceAfterButton: RibbonButton<typeof spaceAfterButtonKey> = {
+    key: spaceAfterButtonKey,
+    unlocalizedText: 'Remove space after',
+    iconName: 'CaretDown8',
+    isChecked: formatState => !formatState.marginBottom || parseInt(formatState.marginBottom) <= 0,
+    onClick: editor => {
+        if (isContentModelEditor(editor)) {
+            const marginBottom = getFormatState(editor).marginBottom;
+            setParagraphMargin(
+                editor,
+                undefined /* marginTop */,
+                parseInt(marginBottom) ? null : '8pt'
+            );
+        }
+        return true;
+    },
+};
+
+/**
+ * @internal
+ * "Add space before" button on the format ribbon
+ */
+export const spaceBeforeButton: RibbonButton<typeof spaceBeforeButtonKey> = {
+    key: spaceBeforeButtonKey,
+    unlocalizedText: 'Add space before',
+    iconName: 'CaretUp8',
+    isChecked: formatState => parseInt(formatState.marginTop) > 0,
+    onClick: editor => {
+        if (isContentModelEditor(editor)) {
+            const marginTop = getFormatState(editor).marginTop;
+            setParagraphMargin(
+                editor,
+                parseInt(marginTop) ? null : '12pt',
+                undefined /* marginBottom */
+            );
+        }
+        return true;
+    },
+};

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

@@ -84,6 +84,8 @@ function retrieveFormatStateInternal(
     result.textColor = format.textColor;
     //TODO: handle block owning segments with different line-heights
     result.lineHeight = paragraph.format.lineHeight || format.lineHeight;
+    result.marginBottom = paragraph.format.marginBottom;
+    result.marginTop = paragraph.format.marginTop;
 
     result.isBold = isBold(format.fontWeight);
     result.isItalic = format.italic;

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

@@ -0,0 +1,34 @@
+import { createParagraphDecorator } from '../../modelApi/creators/createParagraphDecorator';
+import { IContentModelEditor } from '../../publicTypes/IContentModelEditor';
+import { formatParagraphWithContentModel } from '../utils/formatParagraphWithContentModel';
+
+/**
+ * Toggles the current block(s) margin properties.
+ * null deletes any existing value, undefined is ignored
+ * @param editor The editor to operate on
+ * @param marginTop value for top margin
+ * @param marginBottom value for bottom margin
+ */
+export default function setParagraphMargin(
+    editor: IContentModelEditor,
+    marginTop?: string | null,
+    marginBottom?: string | null
+) {
+    formatParagraphWithContentModel(editor, 'setParagraphMargin', para => {
+        if (!para.decorator) {
+            para.decorator = createParagraphDecorator('p');
+        }
+
+        if (marginTop) {
+            para.format.marginTop = marginTop;
+        } else if (marginTop === null) {
+            delete para.format.marginTop;
+        }
+
+        if (marginBottom) {
+            para.format.marginBottom = marginBottom;
+        } else if (marginBottom === null) {
+            delete para.format.marginBottom;
+        }
+    });
+}

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

@@ -41,3 +41,4 @@ export { default as removeLink } from './link/removeLink';
 export { default as adjustLinkSelection } from './link/adjustLinkSelection';
 export { default as setImageAltText } from './image/setImageAltText';
 export { default as adjustImageSelection } from './image/adjustImageSelection';
+export { default as setParagraphMargin } from './block/setParagraphMargin';

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

@@ -41,6 +41,8 @@ describe('retrieveModelFormatState', () => {
         canUnlink: false,
         canAddImageAltText: false,
         lineHeight: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
     };
 
     it('Empty model', () => {
@@ -131,6 +133,29 @@ describe('retrieveModelFormatState', () => {
         });
     });
 
+    it('Single selection with margin format', () => {
+        const model = createContentModelDocument();
+        const result: FormatState = {};
+        const paraFormat = {
+            marginTop: '2px',
+            marginBottom: '5px',
+        };
+        const para = createParagraph(false, paraFormat);
+        const marker = createSelectionMarker(segmentFormat);
+
+        spyOn(iterateSelections, 'iterateSelections').and.callFake((path, callback) => {
+            callback(path, undefined, para, [marker]);
+            return false;
+        });
+
+        retrieveModelFormatState(model, null, result);
+
+        expect(result).toEqual({
+            ...baseFormatResult,
+            ...paraFormat,
+        });
+    });
+
     it('Single selection with table', () => {
         const model = createContentModelDocument();
         const result: FormatState = {};
@@ -331,6 +356,8 @@ describe('retrieveModelFormatState', () => {
             canUnlink: false,
             canAddImageAltText: false,
             lineHeight: undefined,
+            marginTop: undefined,
+            marginBottom: undefined,
         });
     });
 
@@ -443,6 +470,8 @@ describe('retrieveModelFormatState', () => {
             isUnderline: undefined,
             isStrikeThrough: undefined,
             lineHeight: undefined,
+            marginTop: undefined,
+            marginBottom: undefined,
         });
     });
 });