@searpent/react-image-annotate 2.0.59 → 2.0.61

package/Annotator/examplePhotos.js

@@ -599,7 +599,7 @@ var examplePhotos = [{
           "Y1": 0.38327134,
           "Y2": 0.5264345
         },
-        "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.\"}]",
+        "text": "[{\"label\":\"text\",\"text\":\"\\tUž popáté se \\n\\nv 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"
       }, {

package/Editor/annotation-plugin/annotation.css

@@ -51,4 +51,44 @@ button.MuiButtonBase-root {
 
 button.MuiButtonBase-root.expanded {
   opacity: 1 !important;
+}
+
+.ro-title {}
+
+.ro-subtitle {}
+
+.ro-text {}
+
+.ro-author {
+  font-style: italic;
+}
+
+.ro-about-author {
+  font-style: italic;
+}
+
+.ro-appendix {}
+
+.ro-photo-author {}
+
+.ro-photo-caption {}
+
+.ro-advertisment {}
+
+.ro-other-graphics {}
+
+.ro-unknown {}
+
+.ro-table {}
+
+.instructions {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.instructions h1 {
+  color: #707684;
 }

package/Editor/annotation-plugin/annotation.js

@@ -5,8 +5,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
  * Build styles
  */
 import './annotation.css';
-
-function whitespaceCharactersToHTML() {
+export function whitespaceCharactersToHTML() {
   var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return str // new line whitespace
   .replaceAll(/[ ]\n[ ]/gm, '&nbsp;<br>&nbsp;') // space both sides adds &nbsp;

package/Editor/index.js

@@ -9,14 +9,15 @@ import ReadOnly from './readOnly';
 var ReactEditorJS = createReactEditorJS();
 
 function Editor(_ref) {
-  var blocks = _ref.blocks,
+  var _ref$blocks = _ref.blocks,
+      blocks = _ref$blocks === void 0 ? [] : _ref$blocks,
       onChange = _ref.onChange,
       imageIndex = _ref.imageIndex;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      isReadOnly = _useState2[0],
-      setIsReadOnly = _useState2[1];
+      editMode = _useState2[0],
+      setEditMode = _useState2[1];
 
   var handleChange =
   /*#__PURE__*/
@@ -52,12 +53,18 @@ function Editor(_ref) {
     };
   }();
 
-  var toggleIsReadOnly = function toggleIsReadOnly() {
-    setIsReadOnly(function (prev) {
+  var toggleEditMode = function toggleEditMode() {
+    setEditMode(function (prev) {
       return !prev;
     });
   };
 
+  if (blocks.length < 1) {
+    return React.createElement("div", {
+      className: "instructions"
+    }, React.createElement("h1", null, "Click article to display text."));
+  }
+
   return React.createElement("div", null, React.createElement("div", {
     className: "show-metadata-wrapper"
   }, React.createElement("label", {
@@ -65,11 +72,11 @@ function Editor(_ref) {
   }, React.createElement("input", {
     id: "show-metadata",
     type: "checkbox",
-    value: isReadOnly,
-    onChange: toggleIsReadOnly
+    value: editMode,
+    onChange: toggleEditMode
   }), React.createElement("span", {
     className: "slider round"
-  })), React.createElement("label", null, "Preview")), isReadOnly ? React.createElement(ReadOnly, {
+  })), React.createElement("label", null, "Edit mode")), !editMode ? React.createElement(ReadOnly, {
     article: blocksToArticle(blocks)
   }) : React.createElement(ReactEditorJS, {
     defaultValue: {

package/Editor/readOnly.js

@@ -2,7 +2,67 @@ 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));
+  return React.createElement("div", null, React.createElement("h1", {
+    className: "ro-title",
+    dangerouslySetInnerHTML: {
+      __html: article.title
+    }
+  }), React.createElement("h2", {
+    className: "ro-subtitle",
+    dangerouslySetInnerHTML: {
+      __html: article.subtitle
+    }
+  }), React.createElement("p", {
+    className: "ro-text",
+    dangerouslySetInnerHTML: {
+      __html: article.text
+    }
+  }), React.createElement("p", {
+    className: "ro-author",
+    dangerouslySetInnerHTML: {
+      __html: article.author
+    }
+  }), React.createElement("p", {
+    className: "ro-about-author",
+    dangerouslySetInnerHTML: {
+      __html: article.about_author
+    }
+  }), React.createElement("p", {
+    className: "ro-appendix",
+    dangerouslySetInnerHTML: {
+      __html: article.appendix
+    }
+  }), React.createElement("p", {
+    className: "ro-photo-author",
+    dangerouslySetInnerHTML: {
+      __html: article.photo_author
+    }
+  }), React.createElement("p", {
+    className: "ro-photo-caption",
+    dangerouslySetInnerHTML: {
+      __html: article.photo_caption
+    }
+  }), React.createElement("p", {
+    className: "ro-advertisment",
+    dangerouslySetInnerHTML: {
+      __html: article.advertisement
+    }
+  }), React.createElement("p", {
+    className: "ro-other-graphics",
+    dangerouslySetInnerHTML: {
+      __html: article.other_graphics
+    }
+  }), React.createElement("p", {
+    className: "ro-unknown",
+    dangerouslySetInnerHTML: {
+      __html: article.unknown
+    }
+  }), React.createElement("p", {
+    className: "ro-table",
+    dangerouslySetInnerHTML: {
+      __html: article.table
+    }
+  }));
 }
 
 export default ReadOnly;

package/package.json

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

package/utils/blocks-to-article.js

@@ -1,8 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import { whitespaceCharactersToHTML } from '../Editor/annotation-plugin/annotation';
 
 function sanitizedText(text) {
-  // remove whitespaces
-  var trimmed = text.trim(); // replace dashes at the end of sentence
+  var escapedWhitespaces = whitespaceCharactersToHTML(text); // remove whitespaces
+
+  var trimmed = escapedWhitespaces.trim(); // replace dashes at the end of sentence
 
   var noTrailingDash = trimmed.replace(/-$/, "");
   return noTrailingDash;
@@ -10,13 +12,13 @@ function sanitizedText(text) {
 
 function blocksToArticle(blocks) {
   var renamedBlocks = blocks.map(function (b) {
-    var newBlock = _objectSpread({}, b);
-
-    if (newBlock.data.labelName === 'interview') {
-      newBlock.data.labelName = 'text';
-    }
+    var newBlock = _objectSpread({}, b, {
+      data: _objectSpread({}, b.data, {
+        labelName: b.data.labelName === 'interview' ? 'text' : b.data.labelName
+      })
+    });
 
-    return _objectSpread({}, newBlock);
+    return newBlock;
   });
   var article = renamedBlocks.reduce(function (acc, curr) {
     var _ref = curr === null || curr === void 0 ? void 0 : curr.data,