Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merge Link & Image Format when using MergeModel #2681

Merged
merged 9 commits into from
Jun 6, 2024
Merged

Merge Link & Image Format when using MergeModel #2681

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2552c3e
mergeLinkFormat
BryanValverdeU Jun 4, 2024
96ea0c0
Merge branch 'master' into u/bvalverde/mergeLinkFormat
BryanValverdeU Jun 5, 2024
0fbb114
Also fix for images
BryanValverdeU Jun 5, 2024
92dc7d7
Merge branch 'u/bvalverde/mergeLinkFormat' of https://github.com/micr…
BryanValverdeU Jun 5, 2024
5b1c7bd
remove unneeded changes
BryanValverdeU Jun 5, 2024
703d103
Remove more unneeded changes
BryanValverdeU Jun 5, 2024
c3a30e5
Address comment
BryanValverdeU Jun 5, 2024
23b674a
nit
BryanValverdeU Jun 5, 2024
83f4442
Merge branch 'master' into u/bvalverde/mergeLinkFormat
JiuqingSong Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 56 additions & 2 deletions packages/roosterjs-content-model-dom/lib/modelApi/editing/mergeModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import type {
ContentModelBlock,
ContentModelBlockFormat,
ContentModelDocument,
ContentModelHyperLinkFormat,
ContentModelListItem,
ContentModelParagraph,
ContentModelSegmentFormat,
Expand Down Expand Up @@ -347,7 +348,7 @@ function applyDefaultFormat(
break;

case 'Paragraph':
const paragraphFormat = block.decorator?.format || {};
const paraFormat = block.decorator?.format || {};
const paragraph = mutateBlock(block);

paragraph.segments.forEach(segment => {
Expand All @@ -356,9 +357,18 @@ function applyDefaultFormat(
}

segment.format = mergeSegmentFormat(applyDefaultFormatOption, format, {
...paragraphFormat,
...paraFormat,
...segment.format,
});

if (segment.link) {
segment.link.format = mergeLinkFormat(
applyDefaultFormatOption,
format,
paraFormat,
segment.link.format
);
}
});

if (applyDefaultFormatOption === 'keepSourceEmphasisFormat') {
Expand All @@ -375,6 +385,50 @@ function mergeBlockFormat(applyDefaultFormatOption: string, block: ReadonlyConte
}
}

function mergeLinkFormat(
applyDefaultFormatOption: 'mergeAll' | 'keepSourceEmphasisFormat',
targetFormat: ContentModelSegmentFormat,
paraFormat: ContentModelSegmentFormat,
linkFormat: ContentModelHyperLinkFormat
) {
const segmentFormat = mergeSegmentFormat(
applyDefaultFormatOption,
getSegmentFormatInLinkFormat(targetFormat),
{
...getSegmentFormatInLinkFormat(paraFormat),
...getSegmentFormatInLinkFormat(linkFormat),
}
);

if (applyDefaultFormatOption == 'keepSourceEmphasisFormat') {
delete linkFormat.backgroundColor;
delete linkFormat.textColor;
}

return {
...linkFormat,
...segmentFormat,
};
}

function getSegmentFormatInLinkFormat(
targetFormat: ContentModelSegmentFormat
): ContentModelSegmentFormat {
const result = {
textColor: targetFormat.textColor,
backgroundColor: targetFormat.backgroundColor,
underline: targetFormat.underline,
};

getObjectKeys(result).forEach(key => {
if (result[key] == undefined) {
delete result[key];
}
});

return result;
}

function mergeSegmentFormat(
applyDefaultFormatOption: 'mergeAll' | 'keepSourceEmphasisFormat',
targetFormat: ContentModelSegmentFormat,
Expand Down
210 changes: 210 additions & 0 deletions packages/roosterjs-content-model-dom/test/modelApi/editing/mergeModelTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3533,4 +3533,214 @@ describe('mergeModel', () => {
tableContext: undefined,
});
});

it('Merge Link Format with mergeAll option', () => {
const newTarget: ContentModelDocument = {
blockGroupType: 'Document',
blocks: [
{
segments: [
{
isSelected: true,
segmentType: 'SelectionMarker',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
};
const mergeLinkSourceModel: ContentModelDocument = {
blockGroupType: 'Document',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Text',
text: 'Work Item 222824',
format: {
fontFamily:
'"Segoe UI VSS (Regular)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
textColor: 'var(--communication-foreground,rgba(0, 90, 158, 1))',
underline: true,
italic: false,
backgroundColor: 'rgb(32, 31, 30)',
},
link: {
format: {
underline: true,
href: 'https://www.bing.com',
anchorClass: 'bolt-link',
textColor:
'var(--communication-foreground,rgba(0, 90, 158, 1))',
backgroundColor: 'rgb(32, 31, 30)',
borderRadius: '2px',
textAlign: 'start',
},
dataset: {},
},
},
{
segmentType: 'Text',
text: 'Test',
format: {
fontFamily:
'"Segoe UI VSS (Regular)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
textColor: 'rgb(255, 255, 255)',
italic: false,
backgroundColor: 'rgb(32, 31, 30)',
},
},
],
format: {},
isImplicit: true,
segmentFormat: {
fontFamily:
'"Segoe UI VSS (Regular)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
},
},
],
};
mergeModel(newTarget, mergeLinkSourceModel, undefined, {
mergeFormat: 'mergeAll',
});

const para = newTarget.blocks[0] as ContentModelParagraph;
expect(para.segments[0].link).toEqual({
format: {
href: 'https://www.bing.com',
anchorClass: 'bolt-link',
borderRadius: '2px',
textAlign: 'start',
textColor: 'var(--communication-foreground,rgba(0, 90, 158, 1))',
backgroundColor: 'rgb(32, 31, 30)',
underline: true,
},
dataset: {},
});
});

it('Merge Link Format with keepSourceEmphasisFormat option', () => {
const targetModel: ContentModelDocument = {
blockGroupType: 'Document',
blocks: [
{
segments: [
{
isSelected: true,
segmentType: 'SelectionMarker',
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
},
],
segmentFormat: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
blockType: 'Paragraph',
format: {},
},
],
format: {
fontFamily: 'Calibri',
fontSize: '11pt',
textColor: '#000000',
},
};
const sourceModel: ContentModelDocument = {
blockGroupType: 'Document',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Text',
text: 'Work Item 222824',
format: {
fontFamily:
'"Segoe UI VSS (Regular)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
textColor: 'var(--communication-foreground,rgba(0, 90, 158, 1))',
underline: true,
italic: false,
backgroundColor: 'rgb(32, 31, 30)',
},
link: {
format: {
underline: true,
href: 'https://www.bing.com',
anchorClass: 'bolt-link',
textColor:
'var(--communication-foreground,rgba(0, 90, 158, 1))',
backgroundColor: 'rgb(32, 31, 30)',
borderRadius: '2px',
textAlign: 'start',
},
dataset: {},
},
},
{
segmentType: 'Text',
text: 'Test',
format: {
fontFamily:
'"Segoe UI VSS (Regular)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
textColor: 'rgb(255, 255, 255)',
italic: false,
backgroundColor: 'rgb(32, 31, 30)',
},
},
],
format: {},
isImplicit: true,
segmentFormat: {
fontFamily:
'"Segoe UI VSS (Regular)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontSize: '14px',
},
},
],
};

mergeModel(targetModel, sourceModel, undefined, {
mergeFormat: 'keepSourceEmphasisFormat',
});

const para = targetModel.blocks[0] as ContentModelParagraph;
expect(para.segments[0].link).toEqual({
format: {
href: 'https://www.bing.com',
anchorClass: 'bolt-link',
borderRadius: '2px',
textAlign: 'start',
textColor: '#000000',
underline: true,
},
dataset: {},
});
});
});
Loading