Fix #2835 Ignore HTML align when there is CSS text-align (#2836)

* Fix #2835 Ignore HTML align when there is CSS text-align * improve
microsoft · Oct 21, 2024 · 78a0bf2 · 78a0bf2
1 parent 33d7575
commit 78a0bf2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/block/htmlAlignFormatHandler.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/block/htmlAlignFormatHandler.ts
@@ -14,14 +14,17 @@ export const htmlAlignFormatHandler: FormatHandler<
     DirectionFormat & HtmlAlignFormat & TextAlignFormat
 > = {
     parse: (format, element, context, defaultStyle) => {
-        directionFormatHandler.parse(format, element, context, defaultStyle);
+        // When there is text-align in CSS style on the same element, we should ignore HTML align
+        if (!element.style.textAlign) {
+            directionFormatHandler.parse(format, element, context, defaultStyle);
 
-        const htmlAlign = element.getAttribute('align');
+            const htmlAlign = element.getAttribute('align');
 
-        if (htmlAlign) {
-            format.htmlAlign = calcAlign(htmlAlign, format.direction);
-            delete format.textAlign;
-            delete context.blockFormat.textAlign;
+            if (htmlAlign) {
+                format.htmlAlign = calcAlign(htmlAlign, format.direction);
+                delete format.textAlign;
+                delete context.blockFormat.textAlign;
+            }
         }
     },
     apply: (format, element) => {

diff --git a/packages/roosterjs-content-model-dom/test/endToEndTest.ts b/packages/roosterjs-content-model-dom/test/endToEndTest.ts
@@ -2199,4 +2199,31 @@ describe('End to end test for DOM => Model => DOM/TEXT', () => {
             '<div style="font-family: Calibri; font-size: 11pt; color: rgb(245, 212, 39);"><a href="http://www.bing.com" style="color: rgb(245, 212, 39);">www.bing.com</a></div>'
         );
     });
+
+    it('HTML align together with CSS text-align', () => {
+        runTest(
+            '<div align="left" style="text-align:center">test</div>',
+            {
+                blockGroupType: 'Document',
+                blocks: [
+                    {
+                        blockType: 'Paragraph',
+                        segments: [
+                            {
+                                segmentType: 'Text',
+                                text: 'test',
+                                format: {},
+                            },
+                        ],
+                        format: {
+                            textAlign: 'center',
+                        },
+                        isImplicit: false,
+                    },
+                ],
+            },
+            'test',
+            '<div style="text-align: center;">test</div>'
+        );
+    });
 });
diff --git a/packages/roosterjs-content-model-dom/test/formatHandlers/block/htmlAlignFormatHandlerTest.ts b/packages/roosterjs-content-model-dom/test/formatHandlers/block/htmlAlignFormatHandlerTest.ts
@@ -82,6 +82,15 @@ describe('htmlAlignFormatHandler.parse', () => {
             htmlAlign: 'start',
         });
     });
+
+    it('Ignore HTML align when there is CSS text-align', () => {
+        div.setAttribute('align', 'left');
+        div.style.textAlign = 'center';
+
+        htmlAlignFormatHandler.parse(format, div, context, {});
+
+        expect(format.htmlAlign).toBeUndefined();
+    });
 });
 
 describe('htmlAlignFormatHandler.apply', () => {