diff --git a/packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/imageProcessor.ts b/packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/imageProcessor.ts index df62e8361af..bf37ae26adc 100644 --- a/packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/imageProcessor.ts +++ b/packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/imageProcessor.ts @@ -12,11 +12,14 @@ export const imageProcessor: ElementProcessor = (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; diff --git a/packages-content-model/roosterjs-content-model-dom/test/domToModel/processors/imageProcessorTest.ts b/packages-content-model/roosterjs-content-model-dom/test/domToModel/processors/imageProcessorTest.ts index cf591255318..4fc31b81bbb 100644 --- a/packages-content-model/roosterjs-content-model-dom/test/domToModel/processors/imageProcessorTest.ts +++ b/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'); diff --git a/packages-content-model/roosterjs-content-model-plugins/test/paste/processPastedContentFromWacTest.ts b/packages-content-model/roosterjs-content-model-plugins/test/paste/processPastedContentFromWacTest.ts index e505f48d5a0..5144dde363e 100644 --- a/packages-content-model/roosterjs-content-model-plugins/test/paste/processPastedContentFromWacTest.ts +++ b/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: