@searpent/react-image-annotate 2.1.1 → 2.1.2

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;