@searpent/react-image-annotate 2.0.55 → 2.0.56

package/Annotator/examplePhotos.js

@@ -431,7 +431,7 @@ var examplePhotos = [{
           "Y1": 0.784579,
           "Y2": 0.95930564
         },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Aliquam in lorem sit amet leo accumsan lacinia. In rutrum. Phasellus rhoncus. In convallis. Nulla non arcu lacinia neque faucibus fringilla. Integer tempor. Nullam rhoncus aliquam metus. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nullam rhoncus aliquam metus. Etiam dictum tincidunt diam. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.\"}]",
         "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
         "id": "346807503780052993"
       }, {
@@ -455,8 +455,8 @@ var examplePhotos = [{
           "Y1": 0.7462519,
           "Y2": 0.7778154
         },
-        "text": "[{\"label\":\"title\",\"text\":\"Číslo dne\"}]",
-        "groupId": "1",
+        "text": "[{\"label\":\"title\",\"text\":\"Lorem ipsum NOT dolor sit amet, consectetuer adipiscing elit.\"}]",
+        "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
         "id": "346807503993962496"
       }, {
         "label": "text",
@@ -479,7 +479,7 @@ var examplePhotos = [{
           "Y1": 0.52305263,
           "Y2": 0.61999774
         },
-        "text": "[{\"label\":\"title\",\"text\":\"Extraliga. Nová pravidla pro brankáře i vysokou hůl\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"Extraliga. Nová pravidla pro brankáře i vysokou hůl\"}]",
         "groupId": "2",
         "id": "346807504648273920"
       }, {
@@ -599,7 +599,7 @@ var examplePhotos = [{
           "Y1": 0.38327134,
           "Y2": 0.5264345
         },
-        "text": "[{\"label\":\"title\",\"text\":\"Už popáté se v Karlových Varech uskuteční Světový pohár v triatlonu. Třídenní akce s bohatým doprovodným programem vyvrcholí nedělními závody mužů a žen elitní kategorie. Vedle domácí špičky nebude chybět řada účastníků OH v Tokiu, nad plánovanou účastí dvojnásobné vítězky Venduly Frintové visí otazník. Nejlepší česká triatlonistka měla žaludeční problémy a o jejím startu se rozhodne na poslední chvíli. Vedle Frintové je přihlášena i druhá česká olympionička Petra Kuříková, jejímž karlovarským maximem je předloňské čtvrté místo. Mezi devítkou domácích závodníků je též Jan Čelůstka i nadějní Tereza Zimovjanová (na snímku) s Radimem Grebíkem. ČTK\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"Už popáté se v Karlových Varech uskuteční Světový pohár v triatlonu. Třídenní akce s bohatým doprovodným programem vyvrcholí nedělními závody mužů a žen elitní kategorie.\"}]",
         "groupId": "4",
         "id": "346807505487134721"
       }, {
@@ -611,7 +611,7 @@ var examplePhotos = [{
           "Y1": 0.38327134,
           "Y2": 0.5264345
         },
-        "text": "[{\"label\":\"text\",\"text\":\"\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"Vedle domácí špičky nebude chybět řada účastníků OH v Tokiu, nad plánovanou účastí dvojnásobné vítězky Venduly Frintové visí otazník. Nejlepší česká triatlonistka měla žaludeční problémy a o jejím startu se rozhodne na poslední chvíli. Vedle Frintové je přihlášena i druhá česká olympionička Petra Kuříková, jejímž karlovarským maximem je předloňské čtvrté místo. Mezi devítkou domácích závodníků je též Jan Čelůstka i nadějní Tereza Zimovjanová (na snímku) s Radimem Grebíkem.\"}]",
         "groupId": "4",
         "id": "346807505487134722"
       }, {
@@ -778,7 +778,7 @@ var examplePhotos = [{
     "key": "mutation",
     "value": "hřensko"
   }],
-  "lockedUntil": "2023-01-28T11:35:00.000Z"
+  "lockedUntil": null
 }, {
   "id": "431fc636-d6d1-4e20-a35b-cc7a201c1833",
   "fullsize": {
@@ -2640,7 +2640,7 @@ var examplePhotos = [{
           "Y1": 0.37425318,
           "Y2": 0.48585278
         },
-        "text": "[{\"label\":\"title\",\"text\":\"Běloruský vůdce Alexandr Lukašenko včera pohrozil Evropské unii tvrdou odplatou za úterní uvalení nových sankcí proti Minsku. Ve hře je podle něj i přerušení tranzitu ruského zemního plynu a přepravy dalšího zboží přes Bělorusko. EU se chystá postihnout Lukašenkův režim za vyostřování migrační krize na hranicích s Polskem a pobaltskými státy. „Zahříváme Evropu, ale ještě nám vyhrožují, že uzavřou hranice. A co když my jim přerušíme zemní plyn?“ řekl doslova Lukašenko. AP\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"Běloruský vůdce Alexandr Lukašenko včera pohrozil Evropské unii tvrdou odplatou za úterní uvalení nových sankcí proti Minsku. Ve hře je podle něj i přerušení tranzitu ruského zemního plynu a přepravy dalšího zboží přes Bělorusko. EU se chystá postihnout Lukašenkův režim za vyostřování migrační krize na hranicích s Polskem a pobaltskými státy. „Zahříváme Evropu, ale ještě nám vyhrožují, že uzavřou hranice. A co když my jim přerušíme zemní plyn?“ řekl doslova Lukašenko. AP\"}]",
         "groupId": "3",
         "id": "346807630221541376"
       }, {
@@ -6714,7 +6714,7 @@ var examplePhotos = [{
           "Y1": 0.043963477,
           "Y2": 0.18149026
         },
-        "text": "[{\"label\":\"title\",\"text\":\"komerční příloha čtvrtek 29. dubna 2021 Robotické sekačky na trávu - nový pohled na sekání trávy\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"komerční příloha čtvrtek 29. dubna 2021 Robotické sekačky na trávu - nový pohled na sekání trávy\"}]",
         "groupId": "0",
         "id": "346807698131517440"
       }, {

package/Editor/index.js

@@ -1,8 +1,11 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import React from 'react';
+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';
 var ReactEditorJS = createReactEditorJS();
 
 function Editor(_ref) {
@@ -10,6 +13,11 @@ function Editor(_ref) {
       onChange = _ref.onChange,
       imageIndex = _ref.imageIndex;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isReadOnly = _useState2[0],
+      setIsReadOnly = _useState2[1];
+
   var handleChange =
   /*#__PURE__*/
   function () {
@@ -44,14 +52,33 @@ function Editor(_ref) {
     };
   }();
 
-  return React.createElement(ReactEditorJS, {
+  var toggleIsReadOnly = function toggleIsReadOnly() {
+    setIsReadOnly(function (prev) {
+      return !prev;
+    });
+  };
+
+  return React.createElement("div", null, React.createElement("div", {
+    className: "show-metadata-wrapper"
+  }, React.createElement("label", {
+    className: "switch mr-2"
+  }, React.createElement("input", {
+    id: "show-metadata",
+    type: "checkbox",
+    value: isReadOnly,
+    onChange: toggleIsReadOnly
+  }), React.createElement("span", {
+    className: "slider round"
+  })), React.createElement("label", null, "Preview")), isReadOnly ? React.createElement(ReadOnly, {
+    article: blocksToArticle(blocks)
+  }) : React.createElement(ReactEditorJS, {
     defaultValue: {
       blocks: blocks
     },
     tools: EDITOR_JS_TOOLS,
     onChange: handleChange,
     enableReInitialize: true
-  });
+  }));
 }
 
 export default Editor;

package/Editor/readOnly.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function ReadOnly(_ref) {
+  var article = _ref.article;
+  return React.createElement("div", null, React.createElement("h1", null, article.title), React.createElement("h2", null, article.subtitle), React.createElement("p", null, article.text), React.createElement("p", null, article.author), React.createElement("p", null, article.about_author), React.createElement("div", null, article.appendix), React.createElement("div", null, article.photo_author), React.createElement("div", null, article.photo_caption), React.createElement("div", null, article.advertisement), React.createElement("div", null, article.other_graphics), React.createElement("div", null, article.unknown), React.createElement("div", null, article.table));
+}
+
+export default ReadOnly;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.55",
+  "version": "2.0.56",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",

package/utils/blocks-to-article.js

@@ -0,0 +1,43 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+
+function sanitizedText(text) {
+  // remove whitespaces
+  var trimmed = text.trim(); // replace dashes at the end of sentence
+
+  var noTrailingDash = trimmed.replace(/-$/, "");
+  return noTrailingDash;
+}
+
+function blocksToArticle(blocks) {
+  var renamedBlocks = blocks.map(function (b) {
+    if (b.data.labelName === 'interview') {
+      b.data.labelName = 'text';
+    }
+
+    return _objectSpread({}, b);
+  });
+  var article = renamedBlocks.reduce(function (acc, curr) {
+    var _ref = curr === null || curr === void 0 ? void 0 : curr.data,
+        labelName = _ref.labelName,
+        text = _ref.text;
+
+    if (acc[labelName] === undefined) {
+      acc[labelName] = "";
+    }
+
+    var connectingSymbol = ""; // if last symbol is dot, next sentence should start with space
+
+    if (acc[labelName].charAt(acc[labelName].length - 1) === ".") {
+      connectingSymbol = " ";
+    }
+
+    acc[labelName] = acc[labelName] + connectingSymbol + sanitizedText(text);
+    return acc;
+  }, {
+    title: "",
+    text: ""
+  });
+  return article;
+}
+
+export default blocksToArticle;

package/utils/blocks-to-article.test.js

@@ -0,0 +1,54 @@
+import blocksToArticle from "./blocks-to-article";
+var blocks = [{
+  id: "a1",
+  type: "annotation",
+  data: {
+    groupColor: "",
+    groupId: "0",
+    labelName: "text",
+    text: "First part of text."
+  }
+}, {
+  id: "a2",
+  type: "annotation",
+  data: {
+    groupColor: "",
+    groupId: "0",
+    labelName: "interview",
+    text: "First part of interview."
+  }
+}, {
+  id: "a3",
+  type: "annotation",
+  data: {
+    groupColor: "",
+    groupId: "0",
+    labelName: "title",
+    text: "Tohle je jeden kus title."
+  }
+}, {
+  id: "a4",
+  type: "annotation",
+  data: {
+    groupColor: "",
+    groupId: "0",
+    labelName: "text",
+    text: "Second part of text. Hippo-"
+  }
+}, {
+  id: "a5",
+  type: "annotation",
+  data: {
+    groupColor: "",
+    groupId: "0",
+    labelName: "text",
+    text: "potamus is a big animal."
+  }
+}];
+test('blocksToArticle', function () {
+  var article = blocksToArticle(blocks);
+  expect(article).toEqual({
+    title: "Tohle je jeden kus title.",
+    text: "First part of text. First part of interview. Second part of text. Hippopotamus is a big animal."
+  });
+});

package/utils/saveable-actions-enum.js

@@ -1,3 +1,3 @@
-var reacalcActionsEnum = ["MOUSE_UP_RESIZE_BOX", "DELETE_REGION", "DELETE_GROUP", "MOUSE_UP_MOVE_REGION"];
-var saveableActionsEnum = [reacalcActionsEnum, "SELECT_CLASSIFICATION", "CHANGE_REGION", "UPDATE_REGIONS", "UPDATE_METADATA", "UPDATE_ALBUM_METADATA"];
+var reacalcActionsEnum = ["MOUSE_UP_RESIZE_BOX", "DELETE_REGION", "DELETE_GROUP", "MOUSE_UP_MOVE_REGION", "SELECT_CLASSIFICATION", "CHANGE_REGION"];
+var saveableActionsEnum = [reacalcActionsEnum, "UPDATE_REGIONS", "UPDATE_METADATA", "UPDATE_ALBUM_METADATA"];
 export { saveableActionsEnum, reacalcActionsEnum };