@searpent/react-image-annotate 2.0.78 → 2.0.80

package/Annotator/reducers/general-reducer.js

@@ -677,8 +677,10 @@ export default (function (state, action) {
                 return r.highlighted === true;
               })) === null || _state4$images$state$3 === void 0 ? void 0 : _state4$images$state$3.groupId;
               var groupSelected = true;
+              var isNewRegion = false;
 
               if (groupId === undefined) {
+                isNewRegion = true;
                 groupId = nextGroupId();
                 groupSelected = false;
               }
@@ -698,6 +700,40 @@ export default (function (state, action) {
                 groupHighlighted: true,
                 groupId: groupId
               };
+
+              if (isNewRegion) {
+                var _state5;
+
+                var selectedImageIdx = state.selectedImage;
+                var metadataTextValue = (_state5 = state) === null || _state5 === void 0 ? void 0 : _state5.metadataConfigs.filter(function (metadataConfig) {
+                  return metadataConfig.level === "photo_metadata-engine";
+                }).map(function (metadataConfig) {
+                  return {
+                    key: metadataConfig.key,
+                    value: "",
+                    metadataId: getRandomId()
+                  };
+                });
+                var newRegionMetadata = {
+                  cls: "metadata",
+                  editingLabels: false,
+                  groupHighlighted: false,
+                  groupId: groupId,
+                  x: 0,
+                  y: 0,
+                  w: 1,
+                  h: 1,
+                  highlighted: false,
+                  id: getRandomId(),
+                  text: JSON.stringify(metadataTextValue),
+                  type: "box",
+                  undefined: false,
+                  visible: false
+                };
+                state = addSaveableAction(state, "ADD_METADATA");
+                state = setIn(state, ["images", selectedImageIdx, "regions"], [].concat(_toConsumableArray(state.images[selectedImageIdx].regions), [newRegionMetadata]));
+              }
+
               state = setIn(state, ["mode"], {
                 mode: "RESIZE_BOX",
                 editLabelEditorAfter: !groupSelected,
@@ -837,12 +873,12 @@ export default (function (state, action) {
         var _x2 = action.x,
             _y2 = action.y;
 
-        var _state5 = state,
-            _state5$mouseDownAt = _state5.mouseDownAt,
-            _mouseDownAt2 = _state5$mouseDownAt === void 0 ? {
+        var _state6 = state,
+            _state6$mouseDownAt = _state6.mouseDownAt,
+            _mouseDownAt2 = _state6$mouseDownAt === void 0 ? {
           x: _x2,
           y: _y2
-        } : _state5$mouseDownAt;
+        } : _state6$mouseDownAt;
 
         if (!state.mode) return state;
         state = setIn(state, ["mouseDownAt"], null);
@@ -1089,8 +1125,8 @@ export default (function (state, action) {
 
     case "CANCEL":
       {
-        var _state6 = state,
-            mode = _state6.mode;
+        var _state7 = state,
+            mode = _state7.mode;
 
         if (mode) {
           switch (mode.mode) {

package/Editor/annotation-plugin/annotation.js

@@ -298,6 +298,11 @@ function () {
        */
 
       tag.dataset.placeholder = this.api.i18n.t(this._settings.placeholder || '');
+      /**
+       * Add spellcheck
+       */
+
+      tag.spellcheck = 'true';
       return tag;
     }
     /**

package/Editor/index.js

@@ -1,7 +1,7 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createReactEditorJS } from 'react-editor-js';
 import blocksToArticle from '../utils/blocks-to-article';
 import { EDITOR_JS_TOOLS } from './tools';
@@ -60,6 +60,22 @@ function Editor(_ref) {
     });
   };
 
+  useEffect(function () {
+    if (!editMode) {
+      return;
+    }
+
+    setTimeout(function () {
+      var editableElements = document.querySelectorAll(".ce-header");
+      editableElements.forEach(function (element) {
+        element.focus();
+        setTimeout(function () {
+          element.blur();
+        }, 100);
+      });
+    }, 1000);
+  }, [editMode]);
+
   if (blocks.length < 1) {
     return React.createElement("div", {
       className: "instructions"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.78",
+  "version": "2.0.80",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",

package/utils/regions-groups.js

@@ -5,7 +5,9 @@ function regionsGroups(regions) {
     return [];
   }
 
-  var groups = regions.reduce(function (acc, curr) {
+  var groups = regions.filter(function (region) {
+    return region.cls !== 'metadata';
+  }).reduce(function (acc, curr) {
     var _curr$text;
 
     var groupId = curr.groupId;

package/utils/saveable-actions-enum.js

@@ -1,3 +1,3 @@
 var reacalcActionsEnum = ["MOUSE_UP_RESIZE_BOX", "DELETE_REGION", "DELETE_GROUP", "MOUSE_UP_MOVE_REGION", "SELECT_CLASSIFICATION", "CHANGE_REGION"];
-var saveableActionsEnum = [reacalcActionsEnum, "UPDATE_REGIONS", "UPDATE_METADATA", "UPDATE_ALBUM_METADATA"];
+var saveableActionsEnum = [reacalcActionsEnum, "UPDATE_REGIONS", "UPDATE_METADATA", "UPDATE_ALBUM_METADATA", "ADD_METADATA"];
 export { saveableActionsEnum, reacalcActionsEnum };