FEATURE: Upload a picture into a document (see #153).

Co-Authored-By: Martin Gandon <105852593+nitram35@users.noreply.github.com>

Author: raphaelweis

frontend/src/components/EditableText.js

@@ -10,9 +10,9 @@ import { v4 as uuid } from 'uuid';
 function EditableText({ id, text, rubric, isPartOf, links, fragment, setFragment, setHighlightedText, backend, setLastUpdate }) {
   const [beingEdited, setBeingEdited] = useState(false);
   const [editedDocument, setEditedDocument] = useState();
-  const [editedText, setEditedText] = useState();
-  const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]*)`);
-  const FIRST_PASSAGE = new RegExp('\\{[^}]+} ?([^{]*)');
+  const [editedText, setEditedText] = useState(text);
+  const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]+)`);
+  const FIRST_PASSAGE = new RegExp('\\{[^}]+} ?([^{]+)');
 
   let parsePassage = (rawText) => rubric ? rawText.match(PASSAGE)[1] : rawText;
 
@@ -47,12 +47,20 @@ function EditableText({ id, text, rubric, isPartOf, links, fragment, setFragment
     updateEditedDocument()
       .then((x) => {
         setEditedText(parsePassage(x.text));
+      })
+      .catch(() => {
+        setEditedDocument({
+          _id: uuid(),
+          text: `{${rubric}} ${text}`,
+          isPartOf,
+          links
+        });
       });
   };
 
   let handleImageUrl = (imageTag) => {
     backend.getDocument(id).then((editedDocument) => {
-      let parsedText = parsePassage(editedDocument.text) + imageTag;
+      let parsedText = parseFirstPassage(editedText) + imageTag;
       let text = (rubric)
         ? editedDocument.text.replace(PASSAGE, `{${rubric}} ${parsedText}`)
         : parsedText;

frontend/src/components/PassageMarginMenu.js

@@ -1,5 +1,3 @@
-import '../styles/PassageMarginMenu.css';
-
 import { Dropdown } from 'react-bootstrap';
 import { forwardRef, useRef } from 'react';
 import { ThreeDotsVertical } from 'react-bootstrap-icons';
@@ -14,7 +12,7 @@ function PassageMarginMenu({ id, backend, handleImageUrl }) {
   const handleFileChange = (event) => {
     const file = event.target.files[0];
     if (file) backend.putAttachment(id, file, (response) => {
-      handleImageUrl(`![<IMAGE DESCRIPTION>](${response.url})`);
+      handleImageUrl(`![${file.name}](${response.url})`);
     });
   };
 
@@ -37,7 +35,7 @@ function PassageMarginMenu({ id, backend, handleImageUrl }) {
   );
 }
 
-const BlockMenuButton = forwardRef(({ children, onClick }, ref) => (
+const BlockMenuButton = React.forwardRef(({ children, onClick }, ref) => (
   <ThreeDotsVertical
     onClick={(e) => {
       e.preventDefault();

frontend/src/hyperglosae.js

@@ -42,13 +42,14 @@ function Hyperglosae(logger) {
         return x;
       });
 
-  this.getDocumentMetadata = (id) =>
-    fetch(`${service}/${id}`, {
+  this.getDocumentMetadata = (id) => {
+    return fetch(`${service}/${id}`, {
       method: 'HEAD',
       headers: basicAuthentication({ force: false })
     });
+  };
 
-  this.putAttachment = (id, attachment, callback) =>
+  this.putAttachment = (id, attachment, callback) => {
     this.getDocumentMetadata(id).then(x => {
       const reader = new FileReader();
       reader.readAsArrayBuffer(attachment);
@@ -67,9 +68,10 @@ function Hyperglosae(logger) {
         }).then(response => callback(response));
       };
     });
+  };
 
-  this.authenticate = ({name, password}) => {
-    this.credentials = {name, password};
+  this.authenticate = ({ name, password }) => {
+    this.credentials = { name, password };
     return fetch(`${service}`, {
       method: 'GET',
       headers: basicAuthentication({ force: true })

frontend/src/styles/EditableText.css

@@ -1,4 +1,4 @@
-.content {
+.editable {
   display: flex;
 }