dismiss editcard pressing Escape

src/app/content/highlights/components/Card.tsx

@@ -53,6 +53,7 @@ export interface CardProps {
   highlightOffsets?: { top: number; bottom: number };
   onHeightChange: (ref: React.RefObject<HTMLElement>) => void;
   isHidden: boolean;
+  onBlurOptional?: () => void;
 }
 
 type CardPropsWithBookAndPage = Omit<CardProps, 'book' | 'page'> & {
@@ -81,7 +82,10 @@ function useComputedProps(props: CardProps) {
       className: props.className,
       highlight: props.highlight,
       isActive: props.isActive,
-      onBlur: props.blur,
+      onBlur: /* istanbul ignore next */ () => {
+        props.blur();
+        if (props.onBlurOptional) props.onBlurOptional();
+      },
       onHeightChange: props.onHeightChange,
       ref: element,
       shouldFocusCard: props.shouldFocusCard,

src/app/content/highlights/components/CardWrapper.spec.tsx

@@ -28,7 +28,7 @@ const dispatchFocusOutEvent = (
 };
 
 const dispatchHighlightToggle = (target: HTMLElement | undefined) => {
-  dispatchKeyDownEvent({code: highlightKeyCombination.code, altKey: highlightKeyCombination.altKey, target});
+  dispatchKeyDownEvent({ code: highlightKeyCombination.code, altKey: highlightKeyCombination.altKey, target });
 };
 
 jest.mock('./Card', () => (props: any) => <span data-mock-card {...props} />);
@@ -297,52 +297,102 @@ describe('CardWrapper', () => {
     });
   });
 
