@searpent/react-image-annotate 2.1.0 → 2.1.2

package/Annotator/reducers/general-reducer.js

@@ -1240,7 +1240,7 @@ export default (function (state, action) {
             value: value
           });
         } else {
-          var _state$images$_imageI4, _state$images$_imageI5;
+          var _state$images$_imageI3, _state$images$_imageI4;
 
           // update metadata of article
           if (_groupId2) {
@@ -1266,42 +1266,24 @@ export default (function (state, action) {
               return state;
             }
 
-            var oldValue = articleMetadata[toBeUpdatedMetadataIdx].value;
-            articleMetadata[toBeUpdatedMetadataIdx].value = value; // Add saveableAction to the correct image (using imageIndex from action, not selectedImage)
-            // This ensures the saveableAction is added to the image being modified, not the currently selected one
-
-            if (state.images[_imageIndex]) {
-              var _state$images$_imageI3;
-
-              var currentSaveableActions = ((_state$images$_imageI3 = state.images[_imageIndex]) === null || _state$images$_imageI3 === void 0 ? void 0 : _state$images$_imageI3.saveableActions) || [];
-              state = setIn(state, ["images", _imageIndex, "saveableActions"], [].concat(_toConsumableArray(currentSaveableActions), ["UPDATE_METADATA"]));
-            }
-
+            articleMetadata[toBeUpdatedMetadataIdx].value = value;
+            state = addSaveableAction(state, "UPDATE_METADATA");
             return setIn(state, ["images", _imageIndex, "regions", articleMetadataRegionIdx], _objectSpread({}, articleRegionToUpdate, {
               text: JSON.stringify(articleMetadata)
             }));
           } // update metadata of image
 
 
-          var _metadataIndex = (_state$images$_imageI4 = state.images[_imageIndex]) === null || _state$images$_imageI4 === void 0 ? void 0 : (_state$images$_imageI5 = _state$images$_imageI4.metadata) === null || _state$images$_imageI5 === void 0 ? void 0 : _state$images$_imageI5.findIndex(function (mt) {
+          var _metadataIndex = (_state$images$_imageI3 = state.images[_imageIndex]) === null || _state$images$_imageI3 === void 0 ? void 0 : (_state$images$_imageI4 = _state$images$_imageI3.metadata) === null || _state$images$_imageI4 === void 0 ? void 0 : _state$images$_imageI4.findIndex(function (mt) {
             return mt.key === name;
           });
 
           if (_metadataIndex < 0) {
             console.error("can't find photo metadata by key \"".concat(name, "\""));
             return state;
-          } // Add saveableAction to the correct image (using imageIndex from action, not selectedImage)
-          // This ensures the saveableAction is added to the image being modified, not the currently selected one
-
-
-          if (state.images[_imageIndex]) {
-            var _state$images$_imageI6;
-
-            var _currentSaveableActions = ((_state$images$_imageI6 = state.images[_imageIndex]) === null || _state$images$_imageI6 === void 0 ? void 0 : _state$images$_imageI6.saveableActions) || [];
-
-            state = setIn(state, ["images", _imageIndex, "saveableActions"], [].concat(_toConsumableArray(_currentSaveableActions), ["UPDATE_METADATA"]));
           }
 
+          state = addSaveableAction(state, "UPDATE_METADATA");
           return setIn(state, ["images", _imageIndex, "metadata", _metadataIndex], {
             key: name,
             value: value

package/Editor/editor.css

@@ -0,0 +1,30 @@
+.editor-toggle-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem; /* space between Spellcheck and Edit mode rows */
+}
+
+/* Smaller toggle size only for Editor switches */
+.editor-switch.switch {
+  width: 44px;
+  height: 24px;
+}
+
+.editor-switch .slider {
+  border-radius: 24px;
+}
+
+.editor-switch .slider:before {
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  border-radius: 50%;
+}
+
+.editor-switch input:checked + .slider:before {
+  transform: translateX(18px);
+}
+
+

package/Editor/index.js

@@ -71,12 +71,6 @@ function Editor(_ref) {
     });
   };
 
-  if (blocks.length < 1) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "instructions"
-    }, /*#__PURE__*/React.createElement("h1", null, "Click article to display text."));
-  }
-
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "show-metadata-wrapper editor-toggle-wrapper"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
@@ -99,7 +93,9 @@ function Editor(_ref) {
     onChange: toggleEditMode
   }), /*#__PURE__*/React.createElement("span", {
     className: "slider round"
-  })), /*#__PURE__*/React.createElement("label", null, "Edit mode"))), !editMode ? /*#__PURE__*/React.createElement(ReadOnly, {
+  })), /*#__PURE__*/React.createElement("label", null, "Edit mode"))), blocks.length < 1 ? /*#__PURE__*/React.createElement("div", {
+    className: "instructions"
+  }, /*#__PURE__*/React.createElement("h1", null, "Click article to display text.")) : !editMode ? /*#__PURE__*/React.createElement(ReadOnly, {
     article: blocksToArticle(blocks)
   }) : /*#__PURE__*/React.createElement(ReactEditorJS, {
     defaultValue: {

package/Editor/index_bugdemo_15_1.js

@@ -0,0 +1,147 @@
+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 { createReactEditorJS } from 'react-editor-js';
+import blocksToArticle from '../utils/blocks-to-article';
+import { EDITOR_JS_TOOLS } from './tools';
+import ReadOnly from './readOnly';
+import { isSpellcheckEnabled, setSpellcheckEnabled } from '../utils/spellcheck-nspell';
+import './editor.css';
+var ReactEditorJS = createReactEditorJS();
+
+function Editor(_ref) {
+  var _ref$blocks = _ref.blocks,
+      blocks = _ref$blocks === void 0 ? [] : _ref$blocks,
+      onChange = _ref.onChange,
+      imageIndex = _ref.imageIndex,
+      selectedFrame = _ref.selectedFrame,
+      _ref$selectedGroupId = _ref.selectedGroupId,
+      selectedGroupId = _ref$selectedGroupId === void 0 ? null : _ref$selectedGroupId,
+      _ref$originalSelected = _ref.originalSelectedGroupId,
+      originalSelectedGroupId = _ref$originalSelected === void 0 ? null : _ref$originalSelected;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      editMode = _useState2[0],
+      setEditMode = _useState2[1];
+
+  var _useState3 = useState(isSpellcheckEnabled()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      autoSpellcheck = _useState4[0],
+      setAutoSpellcheck = _useState4[1];
+
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(instance) {
+      var data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return instance.saver.save();
+
+            case 2:
+              data = _context.sent;
+              onChange({
+                imageIndex: imageIndex,
+                data: data
+              });
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var toggleEditMode = function toggleEditMode() {
+    setEditMode(function (prev) {
+      return !prev;
+    });
+  };
+
+  var toggleAutoSpellcheck = function toggleAutoSpellcheck() {
+    setAutoSpellcheck(function (prev) {
+      var next = !prev;
+      setSpellcheckEnabled(next);
+      return next;
+    });
+  }; // BUG SIMULATION: Only activate with ?bug=true parameter (not just localhost)
+  // This allows Storybook to test both the fix and the bug simulation
+
+
+  var isBugMode = typeof window !== 'undefined' && (window.location.search.includes('bug=true') || window.location.search.includes('bug=on')); // In bug mode: selectedGroupId is null (simulating the bug), but originalSelectedGroupId has the actual selection
+  // Use originalSelectedGroupId for filtering in read-only mode to show correct article
+  // Use selectedGroupId (null) for edit mode to reproduce the bug
+
+  var groupIdForReadOnly = isBugMode && originalSelectedGroupId != null ? originalSelectedGroupId // Use original selection for read-only filtering
+  : selectedGroupId; // Otherwise use selectedGroupId
+
+  var groupIdForEdit = selectedGroupId; // Always use selectedGroupId for edit mode (null in bug mode = bug)
+  // Filter blocks for read-only mode
+
+  var blocksForReadOnly = groupIdForReadOnly === null ? isBugMode ? blocks : [] : // In bug mode show all blocks, otherwise show empty
+  blocks.filter(function (i) {
+    var _i$data;
+
+    return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === groupIdForReadOnly;
+  }); // Filter by selected article
+  // Filter blocks for edit mode - this is where the bug manifests
+
+  var blocksForEdit = groupIdForEdit === null ? blocks.filter(function (i) {
+    var _i$data2;
+
+    return (i === null || i === void 0 ? void 0 : (_i$data2 = i.data) === null || _i$data2 === void 0 ? void 0 : _i$data2.groupId) === groupIdForEdit;
+  }) // BUG: Filter to empty array when selectedGroupId is null
+  : blocks.filter(function (i) {
+    var _i$data3;
+
+    return (i === null || i === void 0 ? void 0 : (_i$data3 = i.data) === null || _i$data3 === void 0 ? void 0 : _i$data3.groupId) === groupIdForEdit;
+  }); // Normal: filter by selected article
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "show-metadata-wrapper editor-toggle-wrapper"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    className: "switch mr-2 editor-switch"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "automatic-spellcheck",
+    type: "checkbox",
+    checked: autoSpellcheck,
+    onChange: toggleAutoSpellcheck
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "slider round"
+  })), /*#__PURE__*/React.createElement("label", {
+    className: "mr-4"
+  }, "Spellcheck")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    className: "switch mr-2 editor-switch"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "show-metadata",
+    type: "checkbox",
+    checked: editMode,
+    onChange: toggleEditMode
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "slider round"
+  })), /*#__PURE__*/React.createElement("label", null, "Edit mode"))), blocksForReadOnly.length < 1 ? /*#__PURE__*/React.createElement("div", {
+    className: "instructions"
+  }, /*#__PURE__*/React.createElement("h1", null, "Click article to display text.")) : !editMode ? /*#__PURE__*/React.createElement(ReadOnly, {
+    article: blocksToArticle(blocksForReadOnly)
+  }) : /*#__PURE__*/React.createElement(ReactEditorJS, {
+    defaultValue: {
+      blocks: blocksForEdit
+    },
+    tools: EDITOR_JS_TOOLS,
+    onChange: handleChange,
+    onInitialize: function onInitialize() {},
+    enableReInitialize: true,
+    key: selectedFrame
+  }));
+}
+
+export default Editor;

package/MainLayout/index.js

@@ -278,8 +278,10 @@ export var MainLayout = function MainLayout(_ref5) {
   var extractionEngineRegions = (((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []).filter(function (r) {
     return r.cls !== 'metadata';
   });
-  var editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor);
-  var blocks = editorBlocks.filter(function (i) {
+  var editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor); // FIX: Show all blocks when selectedGroupId is null
+  // This fixes the bug where text disappears in edit mode when selectedGroupId is null but blocks have groupId
+
+  var blocks = selectedGroupId === null ? editorBlocks : editorBlocks.filter(function (i) {
     var _i$data;
 
     return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === selectedGroupId;