update plugin for mirador 4

.eslintrc

@@ -1,30 +1,36 @@
 {
   "env": {
-    "jest/globals": true
+    "jest/globals": true,
+    "browser": true
   },
-  "extends": ["airbnb","react-app","prettier"],
+  "extends": ["airbnb", "plugin:jest/recommended", "prettier"],
   "globals": {
     "page": true,
     "document": true
   },
-  "parser": "babel-eslint",
-  "plugins": ["jest","prettier"],
+  "parser": "@babel/eslint-parser",
+  "plugins": ["babel", "jest", "react", "react-hooks", "prettier"],
   "rules": {
     "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
     "no-console": "off",
-    "prettier/prettier": ["error"],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "require-jsdoc": ["error", {
-      "require": {
-        "FunctionDeclaration": true,
-        "MethodDefinition": true,
-        "ClassDeclaration": true,
+       "require": {
+         "FunctionDeclaration": true,
+         "MethodDefinition": true,
+         "ClassDeclaration": true,
         "ArrowFunctionExpression": true,
         "FunctionExpression": true
       }
     }],
+    "no-restricted-syntax": ["off", "ForOfStatement"],
+    "react/no-unstable-nested-components": 1,
+    "react/no-unused-class-component-methods": 1,
+    "react/jsx-fragments": "off",
+    "react/jsx-props-no-spreading": "off",
     "react/prefer-stateless-function": "off",
-    "sort-keys": "off",
-    "no-continue": "off",
+    "react/function-component-definition": "off",
+    "no-continue": "off"
   }
 }

.gitignore

@@ -5,3 +5,6 @@
 /node_modules
 /umd
 npm-debug.log*
+.cache
+dist
+*.tgz

.prettierignore

@@ -0,0 +1,23 @@
+/__fixtures__
+.cache
+.docassets
+.github
+/demo/dist
+/dist
+/es
+/lib
+/umd
+/node_modules
+.eslintrc
+.npmrc
+babel.config.js
+CONTRIBUTING.md
+jest.config.js
+jest.setup.js
+LICENSE.md
+netlify.toml
+npm-debug.log*
+package-lock.json
+package.json
+README.md
+webpack.config.js

.prettierrc

@@ -2,5 +2,5 @@
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,
-  "singleQuote": true,
+  "singleQuote": true
 }

README.md

@@ -3,7 +3,7 @@
 [![npm package][npm-badge]][npm]
 [![required Mirador version][mirador-badge]][mirador]
 
-**A Mirador 3 plugin to display a selectable text overlay based on OCR or transcriptions.**
+**A Mirador 4 plugin to display a selectable text overlay based on OCR or transcriptions.**
 
 [![Screenshot][screenshot]][demo]
 **[Demo on https://mirador-textoverlay.netlify.com][demo]** (try selecting some text)
@@ -93,7 +93,7 @@ changed through the UI, except for `enabled` and `fontFamily`) are:
 
 The plugin also supports theming for a few things, these can be set under the
 `textOverlay` section for the light and/or dark theme (see
-[Mirador 3 Theming](https://github.com/ProjectMirador/mirador/wiki/M3-Theming-Mirador)
+[Mirador 4 Theming](https://github.com/ProjectMirador/mirador/wiki/M3-Theming-Mirador)
 on how to set these values):
 
 - `overlayFont`: Font(s) to use for rendering text. Any valid `font-family` CSS value

__tests__/.eslintrc

@@ -1,6 +1,5 @@
-
 {
   "rules": {
     "react/jsx-props-no-spreading": [0],
-  }
+  },
 }

__tests__/components/MiradorTextOverlay.test.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { describe, it, jest, expect } from '@jest/globals';
 import { render, queryByText, getByText } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import MiradorTextOverlay from '../../src/components/MiradorTextOverlay';
 
@@ -125,7 +124,7 @@ describe('MiradorTextOverlay', () => {
     } = renderOverlay({ pageTexts });
     viewer.handlers['update-viewport']();
     const overlays = Array.of(...viewer.canvas.querySelectorAll('div > svg:first-of-type')).map(
-      (e) => e.parentElement
+      (e) => e.parentElement,
     );
     expect(overlays[0]).toHaveStyle({
       transform: 'translate(52.95000000000001px, 72.9px) scale(1.33)',

__tests__/components/OverlaySettings.test.js

@@ -2,27 +2,26 @@
 import React from 'react';
 import { describe, it, jest, expect } from '@jest/globals';
 import { fireEvent, render, screen, queryByRole } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { ThemeProvider } from '@material-ui/core/styles';
-import MuiDefaultTheme from '@material-ui/core/styles/defaultTheme';
-
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import OverlaySettings from '../../src/components/settings/OverlaySettings';
 
+const baseTheme = createTheme();
+
 const mockTheme = {
-  ...MuiDefaultTheme,
+  ...baseTheme,
   palette: {
-    ...MuiDefaultTheme.palette,
+    ...baseTheme.palette,
     getContrastText: () => '#000',
     shades: {
-      ...MuiDefaultTheme.palette.shades,
+      ...baseTheme.palette.shades,
       main: '#fff',
     },
   },
 };
 
 // Mocked MUI slider for easier testing, taken from
 // https://stackoverflow.com/a/61628815 (CC BY-SA 4.0)
-jest.mock('@material-ui/core/Slider', () => (props) => {
+jest.mock('@mui/material/Slider', () => (props) => {
   const { id, name, min, max, onChange } = props;
   return (
     <input
@@ -67,7 +66,7 @@ function renderSettings(props = {}, renderFn = render) {
         {...props}
         windowTextOverlayOptions={options}
       />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
   return { rerender, options, updateOptionsMock };
 }
@@ -123,7 +122,7 @@ describe('TextOverlaySettingsBubble', () => {
     // Button should be shown as active
     const selectButton = screen.getByLabelText('textSelect');
     expect(selectButton).toBeVisible();
-    expect(selectButton).toHaveStyle('background-color: rgba(0, 0, 0, 0.25)');
+    expect(selectButton).toHaveStyle('background-color: rgba(0, 0, 0, 0.04)');
     expect(selectButton).toHaveAttribute('aria-pressed', 'true');
 
     // Test click behavior
@@ -143,7 +142,6 @@ describe('TextOverlaySettingsBubble', () => {
     expect(screen.getByLabelText('collapseTextOverlayOptions')).toBeVisible();
     const selectButton = screen.getByLabelText('textSelect');
     expect(selectButton).toBeVisible();
-    expect(selectButton).not.toHaveStyle('background-color: rgba(0, 0, 0, 0.25)');
     expect(selectButton).toHaveAttribute('aria-pressed', 'false');
     const opacityToggle = screen.getByLabelText('textOpacity');
     expect(opacityToggle).toBeVisible();
@@ -156,7 +154,7 @@ describe('TextOverlaySettingsBubble', () => {
     const visibleButton = screen.getByLabelText('textVisible');
     expect(visibleButton).toBeVisible();
     expect(visibleButton).toHaveAttribute('aria-pressed', 'true');
-    expect(visibleButton).toHaveStyle('background-color: rgba(0, 0, 0, 0.25)');
+    expect(visibleButton).toHaveStyle('background-color: rgba(0, 0, 0, 0.04)');
     expect(visibleButton).toHaveAttribute('aria-pressed', 'true');
 
     // Test click behavior
@@ -209,7 +207,7 @@ describe('TextOverlaySettingsBubble', () => {
   it('should be positioned lower if mirador-image-tools is enabled', () => {
     renderSettings({ imageToolsEnabled: true });
     expect(
-      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement
+      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement,
     ).toHaveStyle('top: 66px');
   });
 

__tests__/components/PageTextDisplay.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { describe, it, jest, expect } from '@jest/globals';
 import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import PageTextDisplay from '../../src/components/PageTextDisplay';
 
@@ -66,24 +65,24 @@ describe('PageTextDisplay', () => {
     renderPage({ visible: false });
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
     expect(screen.getByText(svgTextMatcher('another secondWord on another line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
   });
 
   it('should not re-render by itself when the opacity changes', () => {
     const { rerender } = renderPage();
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
     renderPage({ opacity: 0.25 }, rerender);
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
   });
 
@@ -92,11 +91,11 @@ describe('PageTextDisplay', () => {
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).not.toBeNull();
     renderPage(
       { source: 'http://example.com/pages/2', lines: lineFixtures.withoutSpans, opacity: 0.25 },
-      rerender
+      rerender,
     );
     expect(screen.getByText('a word on a line')).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.25);'
+      'fill: rgba(0, 0, 0, 0.25);',
     );
   });
 
@@ -156,10 +155,17 @@ describe('PageTextDisplay', () => {
 
   it('should render spans as <text> elements when running under Gecko', () => {
     const prevAgent = global.navigator.userAgent;
-    global.navigator.userAgent =
-      'Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0';
+
+    Object.defineProperty(global.navigator, 'userAgent', {
+      value: 'Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0',
+      configurable: true,
+    });
+
     renderPage();
-    global.navigator.userAgent = prevAgent;
+    Object.defineProperty(global.navigator, 'userAgent', {
+      value: prevAgent,
+      configurable: true,
+    });
     const word = screen.getByText('firstWord');
     expect(word).not.toBeNull();
     expect(word.tagName).toEqual('text');

__tests__/lib/ocrFormats.test.js

@@ -11,7 +11,7 @@ import contentAsTextAnnos from '../../__fixtures__/anno_iifv2.json';
  * https://stackoverflow.com/a/53464807 (CC-BY-SA)
  */
 const closeTo = (expected, precision = 1) => ({
-  asymmetricMatch: (actual) => Math.abs(expected - actual) < Math.pow(10, -precision) / 2,
+  asymmetricMatch: (actual) => Math.abs(expected - actual) < 10 ** -precision / 2,
 });
 
 describe('parsing ALTO', () => {
@@ -49,7 +49,7 @@ describe('parsing ALTO', () => {
 
   it('should convert style nodes to proper CSS', () => {
     expect(parsed.lines[96].spans[16].style).toBe(
-      'font-family: Times New Roman;font-style: italic'
+      'font-family: Times New Roman;font-style: italic',
     );
   });
 });

__tests__/state/sagas.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable jest/expect-expect */
 import { select, call } from 'redux-saga/effects';
 import { expectSaga } from 'redux-saga-test-plan';
 import { throwError } from 'redux-saga-test-plan/providers';
@@ -222,7 +223,7 @@ describe('Fetching external annotation sources', () => {
       .put(
         receiveAnnotation(targetId, annotationId, {
           resources: [{ resource: simpleExternalContent }],
-        })
+        }),
       )
       .run());
 
@@ -245,7 +246,7 @@ describe('Fetching external annotation sources', () => {
               },
             },
           ],
-        })
+        }),
       )
       .run());