microsoft · BryanValverdeU · May 5, 2025 · May 1, 2025
diff --git a/packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts b/packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts
@@ -100,7 +100,7 @@ export class PastePlugin implements EditorPlugin {
 
         switch (pasteSource) {
             case 'wordDesktop':
-                processPastedContentFromWordDesktop(event);
+                processPastedContentFromWordDesktop(event, this.editor.getDOMCreator());
                 break;
             case 'wacComponents':
                 processPastedContentWacComponents(event);

diff --git a/packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/getStyleMetadata.ts b/packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/getStyleMetadata.ts
@@ -1,28 +1,8 @@
 import { getObjectKeys } from 'roosterjs-content-model-dom';
 import type { WordMetadata } from './WordMetadata';
-import type { BeforePasteEvent } from 'roosterjs-content-model-types';
+import type { BeforePasteEvent, DOMCreator } from 'roosterjs-content-model-types';
 
 const FORMATING_REGEX = /[\n\t'{}"]+/g;
-const STYLE_TAG = '<style>';
-const STYLE_TAG_END = '</style>';
-
-function extractStyleTagsFromHtml(htmlContent: string): string[] {
-    const styles: string[] = [];
-    const lowerCaseHtmlContent = htmlContent.toLowerCase();
-
-    let styleStartIndex = lowerCaseHtmlContent.indexOf(STYLE_TAG);
-    while (styleStartIndex >= 0) {
-        const styleEndIndex = lowerCaseHtmlContent.indexOf(STYLE_TAG_END, styleStartIndex);
-        if (styleEndIndex >= 0) {
-            const styleContent = htmlContent.substring(styleStartIndex + 7, styleEndIndex).trim();
-            styles.push(styleContent);
-            styleStartIndex = lowerCaseHtmlContent.indexOf(STYLE_TAG, styleEndIndex);
-        } else {
-            break;
-        }
-    }
-    return styles;
-}
 
 /**
  * @internal
@@ -44,11 +24,14 @@ function extractStyleTagsFromHtml(htmlContent: string): string[] {
  * 5. Save data in record and only use the required information.
  *
  */
-export function getStyleMetadata(ev: BeforePasteEvent) {
+export function getStyleMetadata(ev: BeforePasteEvent, domCreator: DOMCreator) {
     const metadataMap: Map<string, WordMetadata> = new Map();
-    const headStyles = extractStyleTagsFromHtml(ev.htmlBefore);
+    const doc = domCreator.htmlToDOM(ev.htmlBefore);
+    const styles = doc.querySelectorAll('style');
+
+    styles.forEach(style => {
+        const text = style?.innerHTML.trim() || '';
 
-    headStyles.forEach(text => {
         let index = 0;
         while (index >= 0) {
             const indexAt = text.indexOf('@', index + 1);
@@ -94,6 +77,5 @@ export function getStyleMetadata(ev: BeforePasteEvent) {
             }
         }
     });
-
     return metadataMap;
 }
diff --git a/...sterjs-content-model-plugins/lib/paste/WordDesktop/processPastedContentFromWordDesktop.ts b/...sterjs-content-model-plugins/lib/paste/WordDesktop/processPastedContentFromWordDesktop.ts
@@ -11,6 +11,7 @@ import type {
     ContentModelBlockFormat,
     ContentModelListItemLevelFormat,
     ContentModelTableFormat,
+    DOMCreator,
     DomToModelContext,
     ElementProcessor,
     FormatParser,
@@ -25,8 +26,8 @@ const DEFAULT_BROWSER_LINE_HEIGHT_PERCENTAGE = 1.2;
  * Handles Pasted content when source is Word Desktop
  * @param ev BeforePasteEvent
  */
-export function processPastedContentFromWordDesktop(ev: BeforePasteEvent) {
-    const metadataMap: Map<string, WordMetadata> = getStyleMetadata(ev);
+export function processPastedContentFromWordDesktop(ev: BeforePasteEvent, domCreator: DOMCreator) {
+    const metadataMap: Map<string, WordMetadata> = getStyleMetadata(ev, domCreator);
 
     setProcessor(ev.domToModelOption, 'element', wordDesktopElementProcessor(metadataMap));
     addParser(ev.domToModelOption, 'block', adjustPercentileLineHeight);

diff --git a/packages/roosterjs-content-model-plugins/test/paste/utils/getStyleMetadataTest.ts b/packages/roosterjs-content-model-plugins/test/paste/utils/getStyleMetadataTest.ts
@@ -1,13 +1,17 @@
 import { BeforePasteEvent } from 'roosterjs-content-model-types';
 import { getStyleMetadata } from '../../../lib/paste/WordDesktop/getStyleMetadata';
 
+const domCreator = {
+    htmlToDOM: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
+};
+
 describe('getStyleMetadata', () => {
     it('Extract metadata from style element', () => {
         const event = <BeforePasteEvent>(<any>{
             htmlBefore:
                 '<style><!--/*FontDefinitions*/@font-face{font-family:"MSMincho";panose-1:2269425834;mso-font-alt:"ＭＳ明朝";mso-font-charset:128;mso-generic-font-family:modern;mso-font-pitch:fixed;mso-font-signature:-536870145179149157913421774601312310;}@font-face{font-family:"CambriaMath";panose-1:2453546324;mso-font-charset:0;mso-generic-font-family:roman;mso-font-pitch:variable;mso-font-signature:-53686912111073057273355443204150;}@font-face{font-family:Aptos;mso-font-charset:0;mso-generic-font-family:swiss;mso-font-pitch:variable;mso-font-signature:5368715593004150;}@font-face{font-family:"@MSMincho";panose-1:2269425834;mso-font-charset:128;mso-generic-font-family:modern;mso-font-pitch:fixed;mso-font-signature:-536870145179149157913421774601312310;}/*StyleDefinitions*/p.MsoNormal,li.MsoNormal,div.MsoNormal{mso-style-unhide:no;mso-style-qformat:yes;mso-style-parent:"";margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:116%;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Aptos",sans-serif;mso-ascii-font-family:Aptos;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MSMincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Aptos;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:Arial;mso-bidi-theme-font:minor-bidi;}p.MsoListParagraph,li.MsoListParagraph,div.MsoListParagraph{mso-style-priority:34;mso-style-unhide:no;mso-style-qformat:yes;margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:.5in;mso-add-space:auto;line-height:116%;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Aptos",sans-serif;mso-ascii-font-family:Aptos;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MSMincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Aptos;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:Arial;mso-bidi-theme-font:minor-bidi;}p.MsoListParagraphCxSpFirst,li.MsoListParagraphCxSpFirst,div.MsoListParagraphCxSpFirst{mso-style-priority:34;mso-style-unhide:no;mso-style-qformat:yes;mso-style-type:export-only;margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:.5in;mso-add-space:auto;line-height:116%;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Aptos",sans-serif;mso-ascii-font-family:Aptos;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MSMincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Aptos;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:Arial;mso-bidi-theme-font:minor-bidi;}p.MsoListParagraphCxSpMiddle,li.MsoListParagraphCxSpMiddle,div.MsoListParagraphCxSpMiddle{mso-style-priority:34;mso-style-unhide:no;mso-style-qformat:yes;mso-style-type:export-only;margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:.5in;mso-add-space:auto;line-height:116%;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Aptos",sans-serif;mso-ascii-font-family:Aptos;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MSMincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Aptos;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:Arial;mso-bidi-theme-font:minor-bidi;}p.MsoListParagraphCxSpLast,li.MsoListParagraphCxSpLast,div.MsoListParagraphCxSpLast{mso-style-priority:34;mso-style-unhide:no;mso-style-qformat:yes;mso-style-type:export-only;margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:.5in;mso-add-space:auto;line-height:116%;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Aptos",sans-serif;mso-ascii-font-family:Aptos;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MSMincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Aptos;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:Arial;mso-bidi-theme-font:minor-bidi;}.MsoChpDefault{mso-style-type:export-only;mso-default-props:yes;font-family:"Aptos",sans-serif;mso-ascii-font-family:Aptos;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:"MSMincho";mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Aptos;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:Arial;mso-bidi-theme-font:minor-bidi;mso-font-kerning:0pt;mso-ligatures:none;}.MsoPapDefault{mso-style-type:export-only;margin-bottom:8.0pt;line-height:116%;}@pageWordSection1{size:8.5in11.0in;margin:1.0in1.0in1.0in1.0in;mso-header-margin:.5in;mso-footer-margin:.5in;mso-paper-source:0;}div.WordSection1{page:WordSection1;}/*ListDefinitions*/@listl0{mso-list-id:1153643359;mso-list-type:hybrid;mso-list-template-ids:133990276544500572-1-1-1-1-1-1-1-1;}@listl0:level1{mso-level-number-format:roman-upper;mso-level-text:"%1)";mso-level-tab-stop:none;mso-level-number-position:right;text-indent:-.25in;}@listl0:level2{mso-level-number-format:alpha-lower;mso-level-tab-stop:none;mso-level-number-position:left;text-indent:-.25in;}@listl0:level3{mso-level-number-format:roman-lower;mso-level-tab-stop:none;mso-level-number-position:right;text-indent:-9.0pt;}@listl0:level4{mso-level-tab-stop:none;mso-level-number-position:left;text-indent:-.25in;}@listl0:level5{mso-level-number-format:alpha-lower;mso-level-tab-stop:none;mso-level-number-position:left;text-indent:-.25in;}@listl0:level6{mso-level-number-format:roman-lower;mso-level-tab-stop:none;mso-level-number-position:right;text-indent:-9.0pt;}@listl0:level7{mso-level-tab-stop:none;mso-level-number-position:left;text-indent:-.25in;}@listl0:level8{mso-level-number-format:alpha-lower;mso-level-tab-stop:none;mso-level-number-position:left;text-indent:-.25in;}@listl0:level9{mso-level-number-format:roman-lower;mso-level-tab-stop:none;mso-level-number-position:right;text-indent:-9.0pt;}ol{margin-bottom:0in;}ul{margin-bottom:0in;}--></style>',
         });
-        const result = getStyleMetadata(event);
+        const result = getStyleMetadata(event, domCreator);
 
         expect(result.get('l0:level1')).toEqual({
             'mso-level-number-format': 'roman-upper',

diff --git a/...oosterjs-content-model-plugins/test/paste/word/processPastedContentFromWordDesktopTest.ts b/...oosterjs-content-model-plugins/test/paste/word/processPastedContentFromWordDesktopTest.ts
@@ -9,6 +9,10 @@ import {
     moveChildNodes,
 } from 'roosterjs-content-model-dom';
 
+const domCreator = {
+    htmlToDOM: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
+};
+
 describe('processPastedContentFromWordDesktopTest', () => {
     let div: HTMLElement;
     let fragment: DocumentFragment;
@@ -27,7 +31,7 @@ describe('processPastedContentFromWordDesktopTest', () => {
             moveChildNodes(fragment, div);
         }
         const event = createBeforePasteEventMock(fragment, htmlBefore);
-        processPastedContentFromWordDesktop(event);
+        processPastedContentFromWordDesktop(event, domCreator);
 
         const model = domToContentModel(
             fragment,