mirador-annotation-editor-video 1.0.99 → 1.1.1

package/README.md

@@ -4,57 +4,54 @@
 
 ### Generalities
 
-`mirador-annotation-editor-video`(also known as "MAEV") is a [Mirador 4](https://github.com/projectmirador/mirador) plugin that 
+`mirador-annotation-editor-video`(also known as "MAEV") is a [Mirador 4](https://github.com/projectmirador/mirador)
+plugin that
 adds annotation creation tools to the user interface. It support both image and video annotation.
 
 ### Copyrights
 
+Originally forked from https://github.com/ARVEST-APP/mirador-annotation-editor-video
+
 #### Licence
 
 This plugin is released under the **GPL v3** license unlike MAE and the original plugin.
 
-Please acknowledge that any modification you make must be distributed under a compatible licence and cannot be closed 
+Please acknowledge that any modification you make must be distributed under a compatible licence and cannot be closed
 source.
 
-If you need to integrate this code base in closed source pieces of software, please contact us, so we can discuss dual 
-licencing. 
-
-#### Property
-
-The base of this software (up to V1) is the property of [SATT Ouest Valorisation](https://www.ouest-valorisation.fr/) 
-that funded its development under the French public contract AO-MA2023-0004-DV5189.
+If you need to integrate this code base in closed source pieces of software, please contact us, so we can discuss dual
+licencing.
 
-#### Authors 
+#### Authors
 
 The authors of this software are :
 
 - Clarisse Bardiot (concept and use cases)
 - Jacob Hart (specifications)
 - [Tétras Libre SARL](https://tetras-libre.fr) (development):
-  - David Rouquet
-  - Anthony Geourjon
-  - Antoine Roy
+    - David Rouquet
+    - Anthony Geourjon
+    - Antoine Roy
 
 #### Contributors (updated february 2024)
 
-- AZOPSOFT SAS 
-  - Samuel Jugnet (especially code for the Konvas part)
-- Loïs Poujade (especially the original modifications to annotate videos)
+- AZOPSOFT SAS
+    - Samuel Jugnet (especially code for the Konvas part)
 
-### General functionalities 
+### General functionalities
 
-- Activate a panel with tools to create annotations on IIIF documents (manifests) containing images **and videos with 
-MAEV**
+- Activate a panel with tools to create annotations on IIIF documents (manifests) containing images **and videos with
+  MAEV**
 - Spatial and temporal targets for annotations
 - Overlay annotations (geometric forms, free hand drawing, text and images)
 - Textual/semantic annotations and tags
 - Annotation metadata (based on Dublin Core)
 - Annotation with another manifest -> network of IIIF documents
 
-### Technical aspects 
+### Technical aspects
 
 - Update to Material UI 5 and React 18 to follow latest Mirador upgrades (We support mirador": "4.0.0-alpha.2",
-- The [paperjs](http://paperjs.org/ ) library has been replaced with [Konvas](https://konvajs.org) 
+- The [paperjs](http://paperjs.org/ ) library has been replaced with [Konvas](https://konvajs.org)
 - Major refactoring since the original `[mirador-annotations](https://github.com/ProjectMirador/mirador-annotations/) 
 plugins`
 - Works with the original [Mirador 4](https://github.com/projectmirador/mirador) if you need only image annotation
@@ -70,18 +67,22 @@ npm install mirador-annotation-editor
 You can override existing annotation plugin with your own versions by using npm. We support React 18 and MUI 5.
 
 Update your `package.json` file to include the following dependencies and devDependencies:
+
 ```js
-"mirador-annotations": "npm:mirador-annotation-editor-video@^1.0.10",
+"mirador-annotations"
+:
+"npm:mirador-annotation-editor-video@^1.0.10",
 ```
 
 You need also to use the custom version of Mirador 4.
 
 ```js
-"mirador" : "npm@mirador-video@^1.0.17",
+"mirador"
+:
+"npm@mirador-video@^1.0.17",
 ```
 
-If you encounter this error : 
-
+If you encounter this error :
 
 ## Install (local)
 
@@ -101,23 +102,23 @@ npm start
 ```
 
 ## Use MAE with video annotation support
-- If you need video annotation, you can use 
-[our fork of Mirador: mirador-video](https://github.com/SCENE-CE/mirador-video)
-- In addition, we have developed a wrapper of MAE to support video annotation. This wrapper is called **MAEV** and is
-available in the [mirador-annotation-editor-video](https://github.com/SCENE-CE/mirador-annotation-editor-video)
-repository.
 
+- If you need video annotation, you can use
+  [our fork of Mirador: mirador-video](https://github.com/SCENE-CE/mirador-video)
+- In addition, we have developed a wrapper of MAE to support video annotation. This wrapper is called **MAEV** and is
+  available in the [mirador-annotation-editor-video](https://github.com/SCENE-CE/mirador-annotation-editor-video)
+  repository.
 
 ## Persisting Annotations
-Persisting annotations requires implementing a IIIF annotation server. Several 
+
+Persisting annotations requires implementing a IIIF annotation server. Several
 [examples of annotation servers](https://github.com/IIIF/awesome-iiif#annotation-servers) are available on iiif-awesome.
 
-`mirador-annotation-editor` currently supports adapters for 
-[annotot](https://github.com/ProjectMirador/mirador-annotations/blob/master/src/AnnototAdapter.js) and 
-[local storage](https://github.com/ProjectMirador/mirador-annotations/blob/master/src/LocalStorageAdapter.js). We 
+`mirador-annotation-editor` currently supports adapters for
+[annotot](https://github.com/ProjectMirador/mirador-annotations/blob/master/src/AnnototAdapter.js) and
+[local storage](https://github.com/ProjectMirador/mirador-annotations/blob/master/src/LocalStorageAdapter.js). We
 welcome contributions of adapters for other annotation servers.
 
-
 ## Contribute
 
 Our plugin follow the Mirador guidelines. Development, design, and maintenance is driven by community needs and ongoing

package/demo/src/index.js

@@ -6,7 +6,14 @@ import { manifestsCatalog } from './manifestsCatalog';
 const config = {
   annotation: {
     adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`, 'Anonymous User'),
-    commentTemplate: '<h4>Comment</h4><p>comment content</p>',
+    commentTemplates: [{
+      title: 'Template',
+      content: '<h4>Comment</h4><p>comment content</p>',
+    },
+    {
+      title: 'Template 2',
+      content: '<h4>Comment2</h4><p>comment content</p>',
+    }],
     exportLocalStorageAnnotations: false, // display annotation JSON export button
     tagsSuggestions: ['Mirador', 'Awesome', 'Viewer', 'IIIF'],
   },

package/es/IIIFUtils.js

@@ -106,7 +106,7 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
     case _AnnotationFormUtils.TEMPLATE.MULTIPLE_BODY_TYPE:
     case _AnnotationFormUtils.TEMPLATE.TEXT_TYPE:
       // In some case the target can be simplified in a string
-      if (maeTarget.drawingState.shapes.length === 1 && maeTarget.drawingState.shapes[0].type === _KonvaUtils.SHAPES_TOOL.RECTANGLE) {
+      if (isSimpleTarget(maeTarget.drawingState.shapes)) {
         return getIIIFTargetFromRectangleShape(maeTarget, canvasId, maeTarget.drawingState.shapes[0]);
       }
       // On the other case, the target is a SVG
@@ -119,6 +119,8 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
   // Default return
   return getIIIFTargetFullCanvas(maeData, canvasId);
 };
+exports.getIIIFTargetFromMaeData = getIIIFTargetFromMaeData;
+const isSimpleTarget = shapes => shapes.length === 1 && shapes[0].type === _KonvaUtils.SHAPES_TOOL.RECTANGLE && shapes[0].strokeColor === _AnnotationFormUtils.TARGET_TOOL_STATE.strokeColor && shapes[0].fillColor === _AnnotationFormUtils.TARGET_TOOL_STATE.fillColor;
 
 /**
  * Get the IIIF target from a Konva annotation (Drawing template)
@@ -126,7 +128,6 @@ const getIIIFTargetFromMaeData = (maeData, canvasId, windowId = null, playerScal
  * @param canvasId
  * @returns {`${string}#${string}`}
  */
-exports.getIIIFTargetFromMaeData = getIIIFTargetFromMaeData;
 const getIIIFTargetFromKonvaType = (maeData, canvasId) => {
   // Simplified target for Konva annotation
   console.log('Implement target as string with Konva annotation');

package/es/TextEditor.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactQuill = _interopRequireDefault(require("react-quill"));
 require("react-quill/dist/quill.snow.css");
 var _styles = require("@mui/material/styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledReactQuill = (0, _styles.styled)(_reactQuill.default)(({
   theme
 }) => ({
@@ -22,20 +20,15 @@ const StyledReactQuill = (0, _styles.styled)(_reactQuill.default)(({
 
 /** Rich text editor for annotation body */
 function TextEditor({
-  annoHtml,
-  updateAnnotationBody
+  text,
+  setText
 }) {
-  const [editorHtml, setEditorHtml] = (0, _react.useState)(annoHtml);
-
   /**
    * Handle Change On ReactQuil Editor
    * @param html
    */
   const handleChange = html => {
-    setEditorHtml(html);
-    if (updateAnnotationBody) {
-      updateAnnotationBody(html);
-    }
+    setText(html);
   };
   const modules = {
     toolbar: [[{
@@ -60,7 +53,7 @@ function TextEditor({
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-text-editor": "name"
   }, /*#__PURE__*/_react.default.createElement(StyledReactQuill, {
-    value: editorHtml,
+    value: text,
     onChange: handleChange,
     placeholder: "Your text here",
     bounds: "[data-text-editor=\"name\"]",
@@ -69,7 +62,7 @@ function TextEditor({
   }));
 }
 TextEditor.propTypes = {
-  annoHtml: _propTypes.default.string.isRequired,
-  updateAnnotationBody: _propTypes.default.func.isRequired
+  setText: _propTypes.default.func.isRequired,
+  text: _propTypes.default.string.isRequired
 };
 var _default = exports.default = TextEditor;

package/es/annotationForm/AnnotationFormBody.js

@@ -88,7 +88,7 @@ function AnnotationFormBody({
     saveAnnotation: saveAnnotation,
     t: t,
     windowId: windowId,
-    commentTemplate: config?.annotation?.commentTemplate ?? '',
+    commentTemplate: config?.annotation?.commentTemplates ?? [],
     tagsSuggestions: config?.annotation?.tagsSuggestions ?? []
   })), debugMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, playerReferences.getMediaType()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('scale'), ":", playerReferences.getScale()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('zoom'), ":", playerReferences.getZoom()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('image_true_size'), ":", playerReferences.getMediaTrueWidth(), ' ', "x", playerReferences.getMediaTrueHeight()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('container_size'), ":", playerReferences.getContainerWidth(), ' ', "x", playerReferences.getContainerHeight()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('image_displayed'), ":", playerReferences.getDisplayedMediaWidth(), ' ', "x", playerReferences.getDisplayedMediaHeight())));
 }

package/es/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -55,7 +55,7 @@ function AnnotationFormOverlayTool({
       activeTool: _KonvaUtils.SHAPES_TOOL.RECTANGLE
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.EDIT && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentShape && displayMode === _KonvaUtils.KONVA_MODE.DRAW && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolState.activeTool === _KonvaUtils.OVERLAY_TOOL.EDIT && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (currentShape && displayMode === _KonvaUtils.KONVA_MODE.DRAW || currentShape && displayMode === _KonvaUtils.KONVA_MODE.TARGET) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subFormSectionTitle"
   }, t('selected_object')), /*#__PURE__*/_react.default.createElement(_AnnotationFormOverlayToolOptions.default, {
     t: t,
@@ -72,7 +72,8 @@ function AnnotationFormOverlayTool({
       text: currentShape.text
     },
     setToolState: customUpdateToolState,
-    displayMode: displayMode
+    displayMode: displayMode,
+    currentShape: currentShape
   })), displayMode === _KonvaUtils.KONVA_MODE.DRAW && shapes.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subFormSectionTitle"
   }, t('object_list')), /*#__PURE__*/_react.default.createElement(_ShapesList.default, {

package/es/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -136,7 +136,7 @@ function AnnotationFormOverlayToolOptions({
       text
     });
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, displayMode === _KonvaUtils.KONVA_MODE.DRAW && (0, _KonvaUtils.isShapesTool)(toolState.activeTool) && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  return /*#__PURE__*/_react.default.createElement("div", null, (displayMode === _KonvaUtils.KONVA_MODE.DRAW || displayMode === _KonvaUtils.KONVA_MODE.TARGET) && (0, _KonvaUtils.isShapesTool)(toolState.activeTool) && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true
   }, /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
     currentColor: currentColor,

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Rectangle.js

@@ -72,6 +72,7 @@ function Rectangle({
 }
 Rectangle.propTypes = {
   activeTool: _propTypes.default.string.isRequired,
+  baseStrokeWidth: _propTypes.default.number.isRequired,
   displayMode: _propTypes.default.string.isRequired,
   handleDragEnd: _propTypes.default.func.isRequired,
   handleDragStart: _propTypes.default.func.isRequired,

package/es/annotationForm/AnnotationFormUtils.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEMPLATE_TYPES = exports.TEMPLATE = exports.TARGET_VIEW = exports.TAG_VIEW = exports.StyledToggleButtonGroup = exports.OVERLAY_VIEW = exports.MEDIA_TYPES = exports.MANIFEST_LINK_VIEW = exports.IMAGE_TOOL_STATE = exports.DEFAULT_TOOL_STATE = void 0;
-exports.getTargetSVGToolState = getTargetSVGToolState;
-exports.isValidUrl = exports.getTemplateType = void 0;
+exports.isValidUrl = exports.getTemplateType = exports.TEMPLATE_TYPES = exports.TEMPLATE = exports.TARGET_VIEW = exports.TARGET_TOOL_STATE = exports.TAG_VIEW = exports.StyledToggleButtonGroup = exports.OVERLAY_VIEW = exports.MEDIA_TYPES = exports.MANIFEST_LINK_VIEW = exports.IMAGE_TOOL_STATE = exports.DEFAULT_TOOL_STATE = void 0;
 exports.saveAnnotationInStorageAdapter = saveAnnotationInStorageAdapter;
 exports.secondsToHMSarray = secondsToHMSarray;
 var _TextFields = _interopRequireDefault(require("@mui/icons-material/TextFields"));
@@ -158,22 +156,18 @@ const IMAGE_TOOL_STATE = exports.IMAGE_TOOL_STATE = {
 
 /**
  * Specific Tool state for the target SVG
- * @param imageZoom
- * @returns {{activeTool: string, closedMode: string, image: {id: null}, imageEvent: null,
- * strokeColor: string, strokeWidth: number}}
  */
-function getTargetSVGToolState() {
-  return {
-    activeTool: _KonvaUtils.OVERLAY_TOOL.SHAPE,
-    closedMode: 'closed',
-    image: {
-      id: null
-    },
-    imageEvent: null,
-    strokeColor: 'rgba(255,0, 0, 0.5)',
-    strokeWidth: 5
-  };
-}
+const TARGET_TOOL_STATE = exports.TARGET_TOOL_STATE = {
+  activeTool: _KonvaUtils.OVERLAY_TOOL.SHAPE,
+  closedMode: 'closed',
+  fillColor: 'rgba(100,100,100, 0)',
+  image: {
+    id: null
+  },
+  imageEvent: null,
+  strokeColor: 'rgba(255,0, 0, 0.5)',
+  strokeWidth: 5
+};
 const TARGET_VIEW = exports.TARGET_VIEW = 'target';
 const OVERLAY_VIEW = exports.OVERLAY_VIEW = 'layer';
 const TAG_VIEW = exports.TAG_VIEW = 'tag';

package/es/annotationForm/MultipleBodyTemplate.js

@@ -11,8 +11,8 @@ var _AnnotationFormFooter = _interopRequireDefault(require("./AnnotationFormFoot
 var _AnnotationFormUtils = require("./AnnotationFormUtils");
 var _TargetFormSection = _interopRequireDefault(require("./TargetFormSection"));
 var _KonvaUtils = require("./AnnotationFormOverlay/KonvaDrawing/KonvaUtils");
-var _TextFormSection = _interopRequireDefault(require("./TextFormSection"));
 var _MultiTagsInput = require("./MultiTagsInput");
+var _TextCommentInput = require("./TextCommentInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -39,7 +39,7 @@ function MultipleBodyTemplate({
         textBody: {
           purpose: 'describing',
           type: 'TextualBody',
-          value: commentTemplate
+          value: ''
         }
       },
       motivation: 'commenting',
@@ -106,9 +106,10 @@ function MultipleBodyTemplate({
     spacing: 2
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
-  }, /*#__PURE__*/_react.default.createElement(_TextFormSection.default, {
-    annoHtml: annotationState.maeData.textBody.value,
-    updateAnnotationBody: updateAnnotationTextualBodyValue,
+  }, /*#__PURE__*/_react.default.createElement(_TextCommentInput.TextCommentInput, {
+    commentTemplates: commentTemplate,
+    comment: annotationState.maeData.textBody.value,
+    setComment: updateAnnotationTextualBodyValue,
     t: t
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true

package/es/annotationForm/TargetSpatialInput.js

@@ -24,7 +24,7 @@ function TargetSpatialInput({
   windowId
 }) {
   // TODO the targetSVGToolSTate is not used. Why the defaultToolState is used?
-  const [toolState, setToolState] = (0, _react.useState)((0, _AnnotationFormUtils.getTargetSVGToolState)());
+  const [toolState, setToolState] = (0, _react.useState)(_AnnotationFormUtils.TARGET_TOOL_STATE);
   const [viewTool, setViewTool] = (0, _react.useState)(_AnnotationFormUtils.TARGET_VIEW);
   const [scale, setScale] = (0, _react.useState)(playerReferences.getScale());
   /** Change scale from container / canva */

package/es/annotationForm/TextCommentInput.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextCommentInput = TextCommentInput;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
+var _TextEditor = _interopRequireDefault(require("../TextEditor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * TextCommentInput component
+ * @param commentTemplates - The list of comment templates
+ * @param comment - The current comment
+ * @param setComment - Function to set the comment
+ * @param t - Translation function
+ * @constructor
+ */
+function TextCommentInput({
+  commentTemplates,
+  comment,
+  setComment,
+  t
+}) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "formSectionTitle"
+  }, t('note'))), commentTemplates.length > 0 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    style: {
+      marginBottom: '10px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_creatable.default, {
+    options: commentTemplates.map(template => ({
+      label: template.title,
+      value: template.content,
+      title: template.content // Add title attribute for tooltip
+    })),
+    placeholder: t('useTemplate'),
+    onChange: selectedOption => {
+      if (selectedOption) {
+        setComment(selectedOption.value);
+      }
+    },
+    isClearable: true,
+    isSearchable: true,
+    formatOptionLabel: option => /*#__PURE__*/_react.default.createElement("div", {
+      title: option.title
+    }, option.label),
+    styles: {
+      marginBottom: '20px'
+    }
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_TextEditor.default, {
+    text: comment,
+    setText: setComment
+  })));
+}
+TextCommentInput.propTypes = {
+  comment: _propTypes.default.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  commentTemplates: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  setComment: _propTypes.default.func.isRequired,
+  t: _propTypes.default.func.isRequired
+};

package/es/locales/locales_en.js

@@ -87,6 +87,7 @@ const en = exports.en = {
   textual_note_with_target: 'Textual note with target',
   tool_selection: 'Tool Selection',
   unsupported_media_message: 'Your current canvas media type is not supported by the annotation editor.',
+  useTemplate: 'Use a template',
   video_annotation_instruction: 'If you want to annotate video media, you must install MAEV to create and edit annotations on video:',
   your_tag_here: 'Your tag here:',
   zoom: 'Zoom'

package/es/locales/locales_fr.js

@@ -87,6 +87,7 @@ const fr = exports.fr = {
   textual_note_with_target: 'Note textuelle avec cible',
   tool_selection: 'Sélection d’outil',
   unsupported_media_message: 'Le type de média de votre canvas actuel n\'est pas pris en charge par l\'éditeur d\'annotations.',
+  useTemplate: 'Utiliser un modèle',
   video_annotation_instruction: 'Si vous souhaitez annoter des vidéos, vous devez installer le plugin Mirador Annotation Editor Video (MAEV) pour créer et modifier des annotations sur les vidéos :',
   your_tag_here: 'Votre étiquette',
   zoom: 'Zoom'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.0.99",
+  "version": "1.1.1",
   "description": "Mirador annotation editor video plugin in a React component. Mirador 4 (Alpha 2) compatible ",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -63,7 +63,7 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.0.0",
-    "uuid": "^8.0.0"
+    "uuid": "^11.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.25.9",

package/src/IIIFUtils.js

@@ -5,7 +5,7 @@ import {
   OVERLAY_TOOL,
   SHAPES_TOOL,
 } from './annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
-import { TEMPLATE } from './annotationForm/AnnotationFormUtils';
+import { TARGET_TOOL_STATE, TEMPLATE } from './annotationForm/AnnotationFormUtils';
 
 /**
  * Check if annotation is exportable to image in case of Konva annotation
@@ -136,8 +136,7 @@ export const getIIIFTargetFromMaeData = (
     case TEMPLATE.MULTIPLE_BODY_TYPE:
     case TEMPLATE.TEXT_TYPE:
       // In some case the target can be simplified in a string
-      if (maeTarget.drawingState.shapes.length === 1
-        && maeTarget.drawingState.shapes[0].type === SHAPES_TOOL.RECTANGLE) {
+      if (isSimpleTarget(maeTarget.drawingState.shapes)) {
         return getIIIFTargetFromRectangleShape(
           maeTarget,
           canvasId,
@@ -155,6 +154,11 @@ export const getIIIFTargetFromMaeData = (
   return getIIIFTargetFullCanvas(maeData, canvasId);
 };
 
+const isSimpleTarget = (shapes) => shapes.length === 1
+    && shapes[0].type === SHAPES_TOOL.RECTANGLE
+    && shapes[0].strokeColor === TARGET_TOOL_STATE.strokeColor
+    && shapes[0].fillColor === TARGET_TOOL_STATE.fillColor;
+
 /**
  * Get the IIIF target from a Konva annotation (Drawing template)
  * @param maeData

package/src/TextEditor.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
@@ -12,20 +12,15 @@ const StyledReactQuill = styled(ReactQuill)(({ theme }) => ({
 
 /** Rich text editor for annotation body */
 function TextEditor({
-  annoHtml,
-  updateAnnotationBody,
+  text,
+  setText,
 }) {
-  const [editorHtml, setEditorHtml] = useState(annoHtml);
-
   /**
    * Handle Change On ReactQuil Editor
    * @param html
    */
   const handleChange = (html) => {
-    setEditorHtml(html);
-    if (updateAnnotationBody) {
-      updateAnnotationBody(html);
-    }
+    setText(html);
   };
   const modules = {
     toolbar: [
@@ -63,7 +58,7 @@ function TextEditor({
   return (
     <div data-text-editor="name">
       <StyledReactQuill
-        value={editorHtml}
+        value={text}
         onChange={handleChange}
         placeholder="Your text here"
         bounds='[data-text-editor="name"]'
@@ -75,8 +70,8 @@ function TextEditor({
 }
 
 TextEditor.propTypes = {
-  annoHtml: PropTypes.string.isRequired,
-  updateAnnotationBody: PropTypes.func.isRequired,
+  setText: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
 };
 
 export default TextEditor;

package/src/annotationForm/AnnotationFormBody.js

@@ -112,7 +112,7 @@ export default function AnnotationFormBody(
             saveAnnotation={saveAnnotation}
             t={t}
             windowId={windowId}
-            commentTemplate={config?.annotation?.commentTemplate ?? ''}
+            commentTemplate={config?.annotation?.commentTemplates ?? []}
             tagsSuggestions={config?.annotation?.tagsSuggestions ?? []}
           />
         )}

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -58,7 +58,8 @@ function AnnotationFormOverlayTool({
         toolState.activeTool === OVERLAY_TOOL.EDIT && (
           <>
             {
-              currentShape && displayMode === KONVA_MODE.DRAW && (
+              ((currentShape && displayMode === KONVA_MODE.DRAW)
+                || (currentShape && displayMode === KONVA_MODE.TARGET)) && (
                 <div>
                   <Typography variant="subFormSectionTitle">
                     {t('selected_object')}
@@ -77,6 +78,7 @@ function AnnotationFormOverlayTool({
                     }}
                     setToolState={customUpdateToolState}
                     displayMode={displayMode}
+                    currentShape={currentShape}
                   />
                 </div>
               )

package/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -139,7 +139,7 @@ function AnnotationFormOverlayToolOptions({
   return (
     <div>
       {
-        (displayMode === KONVA_MODE.DRAW
+        ((displayMode === KONVA_MODE.DRAW || displayMode === KONVA_MODE.TARGET)
           && isShapesTool(toolState.activeTool)) && (
           <Grid container>
             <ColorPicker

package/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Rectangle.js

@@ -73,6 +73,7 @@ function Rectangle({
 
 Rectangle.propTypes = {
   activeTool: PropTypes.string.isRequired,
+  baseStrokeWidth: PropTypes.number.isRequired,
   displayMode: PropTypes.string.isRequired,
   handleDragEnd: PropTypes.func.isRequired,
   handleDragStart: PropTypes.func.isRequired,

package/src/annotationForm/AnnotationFormUtils.js

@@ -145,20 +145,16 @@ export const IMAGE_TOOL_STATE = {
 
 /**
  * Specific Tool state for the target SVG
- * @param imageZoom
- * @returns {{activeTool: string, closedMode: string, image: {id: null}, imageEvent: null,
- * strokeColor: string, strokeWidth: number}}
  */
-export function getTargetSVGToolState() {
-  return {
-    activeTool: OVERLAY_TOOL.SHAPE,
-    closedMode: 'closed',
-    image: { id: null },
-    imageEvent: null,
-    strokeColor: 'rgba(255,0, 0, 0.5)',
-    strokeWidth: 5,
-  };
-}
+export const TARGET_TOOL_STATE = {
+  activeTool: OVERLAY_TOOL.SHAPE,
+  closedMode: 'closed',
+  fillColor: 'rgba(100,100,100, 0)',
+  image: { id: null },
+  imageEvent: null,
+  strokeColor: 'rgba(255,0, 0, 0.5)',
+  strokeWidth: 5,
+};
 
 export const TARGET_VIEW = 'target';
 export const OVERLAY_VIEW = 'layer';

package/src/annotationForm/MultiTagsInput.js

@@ -28,9 +28,6 @@ export function MultiTagsInput({
       <Typography variant="formSectionTitle">
         {t('tags')}
       </Typography>
-      {/* Show list of suggestions into a clickable tag */}
-      {/* add a toggle to show hide suggestions */}
-
       <CreatableSelect
         isMulti
         options={mappedSuggestionsTags}
@@ -39,11 +36,9 @@ export function MultiTagsInput({
         closeMenuOnSelect={false}
         placeholder={t('tagsPlaceholder')}
       />
-
       <Divider
         spacing={2}
       />
-
     </>
   );
 }

package/src/annotationForm/MultipleBodyTemplate.js

@@ -5,8 +5,8 @@ import AnnotationFormFooter from './AnnotationFormFooter';
 import { TEMPLATE } from './AnnotationFormUtils';
 import TargetFormSection from './TargetFormSection';
 import { resizeKonvaStage } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
-import TextFormSection from './TextFormSection';
 import { MultiTagsInput } from './MultiTagsInput';
+import { TextCommentInput } from './TextCommentInput';
 
 /** Tagging Template* */
 export default function MultipleBodyTemplate(
@@ -34,7 +34,7 @@ export default function MultipleBodyTemplate(
         textBody: {
           purpose: 'describing',
           type: 'TextualBody',
-          value: commentTemplate,
+          value: '',
         },
       },
       motivation: 'commenting',
@@ -108,9 +108,10 @@ export default function MultipleBodyTemplate(
   return (
     <Grid container direction="column" spacing={2}>
       <Grid item>
-        <TextFormSection
-          annoHtml={annotationState.maeData.textBody.value}
-          updateAnnotationBody={updateAnnotationTextualBodyValue}
+        <TextCommentInput
+          commentTemplates={commentTemplate}
+          comment={annotationState.maeData.textBody.value}
+          setComment={updateAnnotationTextualBodyValue}
           t={t}
         />
       </Grid>

package/src/annotationForm/TargetSpatialInput.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { Grid } from '@mui/material';
 import AnnotationDrawing from './AnnotationFormOverlay/AnnotationDrawing';
-import { getTargetSVGToolState, TARGET_VIEW } from './AnnotationFormUtils';
+import { TARGET_TOOL_STATE, TARGET_VIEW } from './AnnotationFormUtils';
 import AnnotationFormOverlay from './AnnotationFormOverlay/AnnotationFormOverlay';
 import { KONVA_MODE } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
 
@@ -16,7 +16,7 @@ export function TargetSpatialInput({
   windowId,
 }) {
   // TODO the targetSVGToolSTate is not used. Why the defaultToolState is used?
-  const [toolState, setToolState] = useState(getTargetSVGToolState());
+  const [toolState, setToolState] = useState(TARGET_TOOL_STATE);
   const [viewTool, setViewTool] = useState(TARGET_VIEW);
   const [scale, setScale] = useState(playerReferences.getScale());
   /** Change scale from container / canva */

package/src/annotationForm/TextCommentInput.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Typography } from '@mui/material';
+import CreatableSelect from 'react-select/creatable';
+import TextEditor from '../TextEditor';
+
+/**
+ * TextCommentInput component
+ * @param commentTemplates - The list of comment templates
+ * @param comment - The current comment
+ * @param setComment - Function to set the comment
+ * @param t - Translation function
+ * @constructor
+ */
+export function TextCommentInput({
+  commentTemplates,
+  comment,
+  setComment,
+  t,
+}) {
+  return (
+    <>
+      <Grid container item>
+        <Typography variant="formSectionTitle">
+          {t('note')}
+        </Typography>
+      </Grid>
+      {commentTemplates.length > 0 && (
+        <Grid item style={{ marginBottom: '10px' }}>
+          <CreatableSelect
+            options={commentTemplates.map((template) => ({
+              label: template.title,
+              value: template.content,
+              title: template.content, // Add title attribute for tooltip
+            }))}
+            placeholder={t('useTemplate')}
+            onChange={(selectedOption) => {
+              if (selectedOption) {
+                setComment(selectedOption.value);
+              }
+            }}
+            isClearable
+            isSearchable
+            formatOptionLabel={(option) => (
+              <div title={option.title}>
+                {option.label}
+              </div>
+            )}
+            styles={{
+              marginBottom: '20px',
+            }}
+          />
+        </Grid>
+      )}
+
+      <Grid container item>
+        <TextEditor
+          text={comment}
+          setText={setComment}
+        />
+      </Grid>
+    </>
+  );
+}
+
+TextCommentInput.propTypes = {
+  comment: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  commentTemplates: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setComment: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+};

package/src/locales/locales_en.js

@@ -81,6 +81,7 @@ export const en = {
   textual_note_with_target: 'Textual note with target',
   tool_selection: 'Tool Selection',
   unsupported_media_message: 'Your current canvas media type is not supported by the annotation editor.',
+  useTemplate: 'Use a template',
   video_annotation_instruction: 'If you want to annotate video media, you must install MAEV to create and edit annotations on video:',
   your_tag_here: 'Your tag here:',
   zoom: 'Zoom',

package/src/locales/locales_fr.js

@@ -81,6 +81,7 @@ export const fr = {
   textual_note_with_target: 'Note textuelle avec cible',
   tool_selection: 'Sélection d’outil',
   unsupported_media_message: 'Le type de média de votre canvas actuel n\'est pas pris en charge par l\'éditeur d\'annotations.',
+  useTemplate: 'Utiliser un modèle',
   video_annotation_instruction: 'Si vous souhaitez annoter des vidéos, vous devez installer le plugin Mirador Annotation Editor Video (MAEV) pour créer et modifier des annotations sur les vidéos :',
   your_tag_here: 'Votre étiquette',
   zoom: 'Zoom',