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

Co-authored-by: Nasschml <nassim.chemlal@utt.fr>

Author: IlanPin

frontend/src/components/EditableText.jsx

@@ -5,11 +5,14 @@ import FormattedText from './FormattedText';
 import DiscreeteDropdown from './DiscreeteDropdown';
 import PictureUploadAction from '../menu-items/PictureUploadAction';
 import {v4 as uuid} from 'uuid';
+import ImagesWithDelete from './ImageDisplay';
 
 function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment, setHighlightedText, setSelectedText, backend, setLastUpdate}) {
   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,85 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
       .catch(console.error);
   };
 
+  const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+  let images = [];
+  let textWithoutInternalImages = text || '';
+  let match;
+
+  while ((match = imageRegex.exec(text || '')) !== null) {
+    const alt = match[1];
+    const src = match[2];
+    const isInternal = src.includes(`/${id}/`);
+    if (isInternal) {
+      images.push({ alt, src });
+      const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const mdRx = new RegExp(`!\\[${esc(alt)}\\]\\(${esc(src)}\\)`, 'g');
+      textWithoutInternalImages = textWithoutInternalImages.replace(mdRx, '');
+    }
+  }
+  textWithoutInternalImages = textWithoutInternalImages.replace(/\n{2,}/g, '\n\n').trim();
+
+  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, name, res => {
+        if (!res.ok) return;
+        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;'}
+          {textWithoutInternalImages || '&nbsp;'}
         </FormattedText>
+        <ImagesWithDelete
+          id={id}
+          images={images}
+          setDeleteTarget={setDeleteTarget}
+          setShowDeleteModal={setShowDeleteModal}
+        />
       </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/components/ImageDisplay.jsx

@@ -0,0 +1,40 @@
+import { Trash } from 'react-bootstrap-icons';
+
+function ImagesWithDelete({ id, images, setDeleteTarget, setShowDeleteModal }) {
+  return (
+    <>
+      {images.map(({ src, alt }) => (
+        <figure
+          key={src + alt}
+          className="has-trash-overlay"
+          style={{ position: 'relative', display: 'inline-block' }}
+        >
+          <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>
+      ))}
+    </>
+  );
+}
+
+export default ImagesWithDelete;

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;
+}