Skip to content

Commit

Permalink
Remove deprecated colors from borders, text and background. (#2045)
Browse files Browse the repository at this point in the history
* Support more border styles

* init

* Revert  unrelated change

* Fix dependencies

* address comments

* try fix build
  • Loading branch information
BryanValverdeU authored Aug 29, 2023
1 parent 7c6a320 commit 0439b5a
Show file tree
Hide file tree
Showing 15 changed files with 901 additions and 129 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,35 @@
import { DarkColorHandler } from 'roosterjs-editor-types';
import { getTagOfNode } from 'roosterjs-editor-dom';

/**
* List of deprecated colors
*/
export const DeprecatedColors: string[] = [
'inactiveborder',
'activeborder',
'inactivecaptiontext',
'inactivecaption',
'activecaption',
'appworkspace',
'infobackground',
'background',
'buttonhighlight',
'buttonshadow',
'captiontext',
'infotext',
'menutext',
'menu',
'scrollbar',
'threeddarkshadow',
'threedface',
'threedhighlight',
'threedlightshadow',
'threedfhadow',
'windowtext',
'windowframe',
'window',
];

/**
* @internal
*/
Expand All @@ -21,6 +50,10 @@ export function getColor(
undefined;
}

if (color && DeprecatedColors.indexOf(color) > -1) {
color = undefined;
}

if (darkColorHandler) {
color = darkColorHandler.parseColorValue(color).lightModeColor;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export { setParagraphNotImplicit } from './modelApi/block/setParagraphNotImplici

export { parseValueWithUnit } from './formatHandlers/utils/parseValueWithUnit';
export { BorderKeys } from './formatHandlers/common/borderFormatHandler';
export { DeprecatedColors } from './formatHandlers/utils/color';
export { defaultImplicitFormatMap } from './formatHandlers/utils/defaultStyles';

export { createDomToModelContext } from './domToModel/context/createDomToModelContext';
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHand
import { backgroundColorFormatHandler } from '../../../lib/formatHandlers/common/backgroundColorFormatHandler';
import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
import { DeprecatedColors } from '../../../lib/formatHandlers/utils/color';
import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
import {
BackgroundColorFormat,
Expand Down Expand Up @@ -62,6 +63,16 @@ describe('backgroundColorFormatHandler.parse', () => {

expect(format.backgroundColor).toBe('red');
});

DeprecatedColors.forEach(color => {
it('Remove deprecated color ' + color, () => {
div.style.backgroundColor = color;

backgroundColorFormatHandler.parse(format, div, context, {});

expect(format.backgroundColor).toBe(undefined);
});
});
});

describe('backgroundColorFormatHandler.apply', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
import { DeprecatedColors } from '../../../lib';
import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
import { textColorFormatHandler } from '../../../lib/formatHandlers/segment/textColorFormatHandler';
import {
Expand Down Expand Up @@ -87,6 +88,16 @@ describe('textColorFormatHandler.parse', () => {

expect(format.textColor).toBe('red');
});

DeprecatedColors.forEach(color => {
it('Remove deprecated color ' + color, () => {
div.style.backgroundColor = color;

textColorFormatHandler.parse(format, div, context, {});

expect(format.textColor).toBe(undefined);
});
});
});

describe('textColorFormatHandler.apply', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import addParser from './utils/addParser';
import ContentModelBeforePasteEvent from '../../../publicTypes/event/ContentModelBeforePasteEvent';
import { chainSanitizerCallback, getPasteSource } from 'roosterjs-editor-dom';
import { ContentModelBlockFormat, FormatParser } from 'roosterjs-content-model-types';
import { deprecatedBorderColorParser } from './utils/deprecatedColorParser';
import { IContentModelEditor } from '../../../publicTypes/IContentModelEditor';
import { parseDeprecatedColor } from './utils/deprecatedColorParser';
import { parseLink } from './utils/linkParser';
import { processPastedContentFromExcel } from './Excel/processPastedContentFromExcel';
import { processPastedContentFromPowerPoint } from './PowerPoint/processPastedContentFromPowerPoint';
Expand Down Expand Up @@ -80,7 +80,7 @@ export default class ContentModelPastePlugin implements EditorPlugin {
if (!ev.domToModelOption) {
return;
}
const pasteSource = getPasteSource(event, false);
const pasteSource = getPasteSource(ev, false);
switch (pasteSource) {
case KnownPasteSourceType.WordDesktop:
processPastedContentFromWordDesktop(ev);
Expand All @@ -90,32 +90,30 @@ export default class ContentModelPastePlugin implements EditorPlugin {
break;
case KnownPasteSourceType.ExcelOnline:
case KnownPasteSourceType.ExcelDesktop:
if (
event.pasteType === PasteType.Normal ||
event.pasteType === PasteType.MergeFormat
) {
if (ev.pasteType === PasteType.Normal || ev.pasteType === PasteType.MergeFormat) {
// Handle HTML copied from Excel
processPastedContentFromExcel(ev, this.editor.getTrustedHTMLHandler());
}
break;
case KnownPasteSourceType.GoogleSheets:
event.sanitizingOption.additionalTagReplacements[GOOGLE_SHEET_NODE_NAME] = '*';
ev.sanitizingOption.additionalTagReplacements[GOOGLE_SHEET_NODE_NAME] = '*';
break;
case KnownPasteSourceType.PowerPointDesktop:
processPastedContentFromPowerPoint(ev, this.editor.getTrustedHTMLHandler());
break;
}

addParser(ev.domToModelOption, 'link', parseLink);
parseDeprecatedColor(ev.sanitizingOption);
addParser(ev.domToModelOption, 'tableCell', deprecatedBorderColorParser);
addParser(ev.domToModelOption, 'table', deprecatedBorderColorParser);
sanitizeBlockStyles(ev.sanitizingOption);

if (event.pasteType === PasteType.MergeFormat) {
if (ev.pasteType === PasteType.MergeFormat) {
addParser(ev.domToModelOption, 'block', blockElementParser);
addParser(ev.domToModelOption, 'listLevel', blockElementParser);
}

event.sanitizingOption.unknownTagReplacement = this.unknownTagReplacement;
ev.sanitizingOption.unknownTagReplacement = this.unknownTagReplacement;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,41 +1,21 @@
import { chainSanitizerCallback } from 'roosterjs-editor-dom';
import { HtmlSanitizerOptions } from 'roosterjs-editor-types';

const DeprecatedColorList: string[] = [
'activeborder',
'activecaption',
'appworkspace',
'background',
'buttonhighlight',
'buttonshadow',
'captiontext',
'inactiveborder',
'inactivecaption',
'inactivecaptiontext',
'infobackground',
'infotext',
'menu',
'menutext',
'scrollbar',
'threeddarkshadow',
'threedface',
'threedhighlight',
'threedlightshadow',
'threedfhadow',
'window',
'windowframe',
'windowtext',
];
import { BorderFormat, FormatParser } from 'roosterjs-content-model-types';
import { BorderKeys, DeprecatedColors } from 'roosterjs-content-model-dom';

/**
* @internal
*/
export function parseDeprecatedColor(sanitizingOption: Required<HtmlSanitizerOptions>) {
['color', 'background-color'].forEach(property => {
chainSanitizerCallback(
sanitizingOption.cssStyleCallbacks,
property,
(value: string) => DeprecatedColorList.indexOf(value) < 0
);
export const deprecatedBorderColorParser: FormatParser<BorderFormat> = (
format: BorderFormat
): void => {
BorderKeys.forEach(key => {
const value = format[key];
let color: string = '';
if (
value &&
DeprecatedColors.some(dColor => value.indexOf(dColor) > -1 && (color = dColor))
) {
const newValue = value.replace(color, '').trimRight();
format[key] = newValue;
}
});
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ import { KnownPasteSourceType, PasteType, PluginEventType } from 'roosterjs-edit

const trustedHTMLHandler = <any>'mock';
const GOOGLE_SHEET_NODE_NAME = 'google-sheets-html-origin';
const DEFAULT_TIMES_ADD_PARSER_CALLED = 3;

describe('Paste', () => {
describe('Content Model Paste Plugin Test', () => {
let editor: IContentModelEditor;

beforeEach(() => {
Expand Down Expand Up @@ -89,8 +90,8 @@ describe('Paste', () => {
expect(event.domToModelOption.processorOverride?.element).toBe(
WordDesktopFile.wordDesktopElementProcessor
);
expect(addParser.default).toHaveBeenCalledTimes(4);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(5);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(1);
});

Expand All @@ -106,9 +107,9 @@ describe('Paste', () => {
event,
trustedHTMLHandler
);
expect(addParser.default).toHaveBeenCalledTimes(4);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 3);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
});

it('Excel | image', () => {
Expand All @@ -123,8 +124,8 @@ describe('Paste', () => {
event,
trustedHTMLHandler
);
expect(addParser.default).toHaveBeenCalledTimes(1);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
});

Expand All @@ -139,9 +140,9 @@ describe('Paste', () => {
event,
trustedHTMLHandler
);
expect(addParser.default).toHaveBeenCalledTimes(2);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 1);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
});

it('Excel Online', () => {
Expand All @@ -155,9 +156,9 @@ describe('Paste', () => {
event,
trustedHTMLHandler
);
expect(addParser.default).toHaveBeenCalledTimes(2);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 1);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
});

it('Power Point', () => {
Expand All @@ -173,9 +174,9 @@ describe('Paste', () => {
event,
trustedHTMLHandler
);
expect(addParser.default).toHaveBeenCalledTimes(1);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
});

it('Wac', () => {
Expand All @@ -186,9 +187,9 @@ describe('Paste', () => {
plugin.onPluginEvent(event);

expect(WacFile.processPastedContentWacComponents).toHaveBeenCalledWith(event);
expect(addParser.default).toHaveBeenCalledTimes(5);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 4);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(4);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
});

it('Default', () => {
Expand All @@ -197,9 +198,9 @@ describe('Paste', () => {
plugin.initialize(editor);
plugin.onPluginEvent(event);

expect(addParser.default).toHaveBeenCalledTimes(1);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
});

it('Google Sheets', () => {
Expand All @@ -208,9 +209,9 @@ describe('Paste', () => {
plugin.initialize(editor);
plugin.onPluginEvent(event);

expect(addParser.default).toHaveBeenCalledTimes(1);
expect(addParser.default).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(3);
expect(chainSanitizerCallbackFile.default).toHaveBeenCalledTimes(1);
expect(
event.sanitizingOption.additionalTagReplacements[GOOGLE_SHEET_NODE_NAME]
).toEqual('*');
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { deprecatedBorderColorParser } from '../../../../lib/editor/plugins/PastePlugin/utils/deprecatedColorParser';

const DeprecatedColors: string[] = [
'activeborder',
'activecaption',
'appworkspace',
'background',
'buttonhighlight',
'buttonshadow',
'captiontext',
'inactiveborder',
'inactivecaption',
'inactivecaptiontext',
'infobackground',
'infotext',
'menu',
'menutext',
'scrollbar',
'threeddarkshadow',
'threedface',
'threedfhadow',
'threedhighlight',
'threedlightshadow',
'window',
'windowframe',
'windowtext',
];

describe('deprecateColorParserTests |', () => {
DeprecatedColors.forEach(color => {
it('Remove ' + color + ' in borderTop', () => {
const format = { borderTop: '1pt solid ' + color };

deprecatedBorderColorParser(format, <any>null, <any>null, <any>null);

expect(format).toEqual({
borderTop: '1pt solid',
});
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as processPastedContentFromExcel from '../../../../../lib/editor/plugin
import paste from '../../../../../lib/publicApi/utils/paste';
import { ClipboardData } from 'roosterjs-editor-types';
import { IContentModelEditor } from '../../../../../lib/publicTypes/IContentModelEditor';
import { initEditor } from './cmPasteFromExcelTest';
import { initEditor } from './testUtils';
import { tableProcessor } from 'roosterjs-content-model-dom';

const ID = 'CM_Paste_From_ExcelOnline_E2E';
Expand All @@ -14,7 +14,7 @@ const clipboardData = <ClipboardData>(<any>{
rawHtml:
"<html>\r\n<body>\r\n<!--StartFragment--><div ccp_infra_version='3' ccp_infra_timestamp='1687871836672' ccp_infra_user_hash='1011877142' ccp_infra_copy_id='edfc2633-1068-4e16-9f9a-02e650eb665e' data-ccp-timestamp='1687871836672'><html><head><meta http-equiv=Content-Type content=\"text/html; charset=utf-8\"><meta name=ProgId content=Excel.Sheet><meta name=Generator content=\"Microsoft Excel 15\"><style>table\r\n\t{mso-displayed-decimal-separator:\"\\.\";\r\n\tmso-displayed-thousand-separator:\"\\,\";}\r\ntr\r\n\t{mso-height-source:auto;}\r\ncol\r\n\t{mso-width-source:auto;}\r\ntd\r\n\t{padding-top:1px;\r\n\tpadding-right:1px;\r\n\tpadding-left:1px;\r\n\tmso-ignore:padding;\r\n\tcolor:black;\r\n\tfont-size:11.0pt;\r\n\tfont-weight:400;\r\n\tfont-style:normal;\r\n\ttext-decoration:none;\r\n\tfont-family:Calibri, sans-serif;\r\n\tmso-font-charset:0;\r\n\ttext-align:general;\r\n\tvertical-align:bottom;\r\n\tborder:none;\r\n\twhite-space:nowrap;\r\n\tmso-rotate:0;}\r\n</style></head><body link=\"#0563C1\" vlink=\"#954F72\"><table width=128 style='border-collapse:collapse;width:96pt'><!--StartFragment--><col width=64 style='width:48pt' span=2><tr height=20 style='height:15.0pt'><td width=64 height=20 style='width:48pt;height:15.0pt'>Test</td><td width=64 style='width:48pt'>Test</td></tr><!--EndFragment--></table></body></html></div><!--EndFragment-->\r\n</body>\r\n</html>",
customValues: {},
snapshotBeforePaste: '<br><!--{"start":[0],"end":[0]}-->',
snapshotBeforePaste: '<div><br></div><!--{"start":[0,0],"end":[0,0]}-->',
htmlFirstLevelChildTags: ['DIV'],
html:
"<div ccp_infra_version='3' ccp_infra_timestamp='1687871836672' ccp_infra_user_hash='1011877142' ccp_infra_copy_id='edfc2633-1068-4e16-9f9a-02e650eb665e' data-ccp-timestamp='1687871836672'><html><head><meta http-equiv=Content-Type content=\"text/html; charset=utf-8\"><meta name=ProgId content=Excel.Sheet><meta name=Generator content=\"Microsoft Excel 15\"><style>table\r\n\t{mso-displayed-decimal-separator:\"\\.\";\r\n\tmso-displayed-thousand-separator:\"\\,\";}\r\ntr\r\n\t{mso-height-source:auto;}\r\ncol\r\n\t{mso-width-source:auto;}\r\ntd\r\n\t{padding-top:1px;\r\n\tpadding-right:1px;\r\n\tpadding-left:1px;\r\n\tmso-ignore:padding;\r\n\tcolor:black;\r\n\tfont-size:11.0pt;\r\n\tfont-weight:400;\r\n\tfont-style:normal;\r\n\ttext-decoration:none;\r\n\tfont-family:Calibri, sans-serif;\r\n\tmso-font-charset:0;\r\n\ttext-align:general;\r\n\tvertical-align:bottom;\r\n\tborder:none;\r\n\twhite-space:nowrap;\r\n\tmso-rotate:0;}\r\n</style></head><body link=\"#0563C1\" vlink=\"#954F72\"><table width=128 style='border-collapse:collapse;width:96pt'><!--StartFragment--><col width=64 style='width:48pt' span=2><tr height=20 style='height:15.0pt'><td width=64 height=20 style='width:48pt;height:15.0pt'>Test</td><td width=64 style='width:48pt'>Test</td></tr><!--EndFragment--></table></body></html></div>",
Expand Down
Loading

0 comments on commit 0439b5a

Please sign in to comment.