Content Model: Keep image port if exist

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/imageProcessor.ts

@@ -12,11 +12,14 @@ export const imageProcessor: ElementProcessor<HTMLImageElement> = (group, elemen
     stackFormat(context, { segment: 'shallowClone' }, () => {
         const imageFormat: ContentModelImageFormat = context.segmentFormat;
 
+        // Use getAttribute('src') instead of retrieving src directly, in case the src has port and may be stripped by browser
+        const src = element.getAttribute('src') ?? '';
+
         parseFormat(element, context.formatParsers.segment, imageFormat, context);
         parseFormat(element, context.formatParsers.image, imageFormat, context);
         parseFormat(element, context.formatParsers.block, context.blockFormat, context);
 
-        const image = createImage(element.src, imageFormat);
+        const image = createImage(src, imageFormat);
         const alt = element.alt;
         const title = element.title;
 

packages-content-model/roosterjs-content-model-dom/test/domToModel/processors/imageProcessorTest.ts

@@ -71,6 +71,34 @@ describe('imageProcessor', () => {
         });
     });
 
+    it('Image with src and port', () => {
+        const doc = createContentModelDocument();
+        const img = document.createElement('img');
+
+        img.src = 'http://test.com:80/testSrc';
+
+        imageProcessor(doc, img, context);
+
+        expect(doc).toEqual({
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    blockType: 'Paragraph',
+                    format: {},
+                    isImplicit: true,
+                    segments: [
+                        {
+                            segmentType: 'Image',
+                            format: {},
+                            src: 'http://test.com:80/testSrc',
+                            dataset: {},
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+
     it('Image with regular selection', () => {
         const doc = createContentModelDocument();
         const img = document.createElement('img');

packages-content-model/roosterjs-content-model-plugins/test/paste/processPastedContentFromWacTest.ts

@@ -1355,7 +1355,7 @@ describe('wordOnlineHandler', () => {
                                 segments: [
                                     {
                                         segmentType: 'Image',
-                                        src: 'http://www.microsoft.com/',
+                                        src: 'http://www.microsoft.com',
                                         format: {
                                             letterSpacing: 'normal',
                                             fontFamily: