@searpent/react-image-annotate 2.1.2 → 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,39 +57,24 @@ 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"
+    }, /*#__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", {
-    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"))), blocks.length < 1 ? /*#__PURE__*/React.createElement("div", {
-    className: "instructions"
-  }, /*#__PURE__*/React.createElement("h1", null, "Click article to display text.")) : !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: {
@@ -103,7 +82,6 @@ function Editor(_ref) {
     },
     tools: EDITOR_JS_TOOLS,
     onChange: handleChange,
-    onInitialize: function onInitialize() {},
     enableReInitialize: true,
     key: selectedFrame
   }));

package/Editor/readOnly.js

@@ -1,469 +1,121 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import React, { useEffect, useRef, useState } from 'react';
-import { highlightMisspellingsInHtml } from '../utils/spellcheck-nspell';
+import React from 'react';
 
 function ReadOnly(_ref) {
   var article = _ref.article;
-  var containerRef = useRef(null); // Warm up dictionary on component mount
-
-  useEffect(function () {
-    var run = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var combinedHtml;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                combinedHtml = [article.title, article.subtitle, article.text, article.author, article.about_author, article.appendix, article.photo_author, article.photo_caption, article.advertisement, article.other_graphics, article.unknown, article.table, article.section, article.continuation_ref, article.cover_clip, article.page_id, article.continuation_mark, article.follow_up_mark, article.article_termination_mark, article.page_splitting_stripe, article.column_id_stripe, article.prev_page_reference, article.section_subcategory].filter(Boolean).join(' '); // warm up dictionary once with auto-detection
-
-                _context.next = 3;
-                return highlightMisspellingsInHtml(combinedHtml, 'auto');
-
-              case 3:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function run() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-
-    run();
-  }, [article]);
-
-  var _useState = useState(article.title),
-      _useState2 = _slicedToArray(_useState, 2),
-      titleHTML = _useState2[0],
-      setTitleHTML = _useState2[1];
-
-  var _useState3 = useState(article.subtitle),
-      _useState4 = _slicedToArray(_useState3, 2),
-      subtitleHTML = _useState4[0],
-      setSubtitleHTML = _useState4[1];
-
-  var _useState5 = useState(article.text),
-      _useState6 = _slicedToArray(_useState5, 2),
-      textHTML = _useState6[0],
-      setTextHTML = _useState6[1];
-
-  var _useState7 = useState(article.author),
-      _useState8 = _slicedToArray(_useState7, 2),
-      authorHTML = _useState8[0],
-      setAuthorHTML = _useState8[1];
-
-  var _useState9 = useState(article.about_author),
-      _useState10 = _slicedToArray(_useState9, 2),
-      aboutHTML = _useState10[0],
-      setAboutHTML = _useState10[1];
-
-  var _useState11 = useState(article.appendix),
-      _useState12 = _slicedToArray(_useState11, 2),
-      appendixHTML = _useState12[0],
-      setAppendixHTML = _useState12[1];
-
-  var _useState13 = useState(article.photo_author),
-      _useState14 = _slicedToArray(_useState13, 2),
-      photoAuthorHTML = _useState14[0],
-      setPhotoAuthorHTML = _useState14[1];
-
-  var _useState15 = useState(article.photo_caption),
-      _useState16 = _slicedToArray(_useState15, 2),
-      photoCaptionHTML = _useState16[0],
-      setPhotoCaptionHTML = _useState16[1];
-
-  var _useState17 = useState(article.advertisement),
-      _useState18 = _slicedToArray(_useState17, 2),
-      adHTML = _useState18[0],
-      setAdHTML = _useState18[1];
-
-  var _useState19 = useState(article.other_graphics),
-      _useState20 = _slicedToArray(_useState19, 2),
-      otherGraphicsHTML = _useState20[0],
-      setOtherGraphicsHTML = _useState20[1];
-
-  var _useState21 = useState(article.unknown),
-      _useState22 = _slicedToArray(_useState21, 2),
-      unknownHTML = _useState22[0],
-      setUnknownHTML = _useState22[1];
-
-  var _useState23 = useState(article.table),
-      _useState24 = _slicedToArray(_useState23, 2),
-      tableHTML = _useState24[0],
-      setTableHTML = _useState24[1];
-
-  var _useState25 = useState(article.section),
-      _useState26 = _slicedToArray(_useState25, 2),
-      sectionHTML = _useState26[0],
-      setSectionHTML = _useState26[1];
-
-  var _useState27 = useState(article.continuation_ref),
-      _useState28 = _slicedToArray(_useState27, 2),
-      continuationRefHTML = _useState28[0],
-      setContinuationRefHTML = _useState28[1];
-
-  var _useState29 = useState(article.cover_clip),
-      _useState30 = _slicedToArray(_useState29, 2),
-      coverClipHTML = _useState30[0],
-      setCoverClipHTML = _useState30[1];
-
-  var _useState31 = useState(article.page_id),
-      _useState32 = _slicedToArray(_useState31, 2),
-      pageIdHTML = _useState32[0],
-      setPageIdHTML = _useState32[1];
-
-  var _useState33 = useState(article.continuation_mark),
-      _useState34 = _slicedToArray(_useState33, 2),
-      continuationMarkHTML = _useState34[0],
-      setContinuationMarkHTML = _useState34[1];
-
-  var _useState35 = useState(article.follow_up_mark),
-      _useState36 = _slicedToArray(_useState35, 2),
-      followUpMarkHTML = _useState36[0],
-      setFollowUpMarkHTML = _useState36[1];
-
-  var _useState37 = useState(article.article_termination_mark),
-      _useState38 = _slicedToArray(_useState37, 2),
-      articleTerminationMarkHTML = _useState38[0],
-      setArticleTerminationMarkHTML = _useState38[1];
-
-  var _useState39 = useState(article.page_splitting_stripe),
-      _useState40 = _slicedToArray(_useState39, 2),
-      pageSplittingStripeHTML = _useState40[0],
-      setPageSplittingStripeHTML = _useState40[1];
-
-  var _useState41 = useState(article.column_id_stripe),
-      _useState42 = _slicedToArray(_useState41, 2),
-      columnIdStripeHTML = _useState42[0],
-      setColumnIdStripeHTML = _useState42[1];
-
-  var _useState43 = useState(article.prev_page_reference),
-      _useState44 = _slicedToArray(_useState43, 2),
-      prevPageReferenceHTML = _useState44[0],
-      setPrevPageReferenceHTML = _useState44[1];
-
-  var _useState45 = useState(article.section_subcategory),
-      _useState46 = _slicedToArray(_useState45, 2),
-      sectionSubcategoryHTML = _useState46[0],
-      setSectionSubcategoryHTML = _useState46[1];
-
-  useEffect(function () {
-    var cancelled = false;
-
-    var apply = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var h1, h2, t, a, ab, ap, pa, pc, adv, og, unk, tbl, sec, contRef, coverClip, pageId, contMark, followUp, articleTerm, pageStripe, columnStripe, prevPageRef, sectionSubcat;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.prev = 0;
-                _context2.next = 3;
-                return highlightMisspellingsInHtml(article.title || '', 'auto');
-
-              case 3:
-                h1 = _context2.sent;
-                _context2.next = 6;
-                return highlightMisspellingsInHtml(article.subtitle || '', 'auto');
-
-              case 6:
-                h2 = _context2.sent;
-                _context2.next = 9;
-                return highlightMisspellingsInHtml(article.text || '', 'auto');
-
-              case 9:
-                t = _context2.sent;
-                _context2.next = 12;
-                return highlightMisspellingsInHtml(article.author || '', 'auto');
-
-              case 12:
-                a = _context2.sent;
-                _context2.next = 15;
-                return highlightMisspellingsInHtml(article.about_author || '', 'auto');
-
-              case 15:
-                ab = _context2.sent;
-                _context2.next = 18;
-                return highlightMisspellingsInHtml(article.appendix || '', 'auto');
-
-              case 18:
-                ap = _context2.sent;
-                _context2.next = 21;
-                return highlightMisspellingsInHtml(article.photo_author || '', 'auto');
-
-              case 21:
-                pa = _context2.sent;
-                _context2.next = 24;
-                return highlightMisspellingsInHtml(article.photo_caption || '', 'auto');
-
-              case 24:
-                pc = _context2.sent;
-                _context2.next = 27;
-                return highlightMisspellingsInHtml(article.advertisement || '', 'auto');
-
-              case 27:
-                adv = _context2.sent;
-                _context2.next = 30;
-                return highlightMisspellingsInHtml(article.other_graphics || '', 'auto');
-
-              case 30:
-                og = _context2.sent;
-                _context2.next = 33;
-                return highlightMisspellingsInHtml(article.unknown || '', 'auto');
-
-              case 33:
-                unk = _context2.sent;
-                _context2.next = 36;
-                return highlightMisspellingsInHtml(article.table || '', 'auto');
-
-              case 36:
-                tbl = _context2.sent;
-                _context2.next = 39;
-                return highlightMisspellingsInHtml(article.section || '', 'auto');
-
-              case 39:
-                sec = _context2.sent;
-                _context2.next = 42;
-                return highlightMisspellingsInHtml(article.continuation_ref || '', 'auto');
-
-              case 42:
-                contRef = _context2.sent;
-                _context2.next = 45;
-                return highlightMisspellingsInHtml(article.cover_clip || '', 'auto');
-
-              case 45:
-                coverClip = _context2.sent;
-                _context2.next = 48;
-                return highlightMisspellingsInHtml(article.page_id || '', 'auto');
-
-              case 48:
-                pageId = _context2.sent;
-                _context2.next = 51;
-                return highlightMisspellingsInHtml(article.continuation_mark || '', 'auto');
-
-              case 51:
-                contMark = _context2.sent;
-                _context2.next = 54;
-                return highlightMisspellingsInHtml(article.follow_up_mark || '', 'auto');
-
-              case 54:
-                followUp = _context2.sent;
-                _context2.next = 57;
-                return highlightMisspellingsInHtml(article.article_termination_mark || '', 'auto');
-
-              case 57:
-                articleTerm = _context2.sent;
-                _context2.next = 60;
-                return highlightMisspellingsInHtml(article.page_splitting_stripe || '', 'auto');
-
-              case 60:
-                pageStripe = _context2.sent;
-                _context2.next = 63;
-                return highlightMisspellingsInHtml(article.column_id_stripe || '', 'auto');
-
-              case 63:
-                columnStripe = _context2.sent;
-                _context2.next = 66;
-                return highlightMisspellingsInHtml(article.prev_page_reference || '', 'auto');
-
-              case 66:
-                prevPageRef = _context2.sent;
-                _context2.next = 69;
-                return highlightMisspellingsInHtml(article.section_subcategory || '', 'auto');
-
-              case 69:
-                sectionSubcat = _context2.sent;
-
-                if (!cancelled) {
-                  _context2.next = 72;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 72:
-                setTitleHTML(h1);
-                setSubtitleHTML(h2);
-                setTextHTML(t);
-                setAuthorHTML(a);
-                setAboutHTML(ab);
-                setAppendixHTML(ap);
-                setPhotoAuthorHTML(pa);
-                setPhotoCaptionHTML(pc);
-                setAdHTML(adv);
-                setOtherGraphicsHTML(og);
-                setUnknownHTML(unk);
-                setTableHTML(tbl);
-                setSectionHTML(sec);
-                setContinuationRefHTML(contRef);
-                setCoverClipHTML(coverClip);
-                setPageIdHTML(pageId);
-                setContinuationMarkHTML(contMark);
-                setFollowUpMarkHTML(followUp);
-                setArticleTerminationMarkHTML(articleTerm);
-                setPageSplittingStripeHTML(pageStripe);
-                setColumnIdStripeHTML(columnStripe);
-                setPrevPageReferenceHTML(prevPageRef);
-                setSectionSubcategoryHTML(sectionSubcat);
-                _context2.next = 100;
-                break;
-
-              case 97:
-                _context2.prev = 97;
-                _context2.t0 = _context2["catch"](0);
-
-                if (!cancelled) {
-                  console.warn('Spellcheck error:', _context2.t0);
-                }
-
-              case 100:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, null, [[0, 97]]);
-      }));
-
-      return function apply() {
-        return _ref3.apply(this, arguments);
-      };
-    }();
-
-    apply();
-    return function () {
-      cancelled = true;
-    };
-  }, [article]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    contentEditable: false,
-    suppressContentEditableWarning: true,
-    spellCheck: false,
-    lang: "en-US",
-    style: {
-      outline: 'none',
-      userSelect: 'text',
-      minHeight: '100px'
-    }
-  }, /*#__PURE__*/React.createElement("style", null, ".spell-error { text-decoration: wavy underline red; text-decoration-skip-ink: auto; }"), /*#__PURE__*/React.createElement("h1", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
     className: "ro-title",
     dangerouslySetInnerHTML: {
-      __html: titleHTML
+      __html: article.title
     }
   }), /*#__PURE__*/React.createElement("h2", {
     className: "ro-subtitle",
     dangerouslySetInnerHTML: {
-      __html: subtitleHTML
+      __html: article.subtitle
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-text",
     dangerouslySetInnerHTML: {
-      __html: textHTML
+      __html: article.text
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-author",
     dangerouslySetInnerHTML: {
-      __html: authorHTML
+      __html: article.author
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-about-author",
     dangerouslySetInnerHTML: {
-      __html: aboutHTML
+      __html: article.about_author
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-appendix",
     dangerouslySetInnerHTML: {
-      __html: appendixHTML
+      __html: article.appendix
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-photo-author",
     dangerouslySetInnerHTML: {
-      __html: photoAuthorHTML
+      __html: article.photo_author
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-photo-caption",
     dangerouslySetInnerHTML: {
-      __html: photoCaptionHTML
+      __html: article.photo_caption
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-advertisment",
     dangerouslySetInnerHTML: {
-      __html: adHTML
+      __html: article.advertisement
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-other-graphics",
     dangerouslySetInnerHTML: {
-      __html: otherGraphicsHTML
+      __html: article.other_graphics
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-unknown",
     dangerouslySetInnerHTML: {
-      __html: unknownHTML
+      __html: article.unknown
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-table",
     dangerouslySetInnerHTML: {
-      __html: tableHTML
+      __html: article.table
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-section",
     dangerouslySetInnerHTML: {
-      __html: sectionHTML
+      __html: article.section
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-continuation_ref",
     dangerouslySetInnerHTML: {
-      __html: continuationRefHTML
+      __html: article.continuation_ref
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-cover_clip",
     dangerouslySetInnerHTML: {
-      __html: coverClipHTML
+      __html: article.cover_clip
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-page_id",
     dangerouslySetInnerHTML: {
-      __html: pageIdHTML
+      __html: article.page_id
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-continuation_mark",
     dangerouslySetInnerHTML: {
-      __html: continuationMarkHTML
+      __html: article.continuation_mark
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-follow_up_mark",
     dangerouslySetInnerHTML: {
-      __html: followUpMarkHTML
+      __html: article.follow_up_mark
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-article_termination_mark",
     dangerouslySetInnerHTML: {
-      __html: articleTerminationMarkHTML
+      __html: article.article_termination_mark
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-page_splitting_stripe",
     dangerouslySetInnerHTML: {
-      __html: pageSplittingStripeHTML
+      __html: article.page_splitting_stripe
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-column_id_stripe",
     dangerouslySetInnerHTML: {
-      __html: columnIdStripeHTML
+      __html: article.column_id_stripe
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-prev_page_reference",
     dangerouslySetInnerHTML: {
-      __html: prevPageReferenceHTML
+      __html: article.prev_page_reference
     }
   }), /*#__PURE__*/React.createElement("p", {
     className: "ro-section_subcategory",
     dangerouslySetInnerHTML: {
-      __html: sectionSubcategoryHTML
+      __html: article.section_subcategory
     }
   }));
 }

package/MainLayout/index.js

@@ -278,10 +278,8 @@ 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); // 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 editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor);
+  var blocks = 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.1.2",
+  "version": "2.3.0-cand",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -8,7 +8,7 @@
     "@emotion/styled": "^11.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.1.3",
     "@mui/icons-material": "^5.2.1",
     "@mui/material": "^5.2.3",
     "@mui/styles": "^5.2.3",
@@ -20,7 +20,6 @@
     "material-survey": "^2.1.0",
     "mmgc1-cpp": "^1.0.50",
     "moment": "^2.23.0",
-    "nspell": "^2.1.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-editor-js": "^2.0.6",
@@ -48,6 +47,10 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
+  "engines": {
+    "node": ">=14.0.0 <18.0.0",
+    "yarn": ">=1.22.0"
+  },
   "homepage": "/react-image-annotate",
   "repository": {
     "type": "git",
@@ -60,7 +63,7 @@
     "storybook": "start-storybook -p 9090 -s public",
     "build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
     "dist": "npm run build && cd dist && npm publish",
-    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/editor.css dist/Editor/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
+    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Locker/locker.css dist/Locker/ && cp src/Errorer/errorer.css dist/Errorer/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
     "build-storybook": "build-storybook",
     "build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
     "gh-pages": "npm run build:gh-pages && gh-pages -d build",