Content Model Customization refactor 0

packages-content-model/roosterjs-content-model-dom/lib/config/defaultContentModelFormatMap.ts

@@ -0,0 +1,54 @@
+import { DefaultImplicitFormatMap } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ * A map from tag name to its default implicit formats
+ */
+export const defaultContentModelFormatMap: DefaultImplicitFormatMap = {
+    a: {
+        underline: true,
+    },
+    blockquote: {
+        marginTop: '1em',
+        marginBottom: '1em',
+        marginLeft: '40px',
+        marginRight: '40px',
+    },
+    code: {
+        fontFamily: 'monospace',
+    },
+    h1: {
+        fontWeight: 'bold',
+        fontSize: '2em',
+    },
+    h2: {
+        fontWeight: 'bold',
+        fontSize: '1.5em',
+    },
+    h3: {
+        fontWeight: 'bold',
+        fontSize: '1.17em',
+    },
+    h4: {
+        fontWeight: 'bold',
+        fontSize: '1em', // Set this default value here to overwrite existing font size when change heading level
+    },
+    h5: {
+        fontWeight: 'bold',
+        fontSize: '0.83em',
+    },
+    h6: {
+        fontWeight: 'bold',
+        fontSize: '0.67em',
+    },
+    p: {
+        marginTop: '1em',
+        marginBottom: '1em',
+    },
+    pre: {
+        fontFamily: 'monospace',
+        whiteSpace: 'pre',
+        marginTop: '1em',
+        marginBottom: '1em',
+    },
+};

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

