Content Model Support PRE and CODE: step 4

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

@@ -7,13 +7,15 @@ import { FormatView } from './FormatView';
 import { LineHeightFormatRenderer } from './formatPart/LineHeightFormatRenderer';
 import { MarginFormatRenderer } from './formatPart/MarginFormatRenderer';
 import { PaddingFormatRenderer } from './formatPart/PaddingFormatRenderer';
+import { WhiteSpaceFormatRenderer } from './formatPart/WhiteSpaceFormatRenderer';
 
 const BlockFormatRenders: FormatRenderer<ContentModelBlockFormat>[] = [
     BackgroundColorFormatRenderer,
     ...DirectionFormatRenderers,
     MarginFormatRenderer,
     PaddingFormatRenderer,
     LineHeightFormatRenderer,
+    WhiteSpaceFormatRenderer,
 ];
 
 export function BlockFormatView(props: { format: ContentModelSegmentFormat }) {

demo/scripts/controls/contentModel/components/format/formatPart/WhiteSpaceFormatRenderer.ts

@@ -0,0 +1,8 @@
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
+import { WhiteSpaceFormat } from 'roosterjs-content-model';
+
+export const WhiteSpaceFormatRenderer = createTextFormatRenderer<WhiteSpaceFormat>(
+    'White space',
+    format => format.whiteSpace,
+    (format, value) => (format.whiteSpace = value)
+);

packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts

@@ -23,6 +23,7 @@ export const defaultProcessorMap: ElementProcessorMap = {
     blockquote: quoteProcessor,
     br: brProcessor,
     center: knownElementProcessor,
+    code: knownElementProcessor,
     div: knownElementProcessor,
     em: knownElementProcessor,
     font: fontProcessor,
@@ -38,6 +39,7 @@ export const defaultProcessorMap: ElementProcessorMap = {
     li: listItemProcessor,
     ol: listProcessor,
     p: knownElementProcessor,
+    pre: knownElementProcessor,
     s: knownElementProcessor,
     span: knownElementProcessor,
     strike: knownElementProcessor,

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

@@ -44,6 +44,9 @@ export const textProcessor: ElementProcessor<Text> = (
     addTextSegment(group, txt, context);
 };
 
+// When we see these values of white-space style, need to preserve spaces and line-breaks and let browser handle it for us.
+const WhiteSpaceValuesNeedToHandle = ['pre', 'pre-wrap', 'pre-line', 'break-spaces'];
+
 function addTextSegment(group: ContentModelBlockGroup, text: string, context: DomToModelContext) {
     if (text) {
         const lastBlock = group.blocks[group.blocks.length - 1];
@@ -57,7 +60,11 @@ function addTextSegment(group: ContentModelBlockGroup, text: string, context: Do
             areSameFormats(lastSegment.link || {}, context.link.format || {})
         ) {
             lastSegment.text += text;
-        } else if (!hasSpacesOnly(text) || paragraph?.segments.length! > 0) {
+        } else if (
+            !hasSpacesOnly(text) ||
+            paragraph?.segments.length! > 0 ||
+            WhiteSpaceValuesNeedToHandle.indexOf(paragraph?.format.whiteSpace || '') >= 0
+        ) {
             const textModel = createText(text, context.segmentFormat);
 
             if (context.isInSelection) {

packages/roosterjs-content-model/lib/formatHandlers/block/whiteSpaceFormatHandler.ts

@@ -0,0 +1,20 @@
+import { FormatHandler } from '../FormatHandler';
+import { WhiteSpaceFormat } from '../../publicTypes/format/formatParts/WhiteSpaceFormat';
+
+/**
+ * @internal
+ */
+export const whiteSpaceFormatHandler: FormatHandler<WhiteSpaceFormat> = {
+    parse: (format, element, _, defaultStyle) => {
+        const whiteSpace = element.style.whiteSpace || defaultStyle.whiteSpace;
+
+        if (whiteSpace) {
+            format.whiteSpace = whiteSpace;
+        }
+    },
+    apply: (format, element) => {
+        if (format.whiteSpace) {
+            element.style.whiteSpace = format.whiteSpace;
+        }
+    },
+};

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

@@ -29,6 +29,7 @@ import { tableSpacingFormatHandler } from './table/tableSpacingFormatHandler';
 import { textColorFormatHandler } from './segment/textColorFormatHandler';
 import { underlineFormatHandler } from './segment/underlineFormatHandler';
 import { verticalAlignFormatHandler } from './common/verticalAlignFormatHandler';
+import { whiteSpaceFormatHandler } from './block/whiteSpaceFormatHandler';
 import {
     FormatApplier,
     FormatAppliers,
@@ -72,12 +73,13 @@ const defaultFormatHandlerMap: FormatHandlers = {
     textColor: textColorFormatHandler,
     underline: underlineFormatHandler,
     verticalAlign: verticalAlignFormatHandler,
+    whiteSpace: whiteSpaceFormatHandler,
 };
 
 const defaultFormatKeysPerCategory: {
     [key in keyof ContentModelFormatMap]: (keyof FormatHandlerTypeMap)[];
 } = {
-    block: ['backgroundColor', 'direction', 'margin', 'padding', 'lineHeight'],
+    block: ['backgroundColor', 'direction', 'margin', 'padding', 'lineHeight', 'whiteSpace'],
     listItem: ['listItemThread', 'listItemMetadata'],
     listLevel: ['listType', 'listLevelThread', 'listLevelMetadata'],
     segment: [

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

@@ -33,6 +33,7 @@ export const defaultStyleMap: DefaultStyleMap = {
         display: 'block',
         textAlign: 'center',
     },
+    code: { fontFamily: 'monospace' },
     dd: blockElement,
     div: blockElement,
     dl: blockElement,

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

@@ -100,6 +100,7 @@ export {
     ImageRotateMetadataFormat,
 } from './publicTypes/format/formatParts/ImageMetadataFormat';
 export { DatasetFormat } from './publicTypes/format/formatParts/DatasetFormat';
+export { WhiteSpaceFormat } from './publicTypes/format/formatParts/WhiteSpaceFormat';
 
 export { ContentModelFormatMap } from './publicTypes/format/ContentModelFormatMap';
 

packages/roosterjs-content-model/lib/publicTypes/format/ContentModelBlockFormat.ts

@@ -3,6 +3,7 @@ import { DirectionFormat } from './formatParts/DirectionFormat';
 import { LineHeightFormat } from './formatParts/LineHeightFormat';
 import { MarginFormat } from './formatParts/MarginFormat';
 import { PaddingFormat } from './formatParts/PaddingFormat';
+import { WhiteSpaceFormat } from './formatParts/WhiteSpaceFormat';
 
 /**
  * The format object for a paragraph in Content Model
@@ -11,4 +12,5 @@ export type ContentModelBlockFormat = BackgroundColorFormat &
     DirectionFormat &
     MarginFormat &
     PaddingFormat &
-    LineHeightFormat;
+    LineHeightFormat &
+    WhiteSpaceFormat;

packages/roosterjs-content-model/lib/publicTypes/format/FormatHandlerTypeMap.ts

@@ -23,6 +23,7 @@ import { SuperOrSubScriptFormat } from './formatParts/SuperOrSubScriptFormat';
 import { TextColorFormat } from './formatParts/TextColorFormat';
 import { UnderlineFormat } from './formatParts/UnderlineFormat';
 import { VerticalAlignFormat } from './formatParts/VerticalAlignFormat';
+import { WhiteSpaceFormat } from './formatParts/WhiteSpaceFormat';
 
 /**
  * Represents a record of all format handlers
@@ -162,6 +163,11 @@ export interface FormatHandlerTypeMap {
      * Format for VerticalAlignFormat
      */
     verticalAlign: VerticalAlignFormat;
+
+    /**
+     * Format for WhiteSpaceFormat
+     */
+    whiteSpace: WhiteSpaceFormat;
 }
 
 /**

packages/roosterjs-content-model/lib/publicTypes/format/formatParts/WhiteSpaceFormat.ts

@@ -0,0 +1,9 @@
+/**
+ * Format of white space
+ */
+export type WhiteSpaceFormat = {
+    /**
+     * White space
+     */
+    whiteSpace?: string;
+};

packages/roosterjs-content-model/test/domToModel/processors/textProcessorTest.ts

@@ -471,4 +471,35 @@ describe('textProcessor', () => {
             ],
         });
     });
+
+    it('Paragraph with white-space style', () => {
+        const doc = createContentModelDocument();
+        const text = document.createTextNode('  \n  ');
+        const paragraph = createParagraph(false, {
+            whiteSpace: 'pre',
+        });
+
+        doc.blocks.push(paragraph);
+
+        textProcessor(doc, text, context);
+
+        expect(doc).toEqual({
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    blockType: 'Paragraph',
+                    format: {
+                        whiteSpace: 'pre',
+                    },
+                    segments: [
+                        {
+                            segmentType: 'Text',
+                            format: {},
+                            text: '  \n  ',
+                        },
+                    ],
+                },
+            ],
+        });
+    });
 });

packages/roosterjs-content-model/test/formatHandlers/block/whiteSpaceFormatHandlerTest.ts

@@ -0,0 +1,73 @@
+import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
+import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { DomToModelContext } from '../../../lib/publicTypes/context/DomToModelContext';
+import { ModelToDomContext } from '../../../lib/publicTypes/context/ModelToDomContext';
+import { WhiteSpaceFormat } from '../../../lib/publicTypes/format/formatParts/WhiteSpaceFormat';
+import { whiteSpaceFormatHandler } from '../../../lib/formatHandlers/block/whiteSpaceFormatHandler';
+
+describe('whiteSpaceFormatHandler.parse', () => {
+    let div: HTMLElement;
+    let format: WhiteSpaceFormat;
+    let context: DomToModelContext;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        format = {};
+        context = createDomToModelContext();
+    });
+
+    it('No white space', () => {
+        whiteSpaceFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({});
+    });
+
+    it('White space from CSS', () => {
+        div.style.whiteSpace = 'pre';
+        whiteSpaceFormatHandler.parse(format, div, context, {});
+        expect(format).toEqual({
+            whiteSpace: 'pre',
+        });
+    });
+
+    it('White space from default style', () => {
+        whiteSpaceFormatHandler.parse(format, div, context, {
+            whiteSpace: 'nowrap',
+        });
+        expect(format).toEqual({
+            whiteSpace: 'nowrap',
+        });
+    });
+
+    it('White space from both CSs and default style', () => {
+        div.style.whiteSpace = 'pre';
+        whiteSpaceFormatHandler.parse(format, div, context, {
+            whiteSpace: 'nowrap',
+        });
+        expect(format).toEqual({
+            whiteSpace: 'pre',
+        });
+    });
+});
+
+describe('whiteSpaceFormatHandler.apply', () => {
+    let div: HTMLElement;
+    let format: WhiteSpaceFormat;
+    let context: ModelToDomContext;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        format = {};
+        context = createModelToDomContext();
+    });
+
+    it('No white space', () => {
+        whiteSpaceFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div></div>');
+    });
+
+    it('Has white space', () => {
+        format.whiteSpace = 'pre';
+        whiteSpaceFormatHandler.apply(format, div, context);
+        expect(div.outerHTML).toBe('<div style="white-space: pre;"></div>');
+    });
+});