Added not annotatable class usage

Author: oleksandr-danylchenko

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

@@ -1,7 +1,8 @@
-import { PointerEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { PointerEvent, ReactNode, useEffect, useMemo, useState } from 'react';
+
 import { useAnnotator, useSelection } from '@annotorious/react';
-import { isRevived, TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
-import { isMobile } from './isMobile';
+import { isRevived, NOT_ANNOTATABLE_CLASS, TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
+
 import {
   autoUpdate,
   flip,
@@ -16,6 +17,8 @@ import {
   useRole
 } from '@floating-ui/react';
 
+import { isMobile } from './isMobile';
+
 import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {
@@ -122,7 +125,7 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
         returnFocus={false}
         initialFocus={initialFocus}>
         <div
-          className="a9s-popup r6o-popup annotation-popup r6o-text-popup not-annotatable"
+          className={`a9s-popup r6o-popup annotation-popup r6o-text-popup ${NOT_ANNOTATABLE_CLASS}`}
           ref={refs.setFloating}
           style={floatingStyles}
           {...getFloatingProps(getStopEventsPropagationProps())}>