@@ -1,4 +1,4 @@
-import { DefaultImplicitFormatMap, DefaultStyleMap } from 'roosterjs-content-model-types';
+import { DefaultStyleMap } from 'roosterjs-content-model-types';
 
 const blockElement: Partial<CSSStyleDeclaration> = {
     display: 'block',
@@ -7,7 +7,7 @@ const blockElement: Partial<CSSStyleDeclaration> = {
 /**
  * @internal
  */
-export const defaultStyleMap: DefaultStyleMap = {
+export const defaultHTMLStyleMap: DefaultStyleMap = {
     address: blockElement,
     article: blockElement,
     aside: blockElement,
@@ -123,69 +123,3 @@ export const defaultStyleMap: DefaultStyleMap = {
     },
     ul: blockElement,
 };
-
-/**
- * @internal
- */
-export const enum PseudoTagNames {
-    childOfPre = 'pre *', // This value is not a CSS selector, it just to tell this will impact elements under PRE tag. Any unique value here can work actually
-}
-
-/**
- * A map from tag name to its default implicit formats
- */
-export const defaultImplicitFormatMap: DefaultImplicitFormatMap = {
-    a: {
-        underline: true,
-    },
-    blockquote: {
-        marginTop: '1em',
-        marginBottom: '1em',
-        marginLeft: '40px',
-        marginRight: '40px',
-    },
-    code: {
-        fontFamily: 'monospace',
-    },
-    h1: {
-        fontWeight: 'bold',
-        fontSize: '2em',
-    },
-    h2: {
-        fontWeight: 'bold',
-        fontSize: '1.5em',
-    },
-    h3: {
-        fontWeight: 'bold',
-        fontSize: '1.17em',
-    },
-    h4: {
-        fontWeight: 'bold',
-        fontSize: '1em', // Set this default value here to overwrite existing font size when change heading level
-    },
-    h5: {
-        fontWeight: 'bold',
-        fontSize: '0.83em',
-    },
-    h6: {
-        fontWeight: 'bold',
-        fontSize: '0.67em',
-    },
-    p: {
-        marginTop: '1em',
-        marginBottom: '1em',
-    },
-    pre: {
-        fontFamily: 'monospace',
-        whiteSpace: 'pre',
-        marginTop: '1em',
-        marginBottom: '1em',
-    },
-
-    // For PRE tag, the following styles will be included from the PRE tag.
-    // Adding this implicit style here so no need to generate these style for child elements
-    [PseudoTagNames.childOfPre]: {
-        fontFamily: 'monospace',
-        whiteSpace: 'pre',
-    },
-};

packages-content-model/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts

@@ -1,6 +1,5 @@
 import { defaultFormatParsers, getFormatParsers } from '../../formatHandlers/defaultFormatHandlers';
 import { defaultProcessorMap } from './defaultProcessors';
-import { defaultStyleMap } from '../../formatHandlers/utils/defaultStyles';
 import { DomToModelContext, DomToModelOption, EditorContext } from 'roosterjs-content-model-types';
 import { SelectionRangeEx } from 'roosterjs-editor-types';
 
@@ -43,11 +42,6 @@ export function createDomToModelContext(
             ...(options?.processorOverride || {}),
         },
 
-        defaultStyles: {
-            ...defaultStyleMap,
-            ...(options?.defaultStyleOverride || {}),
-        },
-
         formatParsers: getFormatParsers(
             options?.formatParserOverride,
             options?.additionalFormatParsers

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/getDefaultStyle.ts

@@ -1,3 +1,4 @@
+import { defaultHTMLStyleMap } from '../../config/defaultHTMLStyleMap';
 import { DefaultStyleMap, DomToModelContext } from 'roosterjs-content-model-types';
 
 /**
@@ -13,5 +14,5 @@ export function getDefaultStyle(
 ): Partial<CSSStyleDeclaration> {
     let tag = element.tagName.toLowerCase() as keyof DefaultStyleMap;
 
-    return context.defaultStyles[tag] || {};
+    return defaultHTMLStyleMap[tag] || {};
 }

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

@@ -49,6 +49,6 @@ export { setParagraphNotImplicit } from './modelApi/block/setParagraphNotImplici
 export { parseValueWithUnit } from './formatHandlers/utils/parseValueWithUnit';
 export { BorderKeys } from './formatHandlers/common/borderFormatHandler';
 export { DeprecatedColors } from './formatHandlers/utils/color';
-export { defaultImplicitFormatMap } from './formatHandlers/utils/defaultStyles';
 
 export { createDomToModelContext } from './domToModel/context/createDomToModelContext';
+export { createModelToDomContext } from './modelToDom/context/createModelToDomContext';

packages-content-model/roosterjs-content-model-dom/lib/modelToDom/context/createModelToDomContext.ts

@@ -1,13 +1,11 @@
 import { defaultContentModelHandlers } from './defaultContentModelHandlers';
-import { defaultImplicitFormatMap } from '../../formatHandlers/utils/defaultStyles';
 import { EditorContext, ModelToDomContext, ModelToDomOption } from 'roosterjs-content-model-types';
 import {
     defaultFormatAppliers,
     getFormatAppliers,
 } from '../../formatHandlers/defaultFormatHandlers';
 
 /**
- * @internal
  * @param editorContext
  * @returns
  */
@@ -39,10 +37,6 @@ export function createModelToDomContext(
             ...defaultContentModelHandlers,
             ...(options.modelHandlerOverride || {}),
         },
-        defaultImplicitFormatMap: {
-            ...defaultImplicitFormatMap,
-            ...(options.defaultImplicitFormatOverride || {}),
-        },
 
         defaultModelHandlers: defaultContentModelHandlers,
         defaultFormatAppliers: defaultFormatAppliers,

packages-content-model/roosterjs-content-model-dom/lib/modelToDom/handlers/handleFormatContainer.ts

@@ -1,14 +1,20 @@
 import { applyFormat } from '../utils/applyFormat';
 import { isBlockGroupEmpty } from '../../modelApi/common/isEmpty';
-import { PseudoTagNames } from '../../formatHandlers/utils/defaultStyles';
 import { reuseCachedElement } from '../utils/reuseCachedElement';
 import { stackFormat } from '../utils/stackFormat';
 import {
+    ContentModelBlockFormat,
     ContentModelBlockHandler,
     ContentModelFormatContainer,
+    ContentModelSegmentFormat,
     ModelToDomContext,
 } from 'roosterjs-content-model-types';
 
+const PreChildFormat: ContentModelSegmentFormat & ContentModelBlockFormat = {
+    fontFamily: 'monospace',
+    whiteSpace: 'pre',
+};
+
 /**
  * @internal
  */
@@ -47,7 +53,7 @@ export const handleFormatContainer: ContentModelBlockHandler<ContentModelFormatC
         });
 
         if (container.tagName == 'pre') {
-            stackFormat(context, PseudoTagNames.childOfPre, () => {
+            stackFormat(context, PreChildFormat, () => {
                 context.modelHandlers.blockGroupChildren(doc, containerNode, container, context);
             });
         } else {

packages-content-model/roosterjs-content-model-dom/lib/modelToDom/utils/stackFormat.ts

@@ -1,3 +1,4 @@
+import { defaultContentModelFormatMap } from '../../config/defaultContentModelFormatMap';
 import {
     ContentModelBlockFormat,
     ContentModelSegmentFormat,
@@ -14,7 +15,7 @@ export function stackFormat(
 ) {
     const newFormat =
         typeof tagNameOrFormat === 'string'
-            ? context.defaultImplicitFormatMap[tagNameOrFormat]
+            ? defaultContentModelFormatMap[tagNameOrFormat]
             : tagNameOrFormat;
 
     if (newFormat) {

packages-content-model/roosterjs-content-model-dom/test/domToModel/context/createDomToModelContextTest.ts

@@ -1,6 +1,5 @@
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { defaultProcessorMap } from '../../../lib/domToModel/context/defaultProcessors';
-import { defaultStyleMap } from '../../../lib/formatHandlers/utils/defaultStyles';
 import { DomToModelListFormat, EditorContext } from 'roosterjs-content-model-types';
 import {
     defaultFormatParsers,
@@ -15,7 +14,6 @@ describe('createDomToModelContext', () => {
     };
     const contextOptions = {
         elementProcessors: defaultProcessorMap,
-        defaultStyles: defaultStyleMap,
         formatParsers: getFormatParsers(),
         defaultElementProcessors: defaultProcessorMap,
         defaultFormatParsers: defaultFormatParsers,
@@ -127,16 +125,12 @@ describe('createDomToModelContext', () => {
 
     it('with override', () => {
         const mockedAProcessor = 'a' as any;
-        const mockedOlStyle = 'ol' as any;
         const mockedBoldParser = 'bold' as any;
         const mockedBlockParser = 'block' as any;
         const context = createDomToModelContext(undefined, {
             processorOverride: {
                 a: mockedAProcessor,
             },
-            defaultStyleOverride: {
-                ol: mockedOlStyle,
-            },
             formatParserOverride: {
                 bold: mockedBoldParser,
             },
@@ -146,7 +140,6 @@ describe('createDomToModelContext', () => {
         });
 
         expect(context.elementProcessors.a).toBe(mockedAProcessor);
-        expect(context.defaultStyles.ol).toBe(mockedOlStyle);
         expect(context.formatParsers.segment.indexOf(mockedBoldParser)).toBeGreaterThanOrEqual(0);
         expect(context.formatParsers.block).toEqual([
             ...getFormatParsers().block,

packages-content-model/roosterjs-content-model-dom/test/domToModel/utils/getDefaultStyleTest.ts

@@ -18,22 +18,6 @@ describe('getDefaultStyle', () => {
         });
     });
 
-    it('Get customized default style of DIV', () => {
-        context = createDomToModelContext(undefined, {
-            defaultStyleOverride: {
-                div: {
-                    color: 'red',
-                },
-            },
-        });
-        const div = document.createElement('div');
-        const style = getDefaultStyle(div, context);
-
-        expect(style).toEqual({
-            color: 'red',
-        });
-    });
-
     it('Get default style of customized element', () => {
         const test = document.createElement('test');
         const style = getDefaultStyle(test, context);

packages-content-model/roosterjs-content-model-dom/test/domToModel/utils/isBlockElementTest.ts

@@ -67,52 +67,6 @@ describe('isBlockElement', () => {
         expect(result).toBeTrue();
     });
 
-    it('Override DIV default style', () => {
-        const div = document.createElement('div');
-
-        context = createDomToModelContext(undefined, {
-            defaultStyleOverride: {
-                div: {
-                    display: 'inline',
-                },
-            },
-        });
-
-        const result = isBlockElement(div, context);
-        expect(result).toBeFalse();
-    });
-
-    it('Override SPAN default style', () => {
-        const span = document.createElement('span');
-
-        context = createDomToModelContext(undefined, {
-            defaultStyleOverride: {
-                span: {
-                    display: 'block',
-                },
-            },
-        });
-
-        const result = isBlockElement(span, context);
-        expect(result).toBeTrue();
-    });
-
-    it('Double override SPAN', () => {
-        const span = document.createElement('span');
-        span.style.display = 'inline';
-
-        context = createDomToModelContext(undefined, {
-            defaultStyleOverride: {
-                span: {
-                    display: 'block',
-                },
-            },
-        });
-
-        const result = isBlockElement(span, context);
-        expect(result).toBeFalse();
-    });
-
     it('display = flex', () => {
         const div = document.createElement('div');
         div.style.display = 'flex';

packages-content-model/roosterjs-content-model-dom/test/formatHandlers/segment/linkFormatHandlerTest.ts

@@ -1,5 +1,6 @@
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { defaultHTMLStyleMap } from '../../../lib/config/defaultHTMLStyleMap';
 import { DomToModelContext, LinkFormat, ModelToDomContext } from 'roosterjs-content-model-types';
 import { linkFormatHandler } from '../../../lib/formatHandlers/segment/linkFormatHandler';
 
@@ -17,7 +18,7 @@ describe('linkFormatHandler.parse', () => {
 
         div.setAttribute('href', '/test');
 
-        linkFormatHandler.parse(format, div, context, context.defaultStyles.a!);
+        linkFormatHandler.parse(format, div, context, defaultHTMLStyleMap.a!);
 
         expect(format).toEqual({});
     });
@@ -27,7 +28,7 @@ describe('linkFormatHandler.parse', () => {
 
         a.href = '/test';
 
-        linkFormatHandler.parse(format, a, context, context.defaultStyles.a!);
+        linkFormatHandler.parse(format, a, context, defaultHTMLStyleMap.a!);
 
         expect(format).toEqual({
             href: '/test',
@@ -45,7 +46,7 @@ describe('linkFormatHandler.parse', () => {
         a.target = 'target';
         a.name = 'name';
 
-        linkFormatHandler.parse(format, a, context, context.defaultStyles.a!);
+        linkFormatHandler.parse(format, a, context, defaultHTMLStyleMap.a!);
 
         expect(format).toEqual({
             anchorClass: 'class',