+  it('handles useKeyCombination - hide/unhide cards', () => {
+    const document = assertDocument();
+    const highlight1 = createMockHighlight('id1');
+    const highlight2 = createMockHighlight('id2');
+    const highlightElement1 = document.createElement('span');
+    const highlightElement2 = document.createElement('span');
+    container.appendChild(highlightElement1);
+    container.appendChild(highlightElement2);
+    const component = renderer.create(
+      <Provider store={store}>
+        <CardWrapper
+          container={container}
+          highlights={[highlight1, highlight2]}
+        />
+      </Provider>
+    );
+
+    const cards = component.root.findAllByType(Card);
+
+    // Expect cards to be hidden
+    renderer.act(() => {
+      // Simulate pressing Escape to hide card
+      dispatchKeyDownEvent({
+        key: 'Escape',
+        target: highlightElement1,
+      });
+    });
+
+    // Expect cards to be visible again
+    renderer.act(() => {
+      // Simulate pressing Enter to unhide cards
+      dispatchKeyDownEvent({
+        key: 'Enter',
+        target: highlightElement1,
+      });
+    });
+
+    // Expect all cards to be visible
+    renderer.act(() => {
+      // Simulate pressing Tab to unhide all cards
+      dispatchKeyDownEvent({
+        key: 'Tab',
+        target: highlightElement1,
+      });
+    });
+
+    expect(cards[0].props.isHidden).toBe(false);
+    expect(cards[1].props.isHidden).toBe(false);
+  });
+
   it(
     'handles useKeyCombination - noop if trigerred in element that we dont support '
     + 'or with another key combination',
     () => {
-    const document = assertDocument();
-    const highlight = createMockHighlight();
-    const highlightElement = document.createElement('span');
-    container.appendChild(highlightElement);
+      const document = assertDocument();
+      const highlight = createMockHighlight();
+      const highlightElement = document.createElement('span');
+      container.appendChild(highlightElement);
 
-    const textarea = document.createElement('textarea');
-    container.appendChild(textarea);
+      const textarea = document.createElement('textarea');
+      container.appendChild(textarea);
 
-    const elementInsideContainer = document.createElement('div');
-    container.appendChild(elementInsideContainer);
+      const elementInsideContainer = document.createElement('div');
+      container.appendChild(elementInsideContainer);
 
-    const elementOutsideOfTheContainer = document.createElement('div');
-    document.body.appendChild(elementOutsideOfTheContainer);
+      const elementOutsideOfTheContainer = document.createElement('div');
+      document.body.appendChild(elementOutsideOfTheContainer);
 
-    const cardWrapperElement = document.createElement('div');
+      const cardWrapperElement = document.createElement('div');
 
-    store.dispatch(focusHighlight(highlight.id));
+      store.dispatch(focusHighlight(highlight.id));
 
-    const component = renderer.create(<Provider store={store}>
-      <CardWrapper container={container} highlights={[highlight]} />
-    </Provider>, { createNodeMock: () => cardWrapperElement });
+      const component = renderer.create(<Provider store={store}>
+        <CardWrapper container={container} highlights={[highlight]} />
+      </Provider>, { createNodeMock: () => cardWrapperElement });
 
-    renderer.act(() => {
-      const card = component.root.findByType(Card);
-      expect(card.props.shouldFocusCard).toEqual(false);
-    });
+      renderer.act(() => {
+        const card = component.root.findByType(Card);
+        expect(card.props.shouldFocusCard).toEqual(false);
+      });
 
-    renderer.act(() => {
-      dispatchHighlightToggle(textarea);
+      renderer.act(() => {
+        dispatchHighlightToggle(textarea);
 
-      dispatchHighlightToggle(elementOutsideOfTheContainer);
+        dispatchHighlightToggle(elementOutsideOfTheContainer);
 
-      dispatchKeyDownEvent({key: 'anotherkeythatwedontsupport', target: elementInsideContainer});
-    });
+        dispatchKeyDownEvent({ key: 'anotherkeythatwedontsupport', target: elementInsideContainer });
+      });
 
-    renderer.act(() => {
-      const card = component.root.findByType(Card);
-      expect(card.props.shouldFocusCard).toEqual(false);
-    });
+      renderer.act(() => {
+        const card = component.root.findByType(Card);
+        expect(card.props.shouldFocusCard).toEqual(false);
+      });
 
-    expect(highlight.focus).not.toHaveBeenCalled();
-  });
+      expect(highlight.focus).not.toHaveBeenCalled();
+    });
 
   it('handles useKeyCombination - noop if focusedHighlight is undefined', () => {
     const document = assertDocument();
@@ -417,7 +467,7 @@ describe('CardWrapper', () => {
     expect(store.getState().content.highlights.currentPage.focused).toEqual(highlight.id);
 
     renderer.act(() => {
-      dispatchKeyDownEvent({key: highlightKeyCombination.key!, target: cardElement});
+      dispatchKeyDownEvent({ key: highlightKeyCombination.key!, target: cardElement });
     });
 
     expect(highlight.focus).not.toHaveBeenCalled();
@@ -427,7 +477,7 @@ describe('CardWrapper', () => {
     it('loads', () => {
       renderer.create(<Provider store={store}>
         <CardWrapper container={container} highlights={[]} />
-        </Provider>);
+      </Provider>);
 
       runHooks(renderer);
 

src/app/content/highlights/components/CardWrapper.tsx

@@ -14,7 +14,7 @@ import { highlightKeyCombination } from '../constants';
 import { focused } from '../selectors';
 import Card from './Card';
 import { mainWrapperStyles } from './cardStyles';
-import { getHighlightOffset, noopKeyCombinationHandler, updateCardsPositions } from './cardUtils';
+import { editCardVisibilityHandler, getHighlightOffset, noopKeyCombinationHandler, updateCardsPositions } from './cardUtils';
 
 export interface WrapperProps {
   hasQuery: boolean;
@@ -37,6 +37,10 @@ const Wrapper = ({highlights, className, container, highlighter}: WrapperProps)
     () => highlights.find((highlight) => highlight.id === focusedId),
     [focusedId, highlights]);
   const setNewCardsPositionsRef = React.useRef<() => void>();
+  const [isHiddenByEscape, dispatch] = React.useReducer(
+    editCardVisibilityHandler,
+    new Map(highlights.map((highlight) => [highlight.id, false]))
+  );
 
   // This function is triggered by keyboard shortcut defined in useKeyCombination(...)
   // It moves focus between Card component and highlight in the content.
@@ -54,10 +58,32 @@ const Wrapper = ({highlights, className, container, highlighter}: WrapperProps)
     }
   }, [focusedHighlight, focusedId]);
 
+  const hideCard = () => {
+    dispatch({ type: 'HIDE', id: focusedId });
+  };
+
+  const showCard = () => {
+    dispatch({ type: 'SHOW', id: focusedId });
+  };
+
+  const showAllCards = () => {
+    dispatch({ type: 'SHOW_ALL' });
+  };
+
   useKeyCombination(highlightKeyCombination, moveFocus, noopKeyCombinationHandler([container, element]));
 
-  // Allow to move back to highlight from EditCard using Escape key
-  useKeyCombination({key: 'Escape'}, moveFocus);
+  /*
+  * Allow to show EditCard using Enter key
+  * It is important to preserve the default behavior of Enter key
+  */
+  useKeyCombination({key: 'Enter'}, showCard, undefined, false);
+
+  // Allow to hide EditCard using Escape key
+  useKeyCombination({key: 'Escape'}, hideCard, undefined, false);
+
+  // After move focus, reset visibility of all cards
+  useKeyCombination({ key: 'Tab' }, showAllCards, undefined, false);
+  useKeyCombination({ key: 'Tab', shiftKey: true }, showAllCards, undefined, false);
 
   // Clear shouldFocusCard when focus is lost from the CardWrapper.
   // If we don't do this then card related for the focused highlight will be focused automatically.
@@ -128,7 +154,8 @@ const Wrapper = ({highlights, className, container, highlighter}: WrapperProps)
           onHeightChange={(ref: React.RefObject<HTMLElement>) => onHeightChange(highlight.id, ref)}
           zIndex={highlights.length - index}
           shouldFocusCard={focusThisCard}
-          isHidden={checkIfHiddenByCollapsedAncestor(highlight)}
+          isHidden={checkIfHiddenByCollapsedAncestor(highlight) || isHiddenByEscape.get(highlight.id)}
+          onBlurOptional={showAllCards}
         />;
       })}
     </div>

src/app/content/highlights/components/__snapshots__/CardWrapper.spec.tsx.snap

@@ -61,6 +61,7 @@ exports[`CardWrapper matches snapshot 1`] = `
       }
     }
     isHidden={false}
+    onBlurOptional={[Function]}
     onHeightChange={[Function]}
     shouldFocusCard={false}
     zIndex={1}

src/app/content/highlights/components/cardUtils.spec.ts

@@ -2,7 +2,7 @@ import { Highlight } from '@openstax/highlighter';
 import { HighlightColorEnum } from '@openstax/highlighter/dist/api';
 import createMockHighlight from '../../../../test/mocks/highlight';
 import { assertDocument } from '../../../utils';
-import { generateUpdatePayload, getHighlightTopOffset } from './cardUtils';
+import { generateUpdatePayload, getHighlightTopOffset, editCardVisibilityHandler } from './cardUtils';
 
 describe('cardUtils', () => {
   it('returns undefined if passed container is undefined', () => {
@@ -48,3 +48,50 @@ describe('generateUpdatePayload', () => {
     expect(payload.updatePayload.highlight).toEqual({...update, color: oldData.color});
   });
 });
+
+describe('editCardVisibilityHandler', () => {
+  const highlights = [
+    {id: 'highlight1', annotation: 'annotation1'},
+    {id: 'highlight2', annotation: 'annotation2'},
+    {id: 'highlight3', annotation: 'annotation3'},
+  ];
+  const state = new Map(highlights.map((highlight) => [highlight.id, false]));
+
+  it('hide highlight', () => {
+    const result = editCardVisibilityHandler(state, { type: 'HIDE', id: 'highlight1'});
+    expect(result.get('highlight1')).toBe(true);
+    expect(result.get('highlight2')).toBe(false);
+    expect(result.get('highlight3')).toBe(false);
+  });
+
+  it('hide highlight - unknown id', () => {
+    const result = editCardVisibilityHandler(state, { type: 'HIDE'});
+    expect(result.get('highlight1')).toBe(false);
+  });
+
+  it('show highlight', () => {
+    const result = editCardVisibilityHandler(state, { type: 'SHOW', id: 'highlight1'});
+    expect(result.get('highlight1')).toBe(false);
+    expect(result.get('highlight2')).toBe(false);
+    expect(result.get('highlight3')).toBe(false);
+  });
+
+  it('show highlight - unknown id', () => {
+    const result = editCardVisibilityHandler(state, { type: 'SHOW'});
+    expect(result.get('highlight1')).toBe(false);
+  });
+
+  it('show all highlights', () => {
+    const firstResult = editCardVisibilityHandler(state, { type: 'HIDE', id: 'highlight1'});
+    expect(firstResult.get('highlight1')).toBe(true);
+    const secondResult = editCardVisibilityHandler(state, { type: 'SHOW_ALL'});
+    expect(secondResult.get('highlight1')).toBe(false);
+    expect(secondResult.get('highlight2')).toBe(false);
+    expect(secondResult.get('highlight3')).toBe(false);
+  });
+
+  it('return state when action type does not exist', () => {
+    const result = editCardVisibilityHandler(state, { type: 'SHOW_ANY'});
+    expect(result.get('highlight1')).toBe(false);
+  });
+});

src/app/content/highlights/components/cardUtils.ts

@@ -215,3 +215,27 @@ export const noopKeyCombinationHandler = (
   if (activeElement.nodeName === 'TEXTAREA') { return true; }
   return false;
 };
+
+export const editCardVisibilityHandler = (state: Map<string, boolean>, action: { type: string; id?: string }) => {
+  switch (action.type) {
+    case 'SHOW': {
+      if (!action.id) return state;
+      const newState = new Map(state);
+      newState.set(action.id, false);
+      return newState;
+    }
+    case 'HIDE': {
+      if (!action.id) return state;
+      const updatedState = new Map(state);
+      updatedState.set(action.id, true);
+      return updatedState;
+    }
+    case 'SHOW_ALL': {
+      const allVisibleState = new Map(state);
+      allVisibleState.forEach((_, key) => allVisibleState.set(key, false));
+      return allVisibleState;
+    }
+    default:
+      return state;
+  }
+};

src/app/reactUtils.ts

@@ -449,7 +449,8 @@ export const keyboardEventMatchesCombination = (options: KeyCombinationOptions,
 export const useKeyCombination = (
   options: KeyCombinationOptions,
   callback: (event: KeyboardEvent) => void,
-  noopHandler?: (activeElement: Element) => boolean
+  noopHandler?: (activeElement: Element) => boolean,
+  preventDefault = true
 ) => {
   const document = assertDocument();
 
@@ -458,7 +459,7 @@ export const useKeyCombination = (
       return;
     }
     if (keyboardEventMatchesCombination(options, event)) {
-      event.preventDefault();
+      if (preventDefault) event.preventDefault();
       callback(event);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps