mirador-annotation-editor-video 1.1.5 → 1.1.6

package/src/plugins/canvasAnnotationsPlugin.js

@@ -1,17 +1,33 @@
-import React, { useState } from 'react';
+import React, {
+  useCallback,
+  useEffect, useMemo, useRef, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
 import * as actions from 'mirador/dist/es/src/state/actions';
 import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
-import {
-  getCompanionWindowsForContent,
-} from 'mirador/dist/es/src/state/selectors/companionWindows';
+import { getCompanionWindowsForContent } from 'mirador/dist/es/src/state/selectors/companionWindows';
 import CanvasListItem from '../CanvasListItem';
 import AnnotationActionsContext from '../AnnotationActionsContext';
 import SingleCanvasDialog from '../SingleCanvasDialog';
 import translations from '../locales/locales';
+import {
+  scrollToSelectedAnnotation,
+} from './canvasAnnotationsPluginUtils';
 
-/** Functional Component */
+/**
+ * CanvasAnnotationsWrapper
+ *
+ * Re-implements "scroll to selected annotation" inside the wrapper:
+ * - Observes selectedAnnotationId and scrolls the correct container so the <li> is visible.
+ * - Robust container resolution (ancestor/descendant/window).
+ * - Retries to survive focus/reflow resetting scrollTop.
+ *
+ * Props of interest:
+ * - targetProps.selectedAnnotationId: the currently selected annotation id.
+ * - scrollOffsetTop: px reserved for sticky header inside the scroller (default 96).
+ * - scrollRetries / scrollRetryDelay / scrollBehavior: tuning for robustness.
+ */
 function CanvasAnnotationsWrapper({
   addCompanionWindow,
   annotationsOnCanvases = {},
@@ -22,39 +38,77 @@ function CanvasAnnotationsWrapper({
   TargetComponent,
   targetProps,
   windowViewType,
-  containerRef,
   annotationEditCompanionWindowIsOpened,
   t,
 }) {
   const [singleCanvasDialogOpen, setSingleCanvasDialogOpen] = useState(false);
 
-  /** */
-  const toggleSingleCanvasDialogOpen = () => {
-    setSingleCanvasDialogOpen((prev) => !prev);
-  };
+  const wrapperRef = useRef(null);
+  const bridgedScrollRef = useRef(null);
+
+  useEffect(() => {
+    const selId = targetProps?.selectedAnnotationId;
+    if (!selId) return;
+
+    const node = wrapperRef.current?.querySelector(`li[annotationid="${selId}"]`)
+            || wrapperRef.current?.querySelector('li.MuiMenuItem-root.Mui-selected');
+    if (!node) return;
+
+    scrollToSelectedAnnotation(node, bridgedScrollRef);
+  }, [
+    targetProps?.selectedAnnotationId,
+  ]);
+  /**
+     * Toggle the visibility state of the single canvas dialog.
+     *
+     * - Flips `singleCanvasDialogOpen` between `true` and `false`.
+     * - Used as the `handleClose` callback for the dialog and to open it.
+     *
+     * @function
+     * @returns {void}
+     */
+  const toggleSingleCanvasDialogOpen = useCallback(
+    () => setSingleCanvasDialogOpen((p) => !p),
+    [],
+  );
 
   const props = {
+    containerRef: bridgedScrollRef,
     ...targetProps,
     listContainerComponent: CanvasListItem,
   };
 
+  const contextValue = useMemo(() => ({
+    addCompanionWindow,
+    annotationEditCompanionWindowIsOpened,
+    annotationsOnCanvases,
+    canvases,
+    config,
+    receiveAnnotation,
+    storageAdapter: config.annotation.adapter,
+    t,
+    toggleSingleCanvasDialogOpen,
+    windowId: targetProps.windowId,
+    windowViewType,
+  }), [
+    addCompanionWindow,
+    annotationEditCompanionWindowIsOpened,
+    annotationsOnCanvases,
+    canvases,
+    config,
+    receiveAnnotation,
+    t,
+    toggleSingleCanvasDialogOpen,
+    targetProps.windowId,
+    windowViewType,
+  ]);
   return (
-    <AnnotationActionsContext.Provider
-      value={{
-        addCompanionWindow,
-        annotationEditCompanionWindowIsOpened,
-        annotationsOnCanvases,
-        canvases,
-        config,
-        receiveAnnotation,
-        storageAdapter: config.annotation.adapter,
-        toggleSingleCanvasDialogOpen,
-        windowId: targetProps.windowId,
-        windowViewType,
-        t,
-      }}
-    >
-      <TargetComponent {...props} ref={containerRef} />
+    <AnnotationActionsContext.Provider value={contextValue}>
+      <div ref={wrapperRef} style={{ height: '100%', position: 'relative' }}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <TargetComponent {...props} />
+      </div>
+
       {windowViewType !== 'single' && (
         <SingleCanvasDialog
           handleClose={toggleSingleCanvasDialogOpen}
@@ -69,107 +123,77 @@ function CanvasAnnotationsWrapper({
 CanvasAnnotationsWrapper.propTypes = {
   addCompanionWindow: PropTypes.func.isRequired,
   annotationEditCompanionWindowIsOpened: PropTypes.bool.isRequired,
-  annotationsOnCanvases: PropTypes.shape({
-    id: PropTypes.string,
-    isFetching: PropTypes.bool,
-    json: PropTypes.shape({
-      id: PropTypes.string,
-      items: PropTypes.arrayOf(
-        PropTypes.shape({
-          body: PropTypes.shape({
-            format: PropTypes.string,
-            id: PropTypes.string,
-            value: PropTypes.string,
-          }),
-          drawingState: PropTypes.string,
-          id: PropTypes.string,
-          manifestNetwork: PropTypes.string,
-          motivation: PropTypes.string,
-          target: PropTypes.string,
-          type: PropTypes.string,
-        }),
-      ),
-      type: PropTypes.string,
-    }),
-  }).isRequired,
-  canvases: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      index: PropTypes.number,
-    }),
-  ).isRequired,
-  config: PropTypes.shape({
-    annotation: PropTypes.shape({
-      adapter: PropTypes.func,
-    }),
-  }).isRequired,
-  containerRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  ]),
+  annotationsOnCanvases: PropTypes.shape({}).isRequired,
+  // eslint-disable-next-line max-len
+  canvases: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, index: PropTypes.number })).isRequired,
+  config: PropTypes.shape({ annotation: PropTypes.shape({ adapter: PropTypes.func }) }).isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
   switchToSingleCanvasView: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
-  TargetComponent: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node,
-  ]).isRequired,
+  TargetComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   targetProps: PropTypes.object.isRequired,
   windowViewType: PropTypes.string.isRequired,
 };
 
-/** TODO this logic is duplicated */
+/** mapStateToProps / mapDispatchToProps unchanged from your version */
 function mapStateToProps(state, { targetProps: { windowId } }) {
   const canvases = getVisibleCanvases(state, { windowId });
   const annotationsOnCanvases = {};
-  const annotationCreationCompanionWindows = getCompanionWindowsForContent(state, {
-    content: 'annotationCreation',
-    windowId,
-  });
-  let annotationEditCompanionWindowIsOpened = true;
-
-  if (Object.keys(annotationCreationCompanionWindows).length !== 0) {
-    annotationEditCompanionWindowIsOpened = false;
-  }
+  const creation = getCompanionWindowsForContent(state, { content: 'annotationCreation', windowId });
+  const annotationEditCompanionWindowIsOpened = Object.keys(creation).length === 0;
 
   canvases.forEach((canvas) => {
     const anno = state.annotations[canvas.id];
-    if (anno) {
-      annotationsOnCanvases[canvas.id] = anno;
-    }
+    if (anno) annotationsOnCanvases[canvas.id] = anno;
   });
+
   return {
     annotationEditCompanionWindowIsOpened,
     annotationsOnCanvases,
     canvases,
-    config: {
-      ...state.config,
-      translations,
-    },
+    config: { ...state.config, translations },
     windowViewType: getWindowViewType(state, { windowId }),
   };
 }
-
-/** */
-const mapDispatchToProps = (dispatch, props, annotationEditCompanionWindowIsOpened) => ({
-  addCompanionWindow: (content, additionalProps) => dispatch(
-    actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }),
-  ),
+/**
+ * Map Redux dispatch actions to props for the CanvasAnnotationsWrapper.
+ *
+ * Provides callback props that allow the wrapped component to interact
+ * with the Mirador Redux store, including:
+ *
+ * - `addCompanionWindow`: Open a companion window for the given window ID,
+ *   with specified content and optional extra props.
+ * - `receiveAnnotation`: Add or update an annotation in the Redux store
+ *   for a specific target.
+ * - `switchToSingleCanvasView`: Change the current window's view type
+ *   to `"single"`.
+ *
+ * @function
+ * @param {Function} dispatch - Redux dispatch function.
+ * @param {object} props - The wrapper component props.
+ * @param {object} props.targetProps - Props passed down to the wrapped target component.
+ * @param {string} props.targetProps.windowId - The ID of the Mirador window.
+ * @returns {object} An object mapping action dispatchers to props.
+ * @property {function(string, object):void} addCompanionWindow
+ * @property {function(string, string, object):void} receiveAnnotation
+ * @property {function():void} switchToSingleCanvasView
+ */
+const mapDispatchToProps = (dispatch, props) => ({
+  addCompanionWindow: (content, additionalProps) => dispatch(actions.addCompanionWindow(
+    props.targetProps.windowId,
+    { content, ...additionalProps },
+  )),
   receiveAnnotation: (targetId, id, annotation) => dispatch(
     actions.receiveAnnotation(targetId, id, annotation),
   ),
-  switchToSingleCanvasView: () => dispatch(
-    actions.setWindowViewType(props.targetProps.windowId, 'single'),
-  ),
+  switchToSingleCanvasView: () => dispatch(actions.setWindowViewType(props.targetProps.windowId, 'single')),
 });
-
-const CanvasAnnotationsWrapperContainer = {
+const canvasAnnotationsPlugin = {
   component: CanvasAnnotationsWrapper,
   mapDispatchToProps,
   mapStateToProps,
   mode: 'wrap',
   target: 'CanvasAnnotations',
 };
-
-export default CanvasAnnotationsWrapperContainer;
+export default canvasAnnotationsPlugin;

package/src/plugins/canvasAnnotationsPluginUtils.js

@@ -0,0 +1,199 @@
+/**
+ * Utilities
+ */
+export const isScrollable = (el) => {
+  if (!el) return false;
+  const cs = getComputedStyle(el);
+  const oy = cs.overflowY || cs.overflow || '';
+  return /(auto|scroll|overlay)/.test(oy) && el.scrollHeight > el.clientHeight;
+};
+
+/**
+ * Find the closest scrollable ancestor of a given DOM node.
+ *
+ * - Walks up the DOM tree from the node's parent using `parentElement`.
+ * - Returns the first ancestor element that is considered scrollable,
+ *   meaning:
+ *   - Its `overflowY` (or `overflow`) style is `auto`, `scroll`, or `overlay`,
+ *   - And its `scrollHeight` is greater than its `clientHeight`.
+ * - Returns `null` if no scrollable ancestor is found before reaching the root.
+ *
+ * @param {HTMLElement|null} node - The starting DOM node.
+ * @returns {HTMLElement|null} The nearest scrollable ancestor, or null if none exist.
+ */
+export const closestScrollableAncestor = (node) => {
+  let cur = node?.parentElement || null;
+  while (cur) {
+    if (isScrollable(cur)) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+};
+
+/**
+ * Get the primary scrollable element for the browser window.
+ *
+ * - Modern browsers expose `document.scrollingElement` (usually the `<html>` element).
+ * - As a fallback, returns `document.documentElement` (the `<html>` element).
+ * - This element's `scrollTop` and `scrollHeight` represent the window's scroll state.
+ *
+ * @function
+ * @returns {HTMLElement} The DOM element representing the window's scrolling container.
+ */
+export const getWindowScroller = () => document.scrollingElement || document.documentElement;
+
+/**
+ * Compute the vertical scroll position needed to bring a node into view
+ * within a given scrollable container element.
+ *
+ * - Uses bounding boxes of the node and container to calculate the node's
+ *   position relative to the container's scroll area.
+ * - Considers the container's `scrollTop`, `clientHeight`, and a custom
+ *   `offsetTop` (for sticky headers/toolbars inside the container).
+ * - If the node is already fully visible inside the container, returns `null`.
+ * - If the node is above the visible area, returns the scrollTop needed
+ *   to align its top just below the offset.
+ * - If the node is below the visible area, returns the scrollTop needed
+ *   to bring its bottom into view (but not less than aligning its top).
+ *
+ * @param {HTMLElement} container - The scrollable container element.
+ * @param {HTMLElement} node - The DOM element to bring into view.
+ * @param {number} offsetTop - Extra vertical offset in pixels to keep free at the top.
+ * @returns {number|null} The target scrollTop value for the container, or null if already visible.
+ */
+export function computeTargetContainer(container, node, offsetTop) {
+  const cRect = container.getBoundingClientRect();
+  const nRect = node.getBoundingClientRect();
+  const nodeTopInContainer = (nRect.top - cRect.top) + container.scrollTop;
+  const nodeBottomInContainer = (nRect.bottom - cRect.top) + container.scrollTop;
+  const visibleTop = container.scrollTop + offsetTop;
+  const visibleBottom = container.scrollTop + container.clientHeight;
+  const above = nodeTopInContainer < visibleTop;
+  const below = nodeBottomInContainer > visibleBottom;
+  if (!above && !below) return null;
+  return above ? nodeTopInContainer - offsetTop
+    : Math.max(nodeBottomInContainer - container.clientHeight, nodeTopInContainer - offsetTop);
+}
+
+/**
+ * Compute the vertical scroll position needed to bring a node into view
+ * within the browser window.
+ *
+ * - Uses the node's bounding box relative to the viewport.
+ * - Considers the current `window.scrollY` and the given `offsetTop`
+ *   (to account for sticky headers or toolbars).
+ * - If the node is already fully visible, returns `null`.
+ * - If the node is above the visible viewport, returns the scrollY needed
+ *   to align its top just below the offset.
+ * - If the node is below the viewport, returns the scrollY needed to align
+ *   its bottom into view (but not less than aligning its top).
+ *
+ * @param {HTMLElement} node - The DOM element to bring into view.
+ * @param {number} offsetTop - Extra vertical offset in pixels to keep free at the top.
+ * @returns {number|null} The target scrollY for the window, or null if already visible.
+ */
+export function computeTargetWindow(node, offsetTop) {
+  const rect = node.getBoundingClientRect();
+  const nodeTop = rect.top + window.scrollY;
+  const nodeBottom = rect.bottom + window.scrollY;
+  const viewTop = window.scrollY + offsetTop;
+  const viewBottom = window.scrollY + window.innerHeight;
+  const above = nodeTop < viewTop;
+  const below = nodeBottom > viewBottom;
+  if (!above && !below) return null;
+  return above ? nodeTop - offsetTop
+    : Math.max(nodeBottom - window.innerHeight, nodeTop - offsetTop);
+}
+
+/**
+ * Attempt a single scroll operation to bring the selected annotation node into view.
+ *
+ * - Uses double `requestAnimationFrame` to wait until layout and paints have settled.
+ * - Resolves the correct scroll container (bridged ref, closest ancestor, or window).
+ * - Computes the target scroll position using `computeTargetWindow` or
+ * `computeTargetContainer`.
+ * - Performs the scroll with the configured `scrollBehavior`.
+ * - After a short delay (`scrollRetryDelay`),
+ * checks whether the scroll position actually changed.
+ *
+ * @param {HTMLElement} node - The DOM element to scroll into view.
+ * @param {React.RefObject<HTMLElement>} bridgedScrollRef - Ref to a preferred scrollable container.
+ * @param {number} scrollRetryDelay - Delay in ms before checking if the scroll succeeded.
+ * @returns {Promise<boolean>} Resolves to true if the scroll moved the container, false otherwise.
+ */
+export const runScrollOnce = (
+  node,
+  bridgedScrollRef,
+  scrollRetryDelay,
+) => new Promise((resolve) => {
+  const scrollBehavior = 'smooth';
+  const scrollOffsetTop = 96;
+
+  requestAnimationFrame(() => {
+    // eslint-disable-next-line consistent-return
+    requestAnimationFrame(() => {
+      let container = bridgedScrollRef.current;
+      if (!isScrollable(container)) container = closestScrollableAncestor(node);
+      if (!isScrollable(container)) container = getWindowScroller();
+
+      const isWindow = container === document.body
+        || container === document.documentElement
+        || container === document.scrollingElement;
+
+      if (isWindow) {
+        const topWindow = computeTargetWindow(node, scrollOffsetTop);
+        if (topWindow == null) return resolve(true);
+        const before = window.scrollY;
+        window.scrollTo({
+          behavior: scrollBehavior,
+          top: topWindow,
+        });
+        setTimeout(() => {
+          const after = window.scrollY;
+          resolve(Math.abs(after - before) > 0.5);
+        }, scrollRetryDelay);
+        // eslint-disable-next-line consistent-return
+        return;
+      }
+
+      const top = computeTargetContainer(container, node, scrollOffsetTop);
+      if (top == null) return resolve(true);
+      const before = container.scrollTop;
+      if (typeof container.scrollTo === 'function') {
+        container.scrollTo({
+          behavior: scrollBehavior,
+          top,
+        });
+      }
+      setTimeout(() => {
+        const after = container.scrollTop;
+        resolve(Math.abs(after - before) > 0.5);
+      }, scrollRetryDelay);
+    });
+  });
+});
+
+/**
+ * Scroll the selected annotation into view, retrying if necessary.
+ * @param node
+ * @param bridgedScrollRef
+ * @returns {Promise<void>}
+ */
+export const scrollToSelectedAnnotation = async (node, bridgedScrollRef) => {
+  const maxScrollRetries = 3;
+  const scrollRetryDelay = 24;
+
+  // eslint-disable-next-line no-plusplus
+  for (let attempt = 0; attempt <= maxScrollRetries; attempt++) {
+    // eslint-disable-next-line no-await-in-loop
+    const ok = await runScrollOnce(node, bridgedScrollRef, scrollRetryDelay);
+    if (ok) {
+      break;
+    }
+
+    if (attempt < maxScrollRetries) {
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise((resolve) => { setTimeout(resolve, scrollRetryDelay); });
+    }
+  }
+};

package/src/plugins/externalStorageAnnotationPlugin.js

@@ -1,58 +1,12 @@
-import React, { useEffect, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
-import * as actions from 'mirador/dist/es/src/state/actions';
-import LocalStorageAdapter from '../annotationAdapter/LocalStorageAdapter';
-import AnnototAdapter from '../annotationAdapter/AnnototAdapter';
-import { AnnotationAdapter } from '../annotationAdapter/AnnotationAdapterUtils';
 
 /** Functional component version of ExternalStorageAnnotation */
 function ExternalStorageAnnotation({
-  canvases,
-  config,
-  receiveAnnotation,
-  PluginComponents,
+  PluginComponents = [],
   TargetComponent,
   targetProps,
 }) {
-  const retrieveAnnotations = useCallback((currentCanvases) => {
-    currentCanvases.forEach((canvas) => {
-      if (
-        typeof config.annotation.adapter === 'string'
-        && config.annotation.adapter === AnnotationAdapter.LOCAL_STORAGE
-      ) {
-        config.annotation.adapter = (canvasId) =>
-          new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`);
-      }
-      if (
-        typeof config.annotation.adapter === 'string'
-        && config.annotation.adapter === AnnotationAdapter.ANNOTOT
-      ) {
-        const endpointUrl = 'http://127.0.0.1:3000/annotations';
-        config.annotation.adapter = (canvasId) => new AnnototAdapter(canvasId, endpointUrl);
-      }
-      if (!config.annotation.adapter) {
-        config.annotation.adapter = (canvasId) =>
-          new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`);
-      }
-      const storageAdapter = config.annotation.adapter(canvas.id);
-
-      storageAdapter.all().then((annoPage) => {
-        if (annoPage) {
-          receiveAnnotation(
-            canvas.id,
-            storageAdapter.annotationPageId,
-            annoPage,
-          );
-        }
-      });
-    });
-  }, [config, receiveAnnotation]);
-
-  useEffect(() => {
-    retrieveAnnotations(canvases);
-  }, [canvases, retrieveAnnotations]);
-
   return (
     <TargetComponent
       {...targetProps} // eslint-disable-line react/jsx-props-no-spreading
@@ -62,16 +16,7 @@ function ExternalStorageAnnotation({
 }
 
 ExternalStorageAnnotation.propTypes = {
-  canvases: PropTypes.arrayOf(
-    PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
-  ),
-  config: PropTypes.shape({
-    annotation: PropTypes.shape({
-      adapter: PropTypes.func,
-    }),
-  }).isRequired,
-  PluginComponents: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  receiveAnnotation: PropTypes.func.isRequired,
+  PluginComponents: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   TargetComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,
@@ -79,28 +24,10 @@ ExternalStorageAnnotation.propTypes = {
   targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-ExternalStorageAnnotation.defaultProps = {
-  canvases: [],
-  PluginComponents: [],
-};
-
-/** */
-const mapDispatchToProps = {
-  receiveAnnotation: actions.receiveAnnotation,
-};
-
-/** */
-function mapStateToProps(state, { targetProps }) {
-  return {
-    canvases: getVisibleCanvases(state, { windowId: targetProps.windowId }),
-    config: state.config,
-  };
-}
-
-export default {
+const externalStorageAnnotationPlugin = {
   component: ExternalStorageAnnotation,
-  mapDispatchToProps,
-  mapStateToProps,
   mode: 'wrap',
   target: 'Window',
 };
+
+export default externalStorageAnnotationPlugin;

package/src/plugins/miradorAnnotationPlugin.js

@@ -8,9 +8,11 @@ import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuBut
 import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tooltip } from '@mui/material';
+import { getCompanionWindowsForContent } from 'mirador/dist/es/src/state/selectors/companionWindows';
 import SingleCanvasDialog from '../SingleCanvasDialog';
 import AnnotationExportDialog from '../AnnotationExportDialog';
 import LocalStorageAdapter from '../annotationAdapter/LocalStorageAdapter';
+import translations from '../locales/locales';
 
 /** Mirador annotation plugin component. Get all the stuff
  * and info to manage annotation functionnality */
@@ -86,7 +88,6 @@ function MiradorAnnotation(
           open={singleCanvasDialogOpen}
           handleClose={toggleSingleCanvasDialogOpen}
           switchToSingleCanvasView={switchToSingleCanvasView}
-          t={t}
         />
       )}
       {offerExportDialog && (
@@ -106,7 +107,6 @@ function MiradorAnnotation(
           config={config}
           handleClose={toggleCanvasExportDialog}
           open={annotationExportDialogOpen}
-          t={t}
         />
       )}
     </div>
@@ -124,7 +124,6 @@ MiradorAnnotation.propTypes = {
       exportLocalStorageAnnotations: PropTypes.bool,
     }),
   }).isRequired,
-  createAnnotation: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
   TargetComponent: PropTypes.oneOfType([
     PropTypes.func,
@@ -135,4 +134,33 @@ MiradorAnnotation.propTypes = {
   windowViewType: PropTypes.string.isRequired,
 };
 
-export default MiradorAnnotation;
+// TODO use selector in main componenent
+/**
+ * this function map the state to the annotationPlugin's props
+ * */
+function mapStateToProps(state, { targetProps: { windowId } }) {
+  // Annotation edit companion window ou annotation creation companion window is the same thing
+  const annotationCreationCompanionWindows = getCompanionWindowsForContent(state, { content: 'annotationCreation', windowId });
+  let annotationEditCompanionWindowIsOpened = true;
+  if (Object.keys(annotationCreationCompanionWindows).length !== 0) {
+    annotationEditCompanionWindowIsOpened = false;
+  }
+  return {
+    annotationEditCompanionWindowIsOpened,
+    canvases: getVisibleCanvases(state, { windowId }),
+    config: state.config,
+    windowViewType: getWindowViewType(state, { windowId }),
+  };
+}
+
+const miradorAnnotationPlugin = {
+  component: MiradorAnnotation,
+  config: {
+    translations,
+  },
+  mapStateToProps,
+  mode: 'wrap',
+  target: 'AnnotationSettings',
+};
+
+export default miradorAnnotationPlugin;