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

package/DemoSite/Editor.js

@@ -105,19 +105,19 @@ var Editor = function Editor(_ref) {
       currentJSONValue = _useState8[0],
       changeCurrentJSONValue = _useState8[1];
 
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
+  return React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("div", null, React.createElement("div", {
     className: c.editBar
-  }, /*#__PURE__*/React.createElement("h3", null, "React Image Annotate"), /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("h3", null, "React Image Annotate"), React.createElement("div", {
     style: {
       flexGrow: 1
     }
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }), React.createElement("div", null, React.createElement("div", {
     style: {
       display: "inline-flex"
     }
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, React.createElement(Select, {
     className: c.select,
     value: {
       label: selectedExample,
@@ -133,27 +133,27 @@ var Editor = function Editor(_ref) {
       changeSelectedExample(selectedOption.value);
       changeCurrentJSONValue(JSON.stringify(selectedOption.value === "Custom" ? loadSavedInput() : examples[selectedOption.value](), null, "  "));
     }
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), React.createElement(Button, {
     className: "button",
     disabled: !lastOutput,
     onClick: function onClick() {
       return changeOutputOpen(true);
     }
-  }, "View Output"), /*#__PURE__*/React.createElement(Button, {
+  }, "View Output"), React.createElement(Button, {
     className: "button",
     variant: "outlined",
     disabled: Boolean(currentError),
     onClick: function onClick() {
       onOpenAnnotator(selectedExample === "Custom" ? loadSavedInput() : examples[selectedExample]);
     }
-  }, "Open Annotator"))), /*#__PURE__*/React.createElement("div", {
+  }, "Open Annotator"))), React.createElement("div", {
     className: c.contentArea,
     style: currentError ? {
       border: "2px solid #f00"
     } : {
       border: "2px solid #fff"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MonacoEditor, {
+  }, React.createElement("div", null, React.createElement(MonacoEditor, {
     value: currentJSONValue,
     language: "javascript",
     onChange: function onChange(code) {
@@ -168,23 +168,23 @@ var Editor = function Editor(_ref) {
     },
     width: "100%",
     height: "550px"
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), React.createElement("div", {
     className: c.specificationArea
-  }, /*#__PURE__*/React.createElement("h2", null, "React Image Annotate Format"), /*#__PURE__*/React.createElement(Code, {
+  }, React.createElement("h2", null, "React Image Annotate Format"), React.createElement(Code, {
     language: "javascript"
-  }, "\n{\n  taskDescription?: string, // markdown\n  regionTagList?: Array<string>,\n  regionClsList?: Array<string>,\n  imageTagList?: Array<string>,\n  imageClsList?: Array<string>,\n  // all tools are enabled by default\n  enabledTools?: Array< \"select\" | \"create-point\" | \"create-box\" | \"create-polygon\" | \"create-line\">,\n  selectedImage?: string, // initial selected image\n  images: Array<{\n    src: string,\n    thumbnailSrc?: string, // use this if you are using high-res images\n    name: string,\n    regions?: Array<{\n      id: string | number,\n      cls?: string,\n      color?: string,\n      tags?: Array<string>,\n\n      // Point\n      type: \"point\",\n      x: number, // [0-1] % of image width\n      y: number, // [0-1] % of image height\n\n      // Bounding Box\n      type: \"box\",\n      x: number, // [0-1] % of image width\n      y: number, // [0-1] % of image height\n      w: number, // [0-1] % of image width\n      h: number, // [0-1] % of image height\n\n      // Polygon\n      type: \"polygon\",\n      open?: boolean, // should last and first points be connected, default: true\n      points: Array<[number, number]> // [0-1] % of image width/height\n    }>\n  }>,\n}\n")), /*#__PURE__*/React.createElement(Dialog, {
+  }, "\n{\n  taskDescription?: string, // markdown\n  regionTagList?: Array<string>,\n  regionClsList?: Array<string>,\n  imageTagList?: Array<string>,\n  imageClsList?: Array<string>,\n  // all tools are enabled by default\n  enabledTools?: Array< \"select\" | \"create-point\" | \"create-box\" | \"create-polygon\" | \"create-line\">,\n  selectedImage?: string, // initial selected image\n  images: Array<{\n    src: string,\n    thumbnailSrc?: string, // use this if you are using high-res images\n    name: string,\n    regions?: Array<{\n      id: string | number,\n      cls?: string,\n      color?: string,\n      tags?: Array<string>,\n\n      // Point\n      type: \"point\",\n      x: number, // [0-1] % of image width\n      y: number, // [0-1] % of image height\n\n      // Bounding Box\n      type: \"box\",\n      x: number, // [0-1] % of image width\n      y: number, // [0-1] % of image height\n      w: number, // [0-1] % of image width\n      h: number, // [0-1] % of image height\n\n      // Polygon\n      type: \"polygon\",\n      open?: boolean, // should last and first points be connected, default: true\n      points: Array<[number, number]> // [0-1] % of image width/height\n    }>\n  }>,\n}\n")), React.createElement(Dialog, {
     fullScreen: true,
     open: outputDialogOpen
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, "React Image Annotate Output"), /*#__PURE__*/React.createElement(DialogContent, {
+  }, React.createElement(DialogTitle, null, "React Image Annotate Output"), React.createElement(DialogContent, {
     style: {
       minWidth: 400
     }
-  }, /*#__PURE__*/React.createElement(MonacoEditor, {
+  }, React.createElement(MonacoEditor, {
     value: JSON.stringify(lastOutput, null, "  "),
     language: "javascript",
     width: "100%",
     height: "550px"
-  })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+  })), React.createElement(DialogActions, null, React.createElement(Button, {
     onClick: function onClick() {
       return changeOutputOpen(false);
     }

package/DemoSite/ErrorBoundaryDialog.js

@@ -10,7 +10,9 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 
-var ErrorBoundaryDialog = /*#__PURE__*/function (_Component) {
+var ErrorBoundaryDialog =
+/*#__PURE__*/
+function (_Component) {
   _inherits(ErrorBoundaryDialog, _Component);
 
   function ErrorBoundaryDialog() {
@@ -44,10 +46,10 @@ var ErrorBoundaryDialog = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       if (this.state.hasError) {
-        return /*#__PURE__*/React.createElement(Dialog, {
+        return React.createElement(Dialog, {
           open: this.state.hasError,
           onClose: this.props.onClose
-        }, /*#__PURE__*/React.createElement(DialogTitle, null, "Error Loading Annotator"), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("pre", null, this.state.err)), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+        }, React.createElement(DialogTitle, null, "Error Loading Annotator"), React.createElement(DialogContent, null, React.createElement("pre", null, this.state.err)), React.createElement(DialogActions, null, React.createElement(Button, {
           onClick: this.props.onClose
         }, "Close")));
       }

package/DemoSite/index.js

@@ -20,17 +20,17 @@ export default (function () {
       lastOutput = _useState6[0],
       changeLastOutput = _useState6[1];
 
-  return /*#__PURE__*/React.createElement("div", null, annotatorOpen ? /*#__PURE__*/React.createElement(ErrorBoundaryDialog, {
+  return React.createElement("div", null, annotatorOpen ? React.createElement(ErrorBoundaryDialog, {
     onClose: function onClose() {
       changeAnnotatorOpen(false);
     }
-  }, /*#__PURE__*/React.createElement(Annotator, Object.assign({}, annotatorProps, {
+  }, React.createElement(Annotator, Object.assign({}, annotatorProps, {
     onExit: function onExit(output) {
       delete output["lastAction"];
       changeLastOutput(output);
       changeAnnotatorOpen(false);
     }
-  }))) : /*#__PURE__*/React.createElement(Editor, {
+  }))) : React.createElement(Editor, {
     lastOutput: lastOutput,
     onOpenAnnotator: function onOpenAnnotator(props) {
       changeAnnotatorProps(props);

package/Editor/annotation-plugin/annotation.js

@@ -23,7 +23,9 @@ function HTMLToWhitespaceCharacters() {
 // ================
 
 
-var Annotation = /*#__PURE__*/function () {
+var Annotation =
+/*#__PURE__*/
+function () {
   /**
    * Render plugin`s main Element and fill it with saved data
    *

package/Editor/editor.css

@@ -1,8 +1,8 @@
 .editor-toggle-wrapper {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  gap: 0.5rem; /* space between Spellcheck and Edit mode rows */
+  gap: 1rem; /* space between Spellcheck and Edit mode toggles */
 }
 
 /* Smaller toggle size only for Editor switches */
@@ -26,5 +26,3 @@
 .editor-switch input:checked + .slider:before {
   transform: translateX(18px);
 }
-
-

package/Editor/index.js

@@ -6,7 +6,9 @@ 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 '../PageSelector/page-selector.css';
+import './editor.css';
 var ReactEditorJS = createReactEditorJS();
 
 function Editor(_ref) {
@@ -21,8 +23,17 @@ function Editor(_ref) {
       editMode = _useState2[0],
       setEditMode = _useState2[1];
 
-  var handleChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(instance) {
+  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) {
@@ -57,31 +68,51 @@ 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", {
+    return React.createElement("div", {
       className: "instructions"
-    }, /*#__PURE__*/React.createElement("h1", null, "Click article to display text."));
+    }, React.createElement("h1", null, "Click article to display text."));
   }
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "show-metadata-wrapper"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "switch mr-2"
-  }, /*#__PURE__*/React.createElement("input", {
+  return React.createElement("div", null, React.createElement("div", {
+    className: "show-metadata-wrapper editor-toggle-wrapper"
+  }, React.createElement("div", null, React.createElement("label", {
+    className: "switch mr-2 editor-switch"
+  }, React.createElement("input", {
+    id: "automatic-spellcheck",
+    type: "checkbox",
+    checked: autoSpellcheck,
+    onChange: toggleAutoSpellcheck
+  }), React.createElement("span", {
+    className: "slider round"
+  })), React.createElement("label", {
+    className: "mr-4"
+  }, "Spellcheck")), React.createElement("div", null, React.createElement("label", {
+    className: "switch mr-2 editor-switch"
+  }, React.createElement("input", {
     id: "show-metadata",
     type: "checkbox",
-    value: editMode,
+    checked: editMode,
     onChange: toggleEditMode
-  }), /*#__PURE__*/React.createElement("span", {
+  }), React.createElement("span", {
     className: "slider round"
-  })), /*#__PURE__*/React.createElement("label", null, "Edit mode")), !editMode ? /*#__PURE__*/React.createElement(ReadOnly, {
+  })), React.createElement("label", null, "Edit mode"))), !editMode ? React.createElement(ReadOnly, {
     article: blocksToArticle(blocks)
-  }) : /*#__PURE__*/React.createElement(ReactEditorJS, {
+  }) : React.createElement(ReactEditorJS, {
     defaultValue: {
       blocks: blocks
     },
     tools: EDITOR_JS_TOOLS,
     onChange: handleChange,
+    onInitialize: function onInitialize() {},
     enableReInitialize: true,
     key: selectedFrame
   }));

package/Editor/index_bugdemo_15_1.js

@@ -31,8 +31,12 @@ function Editor(_ref) {
       autoSpellcheck = _useState4[0],
       setAutoSpellcheck = _useState4[1];
 
-  var handleChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(instance) {
+  var handleChange =
+  /*#__PURE__*/
+  function () {
+    var _ref2 = _asyncToGenerator(
+    /*#__PURE__*/
+    _regeneratorRuntime.mark(function _callee(instance) {
       var data;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -106,33 +110,33 @@ function Editor(_ref) {
     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", {
+  return React.createElement("div", null, React.createElement("div", {
     className: "show-metadata-wrapper editor-toggle-wrapper"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+  }, React.createElement("div", null, React.createElement("label", {
     className: "switch mr-2 editor-switch"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, React.createElement("input", {
     id: "automatic-spellcheck",
     type: "checkbox",
     checked: autoSpellcheck,
     onChange: toggleAutoSpellcheck
-  }), /*#__PURE__*/React.createElement("span", {
+  }), React.createElement("span", {
     className: "slider round"
-  })), /*#__PURE__*/React.createElement("label", {
+  })), React.createElement("label", {
     className: "mr-4"
-  }, "Spellcheck")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+  }, "Spellcheck")), React.createElement("div", null, React.createElement("label", {
     className: "switch mr-2 editor-switch"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, React.createElement("input", {
     id: "show-metadata",
     type: "checkbox",
     checked: editMode,
     onChange: toggleEditMode
-  }), /*#__PURE__*/React.createElement("span", {
+  }), React.createElement("span", {
     className: "slider round"
-  })), /*#__PURE__*/React.createElement("label", null, "Edit mode"))), blocksForReadOnly.length < 1 ? /*#__PURE__*/React.createElement("div", {
+  })), React.createElement("label", null, "Edit mode"))), blocksForReadOnly.length < 1 ? React.createElement("div", {
     className: "instructions"
-  }, /*#__PURE__*/React.createElement("h1", null, "Click article to display text.")) : !editMode ? /*#__PURE__*/React.createElement(ReadOnly, {
+  }, React.createElement("h1", null, "Click article to display text.")) : !editMode ? React.createElement(ReadOnly, {
     article: blocksToArticle(blocksForReadOnly)
-  }) : /*#__PURE__*/React.createElement(ReactEditorJS, {
+  }) : React.createElement(ReactEditorJS, {
     defaultValue: {
       blocks: blocksForEdit
     },