Bump rooster to 8.55.0, content model to 0.15.0 (#2060)

* Content Model: Improve cache behavior (#1999) * Content Model: Improve cache behavior * fix build * fix comment * Skip Trigger plugin event on plain text paste (#2011) * init * remove unneeded change * Update return type * Fix 218869: Do not allow dragging on readonly content (#2010) * Fix 218869: Do not allow dragging readonly content * fix test * Content Model: Fix 194024 and 220289 (#2012) * Content Model: Fix 221290 Support float for image (#2013) * Content Model: improve formatWithContentModel 1 (#2001) * Content Model: Improve cache behavior * fix build * Content Model: improve formatWithContentModel * Content Model: improve formatWithContentModel 2 (#2002) * Content Model: Improve cache behavior * fix build * Content Model: improve formatWithContentModel * Content Model: improve formatWithContentModel 2 * fix format * WIP * fix handles * MergeModel, do not inherit the styles of table when splitting the param (#2016) * init * init * address comment * update test names * fixes * Demo site: Fix insert link button in Content Model ribbon (#2018) * Content Model: insertEntity API (#1800) * Content Model insertEntity * improve * improve * Content Model: Improve cache behavior * fix build * Content Model: improve formatWithContentModel * Content Model: improve formatWithContentModel 2 * Improve * fix build * fix build * improve * add test * add test * add test * add test * fix dark color * fix test * fix build and test * crop * fix xase * check cell exist * Fix #1752, rename header to heading (#2020) * fix cell empty cells * fix flipped image * Update logic to decide if we need to merge a table on paste. (#2022) * Fix TableSelectionCopy * update unit tests * Fix 2 * address comment * Content Model: Rename a test file (#2029) * Fix Triple clicking a single cell selecting more than one (#2024) * fix triple click, optimisation * Remove `display: flex` style on paste (#2031) * init * Fix * Replace first cell content if input while on cell selection (#2030) * select first cell content and empty, add undo if change * Content Model: Fix 222135 (#2035) * Fix 222135 * fix build * Content Model: Fix 219312 (#2036) * Fix regression when creating the BeforePasteEvent (#2039) * init * fix build * Content Model: Fix 220050 (#2037) * Content Model: Fix 220050 * Fix build * improve * improve * Simplify the domToModel call in `paste.ts` (#2040) * add more changes * fix build * fix test * Content Model: Support vertical-align for image (#2041) * Content Model: Support vertical-align for image * fix build and test --------- Co-authored-by: Bryan Valverde U <[email protected]> * Remove deprecated colors from borders, text and background. (#2045) * Support more border styles * init * Revert unrelated change * Fix dependencies * address comments * try fix build * reselection * add space * Content Model: Improve insertEntity (#2047) * Content Model: Improve insertEntity * fix test * Content Model: Fix selection of entity (#2051) * Content Model: Always return size in pt when getFormatState (#2052) * Content Model: trigger ShadowEdit events (#2053) * Content Model: trigger ShadowEdit events * improve * Content Model: Add solid paragraph in new table cell (#2055) * Content Model: Do color transform for entity when copy/paste (#2056) * Content Model: Do color transform for entity when copy/paste * Call normalizeContentModel * Content Model: Paste plain text applies current format (#2057) * Content Model: Paste plain text applies current format * fix build * Content Model: Fix a regression of shadow edit (#2058) * Update versions * Fix double import * Double import 2 --------- Co-authored-by: Jiuqing Song <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Andres-CT98 <[email protected]>
microsoft · Sep 11, 2023 · 54e3f91 · 54e3f91
1 parent e2ae751
commit 54e3f91
Show file tree

Hide file tree

Showing 65 changed files with 2,564 additions and 1,042 deletions.
diff --git a/packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts b/packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
@@ -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
  */
@@ -21,6 +50,10 @@ export function getColor(
             undefined;
     }
 
+    if (color && DeprecatedColors.indexOf(color) > -1) {
+        color = undefined;
+    }
+
     if (darkColorHandler) {
         color = darkColorHandler.parseColorValue(color).lightModeColor;
     }

diff --git a/packages-content-model/roosterjs-content-model-dom/lib/index.ts b/packages-content-model/roosterjs-content-model-dom/lib/index.ts
@@ -42,11 +42,13 @@ export { unwrapBlock } from './modelApi/common/unwrapBlock';
 export { addSegment } from './modelApi/common/addSegment';
 export { isWhiteSpacePreserved } from './modelApi/common/isWhiteSpacePreserved';
 export { normalizeSingleSegment } from './modelApi/common/normalizeSegment';
+export { applySegmentFormatToElement } from './modelApi/common/applySegmentFormatToElement';
 
 export { setParagraphNotImplicit } from './modelApi/block/setParagraphNotImplicit';
 
 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';
diff --git a/...tent-model/roosterjs-content-model-dom/lib/modelApi/common/applySegmentFormatToElement.ts b/...tent-model/roosterjs-content-model-dom/lib/modelApi/common/applySegmentFormatToElement.ts
@@ -0,0 +1,16 @@
+import { applyFormat } from '../../modelToDom/utils/applyFormat';
+import { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
+import { createModelToDomContext } from '../../modelToDom/context/createModelToDomContext';
+
+/**
+ * Format an existing HTML element using Segment Format
+ * @param element The element to format
+ * @param format The format to apply
+ */
+export function applySegmentFormatToElement(
+    element: HTMLElement,
+    format: ContentModelSegmentFormat
+) {
+    const context = createModelToDomContext();
+    applyFormat(element, context.formatAppliers.segment, format, context);
+}
diff --git a/packages-content-model/roosterjs-content-model-dom/lib/modelToDom/handlers/handleEntity.ts b/packages-content-model/roosterjs-content-model-dom/lib/modelToDom/handlers/handleEntity.ts
@@ -61,6 +61,8 @@ export const handleEntity: ContentModelBlockHandler<ContentModelEntity> = (
         const [after] = addDelimiters(wrapper);
 
         context.regularSelection.current.segment = after;
+    } else if (isInlineEntity) {
+        context.regularSelection.current.segment = wrapper;
     }
 
     context.onNodeCreated?.(entityModel, wrapper);

diff --git a/...oosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts b/...oosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts
@@ -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,
@@ -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', () => {

diff --git a/...del/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts b/...del/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts
@@ -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 {
@@ -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', () => {

diff --git a/...es-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleEntityTest.ts b/...es-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleEntityTest.ts
@@ -174,6 +174,33 @@ describe('handleEntity', () => {
         expect(context.regularSelection.current.segment).toBe(span.nextSibling);
     });
 
+    it('Entity without delimiter', () => {
+        const span = document.createElement('span');
+        const entityModel: ContentModelEntity = {
+            blockType: 'Entity',
+            segmentType: 'Entity',
+            format: {},
+            id: 'entity_1',
+            type: 'entity',
+            isReadonly: true,
+            wrapper: span,
+        };
+
+        span.textContent = 'test';
+
+        const parent = document.createElement('div');
+        const result = handleEntity(document, parent, entityModel, context, null);
+
+        expect(parent.innerHTML).toBe(
+            '<span class="_Entity _EType_entity _EId_entity_1 _EReadonly_1" contenteditable="false">test</span>'
+        );
+        expect(span.outerHTML).toBe(
+            '<span class="_Entity _EType_entity _EId_entity_1 _EReadonly_1" contenteditable="false">test</span>'
+        );
+        expect(result).toBe(null);
+        expect(context.regularSelection.current.segment).toBe(span);
+    });
+
     it('With onNodeCreated', () => {
         const entityDiv = document.createElement('div');
         const entityModel: ContentModelEntity = {

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/switchShadowEdit.ts b/packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/switchShadowEdit.ts
@@ -1,6 +1,6 @@
 import { ContentModelEditorCore } from '../../publicTypes/ContentModelEditorCore';
 import { getSelectionPath } from 'roosterjs-editor-dom';
-import { SwitchShadowEdit } from 'roosterjs-editor-types';
+import { PluginEventType, SwitchShadowEdit } from 'roosterjs-editor-types';
 
 /**
  * @internal
@@ -14,19 +14,44 @@ export const switchShadowEdit: SwitchShadowEdit = (editorCore, isOn): void => {
 
     if (isOn != !!core.lifecycle.shadowEditFragment) {
         if (isOn) {
-            if (!core.cachedModel) {
-                core.cachedModel = core.api.createContentModel(core);
-            }
-
+            const model = !core.cachedModel ? core.api.createContentModel(core) : null;
             const range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
 
-            core.lifecycle.shadowEditSelectionPath =
-                range && getSelectionPath(core.contentDiv, range);
-            core.lifecycle.shadowEditFragment = core.contentDiv.ownerDocument.createDocumentFragment();
+            // Fake object, not used in Content Model Editor, just to satisfy original editor code
+            // TODO: we can remove them once we have standalone Content Model Editor
+            const fragment = core.contentDiv.ownerDocument.createDocumentFragment();
+            const selectionPath = range && getSelectionPath(core.contentDiv, range);
+
+            core.api.triggerEvent(
+                core,
+                {
+                    eventType: PluginEventType.EnteredShadowEdit,
+                    fragment,
+                    selectionPath,
+                },
+                false /*broadcast*/
+            );
+
+            // This need to be done after EnteredShadowEdit event is triggered since EnteredShadowEdit event will cause a SelectionChanged event
+            // if current selection is table selection or image selection
+            if (!core.cachedModel && model) {
+                core.cachedModel = model;
+            }
+
+            core.lifecycle.shadowEditSelectionPath = selectionPath;
+            core.lifecycle.shadowEditFragment = fragment;
         } else {
             core.lifecycle.shadowEditFragment = null;
             core.lifecycle.shadowEditSelectionPath = null;
 
+            core.api.triggerEvent(
+                core,
+                {
+                    eventType: PluginEventType.LeavingShadowEdit,
+                },
+                false /*broadcast*/
+            );
+
             if (core.cachedModel) {
                 core.api.setContentModel(core, core.cachedModel);
             }

diff --git a/...odel/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelCopyPastePlugin.ts b/...odel/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelCopyPastePlugin.ts
@@ -33,6 +33,7 @@ import {
     ClipboardData,
     SelectionRangeTypes,
     SelectionRangeEx,
+    ColorTransformDirection,
 } from 'roosterjs-editor-types';
 
 /**
@@ -94,7 +95,24 @@ export default class ContentModelCopyPastePlugin implements PluginWithState<Copy
         if (selection && !selection.areAllCollapsed) {
             const model = this.editor.createContentModel();
 
-            const pasteModel = cloneModel(model);
+            const pasteModel = cloneModel(model, {
+                includeCachedElement: this.editor.isDarkMode()
+                    ? (node, type) => {
+                          if (type == 'cache') {
+                              return undefined;
+                          } else {
+                              const result = node.cloneNode(true /*deep*/) as HTMLElement;
+
+                              this.editor?.transformToDarkColor(
+                                  result,
+                                  ColorTransformDirection.DarkToLight
+                              );
+
+                              return result;
+                          }
+                      }
+                    : false,
+            });
             if (selection.type === SelectionRangeTypes.TableSelection) {
                 iterateSelections([pasteModel], (path, tableContext) => {
                     if (tableContext?.table) {

diff --git a/.../roosterjs-content-model-editor/lib/editor/plugins/PastePlugin/ContentModelPastePlugin.ts b/.../roosterjs-content-model-editor/lib/editor/plugins/PastePlugin/ContentModelPastePlugin.ts
@@ -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';
@@ -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);
@@ -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;
     }
 }
 

diff --git a/...sterjs-content-model-editor/lib/editor/plugins/PastePlugin/utils/deprecatedColorParser.ts b/...sterjs-content-model-editor/lib/editor/plugins/PastePlugin/utils/deprecatedColorParser.ts
@@ -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;
+        }
     });
-}
+};