Patch RoosterJS to 9.4.1 (#2686)

* Merge Link & Image Format when using MergeModel (#2681) * mergeLinkFormat * Also fix for images * remove unneeded changes * Remove more unneeded changes * Address comment * nit --------- Co-authored-by: Jiuqing Song <jisong@microsoft.com> * update versions * Merge pull request #2684 from microsoft/u/juliaroldi/trigger-auto-format Auto format trigger --------- Co-authored-by: Jiuqing Song <jisong@microsoft.com> Co-authored-by: Julia Roldi <87443959+juliaroldi@users.noreply.github.com>
microsoft · Jun 6, 2024 · 425b217 · 425b217
1 parent 10c1d9d
commit 425b217
Show file tree

Hide file tree

Showing 4 changed files with 367 additions and 12 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts b/packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts
@@ -24,15 +24,8 @@ export const formatContentModel: FormatContentModel = (
     options,
     domToModelOptions
 ) => {
-    const {
-        apiName,
-        onNodeCreated,
-        getChangeData,
-        changeSource,
-        rawEvent,
-        selectionOverride,
-        scrollCaretIntoView,
-    } = options || {};
+    const { onNodeCreated, getChangeData, rawEvent, selectionOverride, scrollCaretIntoView } =
+        options || {};
     const model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     const context: FormatContentModelContext = {
         newEntities: [],
@@ -82,9 +75,9 @@ export const formatContentModel: FormatContentModel = (
                 eventType: 'contentChanged',
                 contentModel: clearModelCache ? undefined : model,
                 selection: clearModelCache ? undefined : selection,
-                source: changeSource || ChangeSource.Format,
+                source: options?.changeSource || ChangeSource.Format,
                 data: getChangeData?.(),
-                formatApiName: apiName,
+                formatApiName: options?.apiName,
                 changedEntities: getChangedEntities(context, rawEvent),
             };
 

diff --git a/packages/roosterjs-content-model-dom/lib/modelApi/editing/mergeModel.ts b/packages/roosterjs-content-model-dom/lib/modelApi/editing/mergeModel.ts
@@ -14,6 +14,7 @@ import type {
     ContentModelBlock,
     ContentModelBlockFormat,
     ContentModelDocument,
+    ContentModelHyperLinkFormat,
     ContentModelListItem,
     ContentModelParagraph,
     ContentModelSegmentFormat,
@@ -28,6 +29,21 @@ import type {
 } from 'roosterjs-content-model-types';
 
 const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+// An object to provide keys of required properties of segment format, do NOT use any of its values
+const RequiredEmptySegmentFormat: Required<ContentModelSegmentFormat> = {
+    backgroundColor: null!,
+    fontFamily: null!,
+    fontSize: null!,
+    fontWeight: null!,
+    italic: null!,
+    letterSpacing: null!,
+    lineHeight: null!,
+    strikethrough: null!,
+    superOrSubScriptSequence: null!,
+    textColor: null!,
+    underline: null!,
+};
+const KeysOfSegmentFormat = getObjectKeys(RequiredEmptySegmentFormat);
 
 /**
  * Merge source model into target mode
@@ -359,6 +375,14 @@ function applyDefaultFormat(
                         ...paragraphFormat,
                         ...segment.format,
                     });
+
+                    if (segment.link) {
+                        segment.link.format = mergeSegmentFormat(
+                            applyDefaultFormatOption,
+                            getSegmentFormatInLinkFormat(format),
+                            segment.link.format
+                        );
+                    }
                 });
 
                 if (applyDefaultFormatOption === 'keepSourceEmphasisFormat') {
@@ -375,6 +399,27 @@ function mergeBlockFormat(applyDefaultFormatOption: string, block: ReadonlyConte
     }
 }
 
+/**
+ * Hyperlink format type definition only contains textColor, backgroundColor and underline.
+ * So create a minimum object with the styles supported in Hyperlink to be used in merge.
+ */
+function getSegmentFormatInLinkFormat(
+    targetFormat: ContentModelSegmentFormat
+): ContentModelSegmentFormat {
+    const result: ContentModelHyperLinkFormat = {};
+    if (targetFormat.textColor) {
+        result.textColor = targetFormat.textColor;
+    }
+    if (targetFormat.backgroundColor) {
+        result.backgroundColor = targetFormat.backgroundColor;
+    }
+    if (targetFormat.underline) {
+        result.underline = targetFormat.underline;
+    }
+
+    return result;
+}
+
 function mergeSegmentFormat(
     applyDefaultFormatOption: 'mergeAll' | 'keepSourceEmphasisFormat',
     targetFormat: ContentModelSegmentFormat,
@@ -383,6 +428,7 @@ function mergeSegmentFormat(
     return applyDefaultFormatOption == 'mergeAll'
         ? { ...targetFormat, ...sourceFormat }
         : {
+              ...getFormatWithoutSegmentFormat(sourceFormat),
               ...targetFormat,
               ...getSemanticFormat(sourceFormat),
           };
@@ -405,3 +451,17 @@ function getSemanticFormat(segmentFormat: ContentModelSegmentFormat): ContentMod
 
     return result;
 }
+
+/**
+ * Segment format can also contain other type of metadata, for example in Images/Hyperlink,
+ * we want to preserve these properties when merging format
+ */
+function getFormatWithoutSegmentFormat(
+    sourceFormat: ContentModelSegmentFormat
+): ContentModelSegmentFormat {
+    const resultFormat = {
+        ...sourceFormat,
+    };
+    KeysOfSegmentFormat.forEach(key => delete resultFormat[key]);
+    return resultFormat;
+}