REFACTORING: Dropdown menus will contain more than one "action".

features/step_definitions/event.rb

@@ -49,6 +49,7 @@
 end
 
 Quand("j'essaye d'ajouter une image à une glose") do
+  click_on_contextual_menu('scholium', 1)
   attach_file("image-input", File.expand_path("./docs/architecture.png"), make_visible: true)
 end
 

features/support/env.rb

@@ -62,12 +62,16 @@ def click_on_element(class_name, text)
   find(class_name, text: text).click
 end
 
-def click_on_contextual_menu_item(item_locator, context_classes, context_order = 0)
+def click_on_contextual_menu(context_classes, context_order = 0)
   page.execute_script("
     let area = document.getElementsByClassName('#{context_classes}')[#{context_order}];
     let dropdown = area.getElementsByClassName('dropdown')[0];
     dropdown.style.visibility = 'visible';
     dropdown.getElementsByClassName('toggle')[0].dispatchEvent(new Event('click', {bubbles:true}))
   ")
+end
+
+def click_on_contextual_menu_item(item_locator, context_classes, context_order = 0)
+  click_on_contextual_menu(context_classes, context_order)
   click_on(item_locator)
 end

frontend/src/components/CommentFragmentAction.jsx

@@ -0,0 +1,18 @@
+import DiscreeteDropdown from './DiscreeteDropdown';
+
+function CommentFragmentAction({selectedText, setSelectedText, setFragment}) {
+
+  const handleClick = () => {
+    setFragment(`[${selectedText}]\n`);
+    setSelectedText();
+  };
+
+  return (
+    <DiscreeteDropdown.Item onClick={handleClick}>
+      Comment the selected text...
+    </DiscreeteDropdown.Item>
+  );
+}
+
+export default CommentFragmentAction;
+

frontend/src/components/EditableText.jsx

@@ -2,7 +2,8 @@ import '../styles/EditableText.css';
 
 import { useState, useEffect, useCallback } from 'react';
 import FormattedText from './FormattedText';
-import PassageMarginMenu from './PassageMarginMenu';
+import DiscreeteDropdown from './DiscreeteDropdown';
+import PictureUploadAction from './PictureUploadAction';
 import {v4 as uuid} from 'uuid';
 
 function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment, setHighlightedText, setSelectedText, backend, setLastUpdate}) {
@@ -93,7 +94,9 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
           {editedText || text}
         </FormattedText>
       </div>
-      <PassageMarginMenu {... {id, backend, handleImageUrl}}/>
+      <DiscreeteDropdown>
+        <PictureUploadAction {... {id, backend, handleImageUrl}}/>
+      </DiscreeteDropdown>
     </div>
   );
   return (

frontend/src/components/More.jsx → frontend/src/components/InviteEditorsAction.jsx

@@ -36,11 +36,9 @@ export default function More({metadata, backend}) {
 
   return (
     <>
-      <DiscreeteDropdown>
-        <DiscreeteDropdown.Item onClick={handleShow}>
-          Invite editors...
-        </DiscreeteDropdown.Item>
-      </DiscreeteDropdown>
+      <DiscreeteDropdown.Item onClick={handleShow}>
+        Invite editors...
+      </DiscreeteDropdown.Item>
 
       <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>

frontend/src/components/OpenedDocuments.jsx

@@ -5,7 +5,8 @@ import Metadata from './Metadata';
 import Type, { TypeBadge } from './Type';
 import Passage from './Passage';
 import License from './License';
-import More from './More';
+import DiscreeteDropdown from './DiscreeteDropdown';
+import InviteEditorsAction from './InviteEditorsAction';
 import Bookmark from './Bookmark';
 import LicenseCompatibility from './LicenseCompatibility';
 
@@ -63,7 +64,9 @@ function RunningHeadMargin({metadata, backend, setLastUpdate}) {
   return (
     <Col xs={5} className="scholium position-relative">
       <BrowseTools id={metadata._id} closable={true} />
-      <More {...{backend, metadata}} />
+      <DiscreeteDropdown>
+        <InviteEditorsAction {...{backend, metadata}} />
+      </DiscreeteDropdown>
       <Metadata editable={true} {...{backend, metadata, setLastUpdate}} />
       <Type editable={true} {...{backend, metadata}}/>
     </Col>

frontend/src/components/OpenedDocumentsBlank.jsx

@@ -5,7 +5,8 @@ import Metadata from './Metadata';
 import Type from './Type';
 import PassageBlank from './PassageBlank';
 import License from './License';
-import More from './More';
+import DiscreeteDropdown from './DiscreeteDropdown';
+import InviteEditorsAction from './InviteEditorsAction';
 
 function OpenedDocumentsBlank({ backend, lectern, sourceMetadata, setLastUpdate }) {
   if (!sourceMetadata) return;
@@ -31,9 +32,11 @@ function OpenedDocumentsBlank({ backend, lectern, sourceMetadata, setLastUpdate
 
 function RunningHeadSource({ metadata, backend }) {
   return (
-    <Col className="main">
+    <Col className="main position-relative">
       <BrowseTools id={metadata._id} />
-      <More {...{backend, metadata}} />
+      <DiscreeteDropdown>
+        <InviteEditorsAction {...{backend, metadata}} />
+      </DiscreeteDropdown>
       <Metadata editable={true} {...{ backend, metadata }} />
       <Type editable={true} {...{ backend, metadata }}/>
     </Col>

frontend/src/components/Passage.jsx

@@ -7,7 +7,8 @@ import Col from 'react-bootstrap/Col';
 import { Marker } from 'react-mark.js';
 import FormattedText from './FormattedText';
 import EditableText from '../components/EditableText';
-import PassageSourceMenu from './PassageSourceMenu';
+import DiscreeteDropdown from './DiscreeteDropdown';
+import CommentFragmentAction from './CommentFragmentAction';
 
 function Passage({source, rubric, scholia, margin, sourceId, backend, setLastUpdate}) {
   const [selectedText, setSelectedText] = useState();
@@ -50,7 +51,9 @@ function PassageSource({children, highlightedText, setHighlightedText, setFragme
           </FormattedText>
         </Marker>
       )}
-      <PassageSourceMenu {...{selectedText, setSelectedText, setFragment}}/>
+      <DiscreeteDropdown>
+        <CommentFragmentAction {...{selectedText, setSelectedText, setFragment}}/>
+      </DiscreeteDropdown>
     </Col>
   );
 }

frontend/src/components/PassageMarginMenu.jsx → frontend/src/components/PictureUploadAction.jsx

@@ -1,7 +1,8 @@
 import { useRef } from 'react';
+
 import DiscreeteDropdown from './DiscreeteDropdown';
 
-function PassageMarginMenu ({ id, backend, handleImageUrl }) {
+function PictureUploadAction ({ id, backend, handleImageUrl }) {
   const fileInputRef = useRef(null);
 
   const handleClick = () => {
@@ -17,11 +18,9 @@ function PassageMarginMenu ({ id, backend, handleImageUrl }) {
 
   return (
     <>
-      <DiscreeteDropdown>
-        <DiscreeteDropdown.Item onClick={handleClick}>
-          Add a picture...
-        </DiscreeteDropdown.Item>
-      </DiscreeteDropdown>
+      <DiscreeteDropdown.Item onClick={handleClick}>
+        Add a picture...
+      </DiscreeteDropdown.Item>
       <input
         id="image-input"
         type="file"
@@ -33,4 +32,4 @@ function PassageMarginMenu ({ id, backend, handleImageUrl }) {
   );
 }
 
-export default PassageMarginMenu;
+export default PictureUploadAction;