microsoft · JiuqingSong · Feb 22, 2023 · Feb 18, 2023
diff --git a/demo/scripts/controls/sidePane/snapshot/SnapshotPane.tsx b/demo/scripts/controls/sidePane/snapshot/SnapshotPane.tsx
@@ -43,6 +43,7 @@ export default class SnapshotPane extends React.Component<SnapshotPaneProps, Sna
                             this.props.onRestoreSnapshot({
                                 html: this.textarea.value,
                                 metadata: null,
+                                knownColors: [],
                             })
                         }>
                         {'Restore snapshot'}

diff --git a/packages/roosterjs-editor-core/lib/coreApi/addUndoSnapshot.ts b/packages/roosterjs-editor-core/lib/coreApi/addUndoSnapshot.ts
@@ -88,6 +88,7 @@ function addUndoSnapshotInternal(core: EditorCore, canUndoByBackspace: boolean)
             {
                 html: core.contentDiv.innerHTML,
                 metadata,
+                knownColors: core.darkColorHandler?.getKnownColorsCopy() || [],
             },
             canUndoByBackspace
         );

diff --git a/packages/roosterjs-editor-core/lib/coreApi/restoreUndoSnapshot.ts b/packages/roosterjs-editor-core/lib/coreApi/restoreUndoSnapshot.ts
@@ -27,6 +27,19 @@ export const restoreUndoSnapshot: RestoreUndoSnapshot = (core: EditorCore, step:
                 true /*triggerContentChangedEvent*/,
                 snapshot.metadata ?? undefined
             );
+
+            const darkColorHandler = core.darkColorHandler;
+            const isDarkModel = core.lifecycle.isDarkMode;
+
+            if (darkColorHandler) {
+                snapshot.knownColors.forEach(color => {
+                    darkColorHandler.registerColor(
+                        color.lightModeColor,
+                        isDarkModel,
+                        color.darkModeColor
+                    );
+                });
+            }
         } finally {
             core.undo.isRestoring = false;
         }

