diff --git a/packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts b/packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts index aee3db1fa81..44411024aa2 100644 --- a/packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts +++ b/packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts @@ -21,8 +21,6 @@ const HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor'; const HIDE_SELECTION_CSS_KEY = '_DOMSelectionHideSelection'; const IMAGE_ID = 'image'; const TABLE_ID = 'table'; -const DEFAULT_SELECTION_BORDER_COLOR = '#DB626C'; -const DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR = '#C6C6C6'; const CARET_CSS_RULE = 'caret-color: transparent'; const TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important;'; const SELECTION_SELECTOR = '*::selection'; @@ -36,7 +34,7 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC const skipReselectOnFocus = core.selection.skipReselectOnFocus; const doc = core.physicalRoot.ownerDocument; - + const isDarkMode = core.lifecycle.isDarkMode; core.selection.skipReselectOnFocus = true; core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, null /*cssRule*/); core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, null /*cssRule*/); @@ -51,12 +49,14 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC type: 'image', image, }; + const imageSelectionColor = isDarkMode + ? core.selection.imageSelectionBorderColorDark + : core.selection.imageSelectionBorderColor; + core.api.setEditorStyle( core, DOM_SELECTION_CSS_KEY, - `outline-style:auto!important; outline-color:${ - core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR - }!important;`, + `outline-style:auto!important; outline-color:${imageSelectionColor}!important;`, [`span:has(>img#${ensureUniqueId(image, IMAGE_ID)})`] ); core.api.setEditorStyle( @@ -112,13 +112,14 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC : handleTableSelected(parsedTable, tableId, table, firstCell, lastCell); core.selection.selection = selection; + + const tableSelectionColor = isDarkMode + ? core.selection.tableCellSelectionBackgroundColorDark + : core.selection.tableCellSelectionBackgroundColor; core.api.setEditorStyle( core, DOM_SELECTION_CSS_KEY, - `background-color:${ - core.selection.tableCellSelectionBackgroundColor || - DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR - }!important;`, + `background-color:${tableSelectionColor}!important;`, tableSelectors ); core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE); diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts index f1605b5d7bf..3c3c040c157 100644 --- a/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts +++ b/packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts @@ -34,6 +34,15 @@ const Left = 'ArrowLeft'; const Right = 'ArrowRight'; const Tab = 'Tab'; +/** + * @internal + */ +export const DEFAULT_SELECTION_BORDER_COLOR = '#DB626C'; +/** + * @internal + */ +export const DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR = '#C6C6C6'; + class SelectionPlugin implements PluginWithState { private editor: IEditor | null = null; private state: SelectionPluginState; @@ -46,8 +55,17 @@ class SelectionPlugin implements PluginWithState { this.state = { selection: null, tableSelection: null, - imageSelectionBorderColor: options.imageSelectionBorderColor, - tableCellSelectionBackgroundColor: options.tableCellSelectionBackgroundColor, + imageSelectionBorderColor: + options.imageSelectionBorderColor ?? DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: options.imageSelectionBorderColor + ? undefined + : DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: + options.tableCellSelectionBackgroundColor ?? + DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: options.tableCellSelectionBackgroundColor + ? undefined + : DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }; } @@ -58,6 +76,25 @@ class SelectionPlugin implements PluginWithState { initialize(editor: IEditor) { this.editor = editor; + if (!this.state.imageSelectionBorderColorDark && this.state.imageSelectionBorderColor) { + this.state.imageSelectionBorderColorDark = editor + .getColorManager() + .getDarkColor(this.state.imageSelectionBorderColor, undefined, 'border'); + } + + if ( + !this.state.tableCellSelectionBackgroundColorDark && + this.state.tableCellSelectionBackgroundColor + ) { + this.state.tableCellSelectionBackgroundColorDark = editor + .getColorManager() + .getDarkColor( + this.state.tableCellSelectionBackgroundColor, + undefined, + 'background' + ); + } + const env = this.editor.getEnvironment(); const document = this.editor.getDocument(); diff --git a/packages/roosterjs-content-model-core/test/coreApi/setDOMSelection/setDOMSelectionTest.ts b/packages/roosterjs-content-model-core/test/coreApi/setDOMSelection/setDOMSelectionTest.ts index 26aa60b42c8..644455473f4 100644 --- a/packages/roosterjs-content-model-core/test/coreApi/setDOMSelection/setDOMSelectionTest.ts +++ b/packages/roosterjs-content-model-core/test/coreApi/setDOMSelection/setDOMSelectionTest.ts @@ -1,7 +1,12 @@ import * as addRangeToSelection from '../../../lib/coreApi/setDOMSelection/addRangeToSelection'; import { DOMSelection, EditorCore } from 'roosterjs-content-model-types'; import { setDOMSelection } from '../../../lib/coreApi/setDOMSelection/setDOMSelection'; +import { + DEFAULT_SELECTION_BORDER_COLOR, + DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, +} from '../../../lib/corePlugin/selection/SelectionPlugin'; +const DEFAULT_DARK_COLOR_SUFFIX_COLOR = 'DarkColorMock-'; describe('setDOMSelection', () => { let core: EditorCore; let querySelectorAllSpy: jasmine.Spy; @@ -47,7 +52,10 @@ describe('setDOMSelection', () => { core = { physicalRoot: contentDiv, logicalRoot: contentDiv, - selection: {}, + selection: { + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + }, api: { triggerEvent: triggerEventSpy, setEditorStyle: setEditorStyleSpy, @@ -55,6 +63,9 @@ describe('setDOMSelection', () => { domHelper: { hasFocus: hasFocusSpy, }, + lifecycle: { + isDarkMode: false, + }, } as any; }); @@ -71,6 +82,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: null, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -138,6 +151,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: null, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(setEditorStyleSpy).toHaveBeenCalledTimes(3); expect(setEditorStyleSpy).toHaveBeenCalledWith(core, '_DOMSelection', null); @@ -177,6 +192,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: null, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).not.toHaveBeenCalled(); expect(addRangeToSelectionSpy).toHaveBeenCalledWith(doc, mockedRange, false); @@ -205,6 +222,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: mockedSelection, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -262,6 +281,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: mockedSelection, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -322,6 +343,7 @@ describe('setDOMSelection', () => { skipReselectOnFocus: undefined, selection: mockedSelection, imageSelectionBorderColor: 'red', + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -356,6 +378,73 @@ describe('setDOMSelection', () => { ); }); + it('image selection with customized selection border color and dark mode', () => { + const mockedSelection = { + type: 'image', + image: mockedImage, + } as any; + const selectNodeSpy = jasmine.createSpy('selectNode'); + const collapseSpy = jasmine.createSpy('collapse'); + const mockedRange = { + selectNode: selectNodeSpy, + collapse: collapseSpy, + }; + const coreValue = { ...core, lifecycle: { isDarkMode: true } as any }; + + coreValue.selection.imageSelectionBorderColor = 'red'; + coreValue.selection.imageSelectionBorderColorDark = `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}red`; + + createRangeSpy.and.returnValue(mockedRange); + + querySelectorAllSpy.and.returnValue([]); + hasFocusSpy.and.returnValue(false); + + setDOMSelection(coreValue, mockedSelection); + + expect(coreValue.selection).toEqual({ + skipReselectOnFocus: undefined, + selection: mockedSelection, + imageSelectionBorderColor: 'red', + imageSelectionBorderColorDark: `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}red`, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + } as any); + expect(triggerEventSpy).toHaveBeenCalledWith( + coreValue, + { + eventType: 'selectionChanged', + newSelection: mockedSelection, + }, + true + ); + expect(selectNodeSpy).toHaveBeenCalledWith(mockedImage); + expect(collapseSpy).not.toHaveBeenCalledWith(); + expect(addRangeToSelectionSpy).toHaveBeenCalledWith(doc, mockedRange, undefined); + expect(setEditorStyleSpy).toHaveBeenCalledTimes(5); + expect(setEditorStyleSpy).toHaveBeenCalledWith(coreValue, '_DOMSelection', null); + expect(setEditorStyleSpy).toHaveBeenCalledWith( + coreValue, + '_DOMSelectionHideCursor', + null + ); + expect(setEditorStyleSpy).toHaveBeenCalledWith( + coreValue, + '_DOMSelectionHideSelection', + null + ); + expect(setEditorStyleSpy).toHaveBeenCalledWith( + coreValue, + '_DOMSelection', + 'outline-style:auto!important; outline-color:DarkColorMock-red!important;', + ['span:has(>img#image_0)'] + ); + expect(setEditorStyleSpy).toHaveBeenCalledWith( + coreValue, + '_DOMSelectionHideSelection', + 'background-color: transparent !important;', + ['*::selection'] + ); + }); + it('do not select if node is out of document', () => { const mockedSelection = { type: 'image', @@ -380,6 +469,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: mockedSelection, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -440,6 +531,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: mockedSelection, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -507,6 +600,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).not.toHaveBeenCalled(); expect(selectNodeSpy).not.toHaveBeenCalled(); @@ -531,7 +626,8 @@ describe('setDOMSelection', () => { lastColumn: number, lastRow: number, result: string[], - selectionColor?: string + selectionColor?: string, + expectedDarkSelectionColor?: string ) { const mockedSelection = { type: 'table', @@ -547,10 +643,6 @@ describe('setDOMSelection', () => { selectNode: selectNodeSpy, collapse: collapseSpy, }; - const defaultSelectionColor = '#C6C6C6'; - if (selectionColor) { - core.selection.tableCellSelectionBackgroundColor = selectionColor; - } createRangeSpy.and.returnValue(mockedRange); @@ -562,7 +654,12 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: mockedSelection, - ...(selectionColor ? { tableCellSelectionBackgroundColor: selectionColor } : {}), + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: + selectionColor ?? DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + ...(expectedDarkSelectionColor + ? { tableCellSelectionBackgroundColorDark: expectedDarkSelectionColor } + : {}), } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -584,7 +681,11 @@ describe('setDOMSelection', () => { expect(setEditorStyleSpy).toHaveBeenCalledWith( core, '_DOMSelection', - `background-color:${selectionColor ?? defaultSelectionColor}!important;`, + `background-color:${ + expectedDarkSelectionColor ?? + selectionColor ?? + DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR + }!important;`, result ); expect(setEditorStyleSpy).toHaveBeenCalledWith( @@ -703,6 +804,8 @@ describe('setDOMSelection', () => { expect(core.selection).toEqual({ skipReselectOnFocus: undefined, selection: resultSelection, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, } as any); expect(triggerEventSpy).toHaveBeenCalledWith( core, @@ -782,6 +885,25 @@ describe('setDOMSelection', () => { }); it('Select All with custom selection color', () => { + const selectionColor = 'red'; + core.selection.tableCellSelectionBackgroundColor = selectionColor; + runTest( + buildTable(true /* tbody */, false, false), + 0, + 0, + 1, + 1, + ['#table_0', '#table_0 *'], + selectionColor + ); + }); + + it('Select All with custom selection color and dark mode', () => { + const selectionColor = 'red'; + const selectionColorDark = `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}red`; + core.selection.tableCellSelectionBackgroundColor = selectionColor; + core.selection.tableCellSelectionBackgroundColorDark = selectionColorDark; + core.lifecycle.isDarkMode = true; runTest( buildTable(true /* tbody */, false, false), 0, @@ -789,7 +911,8 @@ describe('setDOMSelection', () => { 1, 1, ['#table_0', '#table_0 *'], - 'red' + selectionColor, + selectionColorDark ); }); }); diff --git a/packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts index 4654a277166..daab8e16703 100644 --- a/packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts +++ b/packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts @@ -1,6 +1,10 @@ import * as isSingleImageInSelection from '../../../lib/corePlugin/selection/isSingleImageInSelection'; import { createDOMHelper } from '../../../lib/editor/core/DOMHelperImpl'; -import { createSelectionPlugin } from '../../../lib/corePlugin/selection/SelectionPlugin'; +import { + createSelectionPlugin, + DEFAULT_SELECTION_BORDER_COLOR, + DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, +} from '../../../lib/corePlugin/selection/SelectionPlugin'; import { DOMEventRecord, DOMSelection, @@ -10,6 +14,8 @@ import { SelectionPluginState, } from 'roosterjs-content-model-types'; +const DEFAULT_DARK_COLOR_SUFFIX_COLOR = 'DarkColorMock-'; + describe('SelectionPlugin', () => { it('init and dispose', () => { const plugin = createSelectionPlugin({}); @@ -26,14 +32,19 @@ describe('SelectionPlugin', () => { getDocument: getDocumentSpy, attachDomEvent, getEnvironment: () => ({}), + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), } as any) as IEditor; plugin.initialize(editor); expect(state).toEqual({ selection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(attachDomEvent).toHaveBeenCalled(); @@ -61,17 +72,59 @@ describe('SelectionPlugin', () => { removeEventListener: removeEventListenerSpy, addEventListener: addEventListenerSpy, }); - plugin.initialize(({ getDocument: getDocumentSpy, attachDomEvent, getEnvironment: () => ({}), + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), })); expect(state).toEqual({ selection: null, imageSelectionBorderColor: 'red', tableCellSelectionBackgroundColor: 'blue', + imageSelectionBorderColorDark: `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}red`, + tableCellSelectionBackgroundColorDark: `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}blue`, + tableSelection: null, + }); + + expect(attachDomEvent).toHaveBeenCalled(); + + plugin.dispose(); + }); + + it('init with different options - transparent colors', () => { + const plugin = createSelectionPlugin({ + imageSelectionBorderColor: 'transparent', + tableCellSelectionBackgroundColor: 'transparent', + }); + const state = plugin.getState(); + const addEventListenerSpy = jasmine.createSpy('addEventListener'); + const attachDomEvent = jasmine + .createSpy('attachDomEvent') + .and.returnValue(jasmine.createSpy('disposer')); + const removeEventListenerSpy = jasmine.createSpy('removeEventListener'); + const getDocumentSpy = jasmine.createSpy('getDocument').and.returnValue({ + removeEventListener: removeEventListenerSpy, + addEventListener: addEventListenerSpy, + }); + plugin.initialize(({ + getDocument: getDocumentSpy, + attachDomEvent, + getEnvironment: () => ({}), + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), + })); + + expect(state).toEqual({ + selection: null, + imageSelectionBorderColor: 'transparent', + tableCellSelectionBackgroundColor: 'transparent', + imageSelectionBorderColorDark: `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}transparent`, + tableCellSelectionBackgroundColorDark: `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}transparent`, tableSelection: null, }); @@ -119,6 +172,9 @@ describe('SelectionPlugin handle onFocus and onBlur event', () => { getElementAtCursor: getElementAtCursorSpy, setDOMSelection: setDOMSelectionSpy, getScrollContainer: getScrollContainerSpy, + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), }); plugin.initialize(editor); }); @@ -137,8 +193,10 @@ describe('SelectionPlugin handle onFocus and onBlur event', () => { eventMap.focus.beforeDispatch(); expect(plugin.getState()).toEqual({ selection: mockedRange, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, skipReselectOnFocus: false, tableSelection: null, }); @@ -154,8 +212,10 @@ describe('SelectionPlugin handle onFocus and onBlur event', () => { eventMap.focus.beforeDispatch(); expect(plugin.getState()).toEqual({ selection: mockedRange, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, skipReselectOnFocus: true, tableSelection: null, }); @@ -224,6 +284,9 @@ describe('SelectionPlugin scroll event ', () => { setDOMSelection: setDOMSelectionSpy, getScrollContainer: getScrollContainerSpy, hasFocus: hasFocusSpy, + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), }); plugin.initialize(editor); }); @@ -300,6 +363,9 @@ describe('SelectionPlugin handle image selection', () => { attachDomEvent: (map: Record) => { return jasmine.createSpy('disposer'); }, + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), } as any; plugin = createSelectionPlugin({}); plugin.initialize(editor); @@ -731,6 +797,9 @@ describe('SelectionPlugin handle table selection', () => { getDOMSelection: getDOMSelectionSpy, setDOMSelection: setDOMSelectionSpy, getDocument: getDocumentSpy, + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), getEnvironment: () => ({}), getDOMHelper: () => domHelper, attachDomEvent: (map: Record>) => { @@ -772,8 +841,10 @@ describe('SelectionPlugin handle table selection', () => { expect(state).toEqual({ selection: null, tableSelection: mockedTableSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); plugin.onPluginEvent!({ @@ -782,12 +853,13 @@ describe('SelectionPlugin handle table selection', () => { button: 0, } as any, }); - expect(state).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(mouseDispatcher).toBeUndefined(); }); @@ -820,8 +892,10 @@ describe('SelectionPlugin handle table selection', () => { expect(state).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); plugin.onPluginEvent!({ @@ -841,8 +915,10 @@ describe('SelectionPlugin handle table selection', () => { startNode: td, }, mouseDisposer: mouseMoveDisposer, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(mouseDispatcher).toBeDefined(); }); @@ -875,8 +951,10 @@ describe('SelectionPlugin handle table selection', () => { expect(state).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); plugin.onPluginEvent!({ @@ -890,8 +968,10 @@ describe('SelectionPlugin handle table selection', () => { expect(state).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(mouseDispatcher).toBeUndefined(); }); @@ -929,8 +1009,10 @@ describe('SelectionPlugin handle table selection', () => { startNode: td, }, mouseDisposer: mouseMoveDisposer, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(mouseDispatcher).toBeDefined(); expect(preventDefaultSpy).toHaveBeenCalled(); @@ -1270,8 +1352,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).not.toHaveBeenCalled(); expect(announceSpy).not.toHaveBeenCalled(); @@ -1312,8 +1396,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(0); expect(announceSpy).not.toHaveBeenCalled(); @@ -1369,8 +1455,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1433,8 +1521,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1496,8 +1586,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1560,8 +1652,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1623,8 +1717,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1686,8 +1782,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1752,8 +1850,10 @@ describe('SelectionPlugin handle table selection', () => { lastCo: { row: 0, col: 1 }, startNode: td4, }, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1818,8 +1918,10 @@ describe('SelectionPlugin handle table selection', () => { lastCo: { row: 1, col: 1 }, startNode: td2, }, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -1883,8 +1985,10 @@ describe('SelectionPlugin handle table selection', () => { firstCo: { row: 0, col: 1 }, startNode: td2, }, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(0); expect(announceSpy).not.toHaveBeenCalled(); @@ -1928,8 +2032,10 @@ describe('SelectionPlugin handle table selection', () => { lastCo: { row: 1, col: 1 }, startNode: td2, }, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).not.toHaveBeenCalled(); expect(preventDefaultSpy).not.toHaveBeenCalled(); @@ -1982,8 +2088,10 @@ describe('SelectionPlugin handle table selection', () => { expect(plugin.getState()).toEqual({ selection: null, tableSelection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith(null); @@ -2032,8 +2140,10 @@ describe('SelectionPlugin handle table selection', () => { lastCo: { row: 1, col: 0 }, startNode: td2, }, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -2089,8 +2199,10 @@ describe('SelectionPlugin handle table selection', () => { lastCo: { row: 0, col: 1 }, startNode: td3, }, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, }); expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1); expect(setDOMSelectionSpy).toHaveBeenCalledWith({ @@ -2148,6 +2260,9 @@ describe('SelectionPlugin on Safari', () => { hasFocus: hasFocusSpy, isInShadowEdit: isInShadowEditSpy, getDOMSelection: getDOMSelectionSpy, + getColorManager: () => ({ + getDarkColor: (color: string) => `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`, + }), } as any) as IEditor; }); @@ -2159,8 +2274,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: null, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(attachDomEvent).toHaveBeenCalled(); @@ -2195,8 +2312,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: mockedOldSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(getDOMSelectionSpy).toHaveBeenCalledTimes(1); @@ -2227,8 +2346,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: mockedNewSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(getDOMSelectionSpy).toHaveBeenCalledTimes(1); @@ -2256,8 +2377,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: mockedOldSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(getDOMSelectionSpy).toHaveBeenCalledTimes(1); @@ -2285,8 +2408,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: mockedOldSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(getDOMSelectionSpy).toHaveBeenCalledTimes(1); @@ -2314,8 +2439,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: mockedOldSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(getDOMSelectionSpy).toHaveBeenCalledTimes(0); @@ -2343,8 +2470,10 @@ describe('SelectionPlugin on Safari', () => { expect(state).toEqual({ selection: mockedOldSelection, - imageSelectionBorderColor: undefined, - tableCellSelectionBackgroundColor: undefined, + imageSelectionBorderColor: DEFAULT_SELECTION_BORDER_COLOR, + imageSelectionBorderColorDark: DEFAULT_SELECTION_BORDER_COLOR, + tableCellSelectionBackgroundColor: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, + tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR, tableSelection: null, }); expect(getDOMSelectionSpy).toHaveBeenCalledTimes(0); diff --git a/packages/roosterjs-content-model-types/lib/pluginState/SelectionPluginState.ts b/packages/roosterjs-content-model-types/lib/pluginState/SelectionPluginState.ts index 932fbcf5ddd..8c9d922a6fb 100644 --- a/packages/roosterjs-content-model-types/lib/pluginState/SelectionPluginState.ts +++ b/packages/roosterjs-content-model-types/lib/pluginState/SelectionPluginState.ts @@ -75,8 +75,18 @@ export interface SelectionPluginState { */ imageSelectionBorderColor?: string; + /** + * Color of the border of a selectedImage in dark mode. Default color: '#DB626C' + */ + imageSelectionBorderColorDark?: string; + /** * Background color of a selected table cell. Default color: '#C6C6C6' */ tableCellSelectionBackgroundColor?: string; + + /** + * Background color of a selected table cell in dark mode. Default color: '#C6C6C6' + */ + tableCellSelectionBackgroundColorDark?: string; }