@searpent/react-image-annotate 2.1.1 → 2.3.0-cand

package/Editor/index.js

@@ -6,8 +6,7 @@ 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';
+import '../PageSelector/page-selector.css';
 var ReactEditorJS = createReactEditorJS();
 
 function Editor(_ref) {
@@ -22,11 +21,6 @@ function Editor(_ref) {
       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;
@@ -63,14 +57,6 @@ function Editor(_ref) {
     });
   };
 
-  var toggleAutoSpellcheck = function toggleAutoSpellcheck() {
-    setAutoSpellcheck(function (prev) {
-      var next = !prev;
-      setSpellcheckEnabled(next);
-      return next;
-    });
-  };
-
   if (blocks.length < 1) {
     return /*#__PURE__*/React.createElement("div", {
       className: "instructions"
@@ -78,28 +64,17 @@ function Editor(_ref) {
   }
 
   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"
+    className: "show-metadata-wrapper"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "switch mr-2"
   }, /*#__PURE__*/React.createElement("input", {
     id: "show-metadata",
     type: "checkbox",
-    checked: editMode,
+    value: editMode,
     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")), !editMode ? /*#__PURE__*/React.createElement(ReadOnly, {
     article: blocksToArticle(blocks)
   }) : /*#__PURE__*/React.createElement(ReactEditorJS, {
     defaultValue: {
@@ -107,7 +82,6 @@ function Editor(_ref) {
     },
     tools: EDITOR_JS_TOOLS,
     onChange: handleChange,
-    onInitialize: function onInitialize() {},
     enableReInitialize: true,
     key: selectedFrame
   }));

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;