ContentModel: Improve Divider

demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BackgroundColorFormatRenderer } from './formatPart/BackgroundColorFormatRenderer';
+import { BorderFormatRenderers } from './formatPart/BorderFormatRenderers';
 import { ContentModelBlockFormat, ContentModelSegmentFormat } from 'roosterjs-content-model';
 import { DirectionFormatRenderers } from './formatPart/DirectionFormatRenderers';
 import { FormatRenderer } from './utils/FormatRenderer';
@@ -16,6 +17,7 @@ const BlockFormatRenders: FormatRenderer<ContentModelBlockFormat>[] = [
     PaddingFormatRenderer,
     LineHeightFormatRenderer,
     WhiteSpaceFormatRenderer,
+    ...BorderFormatRenderers,
 ];
 
 export function BlockFormatView(props: { format: ContentModelSegmentFormat }) {

demo/scripts/controls/contentModel/components/model/ContentModelDividerView.scss

@@ -1,3 +1,3 @@
 .modelDivider {
-    background-color: #ccf;
+    background-color: #c0f;
 }

demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx

@@ -1,10 +1,31 @@
 import * as React from 'react';
-import { BlockFormatView } from '../format/BlockFormatView';
-import { ContentModelDivider } from 'roosterjs-content-model';
+import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
+import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
+import { ContentModelDivider, ContentModelDividerFormat } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
+import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
+import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
+import { FormatRenderer } from '../format/utils/FormatRenderer';
+import { FormatView } from '../format/FormatView';
+import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
+import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
+import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
+import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
 import { useProperty } from '../../hooks/useProperty';
+import { WhiteSpaceFormatRenderer } from '../format/formatPart/WhiteSpaceFormatRenderer';
 
 const styles = require('./ContentModelDividerView.scss');
+const DividerFormatRenders: FormatRenderer<ContentModelDividerFormat>[] = [
+    BackgroundColorFormatRenderer,
+    ...DirectionFormatRenderers,
+    MarginFormatRenderer,
+    PaddingFormatRenderer,
+    LineHeightFormatRenderer,
+    WhiteSpaceFormatRenderer,
+    ...BorderFormatRenderers,
+    DisplayFormatRenderer,
+    ...SizeFormatRenderers,
+];
 
 export function ContentModelDividerView(props: { divider: ContentModelDivider }) {
     const { divider } = props;
@@ -29,7 +50,7 @@ export function ContentModelDividerView(props: { divider: ContentModelDivider })
     }, [tagName]);
 
     const getFormat = React.useCallback(() => {
-        return <BlockFormatView format={divider.format} />;
+        return <FormatView format={divider.format} renderers={DividerFormatRenders} />;
     }, [divider.format]);
 
     return (

demo/scripts/controls/contentModel/components/model/ContentModelQuoteView.tsx

@@ -1,21 +1,14 @@
 import * as React from 'react';
-import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
+import { BlockFormatView } from '../format/BlockFormatView';
 import { BlockGroupContentView } from './BlockGroupContentView';
-import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
 import { ContentModelView } from '../ContentModelView';
-import { DirectionFormatRenderers } from '../format/formatPart/DirectionFormatRenderers';
 import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
 import { FontSizeFormatRenderer } from '../format/formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
-import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
-import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
-import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
-import { WhiteSpaceFormatRenderer } from '../format/formatPart/WhiteSpaceFormatRenderer';
 import {
     ContentModelQuote,
-    ContentModelQuoteFormat,
     ContentModelSegmentFormat,
     hasSelectionInBlock,
 } from 'roosterjs-content-model';
@@ -27,15 +20,6 @@ import {
 
 const styles = require('./ContentModelQuoteView.scss');
 
-const QuoteBlockFormatRenders: FormatRenderer<ContentModelQuoteFormat>[] = [
-    BackgroundColorFormatRenderer,
-    ...DirectionFormatRenderers,
-    MarginFormatRenderer,
-    PaddingFormatRenderer,
-    LineHeightFormatRenderer,
-    WhiteSpaceFormatRenderer,
-    ...BorderFormatRenderers,
-];
 const QuoteSegmentFormatRenders: FormatRenderer<ContentModelSegmentFormat>[] = [
     TextColorFormatRenderer,
     FontSizeFormatRenderer,
@@ -54,7 +38,7 @@ export function ContentModelQuoteView(props: { quote: ContentModelQuote }) {
     const getFormat = React.useCallback(() => {
         return (
             <>
-                <FormatView format={quote.format} renderers={QuoteBlockFormatRenders} />
+                <BlockFormatView format={quote.format} />
                 <FormatView
                     format={quote.quoteSegmentFormat}
                     renderers={QuoteSegmentFormatRenders}

demo/scripts/controls/sidePane/contentModel/ContentModelPanePlugin.ts

@@ -34,7 +34,18 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
     }
 
     onPluginEvent(e: PluginEvent) {
-        if (e.eventType == PluginEventType.Input || e.eventType == PluginEventType.ContentChanged) {
+        if (e.eventType == PluginEventType.ContentChanged && e.source == 'RefreshModel') {
+            this.getComponent(component => {
+                const model = isContentModelEditor(this.editor)
+                    ? this.editor.createContentModel()
+                    : null;
+                component.setContentModel(model);
+                setCurrentContentModel(this.editor, model);
+            });
+        } else if (
+            e.eventType == PluginEventType.Input ||
+            e.eventType == PluginEventType.ContentChanged
+        ) {
             this.onModelChange();
         }
 

packages/roosterjs-content-model/lib/domToModel/processors/hrProcessor.ts

@@ -14,7 +14,7 @@ export const hrProcessor: ElementProcessor<HTMLHRElement> = (group, element, con
             paragraph: 'shallowClone',
         },
         () => {
-            parseFormat(element, context.formatParsers.block, context.blockFormat, context);
+            parseFormat(element, context.formatParsers.divider, context.blockFormat, context);
 
             const hr = createDivider('hr', context.blockFormat);
 

packages/roosterjs-content-model/lib/domToModel/processors/knownElementProcessor.ts

@@ -1,12 +1,13 @@
 import { addBlock } from '../../modelApi/common/addBlock';
+import { ContentModelBlockFormat } from '../../publicTypes/format/ContentModelBlockFormat';
 import { ContentModelDivider } from '../../publicTypes/block/ContentModelDivider';
 import { ContentModelParagraphDecorator } from '../../publicTypes/decorator/ContentModelParagraphDecorator';
 import { createDivider } from '../../modelApi/creators/createDivider';
 import { createParagraph } from '../../modelApi/creators/createParagraph';
 import { createParagraphDecorator } from '../../modelApi/creators/createParagraphDecorator';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
+import { extractBorderValues } from '../../domUtils/borderValues';
 import { isBlockElement } from '../utils/isBlockElement';
-import { MarginFormat } from '../../publicTypes/format/formatParts/MarginFormat';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
 
@@ -58,8 +59,8 @@ export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, elem
                         );
                         break;
                     default:
-                        topDivider = tryCreateDivider(context.blockFormat, 'marginTop');
-                        bottomDivider = tryCreateDivider(context.blockFormat, 'marginBottom');
+                        topDivider = tryCreateDivider(context.blockFormat, true /*isTop*/);
+                        bottomDivider = tryCreateDivider(context.blockFormat, false /*isBottom*/);
 
                         break;
                 }
@@ -101,17 +102,42 @@ export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, elem
 };
 
 function tryCreateDivider(
-    format: MarginFormat,
-    propName: keyof MarginFormat
+    format: ContentModelBlockFormat,
+    isTop: boolean
 ): ContentModelDivider | undefined {
-    const margin = parseInt(format[propName] || '');
+    const marginName: keyof ContentModelBlockFormat = isTop ? 'marginTop' : 'marginBottom';
+    const paddingName: keyof ContentModelBlockFormat = isTop ? 'paddingTop' : 'paddingBottom';
+    const borderName: keyof ContentModelBlockFormat = isTop ? 'borderTop' : 'borderBottom';
+
+    const marginNumber = parseInt(format[marginName] || '');
+    const paddingNumber = parseInt(format[paddingName] || '');
+    const borderString = format[borderName];
+
     let result: ContentModelDivider | undefined;
 
-    if (margin > 0) {
-        result = createDivider('div', { [propName]: format[propName] });
+    if (marginNumber > 0 || paddingNumber > 0 || borderString) {
+        result = createDivider('div');
+
+        if (marginNumber > 0) {
+            result.format[marginName] = format[marginName];
+        }
+
+        if (paddingNumber > 0) {
+            result.format[paddingName] = format[paddingName];
+        }
+
+        if (borderString) {
+            const border = extractBorderValues(borderString);
+
+            if (border.style && border.style != 'none') {
+                result.format[borderName] = borderString;
+            }
+        }
     }
 
-    delete format[propName];
+    delete format[marginName];
+    delete format[paddingName];
+    delete format[borderName];
 
     return result;
 }

packages/roosterjs-content-model/lib/domToModel/processors/quoteProcessor.ts

@@ -1,5 +1,5 @@
 import { addBlock } from '../../modelApi/common/addBlock';
-import { ContentModelQuoteFormat } from '../../publicTypes/format/ContentModelQuoteFormat';
+import { ContentModelBlockFormat } from '../../publicTypes/format/ContentModelBlockFormat';
 import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
 import { createQuote } from '../../modelApi/creators/createQuote';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
@@ -20,10 +20,10 @@ export const quoteProcessor: ElementProcessor<HTMLQuoteElement> = (group, elemen
                 segment: 'shallowCloneForBlock',
             },
             () => {
-                const quoteFormat: ContentModelQuoteFormat = {};
+                const quoteFormat: ContentModelBlockFormat = {};
                 const segmentFormat: ContentModelSegmentFormat = {};
 
-                parseFormat(element, context.formatParsers.quote, quoteFormat, context);
+                parseFormat(element, context.formatParsers.block, quoteFormat, context);
                 parseFormat(element, context.formatParsers.segmentOnBlock, segmentFormat, context);
 
                 const quote = createQuote(quoteFormat, segmentFormat);

packages/roosterjs-content-model/lib/formatHandlers/common/borderFormatHandler.ts

@@ -20,7 +20,7 @@ export const borderFormatHandler: FormatHandler<BorderFormat> = {
             const value = element.style[key];
 
             if (value) {
-                format[key] = value;
+                format[key] = value == 'none' ? '' : value;
             }
         });
     },

packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts

@@ -78,10 +78,20 @@ const defaultFormatHandlerMap: FormatHandlers = {
     wordBreak: wordBreakFormatHandler,
 };
 
+const blockFormatHandlers: (keyof FormatHandlerTypeMap)[] = [
+    'backgroundColor',
+    'direction',
+    'margin',
+    'padding',
+    'lineHeight',
+    'whiteSpace',
+    'border',
+];
+
 const defaultFormatKeysPerCategory: {
     [key in keyof ContentModelFormatMap]: (keyof FormatHandlerTypeMap)[];
 } = {
-    block: ['backgroundColor', 'direction', 'margin', 'padding', 'lineHeight', 'whiteSpace'],
+    block: blockFormatHandlers,
     listItem: ['listItemThread', 'listItemMetadata'],
     listLevel: ['listType', 'listLevelThread', 'listLevelMetadata'],
     segment: [
@@ -118,15 +128,7 @@ const defaultFormatKeysPerCategory: {
     image: ['id', 'size', 'margin', 'padding', 'borderBox'],
     link: ['link'],
     dataset: ['dataset'],
-    quote: [
-        'backgroundColor',
-        'direction',
-        'margin',
-        'padding',
-        'lineHeight',
-        'whiteSpace',
-        'border',
-    ],
+    divider: [...blockFormatHandlers, 'display', 'size'],
 };
 
 /**

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

@@ -79,7 +79,7 @@ export { ContentModelListItemLevelFormat } from './publicTypes/format/ContentMod
 export { ContentModelImageFormat } from './publicTypes/format/ContentModelImageFormat';
 export { ContentModelWithFormat } from './publicTypes/format/ContentModelWithFormat';
 export { ContentModelWithDataset } from './publicTypes/format/ContentModelWithDataset';
-export { ContentModelQuoteFormat } from './publicTypes/format/ContentModelQuoteFormat';
+export { ContentModelDividerFormat } from './publicTypes/format/ContentModelDividerFormat';
 
 export { VerticalAlignFormat } from './publicTypes/format/formatParts/VerticalAlignFormat';
 export { BackgroundColorFormat } from './publicTypes/format/formatParts/BackgroundColorFormat';

packages/roosterjs-content-model/lib/modelApi/block/toggleModelBlockQuote.ts

@@ -1,10 +1,10 @@
 import { areSameFormats } from '../../domToModel/utils/areSameFormats';
 import { ContentModelBlock } from '../../publicTypes/block/ContentModelBlock';
+import { ContentModelBlockFormat } from '../../publicTypes/format/ContentModelBlockFormat';
 import { ContentModelBlockGroup } from '../../publicTypes/group/ContentModelBlockGroup';
 import { ContentModelDocument } from '../../publicTypes/group/ContentModelDocument';
 import { ContentModelListItem } from '../../publicTypes/group/ContentModelListItem';
 import { ContentModelQuote } from '../../publicTypes/group/ContentModelQuote';
-import { ContentModelQuoteFormat } from '../../publicTypes/format/ContentModelQuoteFormat';
 import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
 import { createQuote } from '../creators/createQuote';
 import { getOperationalBlocks, OperationalBlocks } from '../selection/collectSelections';
@@ -18,7 +18,7 @@ import { wrapBlockStep1, WrapBlockStep1Result, wrapBlockStep2 } from '../common/
  */
 export function toggleModelBlockQuote(
     model: ContentModelDocument,
-    quoteFormat: ContentModelQuoteFormat,
+    quoteFormat: ContentModelBlockFormat,
     segmentFormat: ContentModelSegmentFormat
 ): boolean {
     const paragraphOfQuote = getOperationalBlocks<ContentModelQuote | ContentModelListItem>(
@@ -67,7 +67,7 @@ export function toggleModelBlockQuote(
 
 function canMergeQuote(
     target: ContentModelBlock,
-    quoteFormat: ContentModelQuoteFormat,
+    quoteFormat: ContentModelBlockFormat,
     segmentFormat: ContentModelSegmentFormat
 ): target is ContentModelQuote {
     return (

packages/roosterjs-content-model/lib/modelApi/creators/createQuote.ts

@@ -1,12 +1,12 @@
+import { ContentModelBlockFormat } from '../../publicTypes/format/ContentModelBlockFormat';
 import { ContentModelQuote } from '../../publicTypes/group/ContentModelQuote';
-import { ContentModelQuoteFormat } from '../../publicTypes/format/ContentModelQuoteFormat';
 import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
 
 /**
  * @internal
  */
 export function createQuote(
-    format?: ContentModelQuoteFormat,
+    format?: ContentModelBlockFormat,
     quoteSegmentFormat?: ContentModelSegmentFormat
 ): ContentModelQuote {
     return {

packages/roosterjs-content-model/lib/modelToDom/handlers/handleDivider.ts

@@ -14,7 +14,7 @@ export const handleDivider: ContentModelHandler<ContentModelDivider> = (
 ) => {
     const element = doc.createElement(divider.tagName);
 
-    applyFormat(element, context.formatAppliers.block, divider.format, context);
+    applyFormat(element, context.formatAppliers.divider, divider.format, context);
 
     parent.appendChild(element);
 };

packages/roosterjs-content-model/lib/modelToDom/handlers/handleQuote.ts

@@ -21,7 +21,7 @@ export const handleQuote: ContentModelHandler<ContentModelQuote> = (
         parent.appendChild(blockQuote);
 
         stackFormat(context, QuoteTagName, () => {
-            applyFormat(blockQuote, context.formatAppliers.quote, quote.format, context);
+            applyFormat(blockQuote, context.formatAppliers.block, quote.format, context);
             applyFormat(
                 blockQuote,
                 context.formatAppliers.segmentOnBlock,

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

@@ -1,16 +1,16 @@
-import { ContentModelQuoteFormat } from '../../publicTypes/format/ContentModelQuoteFormat';
+import { ContentModelBlockFormat } from '../../publicTypes/format/ContentModelBlockFormat';
 import { ContentModelSegmentFormat } from '../../publicTypes/format/ContentModelSegmentFormat';
 import { formatWithContentModel } from '../utils/formatWithContentModel';
 import { IExperimentalContentModelEditor } from '../../publicTypes/IExperimentalContentModelEditor';
 import { toggleModelBlockQuote } from '../../modelApi/block/toggleModelBlockQuote';
 
-const DefaultQuoteFormat: ContentModelQuoteFormat = {
+const DefaultQuoteFormat: ContentModelBlockFormat = {
     borderLeft: '3px solid rgb(200, 200, 200)', // TODO: Support RTL
 };
 const DefaultSegmentFormat: ContentModelSegmentFormat = {
     textColor: 'rgb(102, 102, 102)',
 };
-const BuildInQuoteFormat: ContentModelQuoteFormat = {
+const BuildInQuoteFormat: ContentModelBlockFormat = {
     marginTop: '1em',
     marginBottom: '1em',
     marginLeft: '40px',
@@ -28,7 +28,7 @@ const BuildInQuoteFormat: ContentModelQuoteFormat = {
  */
 export default function toggleBlockQuote(
     editor: IExperimentalContentModelEditor,
-    quoteFormat: ContentModelQuoteFormat = DefaultQuoteFormat,
+    quoteFormat: ContentModelBlockFormat = DefaultQuoteFormat,
     segmentFormat: ContentModelSegmentFormat = DefaultSegmentFormat
 ) {
     const fullQuoteFormat = {

packages/roosterjs-content-model/lib/publicTypes/block/ContentModelDivider.ts

@@ -1,10 +1,13 @@
 import { ContentModelBlockBase } from './ContentModelBlockBase';
+import { ContentModelDividerFormat } from '../format/ContentModelDividerFormat';
 import { Selectable } from '../selection/Selectable';
 
 /**
  * Content Model of horizontal divider
  */
-export interface ContentModelDivider extends ContentModelBlockBase<'Divider'>, Selectable {
+export interface ContentModelDivider
+    extends ContentModelBlockBase<'Divider', ContentModelDividerFormat>,
+        Selectable {
     /**
      * Tag name of this element, either HR or DIV
      */