chore(eventing): Add annotations_mode_change event back (#584)

src/document/__tests__/DocumentAnnotator-test.ts

@@ -5,7 +5,7 @@ import RegionManager from '../../region/RegionManager';
 import { Annotation, Event } from '../../@types';
 import { annotation as highlight } from '../../highlight/__mocks__/data';
 import { annotations as regions } from '../../region/__mocks__/data';
-import { fetchAnnotationsAction } from '../../store';
+import { fetchAnnotationsAction, Mode } from '../../store';
 import { HighlightManager } from '../../highlight';
 import { scrollToLocation } from '../../utils/scroll';
 
@@ -273,4 +273,22 @@ describe('DocumentAnnotator', () => {
             expect(scrollToLocation).toHaveBeenCalledWith(parentEl, referenceEl, { offsets: { x: 15, y: 10 } });
         });
     });
+
+    describe('handleChangeMode()', () => {
+        beforeEach(() => {
+            annotator.annotatedEl = container.querySelector('.bp-doc') as HTMLElement;
+        });
+
+        test('should add and remove is highlighting class if mode changes', () => {
+            expect(annotator.annotatedEl?.classList.contains('ba-is-highlighting')).toBe(false);
+
+            annotator.toggleAnnotationMode(Mode.HIGHLIGHT);
+
+            expect(annotator.annotatedEl?.classList.contains('ba-is-highlighting')).toBe(true);
+
+            annotator.toggleAnnotationMode(Mode.NONE);
+
+            expect(annotator.annotatedEl?.classList.contains('ba-is-highlighting')).toBe(false);
+        });
+    });
 });

src/store/eventing/__tests__/mode-test.ts

@@ -0,0 +1,19 @@
+import eventManager from '../../../common/EventManager';
+import { AppState } from '../../types';
+import { handleToggleAnnotationModeAction } from '../mode';
+
+jest.mock('../../../common/EventManager');
+
+describe('store/eventing/mode', () => {
+    test('should emit annotations_mode_change with the next mode when changing annotation modes.', () => {
+        const nextState = {
+            common: {
+                mode: 'region',
+            },
+        } as AppState;
+
+        handleToggleAnnotationModeAction({} as AppState, nextState);
+
+        expect(eventManager.emit).toBeCalledWith('annotations_mode_change', { mode: 'region' });
+    });
+});

src/store/eventing/middleware.ts

@@ -12,7 +12,9 @@ import { handleAnnotationsInitialized } from './init';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
 import { handleFetchErrorEvents } from './fetch';
 import { handleResetCreatorAction, handleSetStagedAction } from './staged';
+import { handleToggleAnnotationModeAction } from './mode';
 import { resetCreatorAction, setStagedAction } from '../creator';
+import { toggleAnnotationModeAction } from '../common/actions';
 
 // Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
 const eventHandlers: EventHandlerMap = {
@@ -24,6 +26,7 @@ const eventHandlers: EventHandlerMap = {
     [setActiveAnnotationIdAction.toString()]: handleActiveAnnotationEvents,
     [setIsInitialized.toString()]: handleAnnotationsInitialized,
     [setStagedAction.toString()]: handleSetStagedAction,
+    [toggleAnnotationModeAction.toString()]: handleToggleAnnotationModeAction,
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {

src/store/eventing/mode.ts

@@ -0,0 +1,7 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+
+export const handleToggleAnnotationModeAction = (prevState: AppState, nextState: AppState): void => {
+    eventManager.emit(Event.ANNOTATIONS_MODE_CHANGE, { mode: nextState.common.mode });
+};