FEATURE: Delete a picture from a document (closes #187).

Co-authored-by: Nasschml <[email protected]>

Author: IlanPin

frontend/src/components/EditableText.jsx

@@ -1,4 +1,5 @@
 import '../styles/EditableText.css';
+import { Trash } from 'react-bootstrap-icons';
 
 import { useState, useEffect, useCallback } from 'react';
 import FormattedText from './FormattedText';
@@ -10,6 +11,8 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
   const [beingEdited, setBeingEdited] = useState(false);
   const [editedDocument, setEditedDocument] = useState();
   const [editedText, setEditedText] = useState();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState({ src: '', alt: '', internal: false, name: '' });
   const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]*)`);
 
   let parsePassage = (rawText) => (rubric)
@@ -79,16 +82,99 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
       .catch(console.error);
   };
 
+  const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+  let images = [];
+  let cleanedimage = text || '';
+  let match;
+  while ((match = imageRegex.exec(cleanedimage)) !== null) {
+    images.push({ alt: match[1], src: match[2] });
+  }
+  cleanedimage = cleanedimage.replace(imageRegex, '');
+
+  const confirmDelete = () => {
+    const { src, alt, internal, name } = deleteTarget;
+    const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const mdRx = new RegExp(`!\\[${esc(alt)}\\]\\(${esc(src)}\\)`, 'g');
+    const clean = t => (t || '').replace(mdRx, '').replace(/\n{2,}/g, '\n\n').trim();
+    if (internal) {
+      backend.deleteAttachment(id => {
+        backend.getDocument(id).then(doc => {
+          const cleaned = clean(doc.text);
+          backend.putDocument({ ...doc, text: cleaned }).then(r => {
+            setEditedText(cleaned);
+            setEditedDocument({ ...doc, text: cleaned, _rev: r.rev });
+            setLastUpdate(r.rev);
+            setShowDeleteModal(false);
+          });
+        });
+      });
+    } else {
+      const cleaned = clean(editedText);
+      setEditedText(cleaned);
+      setEditedDocument(p => ({ ...p, text: cleaned }));
+      setShowDeleteModal(false);
+    }
+  };
+
   if (!beingEdited) return (
     <div className="editable content position-relative" title="Edit content...">
       <div className="formatted-text" onClick={handleClick}>
         <FormattedText {...{setHighlightedText, setSelectedText}}>
-          {text || '&nbsp;'}
+          {(images.length > 0 ? cleanedimage : text) || '&nbsp;'}
         </FormattedText>
+        {images.map(({ src, alt }) => (
+          <figure
+            key={src + alt}
+            className="has-trash-overlay"
+            style={{ position: 'relative', display: 'inline-block', margin: 0 }}
+          >
+            <img
+              src={src}
+              alt={alt}
+              className="img-fluid rounded editable-image"
+            />
+            <button
+              className="trash-overlay"
+              type="button"
+              aria-label={`Delete image ${alt || src}`}
+              title={`Delete image ${alt || src}`}
+              onClick={e => {
+                e.stopPropagation();
+                const internal = src.includes(`/${id}/`);
+                const name = internal
+                  ? decodeURIComponent(src.split(`${id}/`)[1])
+                  : src;
+                setDeleteTarget({ src, alt, internal, name });
+                setShowDeleteModal(true);
+              }}
+            >
+              <Trash />
+            </button>
+          </figure>
+        ))}
       </div>
       <DiscreeteDropdown>
         <PictureUploadAction {... {id, backend, handleImageUrl}}/>
       </DiscreeteDropdown>
+      {showDeleteModal && (
+        <div className="modal fade show d-block" tabIndex="-1" role="dialog">
+          <div className="modal-dialog" role="document">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Confirm deletion</h5>
+                <button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)} />
+              </div>
+              <div className="modal-body">
+                <p>Delete image {deleteTarget.internal ? `"${deleteTarget.name}"` : 'external'}?</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setShowDeleteModal(false)}>Cancel</button>
+                <button type="button" className="btn btn-danger" onClick={confirmDelete}>Delete</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
   return (

frontend/src/hyperglosae.js

@@ -70,6 +70,17 @@ function Hyperglosae(logger) {
       };
     });
 
+  this.deleteAttachment = (id, attachmentName, callback) =>
+    this.getDocumentMetadata(id).then(headRes => {
+      fetch(`${service}/${id}/${encodeURIComponent(attachmentName)}`, {
+        method: 'DELETE',
+        headers: {
+          'If-Match': headRes.headers.get('ETag'),
+          'Accept': 'application/json'
+        }
+      }).then(response => callback(response));
+    });
+
   this.getSession = () =>
     fetch(`${service}/_session`)
       .then(x => x.json())

frontend/src/styles/EditableText.css

@@ -12,4 +12,34 @@
   border-color: black;
 }
 
+.trash-overlay {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background-color: rgba(0, 0, 0, 0.6);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+}
+
+figure.has-trash-overlay:hover .trash-overlay {
+  opacity: 1;
+}
 
+.trash-overlay .bi-trash {
+  font-size: 22px;
+  color: white;
+  display: block;
+}
+
+
+figure:hover .trash-overlay,
+.trash-overlay:focus {
+  opacity: 1;
+}