mirador-annotation-editor-video 1.0.96 → 1.0.98

package/demo/src/manifestsCatalog.js

@@ -10,4 +10,5 @@ export const manifestsCatalog = [
   { manifestId: 'https://files.tetras-libre.fr/dev/vertical_video_with_annot.json' },
   { manifestId: 'https://files.tetras-libre.fr/dev/youtube.json' },
   { manifestId: 'https://files.tetras-libre.fr/dev/peertube.json' },
+  { manifestId: 'https://files.tetras-libre.fr/dev/milansanremo25.json' },
 ];

package/es/IIIFUtils.js

@@ -59,7 +59,7 @@ const convertAnnotationStateToBeSaved = async (annotationState, canvas, windowId
     annotationStateForSaving.body.push(...annotationState.maeData.tags.map(tag => ({
       purpose: 'tagging',
       type: 'TextualBody',
-      value: tag.text,
+      value: tag.value,
       id: tag.id
     })));
   }

package/es/annotationForm/MultiTagsInput.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiTagsInput = MultiTagsInput;
-var _react = _interopRequireWildcard(require("react"));
-var _reactTagInput = require("react-tag-input");
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
 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; }
 /**
  * MultiTagsInput component
  * @param t
@@ -26,112 +24,21 @@ function MultiTagsInput({
   tags,
   tagsSuggestions
 }) {
-  const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
   const mappedSuggestionsTags = tagsSuggestions.map(suggestion => ({
-    id: suggestion,
-    text: suggestion
+    label: suggestion,
+    value: suggestion
   }));
-
-  /**
-   * Handle tag deletion
-   * @param index
-   */
-  const handleDelete = index => {
-    setTags(tags.filter((_, i) => i !== index));
-  };
-
-  /**
-   * Handle tag update
-   * @param index
-   * @param newTag
-   */
-  const onTagUpdate = (index, newTag) => {
-    const updatedTags = [...tags];
-    updatedTags.splice(index, 1, newTag);
-    setTags(updatedTags);
-  };
-
-  /**
-   * Handle tag addition
-   * @param tag
-   */
-  const handleAddition = newTag => {
-    if (tags.length === 0 || !tags.find(tag => tag.id === newTag.id)) {
-      setTags([...tags, newTag]);
-    }
-  };
-
-  /**
-   * Handle tag drag
-   * @param tag
-   * @param currPos
-   * @param newPos
-   */
-  const handleDrag = (tag, currPos, newPos) => {
-    const newTags = tags.slice();
-    newTags.splice(currPos, 1);
-    newTags.splice(newPos, 0, tag);
-
-    // re-render
-    setTags(newTags);
-  };
-
-  /**
-   * Handle tag click
-   * @param index
-   */
-  const handleTagClick = index => {
-    console.log(`The tag at index ${index} was clicked`);
-  };
-
-  /**
-   * Clear all tags
-   */
-  const onClearAll = () => {
-    setTags([]);
-  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "formSectionTitle"
-  }, t('tags')), /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
-    control: /*#__PURE__*/_react.default.createElement(_material.Switch, {
-      value: showSuggestions,
-      onClick: () => setShowSuggestions(!showSuggestions)
-    }),
-    label: "Suggestion"
-  }), showSuggestions && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: '8px'
-    }
-  }, mappedSuggestionsTags.map(suggestion => /*#__PURE__*/_react.default.createElement("button", {
-    key: suggestion.id,
-    type: "button",
-    onClick: () => handleAddition(suggestion),
-    style: {
-      padding: '6px 12px',
-      borderRadius: '16px',
-      border: '1px solid #ccc',
-      backgroundColor: '#f1f1f1',
-      cursor: 'pointer'
-    }
-  }, suggestion.text))), /*#__PURE__*/_react.default.createElement(_material.Divider, {
+  }, t('tags')), /*#__PURE__*/_react.default.createElement(_creatable.default, {
+    isMulti: true,
+    options: mappedSuggestionsTags,
+    value: tags,
+    onChange: setTags,
+    closeMenuOnSelect: false,
+    placeholder: t('tagsPlaceholder')
+  }), /*#__PURE__*/_react.default.createElement(_material.Divider, {
     spacing: 2
-  }), /*#__PURE__*/_react.default.createElement(_reactTagInput.WithContext, {
-    placeholder: t('pressEnterToAddTag'),
-    clearAll: true,
-    editable: true,
-    handleAddition: handleAddition,
-    handleDelete: handleDelete,
-    handleDrag: handleDrag,
-    handleTagClick: handleTagClick,
-    inputFieldPosition: "bottom",
-    onClearAll: onClearAll,
-    onTagUpdate: onTagUpdate,
-    tags: tags,
-    suggestions: mappedSuggestionsTags,
-    minQueryLength: 1,
-    autocomplete: true
   }));
 }
 MultiTagsInput.propTypes = {

package/es/locales/locales_en.js

@@ -80,6 +80,7 @@ const en = exports.en = {
   switch_view_h2: 'Switch view type to single view?',
   tag: 'Tag',
   tags: 'Tags',
+  tagsPlaceholder: 'Add tags ...',
   tag_with_target: 'Tag with target',
   target: 'Target',
   text: 'Text',

package/es/locales/locales_fr.js

@@ -80,6 +80,7 @@ const fr = exports.fr = {
   switch_view_h2: 'Changer le type de vue en vue simple?',
   tag: 'Étiquette',
   tags: 'Étiquettes',
+  tagsPlaceholder: 'Ajouter une étiquette...',
   tag_with_target: 'Étiquette avec cible',
   target: 'Cible',
   text: 'Texte',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.0.96",
+  "version": "1.0.98",
   "description": "Mirador annotation editor video plugin in a React component. Mirador 4 (Alpha 2) compatible ",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -50,8 +50,8 @@
     "react-refresh": "^0.14.0",
     "react-refresh-webpack-plugin": "^0.1.0",
     "react-resize-observer": "^1.1.1",
+    "react-select": "^5.10.1",
     "react-sortablejs": "^6.1.4",
-    "react-tag-input": "^6.10.6",
     "redux": "^5.0.1",
     "sortablejs": "^1.15.2",
     "use-image": "^1.1.1",
@@ -94,7 +94,7 @@
     "jest-canvas-mock": "^2.2.0",
     "jest-junit": "^15.0.0",
     "jest-localstorage-mock": "^2.4.2",
-    "mirador": "npm:mirador-video@1.0.22",
+    "mirador": "npm:mirador-video@1.0.26",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.0",

package/src/IIIFUtils.js

@@ -72,7 +72,7 @@ export const convertAnnotationStateToBeSaved = async (
     annotationStateForSaving.body.push(...annotationState.maeData.tags.map((tag) => ({
       purpose: 'tagging',
       type: 'TextualBody',
-      value: tag.text,
+      value: tag.value,
       id: tag.id,
     })));
   }

package/src/annotationForm/MultiTagsInput.js

@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
-import { WithContext as ReactTags } from 'react-tag-input';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Divider, FormControlLabel, Switch, Typography,
-} from '@mui/material';
+import { Divider, Typography } from '@mui/material';
+import CreatableSelect from 'react-select/creatable';
 
 /**
  * MultiTagsInput component
@@ -20,73 +18,11 @@ export function MultiTagsInput({
   tags,
   tagsSuggestions,
 }) {
-  const [showSuggestions, setShowSuggestions] = useState(false);
-
   const mappedSuggestionsTags = tagsSuggestions.map((suggestion) => ({
-    id: suggestion,
-    text: suggestion,
+    label: suggestion,
+    value: suggestion,
   }));
 
-  /**
-   * Handle tag deletion
-   * @param index
-   */
-  const handleDelete = (index) => {
-    setTags(tags.filter((_, i) => i !== index));
-  };
-
-  /**
-   * Handle tag update
-   * @param index
-   * @param newTag
-   */
-  const onTagUpdate = (index, newTag) => {
-    const updatedTags = [...tags];
-    updatedTags.splice(index, 1, newTag);
-    setTags(updatedTags);
-  };
-
-  /**
-   * Handle tag addition
-   * @param tag
-   */
-  const handleAddition = (newTag) => {
-    if (tags.length === 0 || !tags.find((tag) => tag.id === newTag.id)) {
-      setTags([...tags, newTag]);
-    }
-  };
-
-  /**
-   * Handle tag drag
-   * @param tag
-   * @param currPos
-   * @param newPos
-   */
-  const handleDrag = (tag, currPos, newPos) => {
-    const newTags = tags.slice();
-
-    newTags.splice(currPos, 1);
-    newTags.splice(newPos, 0, tag);
-
-    // re-render
-    setTags(newTags);
-  };
-
-  /**
-   * Handle tag click
-   * @param index
-   */
-  const handleTagClick = (index) => {
-    console.log(`The tag at index ${index} was clicked`);
-  };
-
-  /**
-   * Clear all tags
-   */
-  const onClearAll = () => {
-    setTags([]);
-  };
-
   return (
     <>
       <Typography variant="formSectionTitle">
@@ -95,63 +31,19 @@ export function MultiTagsInput({
       {/* Show list of suggestions into a clickable tag */}
       {/* add a toggle to show hide suggestions */}
 
-      <FormControlLabel
-        control={(
-          <Switch
-            value={showSuggestions}
-            onClick={() => setShowSuggestions(!showSuggestions)}
-          />
-        )}
-        label="Suggestion"
+      <CreatableSelect
+        isMulti
+        options={mappedSuggestionsTags}
+        value={tags}
+        onChange={setTags}
+        closeMenuOnSelect={false}
+        placeholder={t('tagsPlaceholder')}
       />
-      {
-        showSuggestions
-        && (
-          <div style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '8px',
-          }}
-          >
-            {mappedSuggestionsTags.map((suggestion) => (
-              <button
-                key={suggestion.id}
-                type="button"
-                onClick={() => handleAddition(suggestion)}
-                style={{
-                  padding: '6px 12px',
-                  borderRadius: '16px',
-                  border: '1px solid #ccc',
-                  backgroundColor: '#f1f1f1',
-                  cursor: 'pointer',
-                }}
-              >
-                {suggestion.text}
-              </button>
-            ))}
-          </div>
-        )
-      }
+
       <Divider
         spacing={2}
       />
 
-      <ReactTags
-        placeholder={t('pressEnterToAddTag')}
-        clearAll
-        editable
-        handleAddition={handleAddition}
-        handleDelete={handleDelete}
-        handleDrag={handleDrag}
-        handleTagClick={handleTagClick}
-        inputFieldPosition="bottom"
-        onClearAll={onClearAll}
-        onTagUpdate={onTagUpdate}
-        tags={tags}
-        suggestions={mappedSuggestionsTags}
-        minQueryLength={1}
-        autocomplete
-      />
     </>
   );
 }

package/src/locales/locales_en.js

@@ -74,6 +74,7 @@ export const en = {
   switch_view_h2: 'Switch view type to single view?',
   tag: 'Tag',
   tags: 'Tags',
+  tagsPlaceholder: 'Add tags ...',
   tag_with_target: 'Tag with target',
   target: 'Target',
   text: 'Text',

package/src/locales/locales_fr.js

@@ -74,6 +74,7 @@ export const fr = {
   switch_view_h2: 'Changer le type de vue en vue simple?',
   tag: 'Étiquette',
   tags: 'Étiquettes',
+  tagsPlaceholder: 'Ajouter une étiquette...',
   tag_with_target: 'Étiquette avec cible',
   target: 'Cible',
   text: 'Texte',