Content Model Support PRE and CODE: step 1 (microsoft#1439)

* Support PRE and CODE: step 1 * improve
Leah-Xia-Microsoft · Nov 29, 2022 · 3d74e90 · 3d74e90
1 parent 82e8883
commit 3d74e90
Show file tree

Hide file tree

Showing 31 changed files with 380 additions and 120 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,4 +16,3 @@ dist/
 
 # Temp files
 packages/roosterjs-editor-types/lib/compatibleEnum/
-packages/roosterjs-content-model/lib/publicTypes/compatibleEnum/
diff --git a/packages/roosterjs-content-model/lib/formatHandlers/paragraph/marginFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/paragraph/marginFormatHandler.ts
@@ -12,7 +12,7 @@ const MarginKeys: (keyof MarginFormat & keyof CSSStyleDeclaration)[] = [
  * @internal
  */
 export const marginFormatHandler: FormatHandler<MarginFormat> = {
-    parse: (format, element, context, defaultStyle) => {
+    parse: (format, element, _, defaultStyle) => {
         MarginKeys.forEach(key => {
             const value = element.style[key] || defaultStyle[key];
 
@@ -21,12 +21,12 @@ export const marginFormatHandler: FormatHandler<MarginFormat> = {
             }
         });
     },
-    apply: (format, element) => {
+    apply: (format, element, context) => {
         MarginKeys.forEach(key => {
             const value = format[key];
 
-            if (value) {
-                element.style[key] = value;
+            if (value != context.implicitFormat[key]) {
+                element.style[key] = value || '0';
             }
         });
     },

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/boldFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/boldFormatHandler.ts
@@ -14,7 +14,7 @@ export const boldFormatHandler: FormatHandler<BoldFormat> = {
         }
     },
     apply: (format, element, context) => {
-        const blockFontWeight = context.implicitSegmentFormat.fontWeight;
+        const blockFontWeight = context.implicitFormat.fontWeight;
 
         if (
             (blockFontWeight && blockFontWeight != format.fontWeight) ||

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/fontFamilyFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/fontFamilyFormatHandler.ts
@@ -13,7 +13,7 @@ export const fontFamilyFormatHandler: FormatHandler<FontFamilyFormat> = {
         }
     },
     apply: (format, element, context) => {
-        if (format.fontFamily && format.fontFamily != context.implicitSegmentFormat.fontFamily) {
+        if (format.fontFamily && format.fontFamily != context.implicitFormat.fontFamily) {
             element.style.fontFamily = format.fontFamily;
         }
     },

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/fontSizeFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/fontSizeFormatHandler.ts
@@ -17,7 +17,7 @@ export const fontSizeFormatHandler: FormatHandler<FontSizeFormat> = {
         }
     },
     apply: (format, element, context) => {
-        if (format.fontSize && format.fontSize != context.implicitSegmentFormat.fontSize) {
+        if (format.fontSize && format.fontSize != context.implicitFormat.fontSize) {
             element.style.fontSize = format.fontSize;
         }
     },

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/italicFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/italicFormatHandler.ts
@@ -16,7 +16,7 @@ export const italicFormatHandler: FormatHandler<ItalicFormat> = {
         }
     },
     apply: (format, element, context) => {
-        const implicitItalic = context.implicitSegmentFormat.italic;
+        const implicitItalic = context.implicitFormat.italic;
 
         if (!!implicitItalic != !!format.italic) {
             if (format.italic) {

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/textColorFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/textColorFormatHandler.ts
@@ -15,7 +15,7 @@ export const textColorFormatHandler: FormatHandler<TextColorFormat> = {
         }
     },
     apply: (format, element, context) => {
-        const implicitColor = context.implicitSegmentFormat.textColor;
+        const implicitColor = context.implicitFormat.textColor;
 
         if (format.textColor && format.textColor != implicitColor) {
             setColor(

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/segment/underlineFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/segment/underlineFormatHandler.ts
@@ -16,7 +16,7 @@ export const underlineFormatHandler: FormatHandler<UnderlineFormat> = {
         }
     },
     apply: (format, element, context) => {
-        const blockUnderline = context.implicitSegmentFormat.underline;
+        const blockUnderline = context.implicitFormat.underline;
 
         if (!!blockUnderline != !!format.underline) {
             if (format.underline) {

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/utils/defaultStyles.ts b/packages/roosterjs-content-model/lib/formatHandlers/utils/defaultStyles.ts
@@ -1,4 +1,4 @@
-import { DefaultImplicitSegmentFormatMap } from '../../publicTypes/context/ModelToDomSettings';
+import { DefaultImplicitFormatMap } from '../../publicTypes/context/ModelToDomSettings';
 import { DefaultStyleMap } from '../../publicTypes/context/DomToModelSettings';
 
 const blockElement: Partial<CSSStyleDeclaration> = {
@@ -131,7 +131,7 @@ export const defaultStyleMap: DefaultStyleMap = {
     ul: blockElement,
 };
 
-export const defaultImplicitSegmentFormatMap: DefaultImplicitSegmentFormatMap = {
+export const defaultImplicitFormatMap: DefaultImplicitFormatMap = {
     a: {
         underline: true,
         textColor: HyperLinkColorPlaceholder,

diff --git a/packages/roosterjs-content-model/lib/index.ts b/packages/roosterjs-content-model/lib/index.ts
@@ -142,7 +142,7 @@ export {
     FormatAppliersPerCategory,
     ContentModelHandlerMap,
     ContentModelHandlerTypeMap,
-    DefaultImplicitSegmentFormatMap,
+    DefaultImplicitFormatMap,
 } from './publicTypes/context/ModelToDomSettings';
 export { ModelToDomEntityContext } from './publicTypes/context/ModelToDomEntityContext';
 export { ElementProcessor } from './publicTypes/context/ElementProcessor';

diff --git a/packages/roosterjs-content-model/lib/modelToDom/context/createModelToDomContext.ts b/packages/roosterjs-content-model/lib/modelToDom/context/createModelToDomContext.ts
@@ -1,5 +1,5 @@
 import { defaultContentModelHandlers } from './defaultContentModelHandlers';
-import { defaultImplicitSegmentFormatMap } from '../../formatHandlers/utils/defaultStyles';
+import { defaultImplicitFormatMap } from '../../formatHandlers/utils/defaultStyles';
 import { EditorContext } from '../../publicTypes/context/EditorContext';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
 import { ModelToDomOption } from '../../publicTypes/IExperimentalContentModelEditor';
@@ -34,7 +34,7 @@ export function createModelToDomContext(
             threadItemCounts: [],
             nodeStack: [],
         },
-        implicitSegmentFormat: {},
+        implicitFormat: {},
         formatAppliers: getFormatAppliers(
             options?.formatApplierOverride,
             options?.additionalFormatAppliers
@@ -43,9 +43,9 @@ export function createModelToDomContext(
             ...defaultContentModelHandlers,
             ...(options?.modelHandlerOverride || {}),
         },
-        defaultImplicitSegmentFormatMap: {
-            ...defaultImplicitSegmentFormatMap,
-            ...(options?.defaultImplicitSegmentFormatOverride || {}),
+        defaultImplicitFormatMap: {
+            ...defaultImplicitFormatMap,
+            ...(options?.defaultImplicitFormatOverride || {}),
         },
         entities: {},
 

diff --git a/packages/roosterjs-content-model/lib/modelToDom/handlers/handleGeneralModel.ts b/packages/roosterjs-content-model/lib/modelToDom/handlers/handleGeneralModel.ts
@@ -5,6 +5,7 @@ import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandl
 import { isNodeOfType } from '../../domUtils/isNodeOfType';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
 import { NodeType } from 'roosterjs-editor-types';
+import { stackFormat } from '../utils/stackFormat';
 
 /**
  * @internal
@@ -22,21 +23,15 @@ export const handleGeneralModel: ContentModelHandler<ContentModelGeneralBlock> =
             context.regularSelection.current.segment = newParent;
         }
 
-        const implicitSegmentFormat = context.implicitSegmentFormat;
-        let segmentElement: HTMLElement;
+        stackFormat(context, group.link ? 'a' : null, () => {
+            let segmentElement: HTMLElement;
 
-        try {
             if (group.link) {
                 segmentElement = doc.createElement('a');
 
                 parent.appendChild(segmentElement);
                 segmentElement.appendChild(newParent);
 
-                context.implicitSegmentFormat = {
-                    ...implicitSegmentFormat,
-                    ...(context.defaultImplicitSegmentFormatMap.a || {}),
-                };
-
                 applyFormat(
                     segmentElement,
                     context.formatAppliers.link,
@@ -55,9 +50,7 @@ export const handleGeneralModel: ContentModelHandler<ContentModelGeneralBlock> =
             }
 
             applyFormat(segmentElement, context.formatAppliers.segment, group.format, context);
-        } finally {
-            context.implicitSegmentFormat = implicitSegmentFormat;
-        }
+        });
     } else {
         parent.appendChild(newParent);
     }

diff --git a/packages/roosterjs-content-model/lib/modelToDom/handlers/handleImage.ts b/packages/roosterjs-content-model/lib/modelToDom/handlers/handleImage.ts
@@ -2,6 +2,7 @@ import { applyFormat } from '../utils/applyFormat';
 import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
 import { ContentModelImage } from '../../publicTypes/segment/ContentModelImage';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+import { stackFormat } from '../utils/stackFormat';
 
 /**
  * @internal
@@ -23,21 +24,15 @@ export const handleImage: ContentModelHandler<ContentModelImage> = (
         img.title = imageModel.title;
     }
 
-    const implicitSegmentFormat = context.implicitSegmentFormat;
-    let segmentElement: HTMLElement;
+    stackFormat(context, imageModel.link ? 'a' : null, () => {
+        let segmentElement: HTMLElement;
 
-    try {
         if (imageModel.link) {
             segmentElement = doc.createElement('a');
 
             parent.appendChild(segmentElement);
             segmentElement.appendChild(img);
 
-            context.implicitSegmentFormat = {
-                ...implicitSegmentFormat,
-                ...(context.defaultImplicitSegmentFormatMap.a || {}),
-            };
-
             applyFormat(
                 segmentElement,
                 context.formatAppliers.link,
@@ -58,9 +53,7 @@ export const handleImage: ContentModelHandler<ContentModelImage> = (
         applyFormat(img, context.formatAppliers.image, imageModel.format, context);
         applyFormat(segmentElement, context.formatAppliers.segment, imageModel.format, context);
         applyFormat(img, context.formatAppliers.dataset, imageModel.dataset, context);
-    } finally {
-        context.implicitSegmentFormat = implicitSegmentFormat;
-    }
+    });
 
     context.regularSelection.current.segment = img;
 

diff --git a/packages/roosterjs-content-model/lib/modelToDom/handlers/handleParagraph.ts b/packages/roosterjs-content-model/lib/modelToDom/handlers/handleParagraph.ts
@@ -3,6 +3,7 @@ import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandl
 import { ContentModelParagraph } from '../../publicTypes/block/ContentModelParagraph';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+import { stackFormat } from '../utils/stackFormat';
 
 /**
  * @internal
@@ -14,50 +15,41 @@ export const handleParagraph: ContentModelHandler<ContentModelParagraph> = (
     context: ModelToDomContext
 ) => {
     let container: HTMLElement;
-    const implicitSegmentFormat = context.implicitSegmentFormat;
 
-    if (paragraph.header) {
-        const tag = ('h' + paragraph.header.headerLevel) as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-        container = doc.createElement(tag);
-        parent.appendChild(container);
-        context.implicitSegmentFormat = {
-            ...implicitSegmentFormat,
-            ...(context.defaultImplicitSegmentFormatMap[tag] || {}),
+    stackFormat(context, paragraph.header ? 'h' + paragraph.header.headerLevel : null, () => {
+        if (paragraph.header) {
+            const tag = 'h' + paragraph.header.headerLevel;
+
+            container = doc.createElement(tag);
+            parent.appendChild(container);
+
+            applyFormat(container, context.formatAppliers.block, paragraph.format, context);
+            applyFormat(
+                container,
+                context.formatAppliers.segmentOnBlock,
+                paragraph.header.format,
+                context
+            );
+        } else if (
+            !paragraph.isImplicit ||
+            (getObjectKeys(paragraph.format).length > 0 &&
+                paragraph.segments.some(segment => segment.segmentType != 'SelectionMarker'))
+        ) {
+            container = doc.createElement('div');
+            parent.appendChild(container);
+
+            applyFormat(container, context.formatAppliers.block, paragraph.format, context);
+        } else {
+            container = parent as HTMLElement;
+        }
+
+        context.regularSelection.current = {
+            block: container,
+            segment: null,
         };
 
-        applyFormat(container, context.formatAppliers.block, paragraph.format, context);
-        applyFormat(
-            container,
-            context.formatAppliers.segmentOnBlock,
-            paragraph.header.format,
-            context
-        );
-
-        Object.assign(context.implicitSegmentFormat, paragraph.header.format);
-    } else if (
-        !paragraph.isImplicit ||
-        (getObjectKeys(paragraph.format).length > 0 &&
-            paragraph.segments.some(segment => segment.segmentType != 'SelectionMarker'))
-    ) {
-        container = doc.createElement('div');
-        parent.appendChild(container);
-
-        applyFormat(container, context.formatAppliers.block, paragraph.format, context);
-    } else {
-        container = parent as HTMLElement;
-    }
-
-    context.regularSelection.current = {
-        block: container,
-        segment: null,
-    };
-
-    try {
         paragraph.segments.forEach(segment => {
             context.modelHandlers.segment(doc, container, segment, context);
         });
-    } finally {
-        context.implicitSegmentFormat = implicitSegmentFormat;
-    }
+    });
 };
diff --git a/packages/roosterjs-content-model/lib/modelToDom/handlers/handleText.ts b/packages/roosterjs-content-model/lib/modelToDom/handlers/handleText.ts
@@ -2,6 +2,7 @@ import { applyFormat } from '../utils/applyFormat';
 import { ContentModelHandler } from '../../publicTypes/context/ContentModelHandler';
 import { ContentModelText } from '../../publicTypes/segment/ContentModelText';
 import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+import { stackFormat } from '../utils/stackFormat';
 
 /**
  * @internal
@@ -13,29 +14,19 @@ export const handleText: ContentModelHandler<ContentModelText> = (
     context: ModelToDomContext
 ) => {
     const txt = doc.createTextNode(segment.text);
-    const implicitSegmentFormat = context.implicitSegmentFormat;
     const element = doc.createElement(segment.link ? 'a' : 'span');
 
     element.appendChild(txt);
     parent.appendChild(element);
 
     context.regularSelection.current.segment = txt;
 
-    if (segment.link) {
-        context.implicitSegmentFormat = {
-            ...implicitSegmentFormat,
-            ...(context.defaultImplicitSegmentFormatMap.a || {}),
-        };
-    }
-
-    try {
+    stackFormat(context, segment.link ? 'a' : null, () => {
         applyFormat(element, context.formatAppliers.segment, segment.format, context);
 
         if (segment.link) {
             applyFormat(element, context.formatAppliers.link, segment.link.format, context);
             applyFormat(element, context.formatAppliers.dataset, segment.link.dataset, context);
         }
-    } finally {
-        context.implicitSegmentFormat = implicitSegmentFormat;
-    }
+    });
 };
diff --git a/packages/roosterjs-content-model/lib/modelToDom/utils/stackFormat.ts b/packages/roosterjs-content-model/lib/modelToDom/utils/stackFormat.ts
@@ -0,0 +1,29 @@
+import { ModelToDomContext } from '../../publicTypes/context/ModelToDomContext';
+
+/**
+ * @internal
+ */
+export function stackFormat(
+    context: ModelToDomContext,
+    tagName: string | null,
+    callback: () => void
+) {
+    if (tagName) {
+        const implicitFormat = context.implicitFormat;
+
+        try {
+            const newFormat = context.defaultImplicitFormatMap[tagName] || {};
+
+            context.implicitFormat = {
+                ...implicitFormat,
+                ...newFormat,
+            };
+
+            callback();
+        } finally {
+            context.implicitFormat = implicitFormat;
+        }
+    } else {
+        callback();
+    }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,4 +16,3 @@ dist/

		# Temp files
		packages/roosterjs-editor-types/lib/compatibleEnum/
		packages/roosterjs-content-model/lib/publicTypes/compatibleEnum/