Bump Content Model version to 0.21.1 (#2242)

* margin in lists * remove code * type * refactor * fixes * remove parameter * refactor * remove file change * Use Content Model to handle Delete/Backspace key in more cases (#2162) * Do not set focus when quite shadow edit (#2163) * Fix #237217 (#2164) * Fix #237735 (#2165) * Fix #236416 (#2166) * wip * fixes * Fix #2160 (#2167) * Fix #2160 * fix build * test * remove test * remove test * remove test * Rearrange parameters of iterateSelections (#2180) * Rearrange parameters of iterateSelections * improve * Standalone editor step 0: Create a copy of Editor class (#2175) * Standalone editor step 0: Create a copy of Editor class * remove unnecessary change * improve * Fix #2061, apply pending format on Android (#2172) * Fix #2061 * Fix for Android * Fix #2080 (#2173) * Standalone editor Step 0.5: Create test page for adapter editor (#2176) * Standalone editor step 0: Create a copy of Editor class * Standalone editor Step 0.5: Create test page for adapter editor * Add Content Model functionality to AdapterEditor * remove unnecessary change * remove unnecessary change * improve * toggleListType * type * Fix Mouseout behavior to hide table editors (#2181) * init * init * fix build * Add comment * Fix apply Table Inside borders operation and Demo site (#2184) * fix cases * fix demo * Add image size checkmarks to context menu (#2168) * Allow a max error un percentage size check * Allow a checkmark to be shown in ctx menu * Add checkmark to image sizes * Add missing type * Fix types * Add comment * Attempt to fix image selection * Revert unneeded changes in image selection * Use attr as backup in resize calc * Rely entirely on image selection * Revert changes to domeventplugin * Copy changes into content model adapter * Revert previous standalone editor change (#2189) * Revert previous standalone change * fix build * Move formatWithContentModel to be a core API (#2185) * Content Model: Allow clear cache from formatContentModel (#2186) * Move formatWithContentModel to be a core API * Content Model: Allow clear cache from formatContentModel * Content Model: Potential perf improvement in getFormatState (#2187) * Content Model: Move pending format into editor core (#2188) * Move formatWithContentModel to be a core API * Content Model: Allow clear cache from formatContentModel * Content Model: Move pending format into editor core * Convert DeleteResult from const enum to string literal type (#2191) * Move paste plugin to roosterjs-content-model-plugins package (#2192) * image selection plugin * check image parent node * Adding module entry to package.json (#2197) * Move ContentModelEdit plugin to plugins package (#2195) * Move ContentModelEdit plugin to plugins package * improve --------- Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com> * Move type files to roosterjs-content-model-types package (#2196) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * fix build * fix build * Move core API to roosterjs-content-model-core package (#2198) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * fix build * fix build * Move corePlugins to roosterjs-content-model-core package (#2199) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * fix build * Move format API to roosterjs-content-model-api package (#2200) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * Move format API to roosterjs-content-model-api package * fix build * Improve * Decouple ContentModelEditor from roosterjs-editor-core (#2201) * Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * Move format API to roosterjs-content-model-api package * fix build * Improve * Decouple ContentModelEditor from roosterjs-editor-core * improve * Remove public enum from Content Model (#2204) * Directly create Content Model editor (#2206) * Fix Delimiter Nested Entity Scenario (#2207) * init * comment * Standalone editor: Remove dependency to EditorCore (#2208) * Remove dependency to EditorCore * fix test * improve --------- Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com> * Standalone Editor: Remove legacy plugin: PendingFormatStatePlugin (#2209) * Remove dependency to EditorCore * fix test * improve * Standalone editor: Remove PendingFormatStatePlugin * fix build * Standalone editor: Merge DOMEventPlugin and MouseUpPlugin (#2210) * Remove dependency to EditorCore * fix test * improve * Standalone editor: Remove PendingFormatStatePlugin * fix build * Merge DOMEventPlugin and MouseUpPlugin * Standalone Editor: CreateStandaloneEditorCore (#2218) * Standalone Editor: Port LifecyclePlugin (#2219) * Standalone Editor: CreateStandaloneEditorCore * Standalone Editor: Port LifecyclePlugin * fix build * fix test * improve * fix test * fix comment * select on click * test * Standalone Editor: Support keyboard input (init step) (#2221) * apply table format fix * remove console.log * fix comments * Standalone Editor: Port EntityPlugin (#2223) * Standalone Editor: CreateStandaloneEditorCore * Standalone Editor: Port LifecyclePlugin * fix build * fix test * improve * fix test * Standalone Editor: Support keyboard input (init step) * Standalone Editor: Port EntityPlugin * improve * Add test * improve * test * Content Model: Keep image port if exist (#2226) * add color spectrum check * auto format test * remove empty line * Allow each package has its own version when publish (#2233) * Allow each package has its own version when publish * remove unnecessary change * Content Model: Fix #2230 (#2231) * Content Model: keep default format when paste into empty editor (#2232) * Standalone Editor: Add a SelectionPlugin (#2228) * Content Model: Go back to getDarkColor (#2239) * Content Model: go back to getDarkColor * fix test * Content Model: Fix overwrite table cell bug (#2240) --------- Co-authored-by: Júlia Roldi <juliaroldi@microsoft.com> Co-authored-by: Julia Roldi <87443959+juliaroldi@users.noreply.github.com> Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com> Co-authored-by: Andres-CT98 <107568016+Andres-CT98@users.noreply.github.com> Co-authored-by: Ian Elizondo <ianeli@microsoft.com> Co-authored-by: Keven Arroyo <dake.3601@gmail.com>
microsoft · Dec 4, 2023 · 14cd466 · 14cd466
1 parent 03a0395
commit 14cd466
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 66 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -20,6 +20,7 @@ import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentMo
 import { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { createEmojiPlugin, createPasteOptionPlugin, RibbonPlugin } from 'roosterjs-react';
 import { EditorPlugin } from 'roosterjs-editor-types';
+import { getDarkColor } from 'roosterjs-color-utils';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
 import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
 import {
@@ -236,6 +237,7 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
                             plugins={allPlugins}
                             defaultSegmentFormat={defaultFormat}
                             inDarkMode={this.state.isDarkMode}
+                            getDarkColor={getDarkColor}
                             experimentalFeatures={this.state.initState.experimentalFeatures}
                             undoMetadataSnapshotService={this.snapshotPlugin.getSnapshotService()}
                             trustedHTMLHandler={trustedHTMLHandler}

diff --git a/packages-content-model/roosterjs-content-model-core/lib/editor/DarkColorHandlerImpl.ts b/packages-content-model/roosterjs-content-model-core/lib/editor/DarkColorHandlerImpl.ts
@@ -1,12 +1,10 @@
-import * as Color from 'color';
 import { getObjectKeys, parseColor, setColor } from 'roosterjs-editor-dom';
 import type {
     ColorKeyAndValue,
     DarkColorHandler,
     ModeIndependentColor,
 } from 'roosterjs-editor-types';
 
-const DefaultLightness = 21.25; // Lightness for #333333
 const VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/;
 const VARIABLE_PREFIX = 'var(';
 const COLOR_VAR_PREFIX = 'darkColor';
@@ -30,11 +28,8 @@ const ColorAttributeName: { [key in ColorAttributeEnum]: string }[] = [
  */
 export class DarkColorHandlerImpl implements DarkColorHandler {
     private knownColors: Record<string, Readonly<ModeIndependentColor>> = {};
-    readonly baseLightness: number;
 
-    constructor(private contentDiv: HTMLElement, baseDarkColor?: string) {
-        this.baseLightness = getLightness(baseDarkColor);
-    }
+    constructor(private contentDiv: HTMLElement, private getDarkColor: (color: string) => string) {}
 
     /**
      * Get a copy of known colors
@@ -66,7 +61,7 @@ export class DarkColorHandlerImpl implements DarkColorHandler {
                 colorKey || `--${COLOR_VAR_PREFIX}_${lightModeColor.replace(/[^\d\w]/g, '_')}`;
 
             if (!this.knownColors[colorKey]) {
-                darkModeColor = darkModeColor || getDarkColor(lightModeColor, this.baseLightness);
+                darkModeColor = darkModeColor || this.getDarkColor(lightModeColor);
 
                 this.knownColors[colorKey] = { lightModeColor, darkModeColor };
                 this.contentDiv.style.setProperty(colorKey, darkModeColor);
@@ -176,30 +171,3 @@ export class DarkColorHandlerImpl implements DarkColorHandler {
         });
     }
 }
-
-function getDarkColor(color: string, baseLightness: number): string {
-    try {
-        const computedColor = Color(color || undefined);
-        const colorLab = computedColor.lab().array();
-        const newLValue = (100 - colorLab[0]) * ((100 - baseLightness) / 100) + baseLightness;
-        color = Color.lab(newLValue, colorLab[1], colorLab[2])
-            .rgb()
-            .alpha(computedColor.alpha())
-            .toString();
-    } catch {}
-
-    return color;
-}
-
-function getLightness(color?: string): number {
-    let result = DefaultLightness;
-
-    if (color) {
-        try {
-            const computedColor = Color(color || undefined);
-            result = computedColor.lab().array()[0];
-        } catch {}
-    }
-
-    return result;
-}
diff --git a/packages-content-model/roosterjs-content-model-core/lib/editor/createStandaloneEditorCore.ts b/packages-content-model/roosterjs-content-model-core/lib/editor/createStandaloneEditorCore.ts
@@ -42,7 +42,10 @@ export function createStandaloneEditorCore(
             corePlugins.lifecycle,
         ],
         environment: createEditorEnvironment(),
-        darkColorHandler: new DarkColorHandlerImpl(contentDiv, options.baseDarkColor),
+        darkColorHandler: new DarkColorHandlerImpl(
+            contentDiv,
+            options.getDarkColor ?? getDarkColorFallback
+        ),
         trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler,
         ...createStandaloneEditorDefaultSettings(options),
         ...getPluginState(corePlugins),
@@ -82,3 +85,8 @@ function getPluginState(corePlugins: StandaloneEditorCorePlugins): StandaloneEdi
         selection: corePlugins.selection.getState(),
     };
 }
+
+// A fallback function, always return original color
+function getDarkColorFallback(color: string) {
+    return color;
+}
diff --git a/packages-content-model/roosterjs-content-model-core/package.json b/packages-content-model/roosterjs-content-model-core/package.json
@@ -3,7 +3,6 @@
     "description": "Content Model for roosterjs (Under development)",
     "dependencies": {
         "tslib": "^2.3.1",
-        "color": "^3.0.0",
         "roosterjs-editor-types": "",
         "roosterjs-editor-dom": "",
         "roosterjs-content-model-dom": "",

diff --git a/packages-content-model/roosterjs-content-model-core/test/editor/DarkColorHandlerImplTest.ts b/packages-content-model/roosterjs-content-model-core/test/editor/DarkColorHandlerImplTest.ts
@@ -1,26 +1,21 @@
 import { ColorKeyAndValue } from 'roosterjs-editor-types';
 import { DarkColorHandlerImpl } from '../../lib/editor/DarkColorHandlerImpl';
 
+function getDarkColor(color: string) {
+    return 'Dark_' + color;
+}
+
 describe('DarkColorHandlerImpl.ctor', () => {
     it('No additional param', () => {
         const div = document.createElement('div');
-        const handler = new DarkColorHandlerImpl(div);
-
-        expect(handler).toBeDefined();
-        expect(handler.baseLightness).toBe(21.25);
-    });
-
-    it('With customized base color', () => {
-        const div = document.createElement('div');
-        const handler = new DarkColorHandlerImpl(div, '#555555');
+        const handler = new DarkColorHandlerImpl(div, getDarkColor);
 
         expect(handler).toBeDefined();
-        expect(Math.round(handler.baseLightness)).toBe(36);
     });
 
     it('Calculate color using customized base color', () => {
         const div = document.createElement('div');
-        const handler = new DarkColorHandlerImpl(div, '#555555');
+        const handler = new DarkColorHandlerImpl(div, getDarkColor);
 
         const darkColor = handler.registerColor('red', true);
         const parsedColor = handler.parseColorValue(darkColor);
@@ -29,7 +24,7 @@ describe('DarkColorHandlerImpl.ctor', () => {
         expect(parsedColor).toEqual({
             key: '--darkColor_red',
             lightModeColor: 'red',
-            darkModeColor: 'rgb(255, 72, 40)',
+            darkModeColor: 'Dark_red',
         });
     });
 });
@@ -40,7 +35,7 @@ describe('DarkColorHandlerImpl.parseColorValue', () => {
 
     beforeEach(() => {
         div = document.createElement('div');
-        handler = new DarkColorHandlerImpl(div);
+        handler = new DarkColorHandlerImpl(div, getDarkColor);
     });
 
     function runTest(input: string, expectedOutput: ColorKeyAndValue) {
@@ -143,7 +138,7 @@ describe('DarkColorHandlerImpl.registerColor', () => {
                 setProperty,
             },
         } as any) as HTMLElement;
-        handler = new DarkColorHandlerImpl(div);
+        handler = new DarkColorHandlerImpl(div, getDarkColor);
     });
 
     function runTest(
@@ -186,10 +181,10 @@ describe('DarkColorHandlerImpl.registerColor', () => {
             {
                 '--darkColor_red': {
                     lightModeColor: 'red',
-                    darkModeColor: 'rgb(255, 39, 17)',
+                    darkModeColor: 'Dark_red',
                 },
             },
-            [['--darkColor_red', 'rgb(255, 39, 17)']]
+            [['--darkColor_red', 'Dark_red']]
         );
     });
 
@@ -222,10 +217,10 @@ describe('DarkColorHandlerImpl.registerColor', () => {
             {
                 '--aa': {
                     lightModeColor: 'red',
-                    darkModeColor: 'rgb(255, 39, 17)',
+                    darkModeColor: 'Dark_red',
                 },
             },
-            [['--aa', 'rgb(255, 39, 17)']]
+            [['--aa', 'Dark_red']]
         );
     });
 
@@ -395,7 +390,7 @@ describe('DarkColorHandlerImpl.transformElementColor', () => {
 
     beforeEach(() => {
         contentDiv = document.createElement('div');
-        handler = new DarkColorHandlerImpl(contentDiv);
+        handler = new DarkColorHandlerImpl(contentDiv, getDarkColor);
 
         parseColorSpy = spyOn(handler, 'parseColorValue').and.callThrough();
         registerColorSpy = spyOn(handler, 'registerColor').and.callThrough();

diff --git a/...ages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/addSelectionMarker.ts b/...ages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/addSelectionMarker.ts
@@ -7,9 +7,13 @@ import type { ContentModelBlockGroup, DomToModelContext } from 'roosterjs-conten
  * @internal
  */
 export function addSelectionMarker(group: ContentModelBlockGroup, context: DomToModelContext) {
-    const marker = createSelectionMarker(context.segmentFormat);
+    const segmentFormat = {
+        ...context.defaultFormat,
+        ...context.segmentFormat,
+    };
+    const marker = createSelectionMarker(segmentFormat);
 
     addDecorators(marker, context);
 
-    addSegment(group, marker, context.blockFormat);
+    addSegment(group, marker, context.blockFormat, segmentFormat);
 }
diff --git a/packages-content-model/roosterjs-content-model-dom/lib/index.ts b/packages-content-model/roosterjs-content-model-dom/lib/index.ts
@@ -49,7 +49,6 @@ export { createListLevel } from './modelApi/creators/createListLevel';
 export { addBlock } from './modelApi/common/addBlock';
 export { addCode } from './modelApi/common/addDecorators';
 export { addLink } from './modelApi/common/addDecorators';
-export { ensureParagraph } from './modelApi/common/ensureParagraph';
 
 export { normalizeContentModel } from './modelApi/common/normalizeContentModel';
 export { isGeneralSegment } from './modelApi/common/isGeneralSegment';

diff --git a/packages-content-model/roosterjs-content-model-dom/lib/modelApi/common/addSegment.ts b/packages-content-model/roosterjs-content-model-dom/lib/modelApi/common/addSegment.ts
@@ -4,6 +4,7 @@ import type {
     ContentModelBlockGroup,
     ContentModelParagraph,
     ContentModelSegment,
+    ContentModelSegmentFormat,
 } from 'roosterjs-content-model-types';
 
 /**
@@ -16,9 +17,10 @@ import type {
 export function addSegment(
     group: ContentModelBlockGroup,
     newSegment: ContentModelSegment,
-    blockFormat?: ContentModelBlockFormat
+    blockFormat?: ContentModelBlockFormat,
+    segmentFormat?: ContentModelSegmentFormat
 ): ContentModelParagraph {
-    const paragraph = ensureParagraph(group, blockFormat);
+    const paragraph = ensureParagraph(group, blockFormat, segmentFormat);
     const lastSegment = paragraph.segments[paragraph.segments.length - 1];
 
     if (newSegment.segmentType == 'SelectionMarker') {

diff --git a/packages-content-model/roosterjs-content-model-dom/lib/modelApi/common/ensureParagraph.ts b/packages-content-model/roosterjs-content-model-dom/lib/modelApi/common/ensureParagraph.ts
@@ -4,23 +4,26 @@ import type {
     ContentModelBlockFormat,
     ContentModelBlockGroup,
     ContentModelParagraph,
+    ContentModelSegmentFormat,
 } from 'roosterjs-content-model-types';
 
 /**
+ * @internal
  * Ensure there is a Paragraph that can insert segments in a Content Model Block Group
  * @param group The parent block group of the target paragraph
  * @param blockFormat Format of the paragraph. This is only used if we need to create a new paragraph
  */
 export function ensureParagraph(
     group: ContentModelBlockGroup,
-    blockFormat?: ContentModelBlockFormat
+    blockFormat?: ContentModelBlockFormat,
+    segmentFormat?: ContentModelSegmentFormat
 ): ContentModelParagraph {
     const lastBlock = group.blocks[group.blocks.length - 1];
 
     if (lastBlock?.blockType == 'Paragraph') {
         return lastBlock;
     } else {
-        const paragraph = createParagraph(true, blockFormat);
+        const paragraph = createParagraph(true, blockFormat, segmentFormat);
         addBlock(group, paragraph);
 
         return paragraph;

diff --git a/...ontent-model/roosterjs-content-model-dom/test/domToModel/processors/childProcessorTest.ts b/...ontent-model/roosterjs-content-model-dom/test/domToModel/processors/childProcessorTest.ts
@@ -325,6 +325,7 @@ describe('childProcessor', () => {
                 { segmentType: 'SelectionMarker', format: { a: 'b' } as any, isSelected: true },
             ],
             isImplicit: true,
+            segmentFormat: { a: 'b' } as any,
             format: {},
         });
     });

diff --git a/...content-model/roosterjs-content-model-dom/test/domToModel/utils/addSelectionMarkerTest.ts b/...content-model/roosterjs-content-model-dom/test/domToModel/utils/addSelectionMarkerTest.ts
@@ -52,6 +52,7 @@ describe('addSelectionMarker', () => {
                             format: { fontWeight: 'bold' },
                         },
                     ],
+                    segmentFormat: { fontWeight: 'bold' },
                 },
             ],
         });

diff --git a/packages-content-model/roosterjs-content-model-plugins/lib/edit/keyboardInput.ts b/packages-content-model/roosterjs-content-model-plugins/lib/edit/keyboardInput.ts
@@ -1,4 +1,5 @@
 import { deleteSelection, isModifierKey } from 'roosterjs-content-model-core';
+import { normalizeContentModel } from 'roosterjs-content-model-dom';
 import type { IContentModelEditor } from 'roosterjs-content-model-editor';
 import type { DOMSelection } from 'roosterjs-content-model-types';
 
@@ -26,6 +27,8 @@ export function keyboardInput(editor: IContentModelEditor, rawEvent: KeyboardEve
                     // We have deleted something, next input should inherit the segment format from deleted content, so set pending format here
                     context.newPendingFormat = result.insertPoint?.marker.format;
 
+                    normalizeContentModel(model);
+
                     // Do not preventDefault since we still want browser to handle the final input for now
                     return true;
                 } else {
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ describe('addSelectionMarker', () => { @@
                                 format: { fontWeight: 'bold' },
                             },
                         ],
+                        segmentFormat: { fontWeight: 'bold' },
                     },
                 ],
             });
@@ Expand Down @@