Prevent multiple event attachments for mousemove in SelectionPlugin

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

@@ -219,6 +219,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
                 }
             }
 
+            this.state.mouseDisposer?.();
             this.state.mouseDisposer = editor.attachDomEvent({
                 mousemove: {
                     beforeDispatch: this.onMouseMove,

packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts

@@ -876,6 +876,83 @@ describe('SelectionPlugin handle table selection', () => {
             } as any,
         });
 
+        plugin.onPluginEvent!({
+            eventType: 'mouseDown',
+            rawEvent: {
+                button: 0,
+                target: td,
+            } as any,
+        });
+
+        expect(state).toEqual({
+            selection: null,
+            tableSelection: {
+                table: table,
+                parsedTable: [[td]],
+                firstCo: { row: 0, col: 0 },
+                startNode: td,
+            },
+            mouseDisposer: mouseMoveDisposer,
+            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();
+    });
+
+    it('MouseDown - clean and re-attach mouse move event handler if mouseDown event triggered twice', () => {
+        const state = plugin.getState();
+        const table = document.createElement('table');
+        table.setAttribute('contenteditable', 'true');
+        const tr = document.createElement('tr');
+        const td = document.createElement('td');
+        const div = document.createElement('div');
+
+        tr.appendChild(td);
+        table.appendChild(tr);
+        contentDiv.appendChild(table);
+        contentDiv.appendChild(div);
+
+        spyOn(editor, 'attachDomEvent').and.callThrough();
+
+        getDOMSelectionSpy.and.returnValue({
+            type: 'table',
+        });
+
+        plugin.onPluginEvent!({
+            eventType: 'mouseDown',
+            rawEvent: {
+                button: 0,
+                target: div,
+            } as any,
+        });
+
+        expect(state).toEqual({
+            selection: null,
+            tableSelection: null,
+            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!({
+            eventType: 'mouseDown',
+            rawEvent: {
+                button: 0,
+                target: td,
+            } as any,
+        });
+
+        plugin.onPluginEvent!({
+            eventType: 'mouseDown',
+            rawEvent: {
+                button: 0,
+                target: td,
+            } as any,
+        });
+
         expect(state).toEqual({
             selection: null,
             tableSelection: {
@@ -891,6 +968,8 @@ describe('SelectionPlugin handle table selection', () => {
             tableCellSelectionBackgroundColorDark: DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR,
         });
         expect(mouseDispatcher).toBeDefined();
+        expect(mouseMoveDisposer).toHaveBeenCalledTimes(1);
+        expect(editor.attachDomEvent).toHaveBeenCalledTimes(2);
     });
 
     it('MouseDown - do not save a table selection when left click, table is not editable', () => {