Merge pull request #118 from oleksandr-danylchenko/keyboard-event-sel…

…ection

Added keyboard text selection support

packages/text-annotator-react/package.json

@@ -51,4 +51,4 @@
     "@recogito/text-annotator-tei": "3.0.0-rc.46",
     "CETEIcean": "^1.9.3"
   }
-}
+}

packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.css

@@ -0,0 +1,30 @@
+/*
+ * Close message should be visible only to the keyboard
+ * or the screen reader users as the popup behavior hint
+ * Inspired by https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+ */
+.popup-close-message {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.popup-close-message:focus,
+.popup-close-message:active {
+  clip: auto;
+  -webkit-clip-path: none;
+  clip-path: none;
+  height: auto;
+  margin: auto;
+  overflow: visible;
+  width: auto;
+  white-space: normal;
+}

packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx

@@ -0,0 +1,164 @@
+import React, { PointerEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingPortal,
+  inline,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole
+} from '@floating-ui/react';
+
+import { useAnnotator, useSelection } from '@annotorious/react';
+import type { TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
+
+import './TextAnnotatorPopup.css';
+
+interface TextAnnotationPopupProps {
+
+  popup(props: TextAnnotationPopupContentProps): ReactNode;
+
+}
+
+export interface TextAnnotationPopupContentProps {
+
+  annotation: TextAnnotation;
+
+  editable?: boolean;
+
+  event?: PointerEvent;
+
+}
+
+export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
+
+  const r = useAnnotator<TextAnnotator>();
+
+  const { selected, event } = useSelection<TextAnnotation>();
+  const annotation = selected[0]?.annotation;
+
+  const [isOpen, setOpen] = useState(selected?.length > 0);
+
+  const handleClose = () => {
+    r?.cancelSelected();
+  };
+
+  const { refs, floatingStyles, update, context } = useFloating({
+    placement: 'top',
+    open: isOpen,
+    onOpenChange: (open, _event, reason) => {
+      setOpen(open);
+
+      if (!open) {
+        if (reason === 'escape-key' || reason === 'focus-out') {
+          r?.cancelSelected();
+        }
+      }
+    },
+    middleware: [
+      offset(10),
+      inline(),
+      flip(),
+      shift({ mainAxis: false, crossAxis: true, padding: 10 })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'dialog' });
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const selectedKey = selected.map(a => a.annotation.id).join('-');
+  useEffect(() => {
+    // Ignore all selection changes except those accompanied by a user event.
+    if (selected.length > 0 && event) {
+      setOpen(event.type === 'pointerup' || event.type === 'keydown');
+    }
+  }, [selectedKey, event]);
+
+  useEffect(() => {
+    // Close the popup if the selection is cleared
+    if (selected.length === 0 && isOpen) {
+      setOpen(false);
+    }
+  }, [isOpen, selectedKey]);
+
+  useEffect(() => {
+    if (isOpen && annotation) {
+      const {
+        target: {
+          selector: [{ range }]
+        }
+      } = annotation;
+
+      refs.setPositionReference({
+        getBoundingClientRect: range.getBoundingClientRect.bind(range),
+        getClientRects: range.getClientRects.bind(range)
+      });
+    } else {
+      // Don't leave the reference depending on the previously selected annotation
+      refs.setPositionReference(null);
+    }
+  }, [isOpen, annotation, refs]);
+
+  // Prevent text-annotator from handling the irrelevant events triggered from the popup
+  const getStopEventsPropagationProps = useCallback(
+    () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),
+    []
+  );
+
+  useEffect(() => {
+    const config: MutationObserverInit = { attributes: true, childList: true, subtree: true };
+
+    const mutationObserver = new MutationObserver(() => update());
+    mutationObserver.observe(document.body, config);
+
+    window.document.addEventListener('scroll', update, true);
+
+    return () => {
+      mutationObserver.disconnect();
+      window.document.removeEventListener('scroll', update, true);
+    };
+  }, [update]);
+
+  return isOpen && selected.length > 0 ? (
+    <FloatingPortal>
+      <FloatingFocusManager
+        context={context}
+        modal={false}
+        closeOnFocusOut={true}
+        initialFocus={
+          /**
+           * Don't shift focus to the floating element
+           * when the selection performed with the keyboard
+           */
+          event?.type === 'keydown' ? -1 : 0
+        }
+        returnFocus={false}
+      >
+        <div
+          className="annotation-popup text-annotation-popup not-annotatable"
+          ref={refs.setFloating}
+          style={floatingStyles}
+          {...getFloatingProps()}
+          {...getStopEventsPropagationProps()}>
+          {props.popup({
+            annotation: selected[0].annotation,
+            editable: selected[0].editable,
+            event
+          })}
+
+          {/* It lets keyboard/sr users to know that the dialog closes when they focus out of it */}
+          <button className="popup-close-message" onClick={handleClose}>
+            This dialog closes when you leave it.
+          </button>
+        </div>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  ) : null;
+
+};

packages/text-annotator-react/src/TextAnnotatorPopup/index.ts

@@ -0,0 +1 @@
+export * from './TextAnnotatorPopup';

packages/text-annotator-react/src/index.ts

@@ -30,7 +30,7 @@ export type {
 export {
   createBody,
   Origin,
-  UserSelectAction,
+  UserSelectAction
 } from '@annotorious/core';
 
 // Essential re-exports from @annotorious/react