diff --git a/packages/roosterjs-editor-core/lib/corePlugins/UndoPlugin.ts b/packages/roosterjs-editor-core/lib/corePlugins/UndoPlugin.ts
@@ -241,7 +241,7 @@ function createUndoSnapshotServiceBridge(
         ? {
               canMove: (delta: number) => service.canMove(delta),
               move: (delta: number): Snapshot | null =>
-                  (html = service.move(delta)) ? { html, metadata: null } : null,
+                  (html = service.move(delta)) ? { html, metadata: null, knownColors: [] } : null,
               addSnapshot: (snapshot: Snapshot, isAutoCompleteSnapshot: boolean) =>
                   service.addSnapshot(
                       snapshot.html +

diff --git a/packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts b/packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts
@@ -9,10 +9,18 @@ const COLOR_VAR_PREFIX = 'darkColor';
  * @internal
  */
 export default class DarkColorHandlerImpl implements DarkColorHandler {
-    private knownColors: Record<string, ModeIndependentColor> = {};
+    private knownColors: Record<string, Readonly<ModeIndependentColor>> = {};
 
     constructor(private contentDiv: HTMLElement, private getDarkColor: (color: string) => string) {}
 
+    /**
+     * Get a copy of known colors
+     * @returns
+     */
+    getKnownColorsCopy() {
+        return Object.values(this.knownColors);
+    }
+
     /**
      * Given a light mode color value and an optional dark mode color value, register this color
      * so that editor can handle it, then return the CSS color value for current color mode.

diff --git a/packages/roosterjs-editor-core/test/coreApi/addUndoSnapshotTest.ts b/packages/roosterjs-editor-core/test/coreApi/addUndoSnapshotTest.ts
@@ -35,6 +35,7 @@ describe('addUndoSnapshot', () => {
                     start: [],
                     end: [],
                 },
+                knownColors: [],
             },
             false
         );
@@ -54,6 +55,7 @@ describe('addUndoSnapshot', () => {
                     start: [],
                     end: [],
                 },
+                knownColors: [],
             },
             false
         );
@@ -94,10 +96,12 @@ describe('addUndoSnapshot', () => {
         expect(snapshot1).toEqual({
             html: 'result 1',
             metadata: { type: 0, isDarkMode: false, start: [], end: [] },
+            knownColors: [],
         });
         expect(snapshot2).toEqual({
             html: 'result 2',
             metadata: { type: 0, isDarkMode: false, start: [], end: [] },
+            knownColors: [],
         });
         expect(core.undo.isNested).toBeFalsy();
     });
@@ -259,6 +263,7 @@ describe('addUndoSnapshot', () => {
                     start: [],
                     end: [],
                 },
+                knownColors: [],
             },
             false
         );
@@ -293,6 +298,7 @@ describe('addUndoSnapshot', () => {
                     isDarkMode: false,
                     ...selectionPath,
                 },
+                knownColors: [],
             },
             false
         );
@@ -329,6 +335,7 @@ describe('addUndoSnapshot', () => {
                     isDarkMode: false,
                     ...coordinates,
                 },
+                knownColors: [],
             },
             false
         );

diff --git a/packages/roosterjs-editor-core/test/corePlugins/undoPluginTest.ts b/packages/roosterjs-editor-core/test/corePlugins/undoPluginTest.ts
@@ -444,24 +444,54 @@ describe('UndoPlugin', () => {
     });
 
     it('can undo autoComplete', () => {
-        state.snapshotsService.addSnapshot({ html: 'snapshot 1', metadata: null }, false);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 2', metadata: null }, true);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 3', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 1', metadata: null, knownColors: [] },
+            false
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 2', metadata: null, knownColors: [] },
+            true
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 3', metadata: null, knownColors: [] },
+            false
+        );
         expect(state.snapshotsService.canUndoAutoComplete()).toBeTrue();
     });
 
     it('cannot undo autoComplete', () => {
-        state.snapshotsService.addSnapshot({ html: 'snapshot 1', metadata: null }, false);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 2', metadata: null }, true);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 3', metadata: null }, false);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 4', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 1', metadata: null, knownColors: [] },
+            false
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 2', metadata: null, knownColors: [] },
+            true
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 3', metadata: null, knownColors: [] },
+            false
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 4', metadata: null, knownColors: [] },
+            false
+        );
         expect(state.snapshotsService.canUndoAutoComplete()).toBeFalse();
     });
 
     it('Backspace trigger undo when can undo autoComplete', () => {
-        state.snapshotsService.addSnapshot({ html: 'snapshot 1', metadata: null }, false);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 2', metadata: null }, true);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 3', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 1', metadata: null, knownColors: [] },
+            false
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 2', metadata: null, knownColors: [] },
+            true
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 3', metadata: null, knownColors: [] },
+            false
+        );
 
         const undo = jasmine.createSpy('undo');
         const preventDefault = jasmine.createSpy('preventDefault');
@@ -486,9 +516,18 @@ describe('UndoPlugin', () => {
     });
 
     it('Other key does not trigger undo auto complete', () => {
-        state.snapshotsService.addSnapshot({ html: 'snapshot 1', metadata: null }, false);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 2', metadata: null }, true);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 3', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 1', metadata: null, knownColors: [] },
+            false
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 2', metadata: null, knownColors: [] },
+            true
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 3', metadata: null, knownColors: [] },
+            false
+        );
 
         const undo = jasmine.createSpy('undo');
         const preventDefault = jasmine.createSpy('preventDefault');
@@ -514,9 +553,18 @@ describe('UndoPlugin', () => {
     });
 
     it('Another undo snapshot is added, cannot undo autocomplete any more', () => {
-        state.snapshotsService.addSnapshot({ html: 'snapshot 1', metadata: null }, false);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 2', metadata: null }, true);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 3', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 1', metadata: null, knownColors: [] },
+            false
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 2', metadata: null, knownColors: [] },
+            true
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 3', metadata: null, knownColors: [] },
+            false
+        );
 
         const undo = jasmine.createSpy('undo');
         const preventDefault = jasmine.createSpy('preventDefault');
@@ -526,7 +574,10 @@ describe('UndoPlugin', () => {
         editor.getSelectionRange = () => range;
         editor.getFocusedPosition = () => pos;
         editor.addUndoSnapshot = () =>
-            state.snapshotsService.addSnapshot({ html: 'snapshot 4', metadata: null }, false);
+            state.snapshotsService.addSnapshot(
+                { html: 'snapshot 4', metadata: null, knownColors: [] },
+                false
+            );
         state.autoCompletePosition = pos;
 
         plugin.onPluginEvent({
@@ -545,7 +596,10 @@ describe('UndoPlugin', () => {
     });
 
     it('Position changed, cannot undo autocomplete for Backspace', () => {
-        state.snapshotsService.addSnapshot({ html: 'snapshot 1', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 1', metadata: null, knownColors: [] },
+            false
+        );
 
         const undo = jasmine.createSpy('undo');
         const preventDefault = jasmine.createSpy('preventDefault');
@@ -559,7 +613,10 @@ describe('UndoPlugin', () => {
 
         editor.getFocusedPosition = () => pos2;
         editor.addUndoSnapshot = () =>
-            state.snapshotsService.addSnapshot({ html: 'snapshot 4', metadata: null }, false);
+            state.snapshotsService.addSnapshot(
+                { html: 'snapshot 4', metadata: null, knownColors: [] },
+                false
+            );
 
         // Press backspace first time, to let plugin remember last pressed key
         plugin.onPluginEvent({
@@ -570,8 +627,14 @@ describe('UndoPlugin', () => {
             }),
         });
 
-        state.snapshotsService.addSnapshot({ html: 'snapshot 2', metadata: null }, true);
-        state.snapshotsService.addSnapshot({ html: 'snapshot 3', metadata: null }, false);
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 2', metadata: null, knownColors: [] },
+            true
+        );
+        state.snapshotsService.addSnapshot(
+            { html: 'snapshot 3', metadata: null, knownColors: [] },
+            false
+        );
         state.autoCompletePosition = pos;
 
         plugin.onPluginEvent({
@@ -611,6 +674,7 @@ describe('UndoPlugin', () => {
                     start: [1],
                     end: [2],
                 },
+                knownColors: [],
             },
             false
         );
@@ -627,7 +691,7 @@ describe('UndoPlugin', () => {
         expect(canUndoAutoComplete).toHaveBeenCalled();
 
         expect(canMoveResult).toBe(true);
-        expect(moveResult).toEqual({ html: 'test', metadata: null });
+        expect(moveResult).toEqual({ html: 'test', metadata: null, knownColors: [] });
         expect(canUndoAutoCompleteResult).toBe(true);
     });
 

diff --git a/packages/roosterjs-editor-types/lib/interface/DarkColorHandler.ts b/packages/roosterjs-editor-types/lib/interface/DarkColorHandler.ts
@@ -1,3 +1,5 @@
+import ModeIndependentColor from './ModeIndependentColor';
+
 /**
  * Represents a combination of color key, light color and dark color, parsed from existing color value
  */
@@ -42,4 +44,9 @@ export default interface DarkColorHandler {
      * @param color The color string to parse
      */
     parseColorValue(color: string | null | undefined): ColorKeyAndValue;
+
+    /**
+     * Get a copy of known colors
+     */
+    getKnownColorsCopy(): Readonly<ModeIndependentColor>[];
 }
diff --git a/packages/roosterjs-editor-types/lib/interface/Snapshot.ts b/packages/roosterjs-editor-types/lib/interface/Snapshot.ts
@@ -1,3 +1,4 @@
+import ModeIndependentColor from './ModeIndependentColor';
 import { ContentMetadata } from './ContentMetadata';
 
 /**
@@ -13,4 +14,9 @@ export default interface Snapshot {
      * Metadata of the editor content state
      */
     metadata: ContentMetadata | null;
+
+    /**
+     * Known colors for dark mode
+     */
+    knownColors: Readonly<ModeIndependentColor>[];
 }