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

Author: cnxsolutions

frontend/src/components/EditableText.jsx

@@ -1,20 +1,18 @@
 import '../styles/EditableText.css';
 import { Trash } from 'react-bootstrap-icons';
-import { createRoot } from 'react-dom/client';
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import FormattedText from './FormattedText';
 import DiscreeteDropdown from './DiscreeteDropdown';
 import PictureUploadAction from '../menu-items/PictureUploadAction';
 import {v4 as uuid} from 'uuid';
 
-function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment, setHighlightedText, setSelectedText, backend, setLastUpdate}) {
+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: '', internal: false, name: '' });
-  const containerRef = useRef(null);
+  const [deleteTarget, setDeleteTarget] = useState({ src: '', alt: '', internal: false, name: '' });
   const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]*)`);
 
   let parsePassage = (rawText) => (rubric)
@@ -30,7 +28,7 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
   let updateEditedDocument = useCallback(() => backend.getDocument(id)
     .then((x) => {
       x = x.error
-        ? {_id: uuid(), text: `{${rubric}}`, isPartOf, links}
+        ? { _id: uuid(), text: `{${rubric}}`, isPartOf, links }
         : x;
       setEditedDocument(x);
       return x;
@@ -84,38 +82,20 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
       .catch(console.error);
   };
 
-  useEffect(() => {
-    const attachTrash = () => {
-      const root = containerRef.current;
-      if (!root) return;
-      root.querySelectorAll('figure').forEach(fig => {
-        if (fig.querySelector('.trash-overlay')) return;
-        const img = fig.querySelector('img');
-        if (!img) return;
-        const trash = document.createElement('div');
-        trash.className = 'trash-overlay';
-        trash.setAttribute('data-img', img.src);
-        trash.setAttribute('tabindex', 0);
-        fig.style.position = 'relative';
-        fig.appendChild(trash);
-        createRoot(trash).render(<Trash />);
-      });
-    };
-
-    const obs = new MutationObserver(attachTrash);
-    if (containerRef.current) {
-      obs.observe(containerRef.current, { childList: true, subtree: true });
-    }
-    attachTrash();
-    return () => obs.disconnect();
-  }, [backend, id, setLastUpdate, beingEdited]);
+  const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+  let images = [];
+  let textSansImages = text || '';
+  let match;
+  while ((match = imageRegex.exec(textSansImages)) !== null) {
+    images.push({ alt: match[1], src: match[2] });
+  }
+  textSansImages = textSansImages.replace(imageRegex, '');
 
   const confirmDelete = () => {
-    const { src, internal, name } = deleteTarget;
+    const { src, alt, internal, name } = deleteTarget;
     const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const mdRx = new RegExp(`!?\\[[^\\]]*\\]\\(${esc(src)}\\)`, '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 alert('Error deleting attachment.');
@@ -139,30 +119,43 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
 
   if (!beingEdited) return (
     <div className="editable content position-relative" title="Edit content...">
-      <div className="formatted-text" onClick={e => {
-        if (!beingEdited) {
-          const trash = e.target.closest('.trash-overlay');
-          if (trash) {
-            const src = trash.getAttribute('data-img');
-            const internal = src.includes(`/${id}/`);
-            const name = internal
-              ? decodeURIComponent(src.split(`${id}/`)[1])
-              : src;
-            setDeleteTarget({ src, internal, name });
-            setShowDeleteModal(true);
-            return;
-          }
-          handleClick();
-        }
-      }}
-      ref={containerRef}
-      >
-        <FormattedText {...{setHighlightedText, setSelectedText}}>
-          {text || '&nbsp;'}
+      <div className="formatted-text" onClick={handleClick}>
+        <FormattedText {...{ setHighlightedText, setSelectedText }}>
+          {textSansImages || '\u00A0'}
         </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}}/>
+        <PictureUploadAction {...{ id, backend, handleImageUrl }} />
       </DiscreeteDropdown>
       {showDeleteModal && (
         <div className="modal fade show d-block" tabIndex="-1" role="dialog">
@@ -185,12 +178,14 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
       )}
     </div>
   );
+
   return (
     <form>
-      <textarea className="form-control" rows="5" autoFocus value={editedText} onChange={handleChange} onBlur={handleBlur} />
+      <textarea className="form-control" type="text" rows="5" autoFocus
+        value={editedText} onChange={handleChange} onBlur={handleBlur}
+      />
     </form>
   );
 }
 
 export default EditableText;
-